tf-checkout-react 1.4.17 → 1.4.18

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.17",
+  "version": "1.4.18",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -68,7 +68,7 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "eslint-webpack-plugin": "^3.2.0",
     "husky": "^7.0.4",
-    "parcel": "^2.8.2",
+    "parcel": "^2.8.3",
     "prettier": "^2.8.4",
     "process": "^0.11.10",
     "react": "^17.0.2",

package/src/api/index.ts

@@ -400,7 +400,43 @@ export const selectAddons = (data: any) => {
   publicRequest.post(`v1/on-checkout`, data)
 }
 
-export const getCheckoutPageConfigs = async () => {
+export interface AttributesConfig {
+    has_add_on: boolean;
+    names_required: boolean;
+    phone_required: boolean;
+    minimum_age?: any;
+    age_required: boolean;
+    hide_phone_field: boolean;
+    event_id: string;
+    free_ticket: boolean;
+    collect_mandatory_wallet_address: boolean;
+    collect_optional_wallet_address: boolean;
+    collect_mandatory_company: boolean;
+    collect_optional_company: boolean;
+    collect_mandatory_job_title: boolean;
+    collect_optional_job_title: boolean;
+    collect_mandatory_business_category: boolean;
+    collect_optional_business_category: boolean;
+    collect_mandatory_instagram: boolean;
+    collect_optional_instagram: boolean;
+    skip_billing_page: boolean;
+}
+
+export interface ConfigsData {
+    attributes: AttributesConfig;
+    relationships: any[];
+    type: string;
+}
+
+export interface ResponseConfigs {
+    data: ConfigsData;
+    success: boolean;
+    error: boolean;
+    message: string;
+    status: number;
+}
+
+export const getCheckoutPageConfigs = async (): Promise<ResponseConfigs> => {
   const response = await publicRequest.get(`v1/checkout-configs`)
   return response.data
 }

package/src/components/billing-info-container/index.tsx

@@ -25,7 +25,9 @@ import { nanoid } from 'nanoid'
 import React, { FC, useEffect, useRef, useState } from 'react'
 
 import {
+  AttributesConfig,
   getCart,
+  getCheckoutPageConfigs,
   getCountries,
   getProfileData,
   getStates,
@@ -42,7 +44,6 @@ import {
   isBrowser,
 } from '../../utils'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
-import { getQueryVariable } from '../../utils/getQueryVariable'
 import { combineValidators, requiredValidator } from '../../validators'
 import SnackbarAlert from '../common/SnackbarAlert'
 import { ForgotPasswordModal } from '../forgotPasswordModal'
@@ -195,7 +196,11 @@ const LogicRunner: FC<{
                 parsedData?.last_name || parsedData?.lastName || '',
               'holderEmail-0': parsedData?.email || '',
             }
-            setValues({ ...values, ...mappedValues })
+
+            const extraDataJSON = window.localStorage.getItem('extraData')
+            const extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null
+
+            setValues({ ...values, ...mappedValues, ...(extraData ?? {}) })
             setUserValues(mappedValues)
           } catch (e) {}
         }
@@ -254,9 +259,28 @@ export const BillingInfoContainer = React.memo(
     isCountryCodeEditable = true,
     onPendingVerification = _identity,
   }: IBillingInfoPage) => {
+    const [extraData, setExtraData] = useState(null)
+    const [isConfigLoading, setIsConfigLoading] = useState(true)
+    const [configs, setConfigs] = useState<null | AttributesConfig>(null)
     const [isNewUser, setIsNewUser] = useState(false)
     const themeMui = createTheme(themeOptions)
     const isWindowDefined = typeof window !== 'undefined'
+    useEffect(() => {
+      if (isWindowDefined) {
+        const extraData = window.localStorage.getItem('extraData')
+        if (extraData) {
+          setExtraData(JSON.parse(extraData))
+        }
+      }
+      getCheckoutPageConfigs().then(data => {
+        if (data?.data?.attributes) {
+          setConfigs(data.data.attributes)
+          setIsConfigLoading(false)
+        }
+      }).catch(() => {
+        setIsConfigLoading(false)
+      })
+    }, [isWindowDefined])
     const defaultCountry = isWindowDefined
       ? window.localStorage.getItem('eventCountry')
       : ''
@@ -312,9 +336,9 @@ export const BillingInfoContainer = React.memo(
       _get(userData, 'first_name', '') || _get(userValues, 'first_name', '')
     const lastNameLogged =
       _get(userData, 'last_name', '') || _get(userValues, 'last_name', '')
-    const showDOB = getQueryVariable('age_required') === 'true'
-    const showTicketHolders = getQueryVariable('names_required') === 'true'
-    const eventId = getQueryVariable('event_id') || ''
+    const showDOB = configs?.age_required
+    const showTicketHolders = configs?.names_required
+    const eventId = configs?.event_id
     const optedInFieldValue: boolean = brandOptIn
       ? brandOptIn
       : _get(cartInfoData, 'optedIn', false)
@@ -322,15 +346,29 @@ export const BillingInfoContainer = React.memo(
     const isTable = Boolean(_get(cartInfoData, 'is_table', false))
     const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
     const expirationTime = _get(cartInfoData, 'expiresAt')
-    const flagRequirePhone = getQueryVariable('phone_required') === 'true'
-    const collectMandatoryWalletAddress =
-      getQueryVariable('collect_mandatory_wallet_address') === 'true'
-    const collectOptionalWalletAddress =
-      getQueryVariable('collect_optional_wallet_address') === 'true'
-    const flagFreeTicket = getQueryVariable('free_ticket') === 'true'
-    const hidePhoneField = getQueryVariable('hide_phone_field') === 'true'
+    const flagRequirePhone = configs?.phone_required
+    const collectMandatoryWalletAddress = configs?.collect_mandatory_wallet_address
+    const collectOptionalWalletAddress = configs?.collect_optional_wallet_address
+    const flagFreeTicket = configs?.free_ticket
+    const hidePhoneField = configs?.hide_phone_field
     const hideWalletAddressField =
       !collectOptionalWalletAddress && !collectMandatoryWalletAddress
+    const collectMandatoryCompany = configs?.collect_mandatory_company
+    const collectOptionalCompany = configs?.collect_optional_company
+    const hideCompanyField =
+      !collectOptionalCompany && !collectMandatoryCompany
+    const collectMandatoryJobTitle = configs?.collect_mandatory_job_title
+    const collectOptionalJobTitle = configs?.collect_optional_job_title
+    const hideJobTitleField =
+      !collectMandatoryJobTitle && !collectOptionalJobTitle
+    const collectMandatoryInstagram = configs?.collect_mandatory_instagram
+    const collectOptionalInstagram = configs?.collect_optional_instagram
+    const hideInstagramField =
+      !collectMandatoryInstagram && !collectOptionalInstagram
+    const collectMandatoryBusinessCategory = configs?.collect_mandatory_business_category
+    const collectOptionalBusinessCategory = configs?.collect_optional_business_category
+    const hideBusinessCategoryField =
+      !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory
 
     const [
       pendingVerificationMessage,
@@ -534,13 +572,13 @@ export const BillingInfoContainer = React.memo(
       selectedCountry.id || _get(userData, 'country', '') || '1'
 
     const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
-    usePixel(eventId, { page: 'billing', pageUrl })
+    usePixel(eventId || '', { page: 'billing', pageUrl })
     if (isTable) {
       dataWithUniqueIds[0].label = 'Get Your Tables'
     }
     return (
       <ThemeProvider theme={themeMui}>
-        {(loading || cardLoading || isCountriesLoading) && (
+        {(loading || cardLoading || isCountriesLoading || isConfigLoading) && (
           <Backdrop
             sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
             open={true}
@@ -554,7 +592,7 @@ export const BillingInfoContainer = React.memo(
             onCountdownFinish={onCountdownFinish}
           />
         )}
-        {!isCountriesLoading && (
+        {!isCountriesLoading && !isConfigLoading && (
           <Formik
             initialValues={getInitialValues(
               dataWithUniqueIds,
@@ -563,6 +601,12 @@ export const BillingInfoContainer = React.memo(
                 state: _get(userData, 'state', '') || '1',
                 brand_opt_in: optedInFieldValue,
                 ttf_opt_in: ttfOptIn,
+                data_capture: {
+                  'instagram': _get(extraData, 'data_capture.instagram', ''),
+                  'company': _get(extraData, 'data_capture.company', ''),
+                  'businessCategory': _get(extraData, 'data_capture.businessCategory', ''),
+                  'jobTitle': _get(extraData, 'data_capture.jobTitle', ''),
+                },
                 ...initialValues,
               },
               userValues
@@ -570,6 +614,16 @@ export const BillingInfoContainer = React.memo(
             enableReinitialize={false}
             onSubmit={async (values, formikHelpers) => {
               try {
+                if (isWindowDefined) {
+                  window.localStorage.setItem('extraData', JSON.stringify({
+                    data_capture: {
+                      'instagram': _get(values, 'data_capture.instagram', ''),
+                      'company': _get(values, 'data_capture.company', ''),
+                      'businessCategory': _get(values, 'data_capture.businessCategory', ''),
+                      'jobTitle': _get(values, 'data_capture.jobTitle', ''),
+                    }
+                  }))
+                }
                 if (isLoggedIn) {
                   const checkoutBody = collectCheckoutBody(values, userData)
 
@@ -833,13 +887,40 @@ export const BillingInfoContainer = React.memo(
                                           el.required = true
                                         }
                                       }
+                                      if (
+                                        el.name === 'data_capture[jobTitle]'
+                                      ) {
+                                        if (collectMandatoryJobTitle) {
+                                          el.required = true
+                                        }
+                                      }
+                                      if (
+                                        el.name === 'data_capture[businessCategory]'
+                                      ) {
+                                        if (collectMandatoryBusinessCategory) {
+                                          el.required = true
+                                        }
+                                      }
+                                      if (
+                                        el.name === 'data_capture[company]'
+                                      ) {
+                                        if (collectMandatoryCompany) {
+                                          el.required = true
+                                        }
+                                      }
+                                      if (
+                                        el.name === 'data_capture[instagram]'
+                                      ) {
+                                        if (collectMandatoryInstagram) {
+                                          el.required = true
+                                        }
+                                      }
                                       if (
                                         [
                                           'street_address',
                                           'country',
                                           'state',
                                           'city',
-                                          'zip',
                                         ].includes(el.name)
                                       ) {
                                         if (flagFreeTicket) {
@@ -849,7 +930,28 @@ export const BillingInfoContainer = React.memo(
                                       }
                                       if (
                                         hideWalletAddressField &&
-                                        el.name === 'wallet-address-info'
+                                        (el.name === 'wallet-address-info' || el.name === 'data_capture[wallet_address]')
+                                      ) {
+                                        return false
+                                      }
+                                      if (
+                                        hideJobTitleField && el.name === 'data_capture[jobTitle]'
+                                      ) {
+                                        return false
+                                      }
+                                      if (
+                                        hideBusinessCategoryField && el.name === 'data_capture[businessCategory]'
+                                      ) {
+                                        return false
+                                      }
+                                      if (
+                                        hideCompanyField && el.name === 'data_capture[company]'
+                                      ) {
+                                        return false
+                                      }
+                                      if (
+                                        hideInstagramField &&
+                                        (el.name === 'data_capture[instagram]' || el.name === 'instagram-info')
                                       ) {
                                         return false
                                       }
@@ -861,10 +963,7 @@ export const BillingInfoContainer = React.memo(
                                         'confirmPassword',
                                         'password-info',
                                       ].includes(element.name) &&
-                                      isLoggedIn ? null : [
-                                          'data_capture[wallet_address]',
-                                        ].includes(element.name) &&
-                                        hideWalletAddressField ? null : (
+                                      isLoggedIn ? null : (
                                         <React.Fragment key={element.uniqueId}>
                                           <div
                                             className={`${

package/src/components/ticketsContainer/index.tsx

@@ -210,6 +210,7 @@ export const TicketsContainer = ({
           window.localStorage.removeItem('user_data')
         }
       }
+      window.localStorage.removeItem('extraData')
     }
   }, [])