Feature/adding-CustomerClass-field

fixed infinite loop issue

made the suggested code changes

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added:
+
+- `CustomerClass` field to the impersonating box
+
 ## [2.10.3] - 2021-12-09
 
 ### Added:

manifest.json

@@ -24,7 +24,8 @@
     "vtex.react-portal": "0.x",
     "vtex.store-icons": "0.x",
     "vtex.device-detector": "0.x",
-    "vtex.css-handles": "0.x"
+    "vtex.css-handles": "0.x",
+    "vtex.order-manager": "0.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/components/LogoutCustomerSession.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames'
-import React, { ReactNode, useCallback, useMemo } from 'react'
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { useCssHandles } from 'vtex.css-handles'
 import { Link } from 'vtex.render-runtime'
 import { IconAssistantSales, IconProfile } from 'vtex.store-icons'
@@ -8,6 +8,7 @@ import { Button } from 'vtex.styleguide'
 import Popover from './Popover'
 
 import { FormattedMessage } from 'react-intl'
+import { useOrderForm } from 'vtex.order-manager/OrderForm'
 
 const CSS_HANDLES = [
   'logoutHeader',
@@ -29,6 +30,9 @@ const CSS_HANDLES = [
   'phoneField',
   'phoneValue',
   'logoutButtonsContainer',
+  'customerClassContainer',
+  'customerClassField',
+  'customerClassValue',
 ] as const
 interface Props {
   /** Signed in client */
@@ -49,6 +53,26 @@ interface Props {
 const LogoutCustomerSession = (props: Props) => {
   const { client, loading, onDepersonify, attendantEmail, mobile } = props
   const handles = useCssHandles(CSS_HANDLES)
+  const { orderForm } = useOrderForm();
+
+  const { id } = orderForm;
+
+  const [customerClass, setCustomerClass] = useState("");
+
+  useEffect(()=> {
+    function getCustomerClass() {
+      var requestOptions = {
+        method: 'GET'
+      }
+      return fetch(`/api/checkout/pub/orderForm/${id}`, requestOptions)
+    }
+
+    getCustomerClass().then(response => response.json()).then(data => {
+      if(!!data.clientProfileData && !!data.clientProfileData.customerClass) {
+        setCustomerClass(data.clientProfileData.customerClass);
+      }
+    })
+  }, [])
 
   const getClientName = (client: any) =>
     !!client
@@ -116,6 +140,10 @@ const LogoutCustomerSession = (props: Props) => {
                 </div>
                 <div className={`${handles.phoneValue} pb5 pl2 c-muted-1`}>{client.phone}</div>
               </div>
+              {!!customerClass && <div className={`${handles.customerClassContainer} w-100 flex flex-wrap t-small`}>
+                <div className={`${handles.customerClassField} tl pb5 pr2`}>CustomerClass</div>
+                <div className={`${handles.customerClassValue} pb5 pl2 c-muted-1`}>{customerClass}</div>
+              </div>}
             </div>
             <div className={`${handles.logoutButtonsContainer} flex justify-around mt5`}>
               <Link page="store.account">