(availablePaymentOptions[0]);\r\n\r\n return (\r\n \r\n {completePurchaseLabel}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {paymentMethodsLabel}\r\n \r\n {availablePaymentOptions.map((paymentOption: KexPaymentOptionModel) => (\r\n setSelectedDeliveryMethod(paymentOption)}\r\n >\r\n ))}\r\n \r\n \r\n \r\n {sendOrderLabel}\r\n \r\n {errorMessage && {errorMessage}}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default CompletePurchase;\r\n\r\nconst TermsText = styled('div', {\r\n display: 'flex',\r\n fs: 6,\r\n});\r\n\r\nconst SelectionContainer = styled('div', {\r\n mb: 8,\r\n});\r\n\r\nconst TermsWrapper = styled('div', {\r\n pb: 4,\r\n});\r\n\r\nconst CtaButtonWrapper = styled('div', {\r\n mx: 'auto',\r\n '@mediaMinMedium': {\r\n maxW: '50%',\r\n },\r\n});\r\n\r\nconst ErrorMessage = styled('div', { color: '$errorPrimary' });\r\n","import KexInput from '../../../Shared/Input/KexInput';\r\nimport { KexInputValidation } from '../../../Shared/Input/KexInputValidation';\r\nimport { useTranslationData } from '../../../Shared/Providers/TranslationProvider';\r\nimport { styled } from '../../../stitches.config';\r\nimport { CheckoutSectionTitle } from '../CheckoutProductListing';\r\n\r\ntype PropTypes = {\r\n formData: any;\r\n setFormData?: any;\r\n};\r\n\r\nfunction DeliveryDetails({ setFormData, formData }: PropTypes) {\r\n const {\r\n 'checkoutPage/deliveryaddress': deliveryAddressLabel,\r\n 'checkoutPage/contactInformationLabel': contactInformationLabel,\r\n 'common/yourInformation': yourInformationLabel,\r\n 'input/firstNameTitle': firstNameTitleLabel,\r\n 'input/firstNamePlaceholder': firstNamePlaceholder,\r\n 'input/lastNameTitle': lastNameTitleLabel,\r\n 'input/lastNamePlaceholder': lastNamePlaceholderLabel,\r\n 'input/addressTitle': addressTitleLabel,\r\n 'input/addressPlaceholder': addressPlaceholderLabel,\r\n 'input/postalCodeTitle': postalCodeTitleLabel,\r\n 'input/postalCodePlaceholder': postalCodePlaceholderLabel,\r\n 'validation/invalidPostalCode': invalidPostalCodeLabel,\r\n 'input/regionTitle': regionTitleLabel,\r\n 'input/regionPlaceholder': regionPlaceholderLabel,\r\n 'input/phoneNumberTitle': phoneNumberTitleLabel,\r\n 'input/phoneNrPlaceholder': phoneNumberPlaceholderLabel,\r\n 'validation/invalidPhoneNumber': invalidPhoneNrLabel,\r\n 'input/emailTitle': emailTitleLabel,\r\n 'input/emailPlaceholder': emailPlaceholderLabel,\r\n 'validation/invalidEmail': invalidEmailLabel,\r\n } = useTranslationData();\r\n\r\n const phoneRegExp = new RegExp('(^[\\\\s-+()0-9]{6,16}$)');\r\n const numberRegExp = new RegExp('(^[\\\\d ]*$)');\r\n const emailRegExp = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;\r\n\r\n return (\r\n <>\r\n {deliveryAddressLabel} \r\n \r\n {yourInformationLabel}\r\n \r\n \r\n \r\n \r\n setFormData({ ...formData, firstName: e })\r\n }\r\n />\r\n setFormData({ ...formData, lastName: e })}\r\n />\r\n \r\n \r\n \r\n \r\n {deliveryAddressLabel}\r\n \r\n \r\n \r\n setFormData({ ...formData, shippingAddress: e })\r\n }\r\n />\r\n \r\n \r\n \r\n setFormData({ ...formData, shippingPostalCode: e })\r\n }\r\n />\r\n \r\n \r\n setFormData({ ...formData, shippingDistrict: e })\r\n }\r\n />\r\n \r\n \r\n \r\n {contactInformationLabel}\r\n \r\n \r\n \r\n setFormData({ ...formData, phoneNumber: e })\r\n }\r\n />\r\n setFormData({ ...formData, email: e })}\r\n />\r\n \r\n \r\n \r\n \r\n >\r\n );\r\n}\r\n\r\nexport default DeliveryDetails;\r\n\r\nconst FormContainer = styled('div', {});\r\n\r\nconst InputSection = styled('div', {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n mt: 3,\r\n mb: 8,\r\n});\r\n\r\nconst BottomSection = styled('div', {\r\n '@mediaMinMedium': {\r\n maxW: '49%',\r\n },\r\n});\r\n\r\nconst InputSectionTitle = styled('span', {\r\n fs: 7,\r\n fontWeight: '$fw700',\r\n});\r\n\r\nconst FlexWrapper = styled('div', {\r\n '@mediaMinMedium': {\r\n display: 'flex',\r\n g: 4,\r\n },\r\n});\r\n\r\nconst StyledKexInput = styled(KexInput, {\r\n w: '100%',\r\n backgroundColor: '$white',\r\n});\r\n\r\nconst PostNrWrapper = styled('div', {\r\n w: '100%',\r\n '@mediaMinMedium': {\r\n maxW: '38.5%',\r\n },\r\n '@mediaMinLarge': {\r\n maxW: '35%',\r\n },\r\n});\r\n","import { useState } from 'react';\r\nimport KexDeliveryOptionModel from '../../../CheckoutPage/Models/KexDeliveryOptionModel.interface';\r\nimport SelectionModule from '../../../Molecules/SelectionModule/SelectionModule';\r\nimport { useTranslationData } from '../../../Shared/Providers/TranslationProvider';\r\nimport { styled } from '../../../stitches.config';\r\nimport { CheckoutSectionTitle } from '../CheckoutProductListing';\r\n\r\ntype PropType = {\r\n deliveryOptions: KexDeliveryOptionModel[];\r\n onChange: (value: KexDeliveryOptionModel) => void;\r\n};\r\n\r\nfunction DeliveryOptions({ deliveryOptions, onChange }: PropType) {\r\n const { 'checkoutPage/deliveryOptions': deliveryOptionsLabel } =\r\n useTranslationData();\r\n\r\n const [selectedDeliveryMethod, setSelectedDeliveryMethod] =\r\n useState(deliveryOptions[0]);\r\n\r\n const onDeliveryChange = (deliveryOption: KexDeliveryOptionModel) => {\r\n setSelectedDeliveryMethod(deliveryOption);\r\n onChange(deliveryOption);\r\n };\r\n\r\n return (\r\n \r\n {deliveryOptionsLabel}\r\n \r\n {deliveryOptions.map((deliveryOption: KexDeliveryOptionModel) => (\r\n onDeliveryChange(deliveryOption)}\r\n >\r\n {deliveryOption.formattedPrice}\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n\r\nconst SelectionContainer = styled('div', {\r\n pt: 2,\r\n});\r\n\r\nexport default DeliveryOptions;\r\n","import { useState } from 'react';\r\nimport CheckoutB2CPageModel from '../../../CheckoutPage/Models/CheckoutB2CPageModel.interface';\r\nimport FormSubmissionB2C from '../../../CheckoutPage/Models/FormSubmissionB2C.interface';\r\nimport KexDeliveryOptionModel from '../../../CheckoutPage/Models/KexDeliveryOptionModel.interface';\r\nimport { useKexNavigate } from '../../../Kex/KexRouter/KexRouter';\r\nimport useCurrentPage from '../../../Shared/Hooks/useCurrentPage';\r\nimport { useAppSettingsData } from '../../../Shared/Providers/AppSettingsProvider';\r\nimport { useTranslationData } from '../../../Shared/Providers/TranslationProvider';\r\nimport { styled } from '../../../stitches.config';\r\nimport { GetCart } from '../../CartPage/Cart';\r\nimport { PlaceB2COrder } from '../CheckoutApi';\r\nimport CheckoutProductListing, {\r\n CheckoutSectionTitle,\r\n} from '../CheckoutProductListing';\r\nimport CompletePurchase from './CompletePurchase';\r\nimport DeliveryDetails from './DeliveryDetails';\r\nimport DeliveryOptions from './DeliveryOptions';\r\n\r\nfunction CheckoutB2CPage() {\r\n const {\r\n languageRoute,\r\n staticPages: { orderConfirmationPage },\r\n } = useAppSettingsData();\r\n\r\n const {\r\n 'common/emptyCart': emptyCartLabel,\r\n 'common/errorMessage': errorMessageLabel,\r\n } = useTranslationData();\r\n\r\n const kexNavigate = useKexNavigate();\r\n const { channelId, availableDeliveryOptions, availablePaymentOptions } =\r\n useCurrentPage();\r\n const { cart } = GetCart();\r\n const [submitErrorMsg, setSubmitErrorMsg] = useState('');\r\n const [submitIsLoading, setSubmitIsLoading] = useState(false);\r\n\r\n const intialFormData: FormSubmissionB2C = {\r\n selectedDeliveryMethod: availableDeliveryOptions[0],\r\n selectedPaymentMethod: availablePaymentOptions[0],\r\n };\r\n\r\n const [b2cOrderSubmitData, setB2cOrderSubmitData] =\r\n useState(intialFormData);\r\n\r\n const onDeliveryChange = (selectedDelivery: KexDeliveryOptionModel) => {\r\n setB2cOrderSubmitData({\r\n ...b2cOrderSubmitData,\r\n selectedDeliveryMethod: selectedDelivery,\r\n });\r\n };\r\n\r\n function submitOrder() {\r\n PlaceB2COrder(\r\n b2cOrderSubmitData,\r\n channelId,\r\n languageRoute,\r\n setSubmitIsLoading\r\n ).then((data) => {\r\n setSubmitIsLoading(false);\r\n if (data.success) {\r\n let url = `${orderConfirmationPage}?orderId=${data.orderId}`;\r\n kexNavigate(url);\r\n } else {\r\n setSubmitErrorMsg(errorMessageLabel);\r\n }\r\n });\r\n }\r\n\r\n return (\r\n \r\n \r\n {cart && cart.lineItems && !!cart.lineItems.length ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {availableDeliveryOptions && !!availableDeliveryOptions.length && (\r\n \r\n \r\n \r\n )}\r\n {availablePaymentOptions && !!availablePaymentOptions.length && (\r\n \r\n \r\n \r\n )}\r\n >\r\n ) : !(Object.keys(cart).length === 0) ? (\r\n \r\n {emptyCartLabel}\r\n \r\n ) : (\r\n <>>\r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default CheckoutB2CPage;\r\n\r\nconst PageWrapper = styled('div', {\r\n p: 4,\r\n '@mediaMinLarge': {\r\n maxWidth: '864px',\r\n mx: 'auto',\r\n px: 0,\r\n pt: 8,\r\n },\r\n});\r\n\r\nexport const CheckoutSectionContainer = styled('div', {\r\n backgroundColor: '$white',\r\n px: 4,\r\n py: 8,\r\n mb: 4,\r\n '@mediaMinVerySmall': {\r\n br: 2.5,\r\n },\r\n '@mediaMinLarge': {\r\n py: 16,\r\n px: 25.5,\r\n mb: 8,\r\n },\r\n});\r\n","import { styled } from '../../stitches.config';\r\n\r\ntype PropType = {\r\n onSelect: (value: any) => void;\r\n selectedValue: any;\r\n label: string;\r\n options: any[];\r\n};\r\n\r\nconst Select = ({ onSelect, selectedValue, label, options }: PropType) => {\r\n const handleSelect = (event: any) => onSelect(event.target.value);\r\n\r\n return (\r\n \r\n \r\n \r\n {options.map((option: any) => (\r\n \r\n ))}\r\n \r\n \r\n );\r\n};\r\n\r\nconst SelectWrapper = styled('div', { mb: 4 });\r\n\r\nconst Label = styled('label', {\r\n fs: 8,\r\n fontWeight: '$fw700',\r\n lineHeight: '28px',\r\n});\r\n\r\nconst StyledSelect = styled('select', {\r\n fs: 8,\r\n fontWeight: '$fw700',\r\n backgroundColor: 'inherit',\r\n h: 9,\r\n ml: 4,\r\n px: 3,\r\n border: '1px solid $primary',\r\n});\r\n\r\nexport default Select;\r\n"],"names":["Root","styled","display","position","w","LabelContainer","whiteSpace","LabelInner","alignItems","Input","opacity","cursor","FilterText","Square","mr","l","wh","br","backgroundColor","pointerEvents","justifyContent","p","transition","border","variants","isChecked","true","backgroundClip","transform","isRound","isHovered","h","content","Label","fontSize","fontWeight","lineHeight","letterSpacing","_ref","name","value","label","_ref$checked","checked","hovered","onChange","filterType","_ref$isRound","children","_useState","useState","_useState2","_slicedToArray","setIsChecked","_useState3","_useState4","setIsHovered","onInputChange","val","useEffect","_jsx","onMouseOver","onMouseOut","htmlFor","_jsxs","id","encodeURIComponent","type","e","target","FormLabel","color","default","error","hasError","css","InputGroup","FormInput","fs","ls","my","px","bw","borderStyle","borderColor","outline","round","title","_ref$type","onBlur","onKeyDown","validation","placeholder","_ref$disabled","disabled","validationDispatch","useInputValidation","setHasError","errorMessage","setErrorMessage","_useState5","_useState6","hasTouched","setHasTouched","_useState7","_useState8","hasValue","setHasValue","doValidation","currentValue","validationError","undefined","active","pattern","test","required","minLength","length","maxLength","onInputBlur","currentTarget","payload","backendValidation","message","_objectSpread","onFocus","onTouched","onInput","reducer","state","action","newInputs","inputs","newCount","count","hasOwnProperty","ValidationDispatchContext","React","initialReducerState","InputValidation","onInputsValid","onInputsInvalid","_useReducer","useReducer","_useReducer2","_useReducer2$","dispatch","validCount","key","Provider","abortController","AbortController","GetMyInformation","_x","_x2","_GetMyInformation","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee","channelId","url","signal","litiumContext","wrap","_context","prev","next","abort","JSON","stringify","channelSystemId","abrupt","Fetcher","data","resolve","stop","UpdateMyInformation","_x3","_x4","_x5","_x6","_UpdateMyInformation","_callee2","requestToken","res","responseJson","_context2","fetch","method","headers","RequestVerificationToken","body","sent","json","status","SelectionModuleRoot","mb","selected","false","LeftSectionWrapper","onClick","description","Checkbox","Empty","paddingBottom","mx","BottomEmpty","pt","pb","pl","pr","textAlign","h5","marginBottom","_useTranslationData","useTranslationData","emptyCartTitle","emptyCartDescription","_Fragment","ClearCartIcons","customerInformation","billingHeading","orderReferenceLabel","Container","CheckoutSectionTitle","Wrapper","InfoSection","Bold","companyName","invoiceAddress","street","postalCode","city","firstName","lastName","flexDirection","gap","mt","rowGap","onDeliveryChange","addressFormValue","countries","setCustomCompany","setCustomCountryCode","deliveryAddressLabel","companyLabel","postalCodeTitleLabel","invalidPostalCodeLabel","regionTitleLabel","careofTitleLabel","numberRegExp","RegExp","FormContainer","InputSection","careOf","FlexWrapper","PostNrWrapper","SelectWrapper","Select","selectedValue","country","onSelect","options","map","text","Object","keys","charAt","toUpperCase","slice","values","maxW","select","margin","g","defaultDeliveryAddress","optionalDeliveryAddresses","deliveryAddressHeading","careOfLabel","customAddressLabel","selectedDeliveryAddress","setSelectedDeliveryAddress","customDeliveryAddress","setCustomDeliveryAddress","address","renderDeliveryOptionContent","streetAddress","DeliveryOptionsWrapper","SelectionModule","optionalDeliveryAddress","CustomDeliveryAddress","DeliveryDetails","_useAppSettingsData","useAppSettingsData","languageRoute","_useAppSettingsData$s","staticPages","orderConfirmationPage","loginPage","yourOrderLabel","referenceNumberLabel","additionalInformationLabel","sendOrderLabel","errorMessageLabel","kexNavigate","useKexNavigate","_useCurrentPage","useCurrentPage","pageHeading","cart","GetCart","_useUserStateData","useUserStateData","company","email","phoneNumber","customerId","messageText","setMessageText","customerReferenceId","setCustomerReferenceId","submitErrorMsg","setSubmitErrorMsg","submitIsLoading","setSubmitIsLoading","customerInfoUrl","concat","_useState9","_useState10","setCustomerInformation","_useState11","user","dontAllowLogin","useHeaderData","deliveryAddress","_useState13","_useState14","setAddressFormValue","_useState15","_useState16","customCompany","_useState17","reduce","pairs","obj","_toConsumableArray","entries","flat","_useState18","customCountryCode","then","authenticated","orderSubmitData","billingAddress","billingCity","billingCountry","billingPostalCode","shippingCareOf","shippingAddress","shippingCity","shippingCountry","shippingPostalCode","orderNote","selectedDeliveryMethod","providerOptionId","optionId","providerId","selectedPaymentMethod","customersReferenceId","_submitOrder","PlaceB2BOrder","success","orderId","PageWrapper","lineItems","CheckoutSectionContainer","CheckoutProductListing","heading","BillingInformation","DeliverySelection","OrderContentWrapper","KexInputValidation","KexInput","OrderSummaryContainer","ButtonWrapper","CtaButton","submitOrder","isLoading","uppercase","ErrorMessage","EmptyCartContainer","m","py","discountLabel","OrderSummaryWrapper","Attributes","totalDiscount","Values","numberOfItems","totalPriceForItems","totalFreightPrice","Discount","totalPrice","availablePaymentOptions","onOrderSubmit","completePurchaseLabel","paymentMethodsLabel","termsAndConditionsText","setSelectedDeliveryMethod","CheckoutOrderSummary","TermsWrapper","TermsText","dangerouslySetInnerHTML","__html","SelectionContainer","paymentOption","CtaButtonWrapper","setFormData","formData","contactInformationLabel","yourInformationLabel","firstNameTitleLabel","firstNamePlaceholder","lastNameTitleLabel","lastNamePlaceholderLabel","addressTitleLabel","addressPlaceholderLabel","postalCodePlaceholderLabel","regionPlaceholderLabel","phoneNumberTitleLabel","phoneNumberPlaceholderLabel","invalidPhoneNrLabel","emailTitleLabel","emailPlaceholderLabel","invalidEmailLabel","phoneRegExp","InputSectionTitle","StyledKexInput","BottomSection","shippingDistrict","deliveryOptions","deliveryOptionsLabel","deliveryOption","formattedPrice","emptyCartLabel","availableDeliveryOptions","intialFormData","b2cOrderSubmitData","setB2cOrderSubmitData","DeliveryOptions","selectedDelivery","CompletePurchase","PlaceB2COrder","maxWidth","StyledSelect","ml","event","option"],"sourceRoot":""}