{descriptionModal || t('CAL_EDIT_ORDER_CONF')}
\n\n {name}\n
\n\n {email}\n
\n\n {phone}\n
\n{formatDateAvailableDate}
\n \n \n {!isPendingQuote && (\n{errorMsg}
\n )}\n{t('HOW_TO_CHANGE_PAYMENT_METHOD')}
\r\n \r\n{t('HOW_TO_CHANGE_PAYMENT_METHOD')}
\r\n )}\r\n \r\n\n {t('DEALER_PROMOTION_CODE')}\n
\n {!readOnly && (\n\n {t('YES_I_ACCEPT')}\n
\n{UPLOAD_REMOVE_TEXT}
\n{modalTexts.body}
\n\n {t('ACTIVATE_QUOTE_MODAL_BODY')}\n
\n{t('TOOLTIP_CATFI_BODY')}
\n \n ) : (\n{t('DISQUALIFING_REASON_FOR_CATFI_PROMO')}
\n )}\n\n {t('TOOLTIP_CATFI_BODY')}\n
\n\n {t('DISQUALIFING_REASON_FOR_CATFI_PROMO')}\n
\n )}\n\n {t(title)}\n
\n )}\n \n );\n};\n\nInlineLoaderWithText.propTypes = {\n title: PropTypes.string,\n loaderStyle: PropTypes.string,\n titleStyle: PropTypes.string\n};\n\nexport default InlineLoaderWithText;\n","import PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { AlloyButton } from 'cat-ecommerce-alloy';\nimport InlineLoaderWithText from '@app/components/common/InlineLoaderWithText';\n\nconst QrCodeDesktop = ({ title, qrCodeImage, close, isLoading }) => {\n const { t } = useTranslation();\n return (\n{title}
\n {isLoading ? (\n{title}
\n {isLoading ? (\n{t('QUOTE_TOOLTIP_BODY')}
\n\n {t('APPROVE_QUOTE_CONF_TEXT')}\n
\n{`${e.firstName} ${e.lastName}`}
\r\n \r\n {e.email}\r\n \r\n \r\n }\r\n />\r\n \r\n );\r\n });\r\n };\r\n\r\n const getDealerDCNAssociations = () => {\r\n return (\r\n <>\r\n {!!filteredDealerDCNAssociations?.length ? (\r\n\n {t('CC_CARD_DETAILS_SUBHEADING')}\n
\n{cardNumber}
\n{expiryDate}
\n \n );\n};\n\nPayURussiaExistingCardDetails.propTypes = {\n cardNumber: PropTypes.string.isRequired,\n expiryDate: PropTypes.string.isRequired\n};\n\nexport default PayURussiaExistingCardDetails;\n","export default {\n base: {\n // Common to all input fields\n lineHeight: '40px',\n fontWeight: 400,\n fontSize: '13px',\n\n cardImage: {\n paddingLeft: '10px'\n },\n\n // Here you can style the span element that wraps the secure fields.\n // The default values are shown below.\n secureFields: {\n position: 'absolute',\n top: 0,\n left: 55\n },\n\n // The Primary Account Number (PAN) field is always included in the form.\n // You can style it here.\n pan: {\n fontSize: '13px'\n },\n\n // The expirationDate field is always included in the form.\n // You can style it here.\n expirationDate: {\n fontSize: '13px'\n }\n }\n};\n","import { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport { Checkbox, ErrorMessage, Input, Validator } from 'cat-ecommerce-alloy';\nimport Field from '../../../../../common/form/Field';\nimport useSystemFeedback from '@app/hooks/useSystemFeedback';\nimport { replaceTokensInString } from '../../../../../../utils';\nimport {\n ERROR_DOMAIN,\n ERROR_PATH,\n ERROR_CREDIT_CARD_FAILURE\n} from '../../../../../../constants/errorConstants';\nimport { AFFILIATION_DEALER } from '@app/constants/commonConstants';\nimport secureFieldStyles from '../secureFieldStyles';\nimport { PCC_PS_TITLE_UPDATES } from '@app/constants/featureFlags';\nimport cx from 'classnames';\nimport styles from '../styles.module.scss';\n\nconst PayURussiaSecureFields = ({\n cardValidationError,\n environment,\n isGuest,\n isLoaded,\n isRtl,\n paymentTokenizationEnabled,\n POS,\n publicKey,\n scriptError,\n storedProfileId\n}) => {\n const [t] = useTranslation();\n const { setError } = useSystemFeedback();\n const iframeContainerRef = useRef();\n\n const userAffiliation = useSelector(s => s.common?.userAffiliation);\n const isDealerUser = userAffiliation === AFFILIATION_DEALER;\n\n const SECURE_FIELDS_TARGET = 'card-secure-fields';\n const CARDHOLDER_NAME = t('SUMM_PAY_NAME_ON_CARD');\n const CREDIT_CARD_NUMBER = t('SUMM_PAY_CARD_NUMBER');\n const FIELD_REQUIRED_MSG = t('1626_FIELD_REQUIRED_ERROR');\n\n const makeRequired = (val, fieldName) =>\n new Validator(val)\n .required(replaceTokensInString(FIELD_REQUIRED_MSG, fieldName))\n .getError();\n const scrollToError = (fieldName, fieldRef) =>\n fieldRef.current.scrollIntoView({ behavior: 'smooth' });\n\n useEffect(() => {\n const initSecureFields = () => {\n POS.setPublicKey(publicKey);\n POS.setEnvironment(environment);\n POS.setStyle(secureFieldStyles);\n POS.setCardNumberPlaceholder(CREDIT_CARD_NUMBER);\n POS.disableSecurityNumber(); // disabled as we have the cvv on the PCC side\n if (isRtl) {\n POS.setDirectionRtl();\n }\n\n POS.initSecureFields(SECURE_FIELDS_TARGET);\n };\n\n if (isLoaded && !scriptError && POS) {\n initSecureFields();\n } else if (isLoaded && scriptError) {\n setError(\n ERROR_DOMAIN.CHECKOUT,\n ERROR_PATH.PAYMENT_FINALIZATION,\n ERROR_CREDIT_CARD_FAILURE\n );\n }\n }, [\n CREDIT_CARD_NUMBER,\n environment,\n isLoaded,\n isRtl,\n POS,\n publicKey,\n scriptError,\n setError\n ]);\n\n const titleUpdatesFeatureFlag = useSelector(\n state => state?.featureFlag?.[PCC_PS_TITLE_UPDATES]\n );\n\n return (\n <>\n\n {t('I_AGREE_TO')}\n
{removedFileMessage}
: null}\n {addedFileMessage ?{addedFileMessage}
: null}\n{addedFileMessage}
: null}\n {t('SHIPOPTIONS_REQUIRED_FIELDS')}\n
\n )}\n \n )}\n \n );\n};\n\nPendingQuotes.propTypes = {\n applyPromoCode: PropTypes.func,\n billingAddress: PropTypes.shape({\n lastSaved: PropTypes.number,\n new: declarations.address,\n options: declarations.addresses\n }),\n fulfillment: types.fulfillmentProps,\n isPendingOrder: PropTypes.bool,\n isPendingQuote: PropTypes.bool,\n micoEnabled: PropTypes.bool,\n orderExtendAttribute: types.orderExtendAttributeProps,\n currencyNotation: PropTypes.string,\n orderHeader: types.orderHeaderProps,\n orderId: PropTypes.string,\n orderTotals: types.orderTotalsProps,\n paymentGateway: types.paymentGatewayProps,\n paymentTokenizationEnabled: PropTypes.bool,\n placeOrder: PropTypes.func,\n punchoutOrderFailed: PropTypes.bool,\n quoteEnabled: PropTypes.bool,\n removePromoCode: PropTypes.func,\n savePaymentDetails: PropTypes.func,\n savePoNumber: PropTypes.func,\n setSelectedBillingAddress: PropTypes.func,\n selectedBillingMethod: PropTypes.func,\n selectedAdditionalBillingMethod: types.billingMethodProps,\n skipCreditCard: PropTypes.bool,\n vatTaxEnabled: PropTypes.bool,\n catCreditInternationalError: PropTypes.bool,\n userInquirySelection: PropTypes.shape({\n displayValue: PropTypes.string,\n value: PropTypes.string\n }),\n setIsCatCardFormCompleted: PropTypes.func,\n setDisplayErrorMsg: PropTypes.func,\n setDisplayTCError: PropTypes.func\n};\n\nexport default PendingQuotes;\n","import { useCallback, useContext, useState } from 'react';\nimport { Formik, Form } from 'formik';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\nimport Field from '@app/components/common/form/Field';\nimport {\n AlloyButton,\n CurrencyInput,\n Input,\n SystemFeedback,\n ToastContext,\n Validator\n} from 'cat-ecommerce-alloy';\nimport { CAT_CREDIT, STATUS } from '@app/constants/commonConstants';\nimport { applyCatCreditsGlobal } from '@app/store/checkout/actions';\nimport {\n CHECKOUT_APPLY_CAT_CREDITS_PLACE_ORDER,\n RESET_ADDITIONAL_BILLING_METHOD\n} from '@app/store/checkout/constants';\nimport { Conditional } from '@cat-ecom/pcc-components';\nimport { convertFormattedNumberToUnformatted } from '@app/components/pages/checkout/utils';\nimport { PropTypes } from 'prop-types';\nimport ExceptionFeedback from '@app/components/common/Exception/ExceptionFeedback';\nimport { replaceTokensInString } from '@app/utils';\nimport { PCC_PS_TITLE_UPDATES } from '@app/constants/featureFlags';\nimport cx from 'classnames';\nimport useGetCatFinancialTranslations from '@app/hooks/useGetCatFinancialTranslations';\n\nconst ApplyCreditsForm = ({\n isAmountExceedingCatCreditBalance,\n setIsAmountExceedingCatCreditBalance,\n amountAppliedGreaterThanOrderTotal,\n setAmountAppliedGreaterThanOrderTotal,\n isNoBalanceCatCredit,\n isShowingErrorBanner\n}) => {\n const [localCreditAmountValue, setLocalCreditAmountValue] = useState('');\n const dispatch = useDispatch();\n const toastCtx = useContext(ToastContext);\n const [t] = useTranslation();\n\n const isDualCurrencySupportFlagEnabled = useSelector(\n state => state.featureFlag?.PCC_DualCurrencySupportFlag\n );\n\n const isCatCardEnhancementsFlagEnabled = useSelector(\n state => state.featureFlag?.PCC_CatCardEnhancements\n );\n\n const amountUsedCatCreditsGlobal = useSelector(\n s =>\n s?.checkout?.applyCatCreditsGlobal?.applyCatCreditsGlobalBalance\n ?.amountUsedCatCreditsGlobal\n );\n\n const isDualCurrencyUpdateForeignCurrencyNameEnabled = useSelector(\n state => state.featureFlag?.PCC_DualCurrencyUpdateForeignCurrencyName\n );\n const usedAmountForeignCurrency = useSelector(\n s =>\n s?.checkout?.applyCatCreditsGlobal?.applyCatCreditsGlobalBalance\n ?.usedAmountForeignCurrency\n );\n const usedAmountSalesforceCurrency = useSelector(\n s =>\n s?.checkout?.applyCatCreditsGlobal?.applyCatCreditsGlobalBalance\n ?.usedAmountSalesforceCurrency\n );\n const secondaryUsedAmountToShow =\n isDualCurrencyUpdateForeignCurrencyNameEnabled\n ? usedAmountSalesforceCurrency\n : amountUsedCatCreditsGlobal;\n\n const secondaryCreditAmount =\n !!usedAmountForeignCurrency && isDualCurrencySupportFlagEnabled\n ? usedAmountForeignCurrency\n : amountUsedCatCreditsGlobal;\n\n const creditAmount = isDualCurrencyUpdateForeignCurrencyNameEnabled\n ? amountUsedCatCreditsGlobal\n : secondaryCreditAmount;\n\n const initialValues = {\n creditAmount: isNaN(+creditAmount) ? '' : +creditAmount || ''\n };\n\n const accountBalanceForeignCurrency = useSelector(\n s => s.checkout?.catSalesForceAccountBalance?.accountBalanceForeignCurrency\n );\n const accountBalanceSalesforceCurrency = useSelector(\n s =>\n s.checkout?.catSalesForceAccountBalance?.accountBalanceSalesforceCurrency\n );\n const secondaryAccountBalance = isDualCurrencyUpdateForeignCurrencyNameEnabled\n ? accountBalanceSalesforceCurrency\n : accountBalanceForeignCurrency;\n\n const accountBalance = useSelector(\n s => s.checkout?.catSalesForceAccountBalance?.accountBalance\n );\n\n const accountId = useSelector(\n s => s.checkout?.catSalesForceAccountBalance?.accountId\n );\n\n const accountCurrencyCode = useSelector(\n s => s.checkout?.catSalesForceAccountBalance?.accountCurrencyCode\n );\n\n const accountCurrencyCodeForeignCurrency = useSelector(\n s =>\n s.checkout?.catSalesForceAccountBalance\n ?.accountCurrencyCodeForeignCurrency\n );\n\n const accountCurrencyCodeSalesforceCurrency = useSelector(\n s =>\n s.checkout?.catSalesForceAccountBalance\n ?.accountCurrencyCodeSalesforceCurrency\n );\n const currencyCode = isDualCurrencyUpdateForeignCurrencyNameEnabled\n ? accountCurrencyCodeSalesforceCurrency\n : accountCurrencyCode;\n\n const isSalesForceAccountBalanceFail = useSelector(\n s => s.checkout?.catSalesForceAccountBalanceStatus === STATUS.REJECTED\n );\n\n const applyCatCreditsGlobalFail = useSelector(\n s =>\n s.checkout?.applyCatCreditsGlobal?.applyCatCreditsGlobalStatus ===\n STATUS.REJECTED\n );\n\n const isAlreadyRequestedCatCreditsGlobal = useSelector(\n s => s.checkout?.applyCatCreditsGlobal?.wasClickedApplyCreditsBtn\n );\n\n const IntlCatCreditsEnhancementsFlagEnabled = useSelector(\n state => state.featureFlag?.PCC_InternationalCatCreditsTestingEnhancements\n );\n\n const [errorMessage, setErrorMessage] = useState('');\n\n const isDualCurrencyEnhancementsEnabled = useSelector(\n state => state.featureFlag?.PCC_DualCurrencyEnhancements\n );\n\n const isCatCreditsEnhancementsPhase3Enabled = useSelector(\n state => state.featureFlag?.PCC_CatCreditsEnhancementsPhase3\n );\n\n const isCatCreditInternationalPhaseOne = useSelector(\n state => state.dealer?.isCreditsInternationalPhaseOneEnabled\n );\n\n const isCatCreditInternationalPhaseTwo = useSelector(\n state => state.dealer?.isCreditsInternationalPhaseTwoEnabled\n );\n\n const isCatCreditInternational =\n isCatCreditInternationalPhaseOne || isCatCreditInternationalPhaseTwo;\n\n const catCreditsGlobalError =\n isCatCreditInternational &&\n applyCatCreditsGlobalFail &&\n isCatCardEnhancementsFlagEnabled;\n\n const orderId = useSelector(s => s?.orders?.current);\n\n const unformattedCurrentOrderTotal = useSelector(\n s => s?.orders?.byId[orderId]?.orderTotals?.unformattedOrderTotal\n );\n\n const unformattedUpdatedOrderTotal = convertFormattedNumberToUnformatted(\n useSelector(s => s?.checkout?.orderTotals?.orderTotal) || '0'\n );\n\n const orderTotalValue =\n unformattedUpdatedOrderTotal || unformattedCurrentOrderTotal;\n\n const creditsCurrencyCode =\n !isDualCurrencyUpdateForeignCurrencyNameEnabled &&\n isCatCreditInternational &&\n isDualCurrencySupportFlagEnabled &&\n !!accountCurrencyCodeForeignCurrency\n ? accountCurrencyCodeForeignCurrency\n : accountCurrencyCode;\n\n const { creditsTranslation, catCreditsTranslation } =\n useGetCatFinancialTranslations();\n\n const CAT_CREDIT_ACCOUNT_MAX_LENGTH = 16;\n\n const handleEnterCreditsAbbrev = replaceTokensInString(\n t('CAT_CREDITS_ENTER_CREDITS_AMOUNT'),\n creditsTranslation,\n creditsCurrencyCode\n );\n\n const catCreditExceededBalance = replaceTokensInString(\n t('CAT_CREDITS_BALANCE_EXCEEDED_ERROR_MSG_DESC'),\n CAT_CREDIT\n );\n\n const exceedsBalance = replaceTokensInString(\n t('CAT_CREDITS_EXCEEDS_BALANCE'),\n CAT_CREDIT\n );\n\n const getCreditsAmountValidator = useCallback(\n val => {\n /** It will handle 2 use cases\n * 1. When we have no balance, we show an error\n * 2. When there is balance, we validate the required amount with the balance\n */\n let error;\n\n if (isNoBalanceCatCredit) {\n return t('CAT_CREDITS_INSUFFICIENT_BALANCE_ERROR_TITLE');\n }\n\n error = new Validator(val)\n .required(t('CAT_CREDITS_AMOUNT_REQUIRED'))\n .isValidQuantity(() => {\n const decimalNumericRegex = new RegExp(/^\\d+(\\.\\d{1,2})?$/);\n if (!decimalNumericRegex.test(val)) {\n return t('CAT_CREDITS_AMOUNT_INVALID_FORMAT');\n } else {\n const accountBalanceVerified =\n secondaryAccountBalance === null\n ? accountBalance\n : secondaryAccountBalance;\n\n const isExceedingCatCreditBalance = +val > +accountBalanceVerified;\n if (isExceedingCatCreditBalance) {\n return exceedsBalance;\n } else {\n return null;\n }\n }\n });\n\n return error.getError();\n },\n [\n accountBalance,\n secondaryAccountBalance,\n isNoBalanceCatCredit,\n exceedsBalance,\n t\n ]\n );\n\n const onSubmit = (values, formikBag) => {\n const creditAmountNumber = +values?.creditAmount;\n const creditAmountString = `${values?.creditAmount}`;\n\n const orderTotalValueString = `${orderTotalValue}`;\n\n const creditsAppliedGreaterThanOrderTotal =\n creditAmountNumber > orderTotalValue;\n\n setAmountAppliedGreaterThanOrderTotal(creditsAppliedGreaterThanOrderTotal);\n\n const amountValue = creditsAppliedGreaterThanOrderTotal\n ? orderTotalValueString\n : creditAmountString;\n\n const applyCatCreditParams = {\n usedAmount: amountValue,\n cardNumber: accountId\n };\n\n if (creditsAppliedGreaterThanOrderTotal) {\n formikBag.setFieldValue('creditAmount', orderTotalValueString);\n dispatch({ type: RESET_ADDITIONAL_BILLING_METHOD });\n } else if (creditAmountNumber === orderTotalValue) {\n dispatch({ type: RESET_ADDITIONAL_BILLING_METHOD });\n }\n\n setLocalCreditAmountValue(amountValue);\n\n dispatch(applyCatCreditsGlobal(applyCatCreditParams)).then(() =>\n toastCtx.createSuccessToast(\n !isAlreadyRequestedCatCreditsGlobal\n ? replaceTokensInString(\n t('CAT_CREDITS_TOAST_MSG_APPLIED'),\n catCreditsTranslation\n )\n : replaceTokensInString(\n t('CAT_CREDITS_TOAST_MSG_UPDATED'),\n catCreditsTranslation\n )\n )\n );\n };\n\n const handleAmountChange = useCallback(\n ({ target }) => {\n const accountBalanceVerified =\n secondaryAccountBalance === null\n ? accountBalance\n : secondaryAccountBalance;\n\n const userHasNotEnteredValue = target.value === null;\n\n const shouldDisableApplyCreditsBtn =\n target.value > +accountBalanceVerified || userHasNotEnteredValue;\n\n setIsAmountExceedingCatCreditBalance(shouldDisableApplyCreditsBtn);\n if (isDualCurrencyEnhancementsEnabled) {\n if (\n shouldDisableApplyCreditsBtn &&\n amountAppliedGreaterThanOrderTotal\n ) {\n setAmountAppliedGreaterThanOrderTotal(false);\n }\n setErrorMessage(getCreditsAmountValidator(target.value));\n }\n\n dispatch({\n type: CHECKOUT_APPLY_CAT_CREDITS_PLACE_ORDER,\n payload: shouldDisableApplyCreditsBtn\n });\n },\n [\n accountBalance,\n secondaryAccountBalance,\n amountAppliedGreaterThanOrderTotal,\n getCreditsAmountValidator,\n isDualCurrencyEnhancementsEnabled,\n setAmountAppliedGreaterThanOrderTotal,\n setIsAmountExceedingCatCreditBalance,\n dispatch\n ]\n );\n\n const validateDisableSubmitButton = (errors, values) => {\n const sameAmountEntered =\n IntlCatCreditsEnhancementsFlagEnabled &&\n +values.creditAmount === +creditAmount;\n\n const enteredZero =\n +values.creditAmount === 0 &&\n (!IntlCatCreditsEnhancementsFlagEnabled ||\n !isAlreadyRequestedCatCreditsGlobal);\n\n const disableValidation =\n !!errors['creditAmount'] ||\n enteredZero ||\n isAmountExceedingCatCreditBalance ||\n isSalesForceAccountBalanceFail ||\n sameAmountEntered;\n\n return isAlreadyRequestedCatCreditsGlobal\n ? disableValidation || +values.creditAmount === +localCreditAmountValue\n : disableValidation;\n };\n\n const shouldRenderWarningMsg =\n amountAppliedGreaterThanOrderTotal &&\n (isDualCurrencySupportFlagEnabled || isCatCreditInternational);\n\n const secondaryUsedAmount = isDualCurrencyUpdateForeignCurrencyNameEnabled\n ? usedAmountSalesforceCurrency\n : usedAmountForeignCurrency;\n\n const shouldRenderUsedCatCreditsGlobal =\n secondaryUsedAmount &&\n isDualCurrencySupportFlagEnabled &&\n !isAmountExceedingCatCreditBalance;\n\n const titleUpdatesFeatureFlag = useSelector(\n state => state?.featureFlag?.[PCC_PS_TITLE_UPDATES]\n );\n\n return (\n <>\n\n {replaceTokensInString(\n t('CAT_CREDITS_SUCCESSFULLY_APPLIED'),\n catCreditsTranslation\n )}\n
\n );\n };\n const handleApplyCatVantageRewardsFail = () => {\n setShowApplyCatVantageRewardsError(true);\n };\n const applyCatVantageRewards = async amount => {\n setShowApplyCatVantageRewardsError(false);\n dispatch(\n applyCatVantageRewardsToOrder({\n handleApplyCatVantageRewardsSuccess,\n handleApplyCatVantageRewardsFail,\n amount\n })\n );\n };\n\n const isAbleToRenderCatRewardCredits =\n isEnrolledInCatVantage &&\n isPrimaryCSPUser &&\n isCatVantageRewardsEnabled &&\n isCSPCustomer;\n\n const dealerName = useSelector(state => state?.dealer?.dealerName);\n\n const isDealerCodeZeppelinCZorDE = useMemo(() => {\n return (\n dealerCode === DEALER_CODE_ZEPPELIN_CZ ||\n dealerCode === DEALER_CODE_ZEPPELIN_DE\n );\n }, [dealerCode]);\n\n const { getEspotContent } = useEspot(\n PCC_ESPOT_DEALER_TERMS_AND_CONDITIONS_SNP,\n '',\n null\n );\n const espotDealerTermsAndConditionSNP =\n getEspotContent(PCC_ESPOT_DEALER_TERMS_AND_CONDITIONS_SNP) || '';\n let espotHtml =\n espotDealerTermsAndConditionSNP?.contents?.length > 0\n ? espotDealerTermsAndConditionSNP?.contents[0]?.html\n : '';\n\n const titleUpdatesFeatureFlag = useSelector(\n state => state?.featureFlag?.[PCC_PS_TITLE_UPDATES]\n );\n\n const isPlaceOrderButtonDisabled = usePlaceOrderButtonDisabled(\n catCreditInternationalError\n );\n\n const isCatCreditsEnhancementsPhase2Enabled = useSelector(\n s => s.featureFlag?.PCC_CatCreditsEnhancementsPhase2\n );\n\n const isCatCardBillingMethod = selectedBillingMethod?.value?.includes(\n BILLING_METHOD_NEW_CAT_CARD\n );\n\n const isCatCardAdditionalBillingMethod =\n selectedAdditionalBillingMethod?.value?.includes(\n BILLING_METHOD_NEW_CAT_CARD\n );\n\n const isCreditCardAdditionalBillingMethod =\n selectedAdditionalBillingMethod?.value?.startsWith(BILLING_METHOD_NEW_CC);\n\n const isCatCreditsAdditionalBillingMethod =\n selectedAdditionalBillingMethod?.value?.includes(\n BILLING_METHOD_CAT_PREPAID_CERT\n );\n\n const isAdditionalBillingMethodSelected =\n selectedAdditionalBillingMethod?.value !== '';\n\n const amountUsed = secondaryAmountUsed || amountUsedCatCreditsGlobal;\n\n const showSecondAdditionalBillingMethod =\n isCatCreditsBillingMethod &&\n (shouldRenderAdditionalPaymentOptionsWithCatCreditsGlobal ||\n shouldRenderAdditionalPaymentOptionsWithDualCurrency ||\n shouldRenderAdditionalPaymentOptions);\n\n const unformattedOrderCatPrepaidCertificatesTotal =\n orderTotals?.unformattedOrderCatPrepaidCertificatesTotal;\n\n const isCatCardBillingMethodFormInvalid =\n isCatCardBillingMethod &&\n !isCatCardFormCompleted &&\n !isCatCreditInternational;\n\n const isCatCardAdditionalBillingMethodFormInvalid =\n isCatCardAdditionalBillingMethod && !isCatCardFormCompleted;\n\n const hasNotAppliedCatPrepaid =\n isCatCreditsBillingMethod && !unformattedOrderCatPrepaidCertificatesTotal;\n\n const showAdditionalBillingMethodRequiredMessage =\n !isPendingQuote &&\n !isPendingOrder &&\n (isCatVantageRewardsEnhancePhase1Enabled\n ? !showSecondAdditionalBillingMethod &&\n ((isCatCreditsEnhancementsPhase2Enabled &&\n (isCatCardBillingMethodFormInvalid ||\n (!isCatCreditInternational &&\n (isCreditCardBillingMethod || hasNotAppliedCatPrepaid)))) ||\n isPlaceOrderButtonDisabled) &&\n !shouldDisableBillingMethodsDueToCVR &&\n isAbleToRenderCatRewardCredits\n : ((isCatCreditsEnhancementsPhase2Enabled &&\n (isCatCardBillingMethodFormInvalid ||\n (!isCatCreditInternational &&\n (isCreditCardBillingMethod || hasNotAppliedCatPrepaid)))) ||\n showAdditionalBillingMethodMessage) &&\n !shouldDisableBillingMethodsDueToCVR &&\n (!isCatCardBillingMethod || !isCatCardFormCompleted));\n\n const showSecondAdditionalBillingMethodRequiredMessage =\n !isPendingQuote &&\n !isPendingOrder &&\n showSecondAdditionalBillingMethod &&\n ((isCatVantageRewardsEnhancePhase1Enabled\n ? isPlaceOrderButtonDisabled\n : !isAdditionalBillingMethodSelected) ||\n (isCatCreditsEnhancementsPhase2Enabled &&\n (isCatCardAdditionalBillingMethodFormInvalid ||\n isCreditCardAdditionalBillingMethod ||\n isCatCreditsAdditionalBillingMethod)));\n\n const placingOrderUpdatesFlag = useSelector(\n s => s.featureFlag[PCC_PS_PLACING_ORDER_UPDATES]\n );\n\n const renderPromoCodeSection = () => {\n return (\n