fix: optimize and fix bugs

bigcommerce · Nov 6, 2024 · ccd2b54 · ccd2b54
1 parent 77b184d
commit ccd2b54
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 106 deletions.
diff --git a/apps/storefront/src/pages/QuoteDetail/index.tsx b/apps/storefront/src/pages/QuoteDetail/index.tsx
@@ -25,6 +25,7 @@ import {
   useAppSelector,
 } from '@/store';
 import { Currency } from '@/types';
+import { QuoteExtraFieldsData } from '@/types/quotes';
 import { snackbar } from '@/utils';
 import { getVariantInfoOOSAndPurchase } from '@/utils/b3Product/b3Product';
 import { conversionProductsList } from '@/utils/b3Product/shared/config';
@@ -40,6 +41,7 @@ import QuoteInfo from '../quote/components/QuoteInfo';
 import QuoteNote from '../quote/components/QuoteNote';
 import QuoteTermsAndConditions from '../quote/components/QuoteTermsAndConditions';
 import { ProductInfoProps } from '../quote/shared/config';
+import getB2BQuoteExtraFields from '../quote/utils/getQuoteExtraFields';
 import { handleQuoteCheckout } from '../quote/utils/quoteCheckout';
 
 function QuoteDetail() {
@@ -237,6 +239,26 @@ function QuoteDetail() {
     return undefined;
   };
 
+  const getQuoteExtraFields = async (currentExtraFields: QuoteExtraFieldsData[]) => {
+    const extraFieldsInfo = await getB2BQuoteExtraFields();
+    const quoteCurrentExtraFields: QuoteExtraFieldsData[] = [];
+    if (extraFieldsInfo.length) {
+      extraFieldsInfo.forEach((item) => {
+        const extraField = item;
+        const currentExtraField = currentExtraFields.find(
+          (field: QuoteExtraFieldsData) => field.fieldName === extraField.name,
+        );
+
+        quoteCurrentExtraFields.push({
+          fieldName: extraField.name || '',
+          fieldValue: currentExtraField?.fieldValue || extraField.default,
+        });
+      });
+    }
+
+    return quoteCurrentExtraFields;
+  };
+
   const getQuoteDetail = async () => {
     setIsRequestLoading(true);
     setIsShowFooter(false);
@@ -254,8 +276,12 @@ function QuoteDetail() {
 
       const { quote } = await fn(data);
       const productsWithMoreInfo = await handleGetProductsById(quote.productsList);
+      const quoteExtraFieldInfos = await getQuoteExtraFields(quote.extraFields);
 
-      setQuoteDetail(quote);
+      setQuoteDetail({
+        ...quote,
+        extraFields: quoteExtraFieldInfos,
+      });
       setQuoteSummary({
         originalSubtotal: quote.subtotal,
         discount: quote.discount,

diff --git a/apps/storefront/src/pages/QuoteDraft/index.tsx b/apps/storefront/src/pages/QuoteDraft/index.tsx
@@ -34,8 +34,8 @@ import { AddressItemType, BCAddressItemType } from '@/types/address';
 import {
   BillingAddress,
   ContactInfoKeys,
-  FormattedItemsProps,
   QuoteExtraFields,
+  QuoteFormattedItemsProps,
   ShippingAddress,
 } from '@/types/quotes';
 import { B3LStorage, channelId, snackbar, storeHash } from '@/utils';
@@ -167,7 +167,7 @@ function QuoteDraft({ setOpenPage }: PageProps) {
   const [quoteSubmissionResponseOpen, setQuoteSubmissionResponseOpen] = useState<boolean>(false);
   const [quoteId, setQuoteId] = useState<string | number>('');
   const [currentCreatedAt, setCurrentCreatedAt] = useState<string | number>('');
-  const [extraFields, setExtraFields] = useState<FormattedItemsProps[]>([]);
+  const [extraFields, setExtraFields] = useState<QuoteFormattedItemsProps[]>([]);
 
   const quoteSummaryRef = useRef<QuoteSummaryRef | null>(null);
 
@@ -347,7 +347,7 @@ function QuoteDraft({ setOpenPage }: PageProps) {
       const extraFieldsInfo = extraFields.map((field) => ({
         id: +field.id,
         fieldName: field.name,
-        value: contactInfo[field.name],
+        value: field.name ? contactInfo[field.name] : '',
       }));
       saveInfo.extraFields = extraFieldsInfo;
     }
@@ -546,38 +546,38 @@ function QuoteDraft({ setOpenPage }: PageProps) {
 
         const fileList = getFileList(quoteinfo?.fileInfo || []);
 
-      const data = {
-        message: newNote,
-        legalTerms: '',
-        totalAmount: enteredInclusiveTax
-          ? allPrice.toFixed(currency.decimal_places)
-          : (allPrice + allTaxPrice).toFixed(currency.decimal_places),
-        grandTotal: allPrice.toFixed(currency.decimal_places),
-        subtotal: allPrice.toFixed(currency.decimal_places),
-        companyId: isB2BUser ? companyB2BId || salesRepCompanyId : '',
-        storeHash,
-        quoteTitle,
-        discount: '0.00',
-        channelId,
-        userEmail: customer.emailAddress,
-        shippingAddress,
-        billingAddress,
-        contactInfo,
-        productList,
-        fileList,
-        taxTotal: allTaxPrice.toFixed(currency.decimal_places),
-        currency: {
-          currencyExchangeRate: currency.currency_exchange_rate,
-          token: currency.token,
-          location: currency.token_location,
-          decimalToken: currency.decimal_token,
-          decimalPlaces: currency.decimal_places,
-          thousandsToken: currency.thousands_token,
-          currencyCode: currency.currency_code,
-        },
-        referenceNumber: `${info.referenceNumber}` || '',
-        extraFields: info.extraFields || [],
-      };
+        const data = {
+          message: newNote,
+          legalTerms: '',
+          totalAmount: enteredInclusiveTax
+            ? allPrice.toFixed(currency.decimal_places)
+            : (allPrice + allTaxPrice).toFixed(currency.decimal_places),
+          grandTotal: allPrice.toFixed(currency.decimal_places),
+          subtotal: allPrice.toFixed(currency.decimal_places),
+          companyId: isB2BUser ? companyB2BId || salesRepCompanyId : '',
+          storeHash,
+          quoteTitle,
+          discount: '0.00',
+          channelId,
+          userEmail: customer.emailAddress,
+          shippingAddress,
+          billingAddress,
+          contactInfo,
+          productList,
+          fileList,
+          taxTotal: allTaxPrice.toFixed(currency.decimal_places),
+          currency: {
+            currencyExchangeRate: currency.currency_exchange_rate,
+            token: currency.token,
+            location: currency.token_location,
+            decimalToken: currency.decimal_token,
+            decimalPlaces: currency.decimal_places,
+            thousandsToken: currency.thousands_token,
+            currencyCode: currency.currency_code,
+          },
+          referenceNumber: `${info.referenceNumber}` || '',
+          extraFields: info.extraFields || [],
+        };
 
         const fn = +role === 99 ? createBCQuote : createQuote;
 

diff --git a/apps/storefront/src/pages/quote/components/ContactInfo.tsx b/apps/storefront/src/pages/quote/components/ContactInfo.tsx
@@ -10,15 +10,15 @@ import { validateQuoteExtraFields } from '@/shared/service/b2b';
 import { isValidUserTypeSelector, useAppSelector } from '@/store';
 import {
   ContactInfo as ContactInfoType,
-  FormattedItemsProps,
   QuoteExtraFields,
+  QuoteFormattedItemsProps,
 } from '@/types/quotes';
 import { validatorRules } from '@/utils';
 
 export interface GetQuoteInfoProps {
   isMobile: boolean;
   b3Lang: LangFormatFunction;
-  quoteExtraFields: FormattedItemsProps[];
+  quoteExtraFields: QuoteFormattedItemsProps[];
   referenceNumber: string | undefined;
 }
 
@@ -102,7 +102,7 @@ const getQuoteInfo = ({
 
 interface ContactInfoProps {
   info: ContactInfoType;
-  quoteExtraFields: FormattedItemsProps[];
+  quoteExtraFields: QuoteFormattedItemsProps[];
   emailAddress?: string;
   referenceNumber?: string | undefined;
   extraFieldsDefault: QuoteExtraFields[];
@@ -138,7 +138,7 @@ function ContactInfo(
 
     if (extraFieldsDefault.length) {
       extraFieldsDefault.forEach((item) => {
-        setValue(item.fieldName, item.value);
+        if (item.fieldName) setValue(item.fieldName, item.value);
       });
     }
     // Disable eslint exhaustive-deps rule for setValue dispatcher
@@ -163,7 +163,7 @@ function ContactInfo(
     const extraFields = quoteExtraFields.map((field) => {
       const extraField = {
         fieldName: field.name,
-        fieldValue: values[field.name],
+        fieldValue: field.name ? values[field.name] : '',
       };
 
       return extraField;
@@ -180,7 +180,7 @@ function ContactInfo(
 
       if (messageArr.length >= 2) {
         const field = quoteExtraFields?.find((field) => field.name === messageArr[0]);
-        if (field) {
+        if (field && field.name) {
           setError(field.name, {
             type: 'manual',
             message: messageArr[1],

diff --git a/apps/storefront/src/pages/quote/utils/getQuoteExtraFields.ts b/apps/storefront/src/pages/quote/utils/getQuoteExtraFields.ts
@@ -1,73 +1,61 @@
 import { getQuoteExtraFieldsConfig } from '@/shared/service/b2b';
-import { B2bExtraFieldsProps, FieldsOptionProps, FormattedItemsProps } from '@/types/quotes';
+import { QuoteExtraFieldsOrigin, QuoteFormattedItemsProps } from '@/types/quotes';
 import b2bLogger from '@/utils/b3Logger';
 
-const FIELD_TYPE = {
-  0: 'text',
-  1: 'multiline',
-  2: 'number',
-  3: 'dropdown',
-};
-
-const handleConversionExtraItemFormat = (quoteExtraFields: B2bExtraFieldsProps[]) => {
-  const formattedQuoteExtraFields: FormattedItemsProps[] = quoteExtraFields.map(
-    (item: B2bExtraFieldsProps) => {
-      const { listOfValue } = item;
-      const type = FIELD_TYPE[item.fieldType];
+const handleConversionExtraItemFormat = (quoteExtraFields: QuoteExtraFieldsOrigin[]) => {
+  const formattedQuoteExtraFields = quoteExtraFields.map((item) => {
+    const { listOfValue } = item;
 
-      const currentItems: FormattedItemsProps = {
-        isExtraFields: true,
-        name: item.fieldName,
-        label: item.labelName,
-        required: item.isRequired,
-        default: item.defaultValue || '',
-        fieldType: type,
-        xs: 6,
-        variant: 'filled',
-        size: 'small',
-        id: item.id,
-      };
+    const currentItems: QuoteFormattedItemsProps = {
+      isExtraFields: true,
+      name: item.fieldName || '',
+      label: item.labelName || '',
+      required: item.isRequired,
+      default: item.defaultValue || '',
+      fieldType: item.fieldCategory || '',
+      xs: 6,
+      variant: 'filled',
+      size: 'small',
+      id: item.id,
+    };
 
-      switch (type) {
-        case 'dropdown':
-          if (listOfValue) {
-            const options: FieldsOptionProps[] = listOfValue?.map((option: string) => ({
-              label: option,
-              value: option,
-            }));
+    switch (item.fieldCategory) {
+      case 'dropdown':
+        if (listOfValue) {
+          const options = listOfValue?.map((option) => ({
+            label: option,
+            value: option,
+          }));
 
-            if (options.length > 0) {
-              currentItems.options = options;
-            }
+          if (options.length > 0) {
+            currentItems.options = options;
           }
+        }
 
-          break;
-        case 'number':
-          currentItems.max = item.maximumValue || '';
-          break;
-        case 'multiline':
-          currentItems.rows = item.numberOfRows || '';
-          break;
-        default:
-          currentItems.maxLength = item.maximumLength || '';
-          break;
-      }
+        break;
+      case 'number':
+        currentItems.max = item.maximumValue || '';
+        break;
+      case 'multiline':
+        currentItems.rows = item.numberOfRows || '';
+        break;
+      default:
+        currentItems.maxLength = item.maximumLength || '';
+        break;
+    }
 
-      return currentItems;
-    },
-  );
+    return currentItems;
+  });
 
   return formattedQuoteExtraFields;
 };
 
 const getB2BQuoteExtraFields = async () => {
-  let quoteExtraFieldsList: FormattedItemsProps[] = [];
+  let quoteExtraFieldsList: QuoteFormattedItemsProps[] = [];
   try {
     const { quoteExtraFieldsConfig } = await getQuoteExtraFieldsConfig();
 
-    const visibleFields = quoteExtraFieldsConfig.filter(
-      (item: B2bExtraFieldsProps) => item.visibleToEnduser,
-    );
+    const visibleFields = quoteExtraFieldsConfig.filter((item) => item.visibleToEnduser);
 
     const formattedQuoteExtraFields = handleConversionExtraItemFormat(visibleFields);
 

diff --git a/apps/storefront/src/shared/service/b2b/graphql/quote.ts b/apps/storefront/src/shared/service/b2b/graphql/quote.ts
@@ -1,3 +1,4 @@
+import { QuoteExtraFieldsType } from '@/types/quotes';
 import { channelId, convertArrayToGraphql, convertObjectToGraphql, storeHash } from '@/utils';
 
 import B3Request from '../../request/b3Fetch';
@@ -352,7 +353,7 @@ query getStorefrontProductSettings($storeHash: String!, $channelId: Int) {
 }
 `;
 
-const getQuoteExtraFields = () => `{
+const getQuoteExtraFields = `query {
   quoteExtraFieldsConfig {
     fieldName,
     fieldType,
@@ -367,6 +368,7 @@ const getQuoteExtraFields = () => `{
     id,
     isUnique,
     valueConfigs,
+    fieldCategory,
   }
 }`;
 
@@ -471,7 +473,7 @@ export const getBCStorefrontProductSettings = () =>
     variables: { storeHash, channelId },
   });
 
-export const getQuoteExtraFieldsConfig = () =>
+export const getQuoteExtraFieldsConfig = (): Promise<QuoteExtraFieldsType> =>
   B3Request.graphqlB2B({
-    query: getQuoteExtraFields(),
+    query: getQuoteExtraFields,
   });