Merge pull request beightone#1 from beightone/SEL-2669

feature: adding dataDog logger into checkout

.eslintrc

@@ -2,11 +2,6 @@
   "extends": "vtex",
   "root": true,
   "env": {
-    "node": true,
-    "es6": true,
-    "jest": true
-  },
-  "rules": {
-    "react/prefer-stateless-function": false
+    "node": true
   }
-}
+}

.prettierrc

@@ -1,7 +1 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "jsxBracketSameLine": true,
-  "eslintIntegration": true
-}
+"@vtex/prettier-config"

manifest.json

@@ -1,8 +1,8 @@
 {
-  "name": "checkout-button-example",
-  "vendor": "vtex",
+  "name": "checkout-customizations",
+  "vendor": "carapreta",
   "version": "0.0.3",
-  "title": "Checkout Button Example",
+  "title": "Checkout Customizations",
   "description": "Checkout Button Example",
   "credentialType": "absolute",
   "dependencies": {

package.json

@@ -1,7 +1,36 @@
 {
+  "name": "checkout-customizations",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "lint": "eslint --ext js,jsx,ts,tsx .",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,js,tsx,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,graphql,gql}": [
+      "prettier --write"
+    ]
+  },
   "devDependencies": {
     "@types/jquery": "^3.3.38",
     "@types/node": "^12.12.21",
-    "@types/react": "^16.9.38"
+    "@types/react": "^16.9.38",
+    "@vtex/prettier-config": "^0.1.4",
+    "eslint": "^7.12.1",
+    "eslint-config-vtex": "^12.3.2",
+    "eslint-config-vtex-react": "^6.3.2",
+    "husky": "^4.2.3",
+    "lint-staged": "^10.1.1",
+    "prettier": "^2.0.2",
+    "typescript": "^3.8.3"
   }
 }

react/.eslintrc

@@ -1,11 +1,3 @@
 {
-  "extends": "vtex-react/io",
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest": true
-  },
-  "rules": {
-    "react/prefer-stateless-function": false
-  }
-}
+  "extends": "vtex-react/io"
+}

react/index.tsx

@@ -1,14 +1,10 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 
-import CustomButton from './components/CustomButton'
+import { Logger } from './utils/loggerDataDog'
 
-class CheckoutButtonExample extends Component<{}, CheckoutButtonExampleState> {
-  /**
-   * This component is the one that is referenced in the extension point. To use it
-   * as an example, we add an event listener, which updates the state every time the
-   * order form changes. This order form is then passed to its children so as to render
-   * a table with the items.
-   */
+const logger = new Logger()
+
+class CheckoutCheckingInformations extends Component<{}, CheckoutCheckingInformationsState> {
   constructor(props: any) {
     super(props)
     this.state = {
@@ -18,6 +14,9 @@ class CheckoutButtonExample extends Component<{}, CheckoutButtonExampleState> {
 
   setOrderForm = (_: any, orderForm: OrderForm) => {
     this.setState({ orderForm })
+    const postalCode = orderForm.shippingData.address.postalCode
+    console.log(postalCode, orderForm)
+    logger.info(`CHECKOUT_DATA_INFORMATION ${postalCode}`, JSON.stringify(orderForm))
   }
 
   componentDidMount() {
@@ -27,18 +26,13 @@ class CheckoutButtonExample extends Component<{}, CheckoutButtonExampleState> {
   componentWillUnmount() {
     $(window).off('orderFormUpdated.vtex', this.setOrderForm)
   }
-
   render() {
-    console.log(window.vtex.i18n.getLocale())
-
-    return <CustomButton {...this.state.orderForm!} />
+    return null
   }
 }
 
-interface CheckoutButtonExampleProps {}
-
-interface CheckoutButtonExampleState {
+interface CheckoutCheckingInformationsState {
   orderForm: OrderForm | null
 }
 
-export default CheckoutButtonExample
+export default CheckoutCheckingInformations

react/package.json

@@ -8,14 +8,15 @@
     "@vtex/styleguide": "^9.96.6"
   },
   "devDependencies": {
-    "@types/jquery": "^3.3.38",
     "@types/graphql": "^0.13.3",
+    "@types/jquery": "^3.3.38",
     "@types/node": "^9.4.7",
     "@types/prop-types": "^15.5.2",
     "@types/react": "^16.3.16",
     "@types/react-dom": "^16.0.5",
     "@types/react-helmet": "^5.0.5",
     "@types/react-intl": "^2.3.5",
+    "carapreta.checkout-customizations": "https://sel2669--carapreta.myvtex.com/_v/private/typings/linked/v1/carapreta.checkout-customizations@0.0.3+build1723475448/public/@types/carapreta.checkout-customizations",
     "eslint": "^6.4.0",
     "eslint-config-vtex": "^11.0.0",
     "eslint-config-vtex-react": "^5.0.1",
@@ -25,6 +26,9 @@
     "react-apollo": "^2.0.4",
     "react-dom": "^16.2.0",
     "react-intl": "^2.4.0",
-    "typescript": "3.9.7"
+    "typescript": "3.9.7",
+    "vtex.checkout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout@0.6.0/public/_types/react",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@7.45.0/public/@types/vtex.render-runtime",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide"
   }
 }

react/tsconfig.json

@@ -1,11 +1,17 @@
 {
   "compilerOptions": {
-    "types": ["node", "jquery"],
+    "types": [
+      "node",
+      "jquery"
+    ],
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "jsx": "react",
-    "lib": ["es2017", "dom"],
-    "module": "es6",
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "module": "esnext",
     "moduleResolution": "node",
     "sourceMap": true,
     "target": "es2017",
@@ -22,4 +28,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}

react/typings/global.d.ts

@@ -42,11 +42,16 @@ interface OrderForm {
   id: string
   items: OrderFormItem[]
   marketingData: MarketingData
+  shippingData: ShippingData
   totalizers: Totalizer[]
   value: number
   messages: OrderFormMessages
 }
-
+interface ShippingData {
+  address: {
+    postalCode: string
+  }
+}
 interface MarketingData {
   coupon: string
 }

react/utils/loggerDataDog.tsx

@@ -0,0 +1,45 @@
+export class Logger {
+    private sendLog(logBody: any) {
+        fetch('https://beightone.myvtex.com/_v0.0/api/send-log ', {
+            method: 'POST',
+            body: JSON.stringify({ ...this.coreLog(), ...logBody }),
+        })
+    }
+
+    private coreLog() {
+        //@ts-ignore
+        const { NODE_ENV } = window.vtex.renderRuntime.query.origin
+        // const { NODE_ENV, VTEX_APP_ID, VTEX_APP_VERSION } = process.env
+
+        const logBody = {
+            traceId: '',
+            source: 'vtex',
+            env: NODE_ENV,
+            version: '0.5.7' ?? '',
+            index: 'integration',
+            hostname: window.location.hostname,
+            service: 'carapreta.checkout-customizations',
+            operationId: 'string',
+            account: 'string',
+            message: 'NO_MESSAGE',
+            content: 'NO_CONTENT',
+            status: 'info',
+        }
+
+        console.info('INITIAL_LOG', logBody)
+
+        return logBody
+    }
+
+    public info(title: string, content: any, traceId?: string) {
+        this.sendLog({ message: title, content, status: 'info', traceId })
+    }
+
+    public warn(title: string, content: any, traceId?: string) {
+        this.sendLog({ message: title, content, status: 'warn', traceId })
+    }
+
+    public error(title: string, content: any, traceId?: string) {
+        this.sendLog({ message: title, content, status: 'error', traceId })
+    }
+}

react/yarn.lock

@@ -500,6 +500,10 @@ caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001061:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz#00e471931eaefbeef54f46aa2203914d3c165669"
   integrity sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==
 
+"carapreta.checkout-customizations@https://sel2669--carapreta.myvtex.com/_v/private/typings/linked/v1/carapreta.checkout-customizations@0.0.3+build1723475448/public/@types/carapreta.checkout-customizations":
+  version "0.0.3"
+  resolved "https://sel2669--carapreta.myvtex.com/_v/private/typings/linked/v1/carapreta.checkout-customizations@0.0.3+build1723475448/public/@types/carapreta.checkout-customizations#03af359a5625628c358febd30f92299ecac83f94"
+
 case-sensitive-paths-webpack-plugin@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
@@ -2573,6 +2577,18 @@ vtex-tachyons@^3.2.0:
   resolved "https://registry.yarnpkg.com/vtex-tachyons/-/vtex-tachyons-3.2.0.tgz#81cf3491fea110e50ca91c318c02c714b6d0ae62"
   integrity sha512-RUK2HX/Z2+GTrFHcA3+gfl1Tib33WL49i6pnUZhE6/imHmiUBMfWQL7qQbYDhI9Pws57KFgdF+qSnla3Jjg6Fw==
 
+"vtex.checkout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout@0.6.0/public/_types/react":
+  version "0.0.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout@0.6.0/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
+
+"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@7.45.0/public/@types/vtex.render-runtime":
+  version "7.45.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@7.45.0/public/@types/vtex.render-runtime#d9c9c4bbe8efe698a6b6566cc22e9dd7687a2442"
+
+"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide":
+  version "9.146.9"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide#d1601fedfb665c6173334753171717da64e670bc"
+
 warning@^4.0.0, warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"