Change behaviour to work with orderForm instead of full impersonating

vtex-apps · Jul 17, 2024 · 7e40cab · 7e40cab
1 parent 776da4b
commit 7e40cab
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 38 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "telemarketing",
-  "version": "2.12.1",
+  "version": "2.12.1-beta.1",
   "title": "VTEX Telemarketing",
   "defaultLocale": "pt-BR",
   "description": "The VTEX telemarketing app",
@@ -24,6 +24,7 @@
     "vtex.react-portal": "0.x",
     "vtex.store-icons": "0.x",
     "vtex.device-detector": "0.x",
+    "vtex.order-manager": "0.x",
     "vtex.css-handles": "0.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"

diff --git a/react/components/LogoutCustomerSession.tsx b/react/components/LogoutCustomerSession.tsx
@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { ReactNode, useCallback, useMemo } from 'react'
 import { useCssHandles } from 'vtex.css-handles'
-import { Link } from 'vtex.render-runtime'
+// import { Link } from 'vtex.render-runtime'
 import { IconAssistantSales, IconProfile } from 'vtex.store-icons'
 import { Button } from 'vtex.styleguide'
 
@@ -117,12 +117,12 @@ const LogoutCustomerSession = (props: Props) => {
                 <div className={`${handles.phoneValue} pb5 pl2 c-muted-1`}>{client.phone}</div>
               </div>
             </div>
-            <div className={`${handles.logoutButtonsContainer} flex justify-around mt5`}>
-              <Link page="store.account">
+            <div className={`${handles.logoutButtonsContainer} mt5`}>
+              {/* <Link page="store.account">
                 <Button size="regular">
                   <FormattedMessage id="store/telemarketing-logout.button-orders" />
                 </Button>
-              </Link>
+              </Link> */}
               <Button
                 size="regular"
                 onClick={() => onDepersonify()}

diff --git a/react/components/TelemarketingContainer.tsx b/react/components/TelemarketingContainer.tsx
@@ -1,31 +1,30 @@
-import { compose, path } from 'ramda'
+import { compose } from 'ramda'
 import React, { FC, useState } from 'react'
 import { graphql } from 'react-apollo'
-import { withSession } from 'vtex.render-runtime'
 import sessionQuery from 'vtex.store-resources/QuerySession'
-
-import depersonifyMutation from '../mutations/depersonify.gql'
-import impersonateMutation from '../mutations/impersonate.gql'
-import isMyVtex from '../utils/isMyVtex'
 import processSession from '../utils/processSession'
+import { withSession } from 'vtex.render-runtime'
+import isMyVtex from '../utils/isMyVtex'
 import Telemarketing from './Telemarketing'
+import axios from 'axios'
+import { OrderForm } from 'vtex.order-manager'
+
+const { useOrderForm } = OrderForm
 
 interface Props {
   /** Query with the session */
   session?: Session
-  /** Mutation to depersonify */
-  depersonify: () => Promise<void>
-  /** Mutation to impersonate a customer */
-  impersonate: (s: {}) => Promise<void>
 }
 
-const TelemarketingContainer: FC<Props> = ({ depersonify, impersonate, session }) => {
+const TelemarketingContainer: FC<Props> = ({session}) => {
   const [emailInput, setEmailInput] = useState<string>('')
   const [loadingImpersonate, setloadingImpersonate] = useState<boolean>(false)
 
+  const { orderForm, setOrderForm, loading } = useOrderForm()
+
   const processedSession = processSession(session)
 
-  if (!session || !processedSession || !processedSession.canImpersonate) {
+  if (!processedSession?.canImpersonate || loading) {
     return null
   }
 
@@ -35,31 +34,65 @@ const TelemarketingContainer: FC<Props> = ({ depersonify, impersonate, session }
 
   const handleDepersonify = () => {
     setloadingImpersonate(true)
-    depersonify()
-      .then(response => {
-        const depersonifyData = path(['data', 'depersonify'], response)
-        !!depersonifyData && session.refetch()
-        window.location.reload()
+
+    axios.get('/api/checkout/pub/orderForm')
+      .then(async res => {
+        const { orderFormId } = res?.data
+
+        await axios.get(`/checkout/changeToAnonymousUser/${orderFormId}`)
+          .then(res => {
+            console.log('changeToAnonymousUser', {res})
+            setOrderForm({...orderForm, clientProfileData: null})
+          })
+      })
+      .finally(() => {
+        setloadingImpersonate(false)
       })
-      .catch(() => setloadingImpersonate(false))
   }
 
   const handleImpersonate = (email: string) => {
     setloadingImpersonate(true)
-    const variables = { email }
-    impersonate({ variables })
-      .then(response => {
-        const profile = path(
-          ['data', 'impersonate', 'impersonate', 'profile'],
-          response
-        )
-        !!profile && session.refetch()
-        window.location.reload()
+
+    console.log('handleImpersonate', email)
+
+    axios.get('/api/checkout/pub/orderForm')
+      .then(async res => {
+        const { orderFormId } = res?.data
+
+        await axios.post(`/api/checkout/pub/orderForm/${orderFormId}/attachments/clientProfileData`, 
+          {
+          email
+          })
+          .then(async () => {
+
+            await axios.post(`/api/checkout/pub/orderForm/${orderFormId}/attachments/shippingData`,
+              {
+                selectedAddresses: []
+              }
+            ).then(res => {
+              console.log('shippingData', {res})
+              setOrderForm(res.data)
+            })
+
+          })
+      })
+      .finally(() => {
+        setloadingImpersonate(false)
       })
-      .catch(() => setloadingImpersonate(false))
   }
 
-  const { client, attendantEmail } = processedSession
+  const { attendantEmail } = processedSession
+
+  let client: Client | undefined = undefined
+
+  if (orderForm?.clientProfileData?.email && attendantEmail !== orderForm.clientProfileData.email) {
+    client = {
+      document: orderForm.clientProfileData.document,
+      phone: orderForm.clientProfileData.phone,
+      name: `${orderForm.clientProfileData.firstName} ${orderForm.clientProfileData.lastName}`,
+      email: orderForm.clientProfileData.email
+    }
+  }
 
   return (
     <Telemarketing
@@ -85,8 +118,6 @@ const options = {
 const EnhancedTelemarketing = withSession({ loading: React.Fragment })(
   compose(
     graphql(sessionQuery, options),
-    graphql(depersonifyMutation, { name: 'depersonify' }),
-    graphql(impersonateMutation, { name: 'impersonate' }),
   )(TelemarketingContainer as any)
 )
 

diff --git a/react/package.json b/react/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "apollo-client": "^2.4.7",
+    "axios": "^1.7.2",
     "classnames": "^2.2.6",
     "debounce": "^1.2.0",
     "graphql": "^14.0.2",
@@ -34,7 +35,8 @@
     "prettier": "^1.17.1",
     "tslint": "^5.11.0",
     "tslint-config-vtex": "^2.0.0",
-    "tslint-eslint-rules": "^5.4.0"
+    "tslint-eslint-rules": "^5.4.0",
+    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager"
   },
   "version": "2.12.1"
 }
diff --git a/react/yarn.lock b/react/yarn.lock
@@ -1389,6 +1389,15 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
+  integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-jest@^24.4.0, babel-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
@@ -1636,7 +1645,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -2130,6 +2139,11 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -2140,6 +2154,15 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -3867,6 +3890,11 @@ prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.24, psl@^1.1.28:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.3.0.tgz#e1ebf6a3b5564fa8376f3da2275da76d875ca1bd"
@@ -4865,6 +4893,10 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+"vtex.order-manager@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager":
+  version "0.9.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager#95626778e7cff8c8e70f0a3b09348937043f6d21"
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"

diff --git a/yarn.lock b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
		# yarn lockfile v1