diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a15546..e4b0cce 100644 --- a/CHANGELOG.md +++ b/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: diff --git a/manifest.json b/manifest.json index eecbf07..2163ac0 100644 --- a/manifest.json +++ b/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" } diff --git a/react/components/LogoutCustomerSession.tsx b/react/components/LogoutCustomerSession.tsx index ea44413..946f6d7 100644 --- a/react/components/LogoutCustomerSession.tsx +++ b/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) => {
{client.phone}
+ {!!customerClass &&
+
CustomerClass
+
{customerClass}
+
}