);\r\n return (\r\n \r\n \r\n
\r\n )\r\n}\r\nconst Modal = (props) => {\r\n return(\r\n <>\r\n {ReactDOM.createPortal(\r\n \r\n {props.children}\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n","import { Fragment, useState, forwardRef } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport \"../Inputs/InputRe.css\";\r\nimport \"./Dropdown.scss\"\r\nimport useCreateUrl from '../../../Hooks/useCreateUrl';\r\n\r\nconst Dropdown = (props) => {\r\n let inputWidth = () => {\r\n switch (props.inputSize) {\r\n case 'full-width':\r\n return \"full-width\"\r\n case 'large':\r\n return \"large\"\r\n case 'medium':\r\n return \"medium\"\r\n case 'small':\r\n return \"small\"\r\n default:\r\n return \"large\"\r\n }\r\n }\r\n\r\n\r\n const handleChange = (e) => {\r\n props.setValue(e.target.value); //for storing the selection\r\n\r\n }\r\n\r\n\r\n return <>\r\n\r\n \r\n {props?.renewalText && { setIsChecked(!isChecked) }} id=\"autorenewalconsent\" name=\"autorenewalconsent\" />\r\n {props.errorStates.autoRenewalNotTicked ?\r\n {t('payment.autorenewalcheckboxnotticked')} \r\n : \"\"}\r\n
\r\n {ReactHtmlParser(props?.renewalText)}
}\r\n\r\n\r\n
\r\n\r\n \r\n}\r\nexport default Dropdown;","import { Fragment, useState, forwardRef, useRef, useEffect } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport \"../Inputs/InputRe.css\";\r\nimport \"./Dropdown.scss\"\r\nimport useCreateUrl from '../../../Hooks/useCreateUrl';\r\nimport DOMPurify from \"dompurify\";\r\n\r\nconst SearchDropdown = forwardRef((props, ref) => {\r\n const { options, setValue, dropdownName, preSelectedCountryCode, valueProperty, val, keyProperty, nameProperty, description, edit, labelText, inputSize, text, label, btnText, optionalField, setButtonEvent, helpField, inputFieldType, route, value, onClickFunction } = props;\r\n const [showDropdown, setShowDropdown] = useState(false);\r\n const [filteredOptions, setFilteredOptions] = useState(options);\r\n const [searchTerm, setSearchTerm] = useState(\"\");\r\n const [editable, setEditable] = useState(false);\r\n const [focused, setFocused] = useState(false);\r\n const [listItemEvent, setListItemEvent] = useState(false)\r\n const createUrl = useCreateUrl();\r\n const listRef = useRef(null);\r\n const searchInputRef = useRef(null)\r\n const [selectedIndex, setSelectedIndex] = useState(-1);\r\n let itemSelected= false;\r\n\r\n useEffect(() => {\r\n \r\n setFilteredOptions(options)\r\n }, [options]);\r\n\r\n useEffect(() => {\r\n if (listRef.current && listRef.current.children) {\r\n const listItems = listRef.current?.children;\r\n if (listItems.length > 0) {\r\n listItems[selectedIndex]?.classList.add('selected');\r\n for (let i = 0; i < listItems.length; i++) {\r\n if (i !== selectedIndex) {\r\n listItems[i].classList.remove('selected');\r\n }\r\n }\r\n\r\n const selectedListItem = listItems[selectedIndex];\r\n const listRect = listRef?.current?.getBoundingClientRect();\r\n const itemRect = selectedListItem?.getBoundingClientRect();\r\n const offset = itemRect?.top - listRect?.top;\r\n const listHeight = listRect?.bottom - listRect?.top;\r\n const itemHeight = itemRect?.bottom - itemRect?.top;\r\n\r\n if (offset < 0) {\r\n listRef.current.scrollTop += offset;\r\n } else if (offset + itemHeight > listHeight) {\r\n listRef.current.scrollTop += (offset + itemHeight) - listHeight;\r\n }\r\n }\r\n }\r\n\r\n \r\n }, [selectedIndex]);\r\n\r\n\r\n\r\n function handleKeyDown(event) {\r\n\r\n if (listRef.current && event.key === 'ArrowDown') {\r\n event.preventDefault();\r\n setSelectedIndex(prevIndex => {\r\n if (prevIndex === listRef.current.children.length - 1) {\r\n return prevIndex;\r\n }\r\n else if (prevIndex === 0) {\r\n\r\n return prevIndex + 1;\r\n }\r\n else {\r\n return prevIndex + 1;\r\n }\r\n });\r\n } else if (listRef.current && event.key === 'ArrowUp') {\r\n event.preventDefault();\r\n setSelectedIndex(prevIndex => {\r\n if (prevIndex === 0) {\r\n return prevIndex;\r\n } else {\r\n return prevIndex - 1;\r\n }\r\n });\r\n } else if (event.key === 'Enter') {\r\n if(selectedIndex !== -1){\r\n const currentOption = filteredOptions[selectedIndex];\r\n \r\n setValue(currentOption); \r\n itemSelected=true;\r\n setSearchTerm(\"\");\r\n handleOnClick(currentOption)\r\n\r\n var input = document.getElementById(\"delivery-country\");\r\n if (input) {\r\n input.blur();\r\n }}\r\n // else{\r\n // const currentOption = filteredOptions[0];\r\n // setValue(currentOption); setSearchTerm(currentOption[nameProperty]); setShowDropdown(false)\r\n // var input = document.getElementById(\"delivery-country\");\r\n // if (input) {\r\n // input.blur();\r\n // }\r\n // }\r\n }\r\n else if (event.keyCode === 9) {\r\n \r\n if (event.target.name === \"delivery-country\" || event.target.name === \"billing-country\") {\r\n setFocused(false)\r\n }\r\n\r\n }\r\n }\r\n\r\n //basic text input with a label along with a standard subtext with an exception of email input box\r\n\r\n let inputWidth = () => {\r\n switch (inputSize) {\r\n case 'full-width':\r\n return \"full-width\"\r\n case 'large':\r\n return \"large\"\r\n case 'medium':\r\n return \"medium\"\r\n case 'small':\r\n return \"small\"\r\n default:\r\n return \"large\"\r\n }\r\n }\r\n\r\n const handleOnFocus = () => {\r\n itemSelected=false;\r\n setFocused(true)\r\n setSearchTerm(\"\")\r\n setShowDropdown(false)\r\n setListItemEvent(false)\r\n\r\n\r\n }\r\n\r\n\r\n\r\n const handleOnBlur = (e) => {\r\n setSelectedIndex(-1); //reinitialising on blur\r\n // Handle onBlur logic for clicking outside the dropdown\r\n if (e?.relatedTarget === null || listItemEvent) {\r\n setFocused(false)\r\n setShowDropdown(false)\r\n }\r\n setFocused(false)\r\n\r\n if(searchTerm.length>0){\r\n setSearchTerm(\"\"); \r\n\r\n if(itemSelected===false){\r\n setValue(filteredOptions[0]); \r\n }\r\n setFilteredOptions(options)\r\n }\r\n setListItemEvent(false)\r\n }\r\n\r\n const handleOnBlurButton = (e) => {\r\n \r\n if (e?.relatedTarget?.className === \"search-dropdown\") {\r\n setFocused(true)\r\n setShowDropdown(true)}\r\n else {\r\n setFocused(false)\r\n setShowDropdown(false)\r\n }\r\n }\r\n\r\n const handleOnBlurDropdown = (e) => {\r\n\r\n if (e?.currentTarget === \"div.dropdown-wrapper\") {\r\n setFocused(true)\r\n setShowDropdown(true)\r\n\r\n }\r\n else if (e?.relatedTarget === null || listItemEvent) {\r\n setFocused(false)\r\n setShowDropdown(false)\r\n }\r\n }\r\n\r\n const filterFunc = (value) => {\r\n\r\n if (value.length >= 1) {\r\n return options?.filter((op) =>\r\n (op[nameProperty]?.toLowerCase()?.startsWith(value.toLowerCase()) || (op?.aliases?.filter((alias) => { return alias.toLowerCase().startsWith(value.toLowerCase()) }).length > 0))\r\n )\r\n }\r\n else {\r\n return [...options];\r\n }\r\n\r\n }\r\n\r\n const handleSearch = (e) => {\r\n setSearchTerm(e.target.value); \r\n setSelectedIndex(-1); //the value that we enter in the search field\r\n // setValue(e.target.value); //for storing the selection\r\n let options = filterFunc(e.target.value)\r\n setFilteredOptions([...options]);\r\n\r\n // filtering options on the basis of search term\r\n }\r\n\r\n\r\n const handleOnClick = (option) => {\r\n //on click on scroller then going back to selcting an item from the list now working\r\n itemSelected=true;\r\n setListItemEvent(true)\r\n setShowDropdown(false)\r\n setSearchTerm(\"\")\r\n setValue(option);\r\n setFocused(false)\r\n\r\n var input = document.getElementById(\"delivery-country\");\r\n if (input) {\r\n input.blur();\r\n }\r\n var input1 = document.getElementById(\"billing-country\");\r\n if (input1) {\r\n input1.blur();\r\n }\r\n // setSearchTerm(option[nameProperty]);\r\n setFilteredOptions(options)\r\n }\r\n\r\n const handleOnClickButton = (e) => {\r\n setShowDropdown(!showDropdown);\r\n handleOnFocus(); //so that the scroller works how it does in reference with the input field\r\n\r\n }\r\n \r\n //onMount\r\n useEffect(() => {\r\n if (preSelectedCountryCode) {\r\n let country = options?.find((item) => item.countrycode === preSelectedCountryCode)\r\n if(country){\r\n setValue(country)\r\n }\r\n else{\r\n setValue(options[0]) //in case country code- country does not exist in the countrylist\r\n }\r\n \r\n }\r\n }, [])\r\n\r\n const handleOnKeyDown = (e, option) => {\r\n if (e.key === \"Enter\") {\r\n handleOnClick(option)\r\n }\r\n }\r\n\r\n \r\n const labelField = () => {\r\n return \r\n\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n\r\n \r\n \r\n {props?.description ?
\r\n\r\n {props?.description}
: \"\"}\r\n\r\n\r\n
\r\n }\r\n\r\n function highlightMatch(text, match) {\r\n return text.replace(\r\n new RegExp(`(${match})`, \"gi\"),\r\n '$1'\r\n );\r\n }\r\n\r\n const renderSuggestions=(option, index)=>{\r\n let name=option[nameProperty];\r\n const regex = new RegExp(`(${searchTerm})`, 'gi');\r\n const splittedName = name.split(regex);\r\n \r\n return \r\n \r\n {description ?
\r\n {description}
: \"\"}\r\n {/*not present in code this particular spec */}\r\n {(props.specs === \"search_input\") &&Type first letters to find..
}\r\n- \r\n {filteredOptions?.map((option, index) => {\r\n\r\n if (searchTerm?.length >= 1) {\r\n return renderSuggestions(option, index);\r\n }\r\n else {\r\n\r\n return
- { handleOnClick(option) }}\r\n onKeyDown={(e) => { handleOnKeyDown(e, option) }}\r\n value={option[nameProperty]} tabindex=\"0\" aria-label={option[nameProperty]}>\r\n {option[nameProperty]}\r\n \r\n }\r\n\r\n })}\r\n {props.id === \"delivery-country\" ?
- {\r\n if (e.key === \"Enter\") {\r\n setValue(\"Change region selected\");\r\n window.location.href = route;\r\n }\r\n }} onMouseDown={(e) => { setValue(\"Change region selected\"); window.location.href = route }}>Change region : \"\"}\r\n
handleOnBlurDropdown(e)}>\r\n \r\n
\r\n \r\n})\r\nexport default SearchDropdown;","import { useTranslation } from 'react-i18next';\r\nimport { useEffect, useState, useContext, forwardRef, useImperativeHandle } from 'react';\r\nimport '../../../i18n';\r\nimport { format } from 'react-string-format';\r\nimport \"./Location.scss\"\r\nimport InputWrapperRefacture from '../../UI/Inputs/InputWrapperRefacture';\r\nimport Dropdown from '../../UI/Dropdown/SearchDropdown';\r\nimport useCreateUrl from '../../../Hooks/useCreateUrl';\r\nimport { PaymentFormContext } from '../../Order/PaymentFormReducer';\r\nimport SearchDropdown from '../../UI/Dropdown/SearchDropdown';\r\nimport ErrorBox from '../../UI/ErrorBox/ErrorBox';\r\nimport { checkIsBlank } from '../../Utilities/FieldValidations';\r\nimport { getOriginatingUrl } from '../../Utilities/GetUrlFunctions';\r\n\r\n\r\nexport function Location(props) {\r\n const { countryList, setCountryCode, basket, countryCode, id, name, preSelectedCountryCode, selectedAddress, setSelectedAddress, IsFilled, setIsFilled } = props;\r\n const { t, i18n } = useTranslation();\r\n const [country, setCountry] = useState(\"\")\r\n const createUrl = useCreateUrl();\r\n const discountFlow = sessionStorage.getItem(\"discountApplied\");\r\n\r\n \r\n //as n when country state changes\r\n useEffect(() => {\r\n setSelectedAddress(selectedAddress => ({ ...selectedAddress, COUNTRY: country?.countryname }))\r\n setCountryCode(country?.countrycode)\r\n if (country) {\r\n setIsFilled({ ...IsFilled, COUNTRY: { filled: true, mandatory: true } })\r\n }\r\n }, [country])\r\n\r\n\r\n //On Mounting\r\n useEffect(() => {\r\n \r\n //in case of only 1 country in the list it will be pre selected\r\n if (countryList && countryList?.length === 1) {\r\n setCountry(countryList[0])\r\n setIsFilled({ ...IsFilled, COUNTRY: { filled: true, mandatory: true } }) //country is an object but selectedAddress.COUNTRY is a string\r\n }\r\n if (countryList && countryCode) {\r\n let country= countryList?.find(t => t.countrycode === countryCode)\r\n \r\n if(country){\r\n setCountry(country);\r\n }else{\r\n setCountry(countryList[0]); //if the country code is not present in countryList, then whatever the first item in the list is will be set as the value.\r\n }\r\n setIsFilled({ ...IsFilled, COUNTRY: { filled: true, mandatory: true } })\r\n }\r\n }, [])\r\n\r\n \r\n\r\n return (<>\r\n \r\n {//if variants in the basket just have 1 country\r\n countryList?.length === 1 || !countryList ?\r\n 0) ? \"filled\" : \"\"}`}>\r\n
\r\n \r\n {inputField()}\r\n \r\n
\r\n {filteredOptions ? dropdown() : \" \"}\r\n \r\n {format(t('addressfields.blankerrortext'), \"country\")} \r\n }
\r\n\r\n : countryList?.length > 1 ?\r\n\r\n //if variants in the basket have multiple countries\r\n \r\n
\r\n {IsFilled?.COUNTRY && !IsFilled?.COUNTRY?.filled &&\r\n \r\n \r\n {format(t('addressfields.blankerrortext'), \"country\")} \r\n }\r\n
: \"\"}\r\n \r\n\r\n );\r\n}","import React, { Fragment, useState } from 'react';\r\n\r\n\r\n\r\nexport function Summary() {\r\n return (\r\n <> \r\n \r\n
\r\n {IsFilled?.COUNTRY && !IsFilled?.COUNTRY?.filled &&\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Back to Order\r\n
\r\n \r\n
\r\n Order Summary
\r\n\r\n
\r\n \r\n
\r\n Product title
\r\nProduct description
\r\n\r\n \r\n
\r\n Sub total 11.99
\r\n Tax 2.99
\r\n Order total 14.98
\r\n \r\n
\r\n\r\n \r\n );\r\n}","\r\nimport { Company } from './Company/Company';\r\nimport { Location } from './Location/Location';\r\nimport { User } from './User/User';\r\nimport { useState } from 'react';\r\nimport useResize from '../../Hooks/useResize';\r\nimport { Summary } from './Summary/Summary';\r\n\r\nexport function CheckoutPage() {\r\n let windowSize = useResize();\r\n \r\n const [companyList, setCompanyList]=useState([{ name: 'Afghanistan', code: 'AF' },\r\n { name: 'Ã…land Islands', code: 'AX' },\r\n { name: 'Albania', code: 'AL' },\r\n { name: 'Algeria', code: 'DZ' },\r\n { name: 'American Samoa', code: 'AS' },\r\n { name: 'AndorrA', code: 'AD' },\r\n { name: 'Angola', code: 'AO' },\r\n { name: 'Anguilla', code: 'AI' },\r\n { name: 'Antarctica', code: 'AQ' },\r\n { name: 'Antigua and Barbuda', code: 'AG' },\r\n { name: 'Argentina', code: 'AR' },\r\n { name: 'Armenia', code: 'AM' },\r\n { name: 'Aruba', code: 'AW' },\r\n { name: 'Australia', code: 'AU' },\r\n { name: 'Austria', code: 'AT' },\r\n { name: 'Azerbaijan', code: 'AZ' },\r\n { name: 'Bahamas', code: 'BS' },\r\n { name: 'Bahrain', code: 'BH' },\r\n { name: 'Bangladesh', code: 'BD' },\r\n { name: 'Barbados', code: 'BB' },\r\n { name: 'Belarus', code: 'BY' },\r\n { name: 'Belgium', code: 'BE' },\r\n { name: 'Belize', code: 'BZ' },\r\n { name: 'Benin', code: 'BJ' },\r\n { name: 'Bermuda', code: 'BM' },\r\n { name: 'Bhutan', code: 'BT' },\r\n { name: 'Bolivia', code: 'BO' },\r\n { name: 'Bosnia and Herzegovina', code: 'BA' },\r\n { name: 'Botswana', code: 'BW' },\r\n { name: 'Bouvet Island', code: 'BV' },\r\n { name: 'Brazil', code: 'BR' },\r\n { name: 'British Indian Ocean Territory', code: 'IO' },\r\n { name: 'Brunei Darussalam', code: 'BN' },\r\n { name: 'Bulgaria', code: 'BG' },\r\n { name: 'Burkina Faso', code: 'BF' },\r\n { name: 'Burundi', code: 'BI' },\r\n { name: 'Cambodia', code: 'KH' },\r\n { name: 'Cameroon', code: 'CM' },\r\n { name: 'Canada', code: 'CA' },\r\n { name: 'Cape Verde', code: 'CV' },\r\n { name: 'Cayman Islands', code: 'KY' },\r\n { name: 'Central African Republic', code: 'CF' },\r\n { name: 'Chad', code: 'TD' },\r\n { name: 'Chile', code: 'CL' },\r\n { name: 'China', code: 'CN' },\r\n { name: 'Christmas Island', code: 'CX' },\r\n { name: 'Cocos (Keeling) Islands', code: 'CC' },\r\n { name: 'Colombia', code: 'CO' },\r\n { name: 'Comoros', code: 'KM' },\r\n { name: 'Congo', code: 'CG' },\r\n { name: 'Congo, The Democratic Republic of the', code: 'CD' },\r\n { name: 'Cook Islands', code: 'CK' },\r\n { name: 'Costa Rica', code: 'CR' },\r\n { name: 'Cote D\\'Ivoire', code: 'CI' },\r\n { name: 'Croatia', code: 'HR' },\r\n { name: 'Cuba', code: 'CU' },\r\n { name: 'Cyprus', code: 'CY' },\r\n { name: 'Czech Republic', code: 'CZ' },\r\n { name: 'Denmark', code: 'DK' },\r\n { name: 'Djibouti', code: 'DJ' },\r\n { name: 'Dominica', code: 'DM' },\r\n { name: 'Dominican Republic', code: 'DO' },\r\n { name: 'Ecuador', code: 'EC' },\r\n { name: 'Egypt', code: 'EG' },\r\n { name: 'El Salvador', code: 'SV' },\r\n { name: 'Equatorial Guinea', code: 'GQ' },\r\n { name: 'Eritrea', code: 'ER' },\r\n { name: 'Estonia', code: 'EE' },\r\n { name: 'Ethiopia', code: 'ET' },\r\n { name: 'Falkland Islands (Malvinas)', code: 'FK' },\r\n { name: 'Faroe Islands', code: 'FO' },\r\n { name: 'Fiji', code: 'FJ' },\r\n { name: 'Finland', code: 'FI' },\r\n { name: 'France', code: 'FR' },\r\n { name: 'French Guiana', code: 'GF' },\r\n { name: 'French Polynesia', code: 'PF' },\r\n { name: 'French Southern Territories', code: 'TF' },\r\n { name: 'Gabon', code: 'GA' },\r\n { name: 'Gambia', code: 'GM' },\r\n { name: 'Georgia', code: 'GE' },\r\n { name: 'Germany', code: 'DE' },\r\n { name: 'Ghana', code: 'GH' },\r\n { name: 'Gibraltar', code: 'GI' },\r\n { name: 'Greece', code: 'GR' },\r\n { name: 'Greenland', code: 'GL' },\r\n { name: 'Grenada', code: 'GD' },\r\n { name: 'Guadeloupe', code: 'GP' },\r\n { name: 'Guam', code: 'GU' },\r\n { name: 'Guatemala', code: 'GT' },\r\n { name: 'Guernsey', code: 'GG' },\r\n { name: 'Guinea', code: 'GN' },\r\n { name: 'Guinea-Bissau', code: 'GW' },\r\n { name: 'Guyana', code: 'GY' },\r\n { name: 'Haiti', code: 'HT' },\r\n { name: 'Heard Island and Mcdonald Islands', code: 'HM' },\r\n { name: 'Holy See (Vatican City State)', code: 'VA' },\r\n { name: 'Honduras', code: 'HN' },\r\n { name: 'Hong Kong', code: 'HK' },\r\n { name: 'Hungary', code: 'HU' },\r\n { name: 'Iceland', code: 'IS' },])\r\n \r\n const [countryList1, setCountryList1] = useState([{ name: \"france\", code: \"001\" }]);\r\n const [countryList2, setCountryList2] = useState([{ name: \"france\", code: \"001\" }, { name: \"rome\", code: \"002\" }, { name: \"croatia\", code: \"003\" }])\r\n\r\n\r\n return (\r\n You are shopping in United Kingdom
\r\n Shopping in the wrong region? \r\n\r\n
\r\n \r\n );\r\n}","import { Fragment, useState, forwardRef, useRef, useEffect } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport \"../Inputs/InputRe.css\";\r\nimport \"./Autocomplete.scss\"\r\nimport useCreateUrl from '../../../Hooks/useCreateUrl';\r\n\r\nconst Autocomplete = forwardRef((props, ref) => {\r\n const { options, setValue, setAddress,setShowCompanyList, searchTerm, onBlurFunction, placeholder, setSearchTerm, dropdownName, description, edit, labelText, inputSize, text, label, btnText, optionalField, setButtonEvent, helpField, inputFieldType, route, propValue, onClickFunction } = props;\r\n const [showDropdown, setShowDropdown] = useState(false);\r\n const [filteredOptions, setFilteredOptions] = useState([]);\r\n const [editable, setEditable] = useState(false);\r\n const [tempValue, setTempValue] = useState();\r\n const createUrl = useCreateUrl();\r\n const listRef = useRef(null);\r\n const [selectedIndex, setSelectedIndex] = useState(-1);\r\n const [alreadyHasUpdated, setAlreadyHasUpdated] = useState(false)\r\n\r\n\r\n useEffect(() => {\r\n if (propValue === \"\") {\r\n setTempValue(\"\")\r\n setSearchTerm(\"\") //handling of local state for autocomplete\r\n }\r\n else {\r\n setTempValue(propValue)\r\n setSearchTerm(propValue)\r\n }\r\n }, [propValue])\r\n\r\n\r\n useEffect(() => {\r\n \r\n setFilteredOptions(options) //initialising list \r\n\r\n }, [options])\r\n\r\n\r\n //keyboard handling of the autocomplete dropdown\r\n //for using up-down arrows to select options.\r\n\r\n useEffect(() => {\r\n\r\n if(selectedIndex > -1 && selectedIndex < listRef.current.children?.length){\r\n \r\n if (listRef.current && listRef.current.children) {\r\n const listItems = listRef.current.children;\r\n if (listItems?.length > 0) {\r\n listItems[selectedIndex]?.classList.add('selected');\r\n for (let i = 0; i < listItems?.length; i++) {\r\n if (i !== selectedIndex) {\r\n listItems[i].classList.remove('selected');\r\n }\r\n }\r\n\r\n\r\n const selectedListItem = listItems[selectedIndex];\r\n const listRect = listRef.current.getBoundingClientRect();\r\n const itemRect = selectedListItem.getBoundingClientRect();\r\n const offset = itemRect.top - listRect.top;\r\n const listHeight = listRect.bottom - listRect.top;\r\n const itemHeight = itemRect.bottom - itemRect.top;\r\n\r\n if (offset < 0) {\r\n listRef.current.scrollTop += offset;\r\n } else if (offset + itemHeight > listHeight) {\r\n listRef.current.scrollTop += (offset + itemHeight) - listHeight;\r\n }\r\n }\r\n }\r\n }\r\n }, [selectedIndex]);\r\n\r\n function handleKeyDown(event) {\r\n\r\n \r\n if (listRef.current && event.key === 'ArrowDown') {\r\n event.preventDefault();\r\n setSelectedIndex(prevIndex => {\r\n if (prevIndex === listRef.current.children?.length - 1) {\r\n return prevIndex;\r\n }\r\n else if (prevIndex === 0) {\r\n\r\n return prevIndex + 1;\r\n }\r\n else {\r\n return prevIndex + 1;\r\n }\r\n });\r\n } else if (listRef.current && event.key === 'ArrowUp') {\r\n event.preventDefault();\r\n setSelectedIndex(prevIndex => {\r\n if (prevIndex === 0) {\r\n return prevIndex;\r\n } else {\r\n return prevIndex - 1;\r\n }\r\n });\r\n } else if (event.key == 'Enter') {\r\n\r\n const currentOption = filteredOptions[selectedIndex];\r\n const address = [\r\n currentOption?.addressline1,\r\n currentOption?.town,\r\n currentOption?.country,\r\n currentOption?.postcode\r\n ].filter(Boolean).join(', ');\r\n \r\n setAlreadyHasUpdated(true);\r\n setValue({ \"name\": currentOption?.companyname, \"id\": currentOption?.companyid }); setAddress(address); setSearchTerm(currentOption?.companyname); setShowDropdown(!showDropdown) ; setShowCompanyList(!showDropdown)\r\n\r\n }\r\n }\r\n\r\n let inputWidth = () => {\r\n switch (inputSize) {\r\n case 'full-width':\r\n return \"full-width\"\r\n case 'large':\r\n return \"large\"\r\n case 'medium':\r\n return \"medium\"\r\n case 'small':\r\n return \"small\"\r\n default:\r\n return \"large\"\r\n }\r\n }\r\n\r\n //filter func in case for front end handling of lists\r\n\r\n const filterFunc = () => {\r\n if (dropdownName === \"company\") {\r\n return options.filter((op) =>\r\n (op.companyname.toLowerCase().includes(searchTerm?.toLowerCase()) || op?.postcode?.toLowerCase().includes(searchTerm.toLowerCase()))\r\n )\r\n }\r\n }\r\n\r\n\r\n //for highlighting mapped letters in the list\r\n\r\n function highlightMatch(text, match) {\r\n return text.replace(\r\n new RegExp(`(${match})`, \"gi\"),\r\n '$1'\r\n );\r\n }\r\n\r\n\r\n const labelField = () => {\r\n return \r\n \r\n {windowSize < 1000 &&\r\n
\r\n \r\n {windowSize > 1000 && \r\n \r\n
}\r\n \r\n Order Summary
\r\n\r\n
\r\n }\r\n \r\n \r\n
\r\n }\r\n\r\n\r\n function escapeSpecialChars(string) {\r\n return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'); // $& means the whole matched string\r\n }\r\n \r\n \r\n //rendering Suggestions on the basis of typed in letters\r\n\r\n function renderSuggestion(option) {\r\n const optionText1 = option[\"companyname\"];\r\n const optionText2 = option[\"postcode\"];\r\n const escapedTerm = escapeSpecialChars(searchTerm);\r\n const regex = new RegExp(`(${escapedTerm})`, 'gi');\r\n // const regex = new RegExp(`(${searchTerm})`, 'gi');\r\n const part1 = optionText1.split(regex);\r\n const part2 = optionText2.split(regex);\r\n const address = [\r\n option?.addressline1,\r\n option?.town,\r\n option?.country\r\n ].filter(Boolean).join(', ');\r\n\r\n return (\r\n \r\n \r\n {description ?
\r\n \r\n {description}
: \"\"}\r\n\r\n {(props.specs === \"search_input\") &&Type first letters to find..
}\r\n\r\n
\r\n \r\n})\r\n\r\nexport default Autocomplete;","import React from 'react';\r\nimport './SuccessBox.css';\r\nconst SuccessBox = (props) => {\r\n return 0) ? \"filled\" : \"\"}`}>\r\n { handleSearch(e) }}\r\n onFocus={() => { handleOnFocus() }}\r\n onKeyDown={handleKeyDown}\r\n onBlur={(e) => { if (handleOnBlur) { handleOnBlur(e) }; setShowDropdown(false); setShowCompanyList(false); }}\r\n type=\"text\"\r\n placeholder={placeholder}\r\n disabled={edit ? !editable : false}\r\n label={label}\r\n autocomplete=\"none\"\r\n value={tempValue}\r\n {...props} />\r\n {/* {route ? \r\n {btnText} \r\n : (edit || onClickFunction) ? \r\n : \"\"} */}\r\n\r\n {showDropdown && searchTerm?.length > 0 && dropdownName === \"company\" ?\r\n
\r\n - \r\n {filteredOptions?.map(renderSuggestion)}\r\n {/*
- { setValue(\"Others\"); window.location.href = route }}>Others */}\r\n
\r\n \r\n {props.children}\r\n
\r\n}\r\n\r\nexport default SuccessBox;","import { useTranslation } from 'react-i18next';\r\nimport { useEffect, useState, useContext } from 'react';\r\nimport \"./Company.scss\"\r\nimport '../../../i18n';\r\nimport { format } from 'react-string-format';\r\nimport InputWrapperRefacture from '../../UI/Inputs/InputWrapperRefacture';\r\nimport { APIGet, APIPost } from '../../API/APIRequest';\r\nimport { CheckoutPage } from '../CheckoutPage';\r\nimport Checkbox from '../../UI/Checkbox/Checkbox';\r\nimport Dropdown from '../../UI/Dropdown/Dropdown';\r\nimport Autocomplete from '../../UI/Autocomplete/Autocomplete';\r\nimport ErrorBox from '../../UI/ErrorBox/ErrorBox';\r\nimport { checkIsBlank, checkIsInvalid } from '../../Utilities/FieldValidations';\r\nimport { PaymentFormContext, billingCompany } from '../../Order/PaymentFormReducer';\r\nimport MessageBox from '../../UI/MessageBox/MessageBox';\r\nimport SuccessBox from '../../UI/SuccessBox/SuccessBox';\r\n\r\nexport function Company(props) {\r\n const { t, i18n } = useTranslation();\r\n const { setVatChanged, companyProperties, setBasketErrors, selectedCompany, setBasket, purchasingFor, setIsFilled, basket, fid, vatDetails, setSelectedCompany, IsFilled, addressType, vatError, setErrorStates, IsInvalid, setIsInvalid } = props;\r\n const [fieldProps, setFieldProps] = useState()\r\n const [IsBlank, setIsBlank] = useState({ company: false, vatNo: false });\r\n const [IsValid, setIsValid] = useState({vatNo:basket?.taxcode ? \"true\" : \"\"})\r\n const [IsApplied, setIsApplied] = useState(basket?.taxcode || false)\r\n const [companyList, setCompanyList] = useState([]);\r\n const [company, setCompany] = useState();\r\n const [searchTerm, setSearchTerm] = useState(\"\");\r\n const [companyAddress, setCompanyAddress] = useState(\"\");\r\n const [isChecked, setIsChecked] = useState(basket?.taxcode || false);\r\n const [showCompanyList, setShowCompanyList] = useState(false);\r\n const [vatNo, setVatNo] = useState(basket?.taxcode || props.vatNo || null);\r\n \r\n const companySuggestions = () => {\r\n\r\n APIGet({\r\n \"controller\": \"company\",\r\n \"action\": \"getcompanysuggestions\",\r\n \"environment\": null,\r\n \"identifier\": searchTerm\r\n }).then((response) => {\r\n if (response.data.success) {\r\n setCompanyList([...response.data.companies])\r\n \r\n }\r\n }).\r\n catch((error) => {\r\n var unexpected = [];\r\n unexpected.push(\"error.unexpected\");\r\n\r\n });\r\n }\r\n\r\n // Effect to trigger debounced API call when searchTerm changes\r\n useEffect(() => {\r\n if (searchTerm && showCompanyList) {\r\n companySuggestions(searchTerm);\r\n }\r\n }, [searchTerm]);\r\n\r\n useEffect(() => {\r\n \r\n if (companyProperties && Object.keys(companyProperties).length !== 0) {\r\n \r\n setFieldProps(companyProperties)\r\n \r\n }\r\n \r\n }, [companyProperties])\r\n\r\n \r\n useEffect(() => { \r\n if ((company || company === \"\")) {\r\n setSelectedCompany({COMPANY: company?.name, CompanyId: company?.id || null})\r\n\r\n if(fieldProps?.mandatory){\r\n updateCompanyFilledState(company?.name)\r\n }}\r\n\r\n if(company?.id && companyAddress && addressType === \"billingAddress\"){\r\n setSelectedCompany(selectedCompany => ({ ...selectedCompany, ADDRESS: companyAddress }))\r\n } \r\n\r\n }, [company])\r\n\r\n\r\n\r\n \r\n const handleOnVatChange = () => {\r\n if(vatNo){\r\n const commonPayload = {\r\n origincountrycode: basket.origincountrycode,\r\n destinationcountrycode: basket.destinationcountrycode,\r\n purchaseTarget: purchasingFor || \"unknown\",\r\n };\r\n \r\n let payload = {};\r\n \r\n if (!IsApplied) {\r\n payload = {\r\n ...commonPayload,\r\n taxcode: vatNo || null,\r\n };\r\n \r\n } else {\r\n payload = {\r\n ...commonPayload,\r\n taxcode: \"\",\r\n }; \r\n }\r\n \r\n APIGet({\r\n controller: \"basket\",\r\n action: \"recalculatetax\",\r\n environment: null,\r\n data: payload,\r\n identifier: fid,\r\n })\r\n .then((response) => {\r\n if (response.data?.basket) {\r\n if (!IsApplied) {\r\n setBasket(response.data?.basket);\r\n setIsValid({ vatNo: \"true\" });\r\n setSelectedCompany((selectedCompany) => ({ ...selectedCompany, vatNo: vatNo }));\r\n setIsApplied(true);\r\n setVatChanged(true);\r\n \r\n APIPost({\r\n controller: \"company\",\r\n action: \"updatetaxcode\",\r\n environment: null,\r\n data: { taxcode: vatNo },\r\n identifier: company.id,\r\n });\r\n } else { \r\n setVatNo(\"\");\r\n setBasket(response.data?.basket);\r\n setIsValid({ vatNo: \"\" }); //initial value\r\n setSelectedCompany((selectedCompany) => ({ ...selectedCompany, vatNo: \"\" }));\r\n setIsApplied(false);\r\n setVatChanged(false);\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n if (error?.response?.data?.errors) {\r\n setIsValid({ vatNo: \"false\" });\r\n }\r\n\r\n if (error.response && error.response.status === 400) {\r\n const errorData = error.response.data;\r\n \r\n if (errorData.errors && errorData.errors.includes('error.basketcompletedorder')) {\r\n // Handling the specific error related to a completed order\r\n setBasketErrors(errorData.errors);\r\n setBasket({});\r\n \r\n } \r\n \r\n } \r\n });\r\n }else{\r\n setIsValid({vatNo: \"empty\"})\r\n }\r\n props.isVatApplied(!IsApplied);\r\n \r\n };\r\n \r\n const handleOnBlur = (e) => {\r\n\r\n \r\n if (e.target.value && checkIsInvalid(e.target.value, \"address\")) {\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, COMPANY: { invalid: true, mandatory: true } }))\r\n }\r\n else {\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, COMPANY: { invalid: false, mandatory: true } }))\r\n }\r\n if (fieldProps.mandatory) {\r\n updateCompanyFilledState(e.target.value);\r\n }\r\n if (!vatNo || vatNo.length === 0) {\r\n setIsValid({ vatNo: \"\" })\r\n }\r\n }\r\n\r\n const updateCompanyFilledState=(value)=>{\r\n if (value.length > 0) {\r\n setIsFilled(IsFilled => ({ ...IsFilled, COMPANY: { filled: true, mandatory: true } }))\r\n }\r\n else {\r\n setIsFilled(IsFilled => ({ ...IsFilled, COMPANY: { filled: false, mandatory: true } }))}\r\n }\r\n\r\n const handleVatInput = (e) => {\r\n let value = e.target.value;\r\n if (!IsApplied) {\r\n if (value) {\r\n setVatNo(e.target.value)\r\n setIsValid({ vatNo: \"\" }) \r\n \r\n } else {\r\n setVatNo(null)\r\n // props.isVatApplied(IsApplied);\r\n }\r\n \r\n }\r\n }\r\n\r\n const handleCheckboxChange = (event) => {\r\n const checked = event.target.checked; // Get the actual checkbox value\r\n setIsChecked(!isChecked); // Update the local state\r\n \r\n //setIsChecked(!isChecked)\r\n //pass the vat check to grandparent - payment - VA\r\n props.isVatChecked(checked);\r\n if (checked) {\r\n setFieldProps({ ...companyProperties, \"mandatory\": true })\r\n } else {\r\n setFieldProps({ ...companyProperties})\r\n }\r\n \r\n };\r\n\r\n\r\n useEffect(()=>{\r\n if((basket?.origincountrycode || basket?.destinationcountrycode) && vatNo){\r\n handleOnVatChange(); //anytime country changes Vatcode needs to be emptied\r\n }\r\n \r\n }, [basket?.origincountrycode, basket?.destinationcountrycode]) \r\n\r\n\r\n useEffect(() => {\r\n if (IsApplied) { \r\n setErrorStates(errorData => ({ ...errorData, isVatEmpty: false })) \r\n }\r\n \r\n }, [IsApplied])\r\n\r\n\r\n return (<>\r\n \r\n \r\n
\r\n\r\n \r\n {addressType === \"billingAddress\" && vatDetails.showTaxCode && vatDetails.taxCodeFormat && isChecked ? \r\n \r\n {/*when company list array has items */}\r\n\r\n {handleOnBlur(e)}}\r\n inputSize=\"full-width\"\r\n searchTerm={searchTerm}\r\n setSearchTerm={setSearchTerm}\r\n setValue={setCompany}\r\n setAddress={setCompanyAddress}\r\n propValue={selectedCompany?.COMPANY}\r\n options={companyList}\r\n dropdownName=\"company\"\r\n />\r\n \r\n {(((IsFilled?.COMPANY && !IsFilled?.COMPANY?.filled) && fieldProps?.mandatory && !isChecked)) && \r\n \r\n {fieldProps ? format(t('addressfields.blankerrortext'), fieldProps?.label) : t('biilingdetails.blankcompany')} \r\n }\r\n {(isChecked && (selectedCompany?.COMPANY?.length <= 0 || selectedCompany?.COMPANY?.length === undefined)) &&\r\n \r\n {fieldProps ? format(t('addressfields.blankerrortext'), fieldProps?.label) : t('biilingdetails.blankcompany')} \r\n }\r\n {(IsInvalid[fieldProps?.fieldName]?.invalid) &&\r\n \r\n {format(t('addressfields.errortext'), fieldProps?.label)} \r\n }\r\n
\r\n\r\n {addressType === \"billingAddress\" && vatDetails.showTaxCode && vatDetails.taxCodeFormat ?\r\n \r\n
\r\n : \"\"\r\n }\r\n \r\n
\r\n \r\n : \"\"}\r\n\r\n \r\n );\r\n}\r\n\r\n","import React, { Component } from 'react';\r\n\r\nclass ErrorBoundary extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n error: null,\r\n errorInfo: null,\r\n };\r\n }\r\n\r\n componentDidCatch(error, errorInfo) {\r\n this.setState({\r\n error: error,\r\n errorInfo: errorInfo,\r\n });\r\n\r\n \r\n }\r\n\r\n render() {\r\n if (this.state.error) {\r\n // Render fallback UI when an error occurs\r\n return (\r\n \r\n \r\n handleOnVatChange()} //the edit button should only show when psw-requires is on\r\n btnText={!IsApplied ? t('checkout.vatapplybuttonlabel') : t('checkout.vatremovebuttonlabel')}\r\n onBlur={(e) => { handleOnBlur(e, \"vatNo\") }}\r\n onChange={(e) => { handleVatInput(e) }}\r\n inputFieldType=\"text\"\r\n invalidClass={(props.errorStates?.isVatEmpty || IsBlank?.vatNo || IsValid?.vatNo===\"false\" || IsValid?.vatNo===\"empty\" ) && isChecked && \"Invalid-input\"}\r\n aria-invalid={(props.errorStates?.isVatEmpty || IsBlank?.vatNo || IsValid?.vatNo===\"false\" || IsValid?.vatNo===\"empty\") && isChecked}\r\n aria-describedby=\"vatNo-error\"\r\n inputSize=\"small\"\r\n value={vatNo || selectedCompany.vatNo} />\r\n \r\n {IsValid.vatNo===\"false\" && {t('basket.invalidtaxcode')} }\r\n {(IsValid.vatNo === \"empty\" || (props.errorStates?.isVatEmpty && IsValid.vatNo === '')) && {t('basket.blanktaxcode')} } \r\n\r\n {IsValid.vatNo===\"true\" && {t('basket.taxcodeapplied')} }\r\n \r\n
\r\n\r\n \r\n
\r\n );\r\n }\r\n\r\n \r\n return (\r\n Something went wrong
\r\n{this.state.error.toString()}
\r\n\r\n
\r\n Error details:
\r\n{JSON.stringify(this.state.errorInfo, null, 2)}\r\n \r\n {this.props.children}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ErrorBoundary;\r\n","import React, { useEffect } from 'react';\r\n\r\nfunction LoqateAddressFinder(props) {\r\n \r\n\r\n useEffect(() => {\r\n const fields = [\r\n { element: \"search\", field: \"\" , mode: window.pca.fieldMode.SEARCH},\r\n { element: \"COMPANY\", field: \"Company\", mode: window.pca.fieldMode.POPULATE | window.pca.fieldMode.PRESERVE },\r\n { element: \"ADDRESS1\", field: \"Line1\" },\r\n { element: \"ADDRESS2\", field: \"Line2\", mode: window.pca.fieldMode.POPULATE },\r\n { element: \"ADDRESS3\", field: \"Line3\", mode: window.pca.fieldMode.POPULATE },\r\n { element: \"CITY\", field: \"City\", mode: window.pca.fieldMode.POPULATE },\r\n { element: \"COUNTY\", field: \"Province\", mode: window.pca.fieldMode.POPULATE },\r\n { element: \"POSTCODE\", field: \"PostalCode\" },\r\n { element: \"COUNTRY\", field: \"CountryName\", mode: window.pca.fieldMode.COUNTRY }\r\n ];\r\n const inputSearch = document.getElementById(\"search\")\r\n const options = props.options; //options for loqate\r\n\r\n const control = new window.pca.Address(fields, options); //new address instance\r\n\r\n control.listen(\"populate\", function(address, variations) { \r\n props.setLoqateProps(address); //gets use the address field on selection\r\n \r\n });\r\n\r\n control.listen(\"load\", function() { //wait for DOM to be ready\r\n control.setCountry(\"GBR\"); // Set the default country (example: \"GBR\" for United Kingdom)\r\n inputSearch.setAttribute(\"autocomplete\",\"none\")\r\n });\r\n\r\n control.load();\r\n\r\n return () => {\r\n control.destroy(); //cleaning up\r\n };\r\n\r\n }, [props.options]); \r\n\r\n \r\n\r\n return (<> );\r\n}\r\n\r\nexport default LoqateAddressFinder;\r\n","import { useTranslation } from 'react-i18next';\r\nimport { useState, useEffect, useContext, useRef } from 'react';\r\nimport InputWrapperRefacture from '../../UI/Inputs/InputWrapperRefacture';\r\nimport Dropdown from '../../UI/Dropdown/Dropdown';\r\nimport { Company } from '../../Checkout/Company/Company';\r\nimport AddressSearch from 'react-loqate';\r\nimport SearchDropdown from '../../UI/Dropdown/SearchDropdown';\r\nimport { updateBillingAddress, updateDeliveryAddress, deliveryCompany } from '../PaymentFormReducer';\r\n//import 'react-loqate/dist/react-loqate.cjs.development.css';\r\nimport '../../../i18n'\r\nimport { PaymentFormContext } from '../PaymentFormReducer';\r\nimport { checkIsBlank, checkIsInvalid } from '../../Utilities/FieldValidations';\r\nimport ErrorBox from '../../UI/ErrorBox/ErrorBox';\r\nimport { useLoqate } from 'react-loqate';\r\nimport { format } from 'react-string-format';\r\nimport { timeout } from 'workbox-core/_private';\r\nimport ErrorBoundary from './ErrorBoundary';\r\nimport LoqateAddressFinder from '../../Utilities/LoqateAddressFinder';\r\nimport { APIPost } from '../../API/APIRequest';\r\nimport { loqateRequestLogs } from '../../Utilities/Functions';\r\n\r\nexport function AddressFields(props) {\r\n const { t, i18n } = useTranslation();\r\n const {hasVatChanged, isChecked, addressType, initialFilledState, showCompany, loqateKey, showContinueButton, countryCode, setShowContinueButton, countryRef, selectedCompany, setSelectedCompany, setSelectedAddress, selectedAddress,\r\n IsFilled, setIsFilled, editMode, addressStructure, companyProperties, setCompanyProperties, IsInvalid, setIsInvalid, initialInvalidState } = props;\r\n const [inputWidth, setInputWidth] = useState(\"\");\r\n const [addressFormat, setAddressFormat] = useState(\"LOOK_UP\");\r\n const [showAddressLookupDropdown, seShowAddressLookupDropdown] = useState(false)\r\n const [showAddressLookUp, setShowAddressLookUp] = useState(editMode ? false : true);\r\n const [lookupInputFocused, setLookupInputFocused] = useState(false);\r\n const fieldsToNotMap = [\"JOBTITLE\", \"DEPARTMENT\"];\r\n const [loqateProps, setLoqateProps]= useState(\"\")\r\n const lookupref = useRef(null);\r\n const listref = useRef(null);\r\n const myRef = useRef(null);\r\n\r\n \r\n \r\n const handleOnBlur = (value, field, mandatory) => {\r\n if (checkIsBlank(value)) {\r\n setIsFilled({ ...IsFilled, [field]: { filled: false, mandatory: mandatory } })\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, [field]: {...IsInvalid[field], invalid :false, mandatory:mandatory} }))\r\n }\r\n else{\r\n setIsFilled({ ...IsFilled, [field]: { filled: true, mandatory: mandatory } })\r\n \r\n if (checkIsInvalid(value, \"address\")) {\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, [field]: {...IsInvalid[field], invalid :true, mandatory:mandatory} }))\r\n }\r\n else {\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, [field]: { ...IsInvalid[field], invalid: false, mandatory: mandatory } }))\r\n }\r\n }\r\n }\r\n\r\n\r\n //On mounting\r\n useEffect(() => {\r\n if (addressType === \"deliveryAddress\") {\r\n setShowAddressLookUp(!editMode)\r\n }\r\n\r\n }, [])\r\n\r\n useEffect(() => {\r\n\r\n if (addressType === \"deliveryAddress\") {\r\n if (countryRef.current !== countryCode && countryCode !== undefined) {\r\n setShowAddressLookUp(true)\r\n countryRef.current = countryCode\r\n }\r\n }\r\n if (addressType === \"billingAddress\") {\r\n setShowAddressLookUp(true)\r\n setSelectedCompany({COMPANY: \"\", CompanyId:null })\r\n }\r\n }, [countryCode])\r\n\r\n\r\n\r\n //when the billing address is the same checkbox is unchecked\r\n useEffect(() => {\r\n if (!isChecked && addressType === \"billingAddress\") {\r\n setAddressFormat(\"LOOK_UP\");\r\n }\r\n }, [isChecked])\r\n\r\n\r\n //handler for when filling the address details manually\r\n const handleAddressInput = (value, name, mandatory) => {\r\n // setIsFilled(IsFilled => ({ ...IsFilled, [name]: { filled: !checkIsBlank(value), mandatory: mandatory } }))\r\n setSelectedAddress(selectedAddress => ({ ...selectedAddress, [name]: value, SOURCE: addressFormat }))\r\n\r\n }\r\n\r\n\r\n //***last set of changes\r\n //to map country specific address structure fields to the corresponding loqate fields, we have mappingArray\r\n const mapLoqateFields = (loqateProps) => {\r\n let manualFocused=false;\r\n let tempIsFilled={...IsFilled};\r\n \r\n const mappingArray = {\r\n COUNTRY: \"CountryName\",\r\n ADDRESS1: \"Line1\",\r\n TOWN: \"City\",\r\n POSTCODE: \"PostalCode\",\r\n COMPANY: \"Company\",\r\n ADDRESS2: \"Line2\",\r\n ADDRESS3: \"Line3\",\r\n COUNTY: \"ProvinceName\"\r\n };\r\n \r\n \r\n addressStructure.map((field, i) => {\r\n let key = field.fieldName\r\n if (!fieldsToNotMap.includes(key)) {\r\n let loqateValue = loqateProps[mappingArray[key]]\r\n\r\n //when hideCompany is on, preventing population of companyField while mapping fields\r\n \r\n if (key === \"COMPANY\" && showCompany) {\r\n \r\n if(loqateValue){\r\n setSelectedCompany({ [key]: loqateValue, CompanyId: null });\r\n tempIsFilled={...tempIsFilled, [key]: {...tempIsFilled[key], filled:true, mandatory:field.mandatory}} //for error states\r\n }\r\n else{\r\n\r\n tempIsFilled={...tempIsFilled, [key]: {...tempIsFilled[key], filled:false, mandatory:field.mandatory}}\r\n\r\n }\r\n \r\n \r\n // if(addressType===\"billingAddress\" && loqateValue !== \"\"){\r\n // const element= document.getElementById(\"Credit/debit card\");\r\n // element.focus();\r\n // manualFocused=true; //when company field has been filled card list item will be focused..may change it to array[0] later\r\n // }\r\n }\r\n \r\n else if(key !== \"COUNTRY\" && key !== \"COMPANY\" ) {\r\n\r\n if(loqateValue){\r\n setSelectedAddress(selectedAddress => ({ ...selectedAddress, [key]: loqateValue }));\r\n tempIsFilled={...tempIsFilled, [key]: {...tempIsFilled[key], filled: true, mandatory:field.mandatory}}\r\n }\r\n else{\r\n \r\n tempIsFilled={...tempIsFilled, [key]: {...tempIsFilled[key], filled: false, mandatory:field.mandatory}}\r\n }\r\n\r\n }}\r\n\r\n })\r\n \r\n tempIsFilled={...tempIsFilled, ADDRESS: {mandatory: true, filled:true}}\r\n setIsFilled({...tempIsFilled});\r\n \r\n if(setShowContinueButton){\r\n setShowContinueButton(true)\r\n }\r\n setSelectedAddress(selectedAddress => ({ ...selectedAddress, SOURCE: \"LOQATE_API\" }));\r\n setShowAddressLookUp(false) //as the fields fill up, the look up will go away\r\n //for focusing on either company field or credit/debit option as per DOM elements after the field mapping\r\n\r\n if(addressType===\"billingAddress\" && !manualFocused){\r\n const element= document.getElementById(\"company\"); //in case there is company field but blank\r\n if(element){\r\n element.focus();\r\n }\r\n else{\r\n const el=document.getElementById(\"Credit/debit card\"); //in case there is no company field\r\n if(el){\r\n el.focus();\r\n }\r\n } }\r\n \r\n loqateRequestLogs(loqateProps.Id, loqateProps, 1) //for logging successful loqate calls - address selection\r\n\r\n }\r\n \r\n\r\n \r\n \r\n\r\n //handle button click for as we toggling between manual or lookup\r\n function handleLinkClick(e, format) {\r\n\r\n e.preventDefault();\r\n\r\n if (format === \"MANUAL\") {\r\n setAddressFormat(\"MANUAL\");\r\n setShowAddressLookUp(false);\r\n if(setShowContinueButton){\r\n setShowContinueButton(true)\r\n }\r\n \r\n //so that it goes back to that original mapped filled state\r\n setIsFilled(IsFilled => ({ ...initialFilledState, ADDRESS: { filled: true, mandatory: true }, COUNTRY: { ...IsFilled.COUNTRY } })) \r\n setIsInvalid(IsInvalid => ({ ...initialInvalidState, ADDRESS: { invalid: false, mandatory: true }, COUNTRY: { ...IsFilled.COUNTRY } })) \r\n \r\n }\r\n else {\r\n //on state change to lookup-address filled state should say true so to not give an error initially\r\n if(setShowContinueButton){\r\n setShowContinueButton(false)\r\n }\r\n setIsFilled(IsFilled => ({ ...initialFilledState, ADDRESS: { filled: true, mandatory: true }, COUNTRY: { ...IsFilled.COUNTRY }}));\r\n setIsInvalid(IsInvalid => ({ ...initialInvalidState, ADDRESS: { invalid: false, mandatory: true }, COUNTRY: { ...IsFilled.COUNTRY }}));\r\n setAddressFormat(\"LOOK_UP\");\r\n setShowAddressLookUp(true);\r\n }\r\n setSelectedAddress(selectedAddress => ({ COUNTRY: selectedAddress.COUNTRY })) //as country should stay always\r\n //only in case of lookup\r\n \r\n setSelectedCompany({COMPANY: \"\", CompanyId: null })\r\n \r\n \r\n\r\n }\r\n\r\n useEffect(()=>{\r\n\r\n const element = document.getElementsByClassName('address-styled-list')[0];\r\n if (element) {\r\n element.style.display = \"none\"\r\n }\r\n\r\n },[hasVatChanged])\r\n\r\n\r\n \r\n\r\n //mapping of fields we getting in our address structure call\r\n let addressfield = addressStructure?.map((field, i) => {\r\n //as we have company dropdown there\r\n if (field.fieldName != \"JOBTITLE\" && field.fieldName != \"COUNTRY\" && field.fieldName != \"DEPARTMENT\" && field.fieldName != \"COMPANY\") {\r\n\r\n return \r\n
\r\n }\r\n })\r\n\r\n //buttonUi for changing manual to lookup\r\n const changeAddressFormatLink = (format) => {\r\n if(showContinueButton || addressType===\"billingAddress\"){\r\n return \r\n handleOnBlur(e.target.value, [field.fieldName], field.mandatory)}\r\n onChange={(e) => handleAddressInput(e.target.value, [field.fieldName], field.mandatory)}\r\n />\r\n\r\n {/* {((IsFilled[field.fieldName] && !IsFilled[field.fieldName]?.filled)) && field.mandatory &&\r\n \r\n {format(t('addressfields.blankerrortext'), field.label)} \r\n \r\n } */}\r\n {/* \r\n {format(t('addressfields.blankerrortext'), field.label)} \r\n */}\r\n \r\n {((IsFilled[field.fieldName] && !IsFilled[field.fieldName]?.filled)) && field.mandatory && {format(t('addressfields.blankerrortext'), field.label)} }\r\n {IsInvalid[field.fieldName]?.invalid ? {format(t('addressfields.errortext'), field.label)} : \"\"}\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n }\r\n else {\r\n return { handleLinkClick(e, format) }}>{format === \"LOOK_UP\" ? t('address.uselookuplabel') : t('address.usemanuallabel')}\r\n }\r\n }\r\n\r\n //address section UI\r\n const addressSection = <>{addressfield}\r\n {addressType === \"deliveryAddress\" && showCompany && companyProperties && \r\n {format(t('addressfields.blankerrortext'), \"Address\")} \r\n \r\n }\r\n
\r\n\r\n {changeAddressFormatLink(\"MANUAL\")}\r\n \r\n\r\n return (\r\n <> \r\n {addressFormat === \"LOOK_UP\" ? showAddressLookUp ? <> {addressLookup} : <> {addressSection} : \"\"}\r\n\r\n {addressFormat === \"MANUAL\" ? showAddressLookUp ? <> {addressLookup} : <> {addressSection} : \"\"}\r\n \r\n );\r\n}\r\n\r\n","import { useTranslation } from 'react-i18next';\r\nimport { useState, useEffect, useContext, useRef, forwardRef, useImperativeHandle } from 'react';\r\nimport InputWrapperRefacture from '../../UI/Inputs/InputWrapperRefacture';\r\nimport Dropdown from '../../UI/Dropdown/Dropdown';\r\nimport { Company } from '../../Checkout/Company/Company';\r\nimport AddressSearch from 'react-loqate';\r\nimport SearchDropdown from '../../UI/Dropdown/SearchDropdown';\r\n//import 'react-loqate/dist/react-loqate.cjs.development.css';\r\nimport '../../../i18n'\r\nimport { PaymentFormContext, updateBillingAddress, updateBillingCompany } from '../PaymentFormReducer';\r\nimport { checkIsBlank } from '../../Utilities/FieldValidations';\r\nimport ErrorBox from '../../UI/ErrorBox/ErrorBox';\r\nimport { APIGet, getEnvironment } from '../../API/APIRequest';\r\nimport { AddressFields } from './AddressFields';\r\nimport { format } from 'react-string-format';\r\nimport { UpdateBasket } from './Basket';\r\n\r\nexport const BillingDetails = forwardRef((props, ref) => {\r\n const { t, i18n } = useTranslation();\r\n const { flags, deliveryCountryCode, showCompany, setBasketErrors, purchasingFor, setBasket, basket, fid, loqateKey, vatDetails, setBillingCountryCode, billingCountryCode, deliveryAddress, IsFilledDelivery, selectedAddress, selectedCompany, setSelectedAddress, setSelectedCompany, deliveryCompany, IsFilled, setIsFilled, deliveryAddressStructure, sectionComplete, setSectionComplete, updateAndRefreshBasket, errorStates, setErrorStates, setcompanyProperties,invalidState, setInvalidState } = props;\r\n const [isChecked, setIsChecked] = useState(true);\r\n\r\n const [country, setCountry] = useState({});\r\n const [countryCode, setCountryCode] = useState(\"\");\r\n const [initialFilledState, setInitialFilledState]=useState({});\r\n const [initialInvalidState, setInitialInvalidState]=useState({});\r\n const [addressStructure, setAddressStructure] = useState([])\r\n const [companyProperties, setCompanyProperties] = useState(props.companyProperties)\r\n const formRef = useRef(null);\r\n const [countryList, setCountryList] = useState([]);\r\n const [environment, setEnvironment] = useState(getEnvironment());\r\n const [hasVatChanged, setVatChanged] = useState(null);\r\n \r\n const getCountryList = async () => {\r\n if(sessionStorage.getItem(\"countryList\")){\r\n const list = JSON.parse(sessionStorage.getItem(\"countryList\"));\r\n setCountryList(list||[]);\r\n return;\r\n }\r\n\r\n return APIGet({\r\n \"controller\": \"country\",\r\n \"action\": \"getcountries\",\r\n \"environment\": environment,\r\n \"identifier\": null\r\n }).then((response) => {\r\n response.data.countries.sort((a, b) => {\r\n if (a.countryname < b.countryname) return -1;\r\n if (a.countryname > b.countryname) return 1;\r\n return 0;\r\n });\r\n \r\n sessionStorage.setItem(\"countryList\", JSON.stringify(response.data.countries))\r\n setCountryList(response.data.countries)\r\n }).catch((errors) => {\r\n \r\n });\r\n }\r\n\r\n \r\n const getAddressStructure = async (value, basketId) => {\r\n \r\n //initializing the state again\r\n setInitialFilledState({ COUNTRY: { filled: true, mandatory: true }})\r\n \r\n return APIGet({\r\n \"controller\": \"country\",\r\n \"action\": \"getaddressstructure\",\r\n \"environment\": environment,\r\n \"identifier\": value?.toLowerCase(),\r\n \"data\": {\r\n basketId: basketId\r\n }\r\n }).then((response) => {\r\n let addressfields = response.data.addressfields;\r\n let companyField = addressfields.find((item) => (item.fieldName === \"COMPANY\"));\r\n \r\n setCompanyProperties(companyField);\r\n setAddressStructure(addressfields);\r\n\r\n if(companyField && showCompany){\r\n setIsFilled(IsFilled => ({ ...IsFilled, COMPANY: { filled: true, mandatory: companyField?.mandatory } }));\r\n }\r\n \r\n if (flags.collectbillingaddress) {\r\n addressFieldsMap(addressfields)\r\n }\r\n }).catch((errors) => {\r\n \r\n });\r\n }\r\n \r\n const addressFieldsMap = (addressfields) => {\r\n addressfields.map((field, index) => {\r\n if (field.fieldName !== \"COUNTRY\") {\r\n //so that on state change from manual to lookup we can retain the original isFilled state\r\n setInitialFilledState(initialFilledState => ({...initialFilledState, [field.fieldName]: { ...initialFilledState[field.fieldName], filled: true, mandatory: field.mandatory } }));\r\n setInitialInvalidState(initialInvalidState => ({...initialInvalidState, [field.fieldName]: { ...initialInvalidState[field.fieldName], invalid: false, mandatory: field.mandatory } }));\r\n }\r\n })\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if (!countryList.length) {\r\n getCountryList();\r\n }\r\n if (deliveryAddress.COUNTRY) {\r\n setSelectedAddress({ ...selectedAddress, COUNTRY: deliveryAddress?.COUNTRY })\r\n setIsFilled(IsFilled => ({ ...IsFilled, COUNTRY: { filled: true, mandatory: true } }));\r\n \r\n }\r\n if (deliveryCompany.COMPANY) {\r\n setSelectedCompany({\r\n COMPANY: deliveryCompany?.COMPANY,\r\n CompanyId: deliveryCompany?.CompanyId || null\r\n });\r\n }\r\n if (deliveryCountryCode) {\r\n setCountryCode(deliveryCountryCode)\r\n }\r\n\r\n }, []) \r\n\r\n //if no postal address is req then using delivery country code to fetch address structure in billing\r\n useEffect(() => {\r\n setCountryCode(deliveryCountryCode);\r\n }, [deliveryCountryCode]);\r\n\r\n useEffect(() => {\r\n \r\n setAddressStructure(deliveryAddressStructure);\r\n addressFieldsMap(deliveryAddressStructure);\r\n \r\n }, [deliveryAddressStructure]);\r\n\r\n useEffect(()=>{\r\n \r\n setCompanyProperties(props?.companyProperties)\r\n \r\n }, [props?.companyProperties])\r\n\r\n useEffect(()=>{\r\n setBillingCountryCode(countryCode)\r\n },[countryCode])\r\n \r\n useEffect(() => {\r\n if (deliveryAddress?.COUNTRY) {\r\n setSelectedAddress({ ...selectedAddress, COUNTRY: deliveryAddress?.COUNTRY })\r\n setIsFilled({ ...IsFilled, COUNTRY: { filled: true, mandatory: true } })\r\n \r\n }\r\n }, [deliveryAddress?.COUNTRY])\r\n\r\n\r\n //when checkbox is there on DOM\r\n useEffect(() => {\r\n if (isChecked && flags.collectbillingaddress) {\r\n setAddressStructure(deliveryAddressStructure);\r\n setCountryCode(deliveryCountryCode);\r\n if(basket?.origincountrycode !== deliveryCountryCode){\r\n updateAndRefreshBasket(deliveryCountryCode,\"origincountrycode\");\r\n }\r\n setSelectedAddress(deliveryAddress);\r\n setSelectedCompany(deliveryCompany);\r\n setIsFilled(IsFilledDelivery);\r\n\r\n }\r\n else {\r\n setSelectedAddress({ COUNTRY: deliveryAddress?.COUNTRY })\r\n setSelectedCompany({COMPANY: \"\", CompanyId:null })\r\n }\r\n\r\n }, [isChecked])\r\n\r\n \r\n //on selection of country we need address structure from database\r\n const handleOnCountrySelect = (value) => {\r\n if (value?.countrycode && (countryCode !== value?.countrycode)) {\r\n setCountry(value);\r\n updateAndRefreshBasket(value.countrycode,\"origincountrycode\");\r\n getAddressStructure(value?.countrycode, fid)\r\n setIsFilled({COUNTRY: { ...IsFilled.COUNTRY, filled: true } })\r\n setCountryCode(value?.countrycode)\r\n setSelectedAddress({COUNTRY: value?.countryname }) //blanking out the obj data except for country\r\n }\r\n }\r\n \r\n //country field\r\n let countryField = <> \r\n { handleOnKeyDown(e) }}\r\n onBlur={(e) => { handleOnBlurLookup(e) }}\r\n onFocus={(e) => handleOnFocusLookup(e)}\r\n // onChange={(e) => handleOnChangeLookup(e)}\r\n invalidClass={IsFilled.ADDRESS && !IsFilled.ADDRESS?.filled && \"Invalid-input\"}\r\n aria-invalid={IsFilled.ADDRESS && !IsFilled.ADDRESS?.filled}\r\n aria-describedby=\"address-lookup-errors\"\r\n label={t('checkout.addresslabel')}\r\n placeholder={props?.isGift === \"gift\" ? t('placeholder.recipientaddresssearch') : t('placeholder.addresssearch') }\r\n \r\n {...props} />\r\n
\r\n \r\n {IsFilled.ADDRESS && !IsFilled.ADDRESS?.filled &&\r\n \r\n \r\n {format(t('addressfields.blankerrortext'), \"country\")} \r\n }\r\n
\r\n \r\n const deliveryAddressOptional = () => {\r\n // Get an array of [key, value] pairs\r\n const entries = Object.entries(props?.deliveryAddress).filter(([key, value]) => key !== 'SOURCE');\r\n const twoEntry = entries.find(([key, value]) => key='COUNTRY'); \r\n // Add the 'two' entry to the end of the filtered entries\r\n if (twoEntry) {\r\n entries.shift(twoEntry);\r\n entries.push(twoEntry);\r\n }\r\n return (\r\n <>\r\n \r\n
\r\n {IsFilled.COUNTRY && !IsFilled?.COUNTRY?.filled &&\r\n \r\n {t('billingdetails.billingaddress') }
\r\n\r\n {props.deliveryCompany.COMPANY ? props.deliveryCompany.COMPANY + '\\n' : '' } \r\n {entries.map(([key, value], index) => (\r\n <>\r\n {value}\r\n {index < entries.length - 1 &&
}\r\n \r\n ))} \r\n
\r\n
\r\n {isChecked && \r\n { setIsChecked(!isChecked) }}\r\n />\r\n
\r\n \r\n
\r\n }\r\n : \"\"}\r\n\r\n {(!(flags?.isdeliverypostaladdressrequired && flags?.collectbillingaddress) || !isChecked) ? countryField : \"\"} {/*included inside the checkbox} \r\n {/* shows up in all flows except print variant, collect billing address*/}\r\n\r\n\r\n {((!flags?.isdeliverypostaladdressrequired && flags?.collectbillingaddress) || !isChecked) ?\r\n \r\n
\r\n \r\n {deliveryAddressOptional()}\r\n
\r\n \r\n
\r\n\r\n //for later implementation\r\n const giftDetails=()=>{\r\n return <>\r\n \r\n
\r\n \r\n {/*If print variants then to be hidden */}\r\n \r\n \r\n
\r\n\r\n \r\n\r\n { handleOnBlur(e, \"firstName\") }}\r\n specs=\"text_input\"\r\n name=\"firstname\"\r\n value={details.firstName}\r\n type=\"text\"\r\n invalidClass={((IsFilledRecipient.firstName && !IsFilledRecipient.firstName.filled)|| IsInvalid.firstName.invalid) && \"Invalid-input\"}\r\n onKeyPress={onTextFieldKeyed}\r\n aria-invalid={IsFilledRecipient.firstName|| IsInvalid.firstName.invalid}\r\n aria-describedby=\"firstname-blank-error\"\r\n onChange={(e) => { handleOnChange(e.target.value, \"firstName\") }}\r\n />\r\n \r\n {IsFilledRecipient.firstName && !IsFilledRecipient.firstName.filled && {t('register.blankfirstname')} }\r\n {IsInvalid.firstName.invalid ? {t('checkout.incorrectfirstnameinput')} : \"\"}\r\n \r\n
\r\n \r\n
\r\n \r\n { handleOnBlur(e, \"lastName\") }}\r\n name=\"lastname\"\r\n type=\"text\"\r\n value={details.lastName}\r\n invalidClass={((IsFilledRecipient.lastName && !IsFilledRecipient.lastName.filled) || IsInvalid.lastName.invalid) && \"Invalid-input\"}\r\n specs=\"text-input\"\r\n onKeyPress={onTextFieldKeyed}\r\n aria-invalid={IsFilledRecipient.lastName || IsInvalid.lastName.invalid}\r\n aria-describedby=\"lastname-blank-error\"\r\n onChange={(e) => { handleOnChange(e.target.value, \"lastName\") }}\r\n />\r\n {IsFilledRecipient.lastName && !IsFilledRecipient.lastName.filled && {t('register.blanklastname')} }\r\n {IsInvalid.lastName.invalid ? {t('checkout.incorrectlastnameinput')} : \"\"}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n\r\n { handleOnBlur(e, \"userEmail\") }}\r\n placeholder={t('placeholder.recipientemail')}\r\n value={details.userEmail}\r\n onKeyPress={onTextFieldKeyed}\r\n invalidClass={((IsFilledRecipient.userEmail && !IsFilledRecipient.userEmail.filled && !optionalEmail ) || IsInvalid.userEmail.invalid) ? \"Invalid-input\" : \"\"}\r\n aria-invalid={(IsFilledRecipient.userEmail && !IsFilledRecipient.userEmail.filled && !optionalEmail) || IsInvalid.userEmail.invalid}\r\n aria-describedby=\"email-errors\"\r\n onChange={(e) => {handleOnChange(e.target.value, \"userEmail\") }}\r\n readOnly={\"\"} />\r\n\r\n \r\n {IsFilledRecipient.userEmail && !IsFilledRecipient.userEmail.filled && !optionalEmail && {t('error.recipientblankemailinput')} }\r\n {/* ? props.brandingElement?.mailValidError-----TODO */}\r\n {/* {getBrandedHtml('mailValidError')} : */}\r\n {IsInvalid.userEmail.invalid ? {t('login.incorrectemailinput')} : \"\"}\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n { handleOnBlur(e, \"deliveryDate\") }}\r\n name=\"deliveryDate\"\r\n type=\"date\"\r\n placeholder={t('checkout.giftdeliverydateplaceholder')}\r\n value={recipientDetails.deliveryDate}\r\n invalidClass={IsFilledRecipient.deliveryDate && \"Invalid-input\"}\r\n specs=\"text-input\"\r\n onKeyPress={onTextFieldKeyed}\r\n aria-invalid={IsFilledRecipient.deliveryDate}\r\n aria-describedby=\"deliveryDate-blank-error\"\r\n onChange={(e) => { setRecipientDetails(recipientDetails => ({ ...recipientDetails, deliveryDate: e.target.value })) }}\r\n />\r\n\r\n {IsFilledRecipient.lastName && {t('register.blanklastname')} }\r\n
\r\n \r\n
\r\n \r\n}\r\n \r\n return (\r\n <>\r\n {detailType ===\"recipient\"? recipient() : \"\"}\r\n {detailType ===\"giftDetails\" ? giftDetails() :\"\"}\r\n \r\n );\r\n})\r\n\r\n\r\n","\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useState, useContext, useImperativeHandle, useEffect, useRef, forwardRef } from 'react';\r\nimport '../../../i18n'\r\nimport { Location } from '../../Checkout/Location/Location';\r\nimport { AddressFields } from './AddressFields';\r\nimport Button from '../../UI/Buttons/Button';\r\nimport { APIGet, APIPost, getEnvironment } from '../../API/APIRequest';\r\nimport { RecipientDeliveryDetails } from './RecipientDeliveryDetails';\r\nimport { gtmEventTriggers } from '../../Utilities/GtmFunctions';\r\nimport { useAuth } from '../../Authentication/AuthenticationProvider';\r\nimport { GenericErrorBox } from '../../UI/ErrorBox/GenericErrorBox';\r\nimport { checkIsInvalid } from '../../Utilities/FieldValidations';\r\n\r\n\r\n\r\nexport const DeliveryDetails = forwardRef((props, ref) => {\r\n const { flags, setSectionComplete, setAlreadyPurchased, fid, setInitialFilledState, initialFilledState, optionalEmail, phoneNumber, giftRecipientDetails, setOptionalEmail, setPurchaseRestriction, checkForBasketRestrictions, variantIdCsv, deliveryCountryCode, companyProperties, setCompanyProperties, getAddressStructure, deliveryAddressStructure, showCompany, loqateKey, setBillingLoadingState, guestSession, setGiftRecipientDetails, recipientDetails, setRecipientDetails, setLoading, selectedAddress, selectedCompany, setSelectedAddress, setSelectedCompany, IsFilled, setIsFilled, setDeliveryAddressStructure, setDeliveryCountryCode, sectionComplete,updateAndRefreshBasket,invalidState, setInvalidState } = props;\r\n const { t, i18n } = useTranslation();\r\n const { basket, loading } = props\r\n const [countryCode, setCountryCode] = useState(deliveryCountryCode)\r\n const [IsInvalid, setIsInvalid] = useState({ userEmail: false, firstName: false, lastName: false });\r\n const [showContinueButton, setShowContinueButton] = useState(false)\r\n const [countryList, setCountryList] = useState(basket.countries || JSON.parse(sessionStorage.getItem(\"deliveryCountryList\")));\r\n const [errors, setErrors] = useState([]);\r\n const recipientRef=useRef();\r\n const [editMode, setEditMode] = useState(false);\r\n const [initialInvalidState, setInitialInvalidState]=useState({});\r\n const [environment, setEnvironment] = useState(getEnvironment());\r\n const [addressStructure, setAddressStructure] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const fieldRef = useRef();\r\n const countryRef = useRef(null);\r\n const deliveryErrorFocusRef=useRef(null);\r\n const params = new URLSearchParams(window.location.search);\r\n const purchasingFor= params.get(\"purchasingFor\");\r\n const auth = useAuth();\r\n\r\n useEffect(() => {\r\n if (countryCode && countryCode !== deliveryCountryCode) {\r\n setDeliveryCountryCode(countryCode) \r\n setSelectedAddress(selectedAddress => ({ COUNTRY: selectedAddress.COUNTRY })) ;\r\n setSelectedCompany({}); //blanking out data obj as country changes\r\n getAddressStructure(countryCode, fid)\r\n updateAndRefreshBasket(countryCode,\"destinationcountrycode\");\r\n }\r\n }, [countryCode])\r\n\r\n useEffect(()=>{\r\n if(countryList.length===0){\r\n setCountryList(basket.countries);\r\n }\r\n sessionStorage.setItem(\"deliveryCountryList\", JSON.stringify(basket.countries)) \r\n }, [fid, basket.id])\r\n \r\n useEffect(()=>{\r\n setAddressStructure(deliveryAddressStructure);\r\n if (flags.isdeliverypostaladdressrequired) {\r\n addressFieldsMap(deliveryAddressStructure)\r\n }\r\n }, [deliveryAddressStructure])\r\n\r\n\r\n const addressFieldsMap = (addressfields) => {\r\n addressfields.map((field, index) => {\r\n if (field.fieldName !== \"COUNTRY\") {\r\n //so that on state change from manual to lookup we can retain the original isFilled state\r\n setInitialFilledState(initialFilledState => ({...initialFilledState, [field.fieldName]: { ...initialFilledState[field.fieldName], filled: true, mandatory: field.mandatory } }));\r\n setInitialInvalidState(initialInvalidState => ({...initialInvalidState, [field.fieldName]: { ...initialInvalidState[field.fieldName], invalid: false, mandatory: field.mandatory } }));\r\n }\r\n })\r\n }\r\n\r\n function scrollToOffset(offset) {\r\n const duration = 200; // Animation duration in milliseconds\r\n const startY = window.pageYOffset || document.documentElement.scrollTop;\r\n const targetY = offset;\r\n const distance = targetY - startY;\r\n const startTime = performance.now();\r\n \r\n function step(currentTime) {\r\n const elapsed = currentTime - startTime;\r\n const nextPosition = startY + distance * (elapsed / duration);\r\n window.scrollTo(0, nextPosition);\r\n \r\n if (elapsed < duration) {\r\n window.requestAnimationFrame(step);\r\n }\r\n }\r\n \r\n window.requestAnimationFrame(step);\r\n }\r\n\r\n //for checking the variant type in order to show email field for recipient or not\r\n const checkProductTypeForGiftUser = (e) => {\r\n \r\n let typeArray = basket?.producttypes;\r\n \r\n typeArray.find((item, i)=>{\r\n //presence of sundry variant would not make a difference\r\n if(item!==\"Print\" && item!==\"Sundry\"){\r\n setOptionalEmail(false);\r\n }\r\n })\r\n }\r\n\r\n //on-mount\r\n useEffect(()=>{\r\n\r\n checkProductTypeForGiftUser();\r\n\r\n \r\n\r\n},[])\r\n\r\n const SaveGiftRecipientDetails = (e) => {\r\n setErrors(\"\")\r\n \r\n e.preventDefault();\r\n\r\n let userDataString = sessionStorage.getItem(\"adtoken\");\r\n let userData = JSON.parse(userDataString);\r\n let validation=validateDeliveryDetails(e);\r\n let validationStatus=validation.status;\r\n let reciDetails=validation.details;\r\n setRecipientDetails(reciDetails);\r\n \r\n if(validationStatus){\r\n\r\n let postData= {\r\n fid: basket?.id,\r\n email: reciDetails?.userEmail || null,\r\n firstName: reciDetails?.firstName,\r\n surname: reciDetails?.lastName,\r\n addressLine1 : selectedAddress?.ADDRESS1 || null,\r\n postcode: selectedAddress?.POSTCODE || null,\r\n country:selectedAddress?.COUNTRY || null\r\n }\r\n\r\n APIPost({\r\n \"controller\": \"auth\",\r\n \"action\": \"creategiftuser\",\r\n \"environment\": environment,\r\n \"headers\": [{\r\n \"key\": \"UserToken\",\r\n \"value\": auth?.userData?.token || userData?.token}], \r\n\r\n data: postData\r\n\r\n }).then((response) => {\r\n \r\n let user = response?.data?.user;\r\n \r\n if(user){\r\n let giftUser = {\r\n \"name\": user?.userfullname,\r\n \"token\": user?.userToken,\r\n \"username\": user?.username,\r\n \"partyid\": user?.partyid\r\n };\r\n\r\n checkForBasketRestrictions(user?.partyid, user?.username, basket)\r\n setGiftRecipientDetails(giftUser);\r\n \r\n if(basket.allowgifting){\r\n setSectionComplete(sectionComplete => ({ ...sectionComplete, deliveryDetails: true}))\r\n scrollToOffset(340);\r\n saveDeliveryDetailsToSession(reciDetails, giftUser); \r\n \r\n }}\r\n\r\n }).catch((error) => {\r\n \r\n var unexpected = [];\r\n unexpected.push(\"error.unexpected\");\r\n setErrors(unexpected);\r\n setIsLoading(false); \r\n \r\n });\r\n}\r\n}\r\n\r\n\r\n//settings for reinstating basket after the reload\r\nconst saveDeliveryDetailsToSession=(reciDetails, giftUser)=>{\r\n\r\n //storing delivery details\r\n let deliveryDetailsToShow= {\r\n \"recipient\": ((purchasingFor===\"gift\" && basket.allowgifting) || (!purchasingFor && basket.allowgifting)) ? {\r\n \"userEmail\": reciDetails?.userEmail ,\r\n \"firstName\": reciDetails?.firstName ,\r\n \"lastName\": reciDetails?.lastName} : {}, \r\n \"giftRecipientDetails\":{\r\n \"token\" : giftUser?.token || \"\",\r\n \"partyid\" : giftUser?.partyid || \"\"},\r\n \"company\": selectedCompany,\r\n \"address\": selectedAddress,\r\n \"phoneNumber\": phoneNumber,\r\n \"IsFilledDelivery\":IsFilled,\r\n \"countryCode\":countryCode,\r\n \r\n \r\n }\r\n \r\n if(deliveryDetailsToShow?.address?.COUNTRY){\r\n sessionStorage.setItem(\"sessionDeliveryDetails\", JSON.stringify(deliveryDetailsToShow));\r\n }\r\n}\r\n\r\nconst focusOnFirstError = () => {\r\n setTimeout(() => {\r\n let firstElement = deliveryErrorFocusRef.current?.querySelectorAll(\"input[invalidclass='Invalid-input']\")[0]\r\n firstElement?.focus();\r\n }, 200)\r\n\r\n}\r\n\r\n const validateDeliveryDetails = (e) => {\r\n e.preventDefault();\r\n setIsLoading(true) // set local loading state to be true\r\n setBillingLoadingState(true); \r\n \r\n let detailsFilled = true;\r\n let recipientDetailsFilled=true;\r\n let recipient;\r\n \r\n let newIsFilled = { ...IsFilled };\r\n let newIsInvalid = { ...IsInvalid };\r\n\r\n if (flags.isdeliverypostaladdressrequired) {\r\n if (selectedAddress.ADDRESS1 === undefined) {\r\n newIsFilled = { ...newIsFilled, ADDRESS: { filled: false, mandatory: true } };\r\n detailsFilled = false\r\n }\r\n } \r\n\r\n if (!selectedAddress.COUNTRY) {\r\n newIsFilled = { ...newIsFilled, COUNTRY: { filled: false, mandatory: true } }\r\n detailsFilled = false\r\n }\r\n\r\n if(( purchasingFor===\"gift\" && basket.allowgifting) || (!purchasingFor && basket.allowgifting)){\r\n\r\n recipient=recipientRef?.current?.ValidationOnSubmit()\r\n detailsFilled=recipient?.status;\r\n\r\n }\r\n \r\n //for checking company field\r\n if(!selectedCompany?.COMPANY && IsFilled.COMPANY?.mandatory && showCompany){\r\n newIsFilled = { ...newIsFilled, COMPANY: { filled: false, mandatory: true } }\r\n detailsFilled = false\r\n }\r\n \r\n //for validation of company value\r\n if (selectedCompany?.COMPANY?.length > 0 && checkIsInvalid(selectedCompany?.COMPANY, \"address\")) {\r\n newIsInvalid ={ ...newIsInvalid, COMPANY: { invalid: true, mandatory: false } }\r\n detailsFilled = false\r\n }\r\n else {\r\n newIsInvalid ={ ...newIsInvalid, COMPANY: { invalid: false, mandatory: false } }\r\n }\r\n \r\n\r\n if(flags.isdeliverypostaladdressrequired){\r\n for (let key in IsFilled) {\r\n \r\n if (key !== \"ADDRESS\" && key !== \"RECIPIENT\" && key !== \"COMPANY\") {\r\n if ((!selectedAddress[key] || selectedAddress[key] === '') && IsFilled[key]?.mandatory) {\r\n newIsFilled = { ...newIsFilled, [key]: { filled: false, mandatory: true } }\r\n detailsFilled = false\r\n }\r\n else if ((selectedAddress[key] && selectedAddress[key] !== '') && checkIsInvalid(selectedAddress[key], \"address\")) {\r\n newIsInvalid = { ...newIsInvalid, [key]: { invalid: true, mandatory: true } };\r\n detailsFilled = false\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n setIsFilled({ ...newIsFilled })\r\n setIsInvalid({ ...newIsInvalid })\r\n //for non-gift the validation will be completed here\r\n setTimeout(()=>{\r\n \r\n setBillingLoadingState(false);\r\n setLoading(false);\r\n \r\n },[500])\r\n \r\n if(!basket.allowgifting){\r\n scrollToOffset(340);\r\n }\r\n\r\n if (!detailsFilled) {\r\n\r\n setIsLoading(false);\r\n focusOnFirstError();\r\n\r\n } else {\r\n \r\n if(!basket.allowgifting){\r\n setSectionComplete(sectionComplete => ({ ...sectionComplete, deliveryDetails: detailsFilled }))\r\n saveDeliveryDetailsToSession(); \r\n }\r\n\r\n if (flags?.isdeliverypostaladdressrequired || (purchasingFor === \"gift\" && basket?.allowgifting)) {\r\n gtmEventTriggers(\"add_shipping_info\") //when delivery details are needed then on validation event will be triggered\r\n }\r\n \r\n }\r\n \r\n if(basket.allowgifting){\r\n return {status: detailsFilled, details:recipient?.details}\r\n }\r\n else{\r\n return detailsFilled;\r\n }\r\n\r\n}\r\n\r\n //edit delivery details\r\n const handleOnEdit = () => {\r\n setErrors(\"\")\r\n setEditMode(true);\r\n setIsLoading(false);\r\n sessionStorage.removeItem(\"sessionDeliveryDetails\");\r\n setSectionComplete({ ...setSectionComplete, deliveryDetails: false });\r\n setAlreadyPurchased({status:\"\", text:\"\"});\r\n setPurchaseRestriction({status:\"\", text:\"\"});\r\n }\r\n\r\n const deliveryAddressUI = () => {\r\n let { COUNTRY, SOURCE, ...address } = selectedAddress\r\n let addressArray = Object.entries(address).filter(([key, value]) => value !== '' && key !== \"COMPANY\").map(([key, value]) => value);\r\n let deliveryAddressUI = flags.isdeliverypostaladdressrequired ? <> {selectedCompany?.COMPANY && selectedCompany?.COMPANY + \"\\n\"} {Object.values(addressArray).join(\"\\n\")}, {selectedAddress?.COUNTRY} : selectedAddress?.COUNTRY\r\n return deliveryAddressUI;\r\n }\r\n\r\n\r\n const recipientDetailsUI=()=>{\r\n let recipientDetailsUI = <>\r\n\r\n { handleOnBlur(e, \"giftMessage\") }}\r\n name=\"giftMessage\"\r\n type=\"textbox\"\r\n value={recipientDetails.giftMessage}\r\n invalidClass={IsFilledRecipient.giftMessage && \"Invalid-input\"}\r\n specs=\"text-input\"\r\n onKeyPress={onTextFieldKeyed}\r\n aria-invalid={IsFilledRecipient.giftMessage}\r\n aria-describedby=\"giftMessage-blank-error\"\r\n onChange={(e) => { setRecipientDetails(recipientDetails => ({ ...recipientDetails, giftMessage: e.target.value })) }}\r\n />\r\n\r\n {IsFilledRecipient.lastName && {t('register.blanklastname')} }\r\n
\r\n {recipientDetails.firstName} {recipientDetails.lastName}
\r\n{recipientDetails.userEmail}
\r\n \r\n return recipientDetailsUI;\r\n }\r\n\r\n\r\n useEffect(() => {\r\n\r\n if (selectedAddress?.COUNTRY) {\r\n\r\n //country is always mandatory\r\n setIsFilled({ COUNTRY: { filled: true, mandatory: true } })\r\n \r\n if(!flags?.isdeliverypostaladdressrequired && !basket.allowgifting){\r\n saveDeliveryDetailsToSession(); //saving delivery details here for digital online variants\r\n }\r\n }\r\n }, [selectedAddress.COUNTRY])\r\n\r\n\r\n //add gift user state too \r\n\r\n return (\r\n \r\n <>{(sectionComplete?.deliveryDetails && flags.isdeliverypostaladdressrequired) || (basket.allowgifting && sectionComplete?.deliveryDetails) ?\r\n\r\n \r\n\r\n {(purchasingFor===\"gift\" && basket.allowgifting ) || (!purchasingFor && basket.allowgifting ) ? <> \r\n
\r\n :\r\n <>\r\n \r\n }\r\n \r\n );\r\n})","import { useTranslation} from 'react-i18next';\r\nimport {useEffect, useState, useContext, useRef, forwardRef, useImperativeHandle} from 'react';\r\nimport '../../../i18n'\r\nimport InputWrapperRefacture from '../../UI/Inputs/InputWrapperRefacture';\r\nimport Checkbox from '../../UI/Checkbox/Checkbox';\r\nimport { accountNumberRegex, sortCodeRegex } from '../../Utilities/EmailRegex';\r\nimport { APIGet, APIPost } from '../../API/APIRequest';\r\nimport setStateAsync from '../../Utilities/SetStateAsync';\r\nimport ErrorBox from '../../UI/ErrorBox/ErrorBox';\r\nimport { GetBasket } from './Basket';\r\nimport { PaymentFormContext, formState } from '../PaymentFormReducer';\r\nimport ReactHtmlParser from 'html-react-parser';\r\nimport { gtmEventTriggers } from '../../Utilities/GtmFunctions';\r\nimport { appendClientQueryParams } from '../../Utilities/Functions';\r\n\r\nexport const UpdateDirectDebitPaymentRequest = (props) => {\r\n return new Promise((resolve, reject) => {\r\n APIPost({\r\n \"controller\": \"DirectDebit\",\r\n \"action\": \"CompleteDirectDebitSetup\",\r\n \"environment\": null, \r\n \"data\": {\r\n fid: props.basket.id\r\n }\r\n }).then((response) => {\r\n resolve(response);\r\n }).catch((error) => {\r\n reject(error);\r\n });\r\n });\r\n}\r\n\r\nexport const DirectDebitForm = forwardRef((props, ref) => {\r\n\r\n const { t, i18n } = useTranslation();\r\n const { setddDetails, ddDetails, setIsAuthDebitCardChecked, setErrorStates, errorStates, showError, BankValidation} = props;\r\n const [IsBlank, setIsBlank] = useState({ accountholder: false, bankname: false, accountnumber: false, sortcode: false });\r\n const [IsInvalid, setIsInvalid]= useState({accountholder:false, bankname:false, accountnumber:false, sortcode:false}); \r\n const [errors, setErrors] = useState([]);\r\n const fid = props.basket.id; \r\n const [accountDetails, setAccountDetails] = useState({accountholder:\"\", bankname:\"\", accountnumber:\"\", sortcode:\"\"});\r\n const [isChecked, setIsChecked] = useState(false);\r\n const { bankVal } = props;\r\n\r\n const formatInputSortCode = (input) => {\r\n const formatted = input.replace(/(\\d{2})(\\d{2})(\\d{2})/, '$1-$2-$3');\r\n return formatted;\r\n };\r\n\r\n useImperativeHandle(ref, () => ({\r\n confirmPayment(event){\r\n APIGet({\r\n \"controller\": \"Basket\",\r\n \"action\": \"GetOrderId\",\r\n \"environment\": null, \r\n \"identifier\": fid\r\n }).then((response) => {\r\n \r\n gtmEventTriggers(\"add_payment_info\")\r\n \r\n let url= window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + response.data.OrderId;\r\n let updatedUrl= appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n \r\n }).catch((error) => {\r\n throw(error);\r\n }); \r\n },\r\n errors\r\n }));\r\n\r\n\r\n useEffect(()=>{\r\n setErrorStates(errorStates => ({ ...errorStates, authDD: false, isBlankAccountNameDD: false, isBlankBankDD:false, invalidAccountNumberDD:false, invalidSortcodeDD:false, invalidFormatAccountNumberDD:false, invalidFormatSortcodeDD:false, isBlankAccountNumberDD:false, isBlankSortCodeDD:false})) //resetting parent error states \r\n setddDetails(ddDetails=>({ ...ddDetails, bankname: \"\"})) //resetting parent dd bankname field\r\n },[])\r\n\r\n\r\n useEffect(() => {\r\n \r\n setIsAuthDebitCardChecked(isChecked);\r\n if (isChecked) {\r\n setErrorStates(errorStates => ({ ...errorStates, authDD: false }))\r\n }\r\n }, [isChecked, setIsAuthDebitCardChecked, setErrorStates])\r\n\r\n\r\n const handleOnBlur=(e, fieldType)=>{\r\n let value=e.target.value\r\n setStateAsync(() => {\r\n \r\n if (value.length < 1) {\r\n\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, [fieldType]: false }))\r\n setErrorStates(errorStates=>({...errorStates, invalidFormatAccountNumberDD:false})); //parent states\r\n setErrorStates(errorStates=>({...errorStates, invalidFormatSortCodeDD:false}));\r\n setIsBlank(IsBlank => ({ ...IsBlank, [fieldType]: true })) //local states\r\n \r\n\r\n }\r\n else {\r\n\r\n if(fieldType===\"accountholder\"){\r\n setErrorStates(errorStates => ({ ...errorStates, isBlankAccountNameDD: false }));\r\n }\r\n\r\n if(fieldType===\"bankname\"){\r\n setErrorStates(errorStates => ({ ...errorStates, isBlankBankDD: false }));\r\n }\r\n\r\n setIsBlank(IsBlank => ({ ...IsBlank, [fieldType]: false }))\r\n setddDetails(ddDetails=>({ ...ddDetails, [fieldType]: value})) //for parent validation setting values on blur\r\n\r\n if (fieldType === \"accountnumber\") {\r\n\r\n setErrorStates(errorStates=>({...errorStates, invalidAccountNumberDD:false}));\r\n setErrorStates(errorStates => ({ ...errorStates, isBlankAccountNumberDD: false })); //parent Validation\r\n \r\n if ((value?.match(accountNumberRegex) || []).length <= 0) {\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, accountnumber: true }))\r\n setErrorStates(errorStates=>({...errorStates, invalidFormatAccountNumberDD:true}));\r\n }\r\n else {\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, accountnumber: false }))\r\n setErrorStates(errorStates=>({...errorStates, invalidFormatAccountNumberDD:false}));\r\n }\r\n\r\n }\r\n else if (fieldType === \"sortcode\") {\r\n\r\n setErrorStates(errorStates=>({...errorStates, invalidSortCodeDD:false}));\r\n setErrorStates(errorStates => ({ ...errorStates, isBlankSortCodeDD: false })); //final validation\r\n\r\n if ((value?.match(sortCodeRegex) || []).length <= 0) {\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, sortcode: true }))\r\n setErrorStates(errorStates=>({...errorStates, invalidFormatSortCodeDD:true}));\r\n }\r\n else {\r\n setIsInvalid(IsInvalid => ({ ...IsInvalid, sortcode: false }))\r\n setErrorStates(errorStates=>({...errorStates, invalidFormatSortCodeDD:false}));\r\n }\r\n\r\n }\r\n }\r\n })\r\n }\r\n\r\n const handleOnChange=(value, keyName)=>{\r\n\r\n //assigning values to the local as well as parent states here\r\n \r\n setAccountDetails(accountDetails => ({ ...accountDetails, [keyName]: value}))\r\n setddDetails(ddDetails=>({ ...ddDetails, [keyName]: value}))\r\n \r\n }\r\n\r\n\r\n \r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n : \r\n
\r\n \r\n Recipient
\r\n{recipientDetailsUI()}
\r\n\r\n
\r\n Address
\r\n{deliveryAddressUI()}
\r\n\r\n
}\r\n {deliveryAddressUI()}
\r\n\r\n
\r\n\r\n \r\n 
\r\n
\r\n {t('directdebitform.title')}
\r\n\r\n \r\n
\r\n {ReactHtmlParser(props?.ddTerms)}
\r\n\r\n
\r\n\r\n \r\n { handleOnBlur(e, \"accountholder\" ) }}\r\n onChange={(e)=> {handleOnChange(e.target.value, \"accountholder\")}}\r\n />\r\n \r\n {(IsBlank.accountholder || errorStates?.isBlankAccountNameDD) && {t('directdebitform.blankaccountholder')} }\r\n
\r\n \r\n
\r\n\r\n \r\n { handleOnBlur(e, \"bankname\") }}\r\n onChange={(e)=> {handleOnChange(e.target.value, \"bankname\")}}\r\n />\r\n\r\n {(IsBlank.bankname || errorStates?.isBlankBankDD) && {t('directdebitform.blankbankname')} }\r\n\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n
\r\n\r\n\r\n \r\n
\r\n \r\n { handleOnBlur(e, \"accountnumber\") }}\r\n value={accountDetails.accountnumber}\r\n onChange={(e)=> {handleOnChange(e.target.value, \"accountnumber\")}}\r\n />\r\n \r\n {(IsBlank.accountnumber || errorStates.isBlankAccountNumberDD) && {t('directdebitform.blankaccountnumber')} }\r\n \r\n {(IsInvalid.accountnumber || errorStates.invalidFormatAccountNumberDD) && {t('directdebitform.invalidaccountnumberformat')} }\r\n\r\n {(errorStates.invalidAccountNumberDD && !errorStates.invalidFormatAccountNumberDD) && {t('directdebitform.invalidaccountnumber')} }\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n { handleOnBlur(e, \"sortcode\") }}\r\n onChange={(e)=> {handleOnChange(e.target.value, \"sortcode\")}}\r\n />\r\n \r\n {(IsBlank.sortcode || errorStates.isBlankSortCodeDD) && {t('directdebitform.blanksortcode')} }\r\n \r\n {(IsInvalid.sortcode || errorStates.invalidFormatSortCodeDD) &&{t('directdebitform.invalidsortcodeformat')} }\r\n\r\n {(errorStates.invalidSortCodeDD && !errorStates.invalidFormatSortCodeDD) && {t('directdebitform.invalidsortcode')} }\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n );\r\n})","import { useTranslation } from 'react-i18next';\r\nimport { useEffect, useState, useContext, useRef, forwardRef, useImperativeHandle } from 'react';\r\nimport '../../../i18n'\r\nimport { APIGet, APIPost } from '../../API/APIRequest';\r\nimport { ProcessErrors } from '../../Utilities/ErrorBox';\r\nimport { PaymentFormContext, formState } from '../PaymentFormReducer';\r\nimport ReactHtmlParser from 'html-react-parser';\r\nimport { gtmEventTriggers } from '../../Utilities/GtmFunctions';\r\nimport { appendClientQueryParams } from '../../Utilities/Functions';\r\n\r\n\r\nexport const UpdateInvoicePaymentRequest = (props) => {\r\n return new Promise((resolve, reject) => {\r\n APIPost({\r\n \"controller\": \"Invoice\",\r\n \"action\": \"CompleteInvoiceSetup\",\r\n \"environment\": null,\r\n \"data\": {\r\n fid: props.basket.id\r\n }\r\n }).then((response) => {\r\n resolve(response);\r\n }).catch((error) => {\r\n reject(error);\r\n });\r\n });\r\n}\r\n\r\nexport const Invoice = forwardRef((props, ref) => {\r\n const { t, i18n } = useTranslation();\r\n const fid = props.basket.id;\r\n const [ errors, setErrors] = useState([]);\r\n const [ invoiceText, setInvoiceText] = useState(\"\");\r\n const [ actions, setActions] = useState([]);\r\n const { setErrorStates, errorStates, showError } = props;\r\n\r\n useImperativeHandle(ref, () => ({\r\n confirmPayment(event) {\r\n APIGet({\r\n \"controller\": \"Basket\",\r\n \"action\": \"GetOrderId\",\r\n \"environment\": null, \r\n \"identifier\": fid\r\n }).then((response) => {\r\n \r\n gtmEventTriggers(\"add_payment_info\")\r\n let url= window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + response.data.OrderId ;\r\n \r\n let updatedUrl= appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n \r\n }).catch((error) => {\r\n throw (error);\r\n });\r\n },\r\n errors\r\n }));\r\n\r\n const InvoicePaymentText = () => {\r\n return new Promise((resolve, reject) => {\r\n APIGet({\r\n \"controller\": \"textasset\",\r\n \"action\": \"getsitetextassetbyname\",\r\n \"environment\": null,\r\n \"data\": {\r\n \"name\": \"paymentByInvoice\"\r\n }\r\n }).then((response) => {\r\n resolve(response);\r\n }).catch((error) => {\r\n reject(error);\r\n });\r\n });\r\n\r\n };\r\n\r\n useEffect(() => {\r\n if (invoiceText === \"\" && actions.length === 0) {\r\n actions.push(\"GetWebText\");\r\n InvoicePaymentText().then((response) => {\r\n setInvoiceText(response.data.textasset);\r\n }).catch((error) => {\r\n setErrors(ProcessErrors(errors));\r\n });\r\n }\r\n })\r\n\r\n\r\n return (\r\n { setIsChecked(!isChecked) }}\r\n id=\"debitAuth\"\r\n name=\"debitAuth\"\r\n label={t('directdebitform.accountholderauth')}\r\n />\r\n\r\n {showError && (!isChecked || errorStates.authDD) && (\r\n \r\n {t('directdebitform.accountholderauthError')} \r\n \r\n )}\r\n\r\n
\r\n \r\n {invoiceText &&
);\r\n})","import { useTranslation } from 'react-i18next';\r\nimport { useEffect, useState } from 'react';\r\nimport { format } from 'react-string-format';\r\nimport '../../../i18n'\r\nimport Checkbox from '../../UI/Checkbox/Checkbox';\r\nimport ErrorBox from '../../UI/ErrorBox/ErrorBox';\r\nimport { APIGet, getEnvironment } from '../../API/APIRequest';\r\nimport { useParams } from 'react-router';\r\nimport DOMPurify from 'dompurify';\r\n\r\nexport function MarketingPreferences(props, errorStates) {\r\n const { t, i18n } = useTranslation();\r\n const [isChecked, setIsChecked] = useState(false);\r\n const [cleanDpaQuestionHtml, setCleanDpaQuestionHtml] = useState([]);\r\n const [dpa, setDpa] = useState(\"\");\r\n const { environment } = useParams();\r\n \r\n const loadDPA = async () => {\r\n \r\n await APIGet({\r\n \"controller\": \"auth\",\r\n \"action\": \"getregistrationdpa\",\r\n \"environment\": environment,\r\n })\r\n .then(function (response) {\r\n let dpa= response.data?.dpaquestion;\r\n CheckForDpaQuestionText(dpa?.questiontext); \r\n cleanDpaText(dpa?.questiontext) //checking if dpa question text is blank\r\n setDpa(dpa); //this is also async..so may take time so directly pass in the function.\r\n setIsChecked(dpa?.defaultticked);\r\n })\r\n .catch(function (error) {\r\n \r\n })\r\n }\r\n\r\n const CheckForDpaQuestionText=(dpa)=>{\r\n \r\n let div = document.createElement('div');\r\n \r\n div.innerHTML = dpa;\r\n \r\n let textContent = div.textContent; \r\n \r\n let trimmedText = textContent.trim(); \r\n \r\n //check for blank question text\r\n if(trimmedText===\"\"){\r\n props.setIsDpaQuestionTextBlank(\"true\");\r\n }else{\r\n props.setIsDpaQuestionTextBlank(\"false\");\r\n }\r\n\r\n }\r\n\r\n useEffect(() => {\r\n\r\n loadDPA();\r\n\r\n }, [])\r\n\r\n const cleanDpaText=(dpa)=>{\r\n const cleanDpaHtml = DOMPurify.sanitize(dpa, {\r\n ALLOWED_ATTR: ['target', 'href', 'class', 'id', 'style'], // Add any other allowed attributes here\r\n });\r\n\r\n setCleanDpaQuestionHtml(cleanDpaHtml); \r\n }\r\n\r\n useEffect(() => {\r\n props.setIsMarketingPreferencesChecked(isChecked);\r\n if (isChecked) {\r\n props.setErrorStates(errorStates => ({ ...errorStates, marketingPreferencesNotTicked: false }))\r\n }\r\n\r\n }, [isChecked])\r\n\r\n return (<>{(dpa?.questiontext && props.isDpaQuestionTextBlank===\"false\") &&\r\n {ReactHtmlParser(invoiceText)}
}\r\n \r\n\r\n \r\n
\r\n }\r\n );\r\n}\r\n","import React, { Component, useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../../i18n'\r\n\r\nexport function PaymentTypeLogo(props) {\r\n const { t, i18n } = useTranslation();\r\n let paymentType = props.paymentType;\r\n const {walletMethods, awaitWalletCheck} = props;\r\n const [content, setContent] = useState([]);\r\n const [animatedContent, setAnimatedContent] = useState([]);\r\n const [visibleIconIndex, setVisibleIconIndex] = useState(-1);\r\n \r\n const toggleVisibleIndex = () => {\r\n\r\n setInterval(() => {\r\n setVisibleIconIndex((prev) => {\r\n return prev < animatedContent.length - 1 ? prev + 1 : 0\r\n })\r\n }, 2000)\r\n }\r\n\r\n useEffect(() => {\r\n\r\n if (paymentType.subpaymenttypes && !awaitWalletCheck ) {\r\n displayLogos();\r\n }\r\n\r\n }, [])\r\n\r\n useEffect(() => {\r\n\r\n if (paymentType.subpaymenttypes && awaitWalletCheck && walletMethods !== \"\" ) {\r\n displayLogos();\r\n }\r\n\r\n }, [walletMethods])\r\n\r\n useEffect(() => {\r\n if (animatedContent.length > 0) {\r\n //only when animatedContent has elements\r\n toggleVisibleIndex();\r\n }\r\n\r\n }, [animatedContent])\r\n\r\n\r\n const displayLogos = () => {\r\n\r\n let logoLimit = 3;\r\n let newContent = [...content];\r\n let newAnimatedContent = [...animatedContent] \r\n \r\n if(awaitWalletCheck){\r\n\r\n if(walletMethods?.applePayAvailable){\r\n newContent.unshift(\r\n {t('payment.marketingpreferencesnotticked')} \r\n : \"\"}\r\n
\r\n \r\n {animatedContent.map((item, index) => {\r\n return
\r\n : \"\"}\r\n \r\n )\r\n\r\n}","import React, { Component, useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../../i18n'\r\nimport { PaymentTypeLogo } from './PaymentTypeLogo'\r\nimport InputWrapperRefacture from '../../UI/Inputs/InputWrapperRefacture';\r\nimport useResize from '../../../Hooks/useResize';\r\n\r\nexport function PaymentSelection(props) {\r\n const { t, i18n } = useTranslation();\r\n const [paymentTypeValue, setPaymentType] = useState(\"\");\r\n const {labelName, paymentProvider, walletMethods, paymentTypes, enableWallets} = props;\r\n let windowSize = useResize();\r\n\r\n //focus on payment method on on-click of the whole bar\r\n const handleOnClick=(e,id)=>{\r\n const paymentMethod = document.querySelector(`#radio${t(id)}`)\r\n props.setErrorStates(errorStates=>({...errorStates, noPaymentSelected: false}))\r\n if(paymentMethod){\r\n paymentMethod.focus();\r\n paymentMethod.click();\r\n }\r\n }\r\n \r\n\r\n const displayData = () => {\r\n\r\n return (\r\n\r\n \r\n {item}\r\n
\r\n })}\r\n \r\n
\r\n\r\n\r\n )\r\n }\r\n\r\n let content = displayData();\r\n\r\n return (\r\n \r\n
\r\n\r\n {props.paymentTypes?.map((paymentType) => (\r\n \r\n handleOnClick(e,paymentType.paymenttypeid)} className={`${(paymentType.subpaymenttypes.length > 3 && windowSize < 768) ? \"payment-wrapper-mobile\" : \"payment-wrapper\"}`}>\r\n
\r\n ))}\r\n \r\n \r\n { setPaymentType(paymentType.paymenttypeid); props.onChangePaymentSelection(paymentType) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n {content} \r\n
\r\n );\r\n\r\n}","import { useTranslation} from 'react-i18next';\r\nimport React, { forwardRef, useContext, useState, useImperativeHandle, useRef, useEffect } from 'react';\r\nimport { client, dataCollector } from \"braintree-web\"\r\nimport dropin from \"braintree-web-drop-in\"\r\nimport '../../../i18n'\r\nimport ErrorBox from '../../UI/ErrorBox/ErrorBox';\r\nimport { APIPost } from '../../API/APIRequest'\r\nimport { gtmEventTriggers} from '../../Utilities/GtmFunctions';\r\nimport { appendClientQueryParams} from '../../Utilities/Functions';\r\n\r\n\r\n export const GetPaypalClientToken = (fid) => {\r\n return new Promise((resolve, reject) => {\r\n \r\n APIPost({\r\n \"controller\": \"Paypal\",\r\n \"action\": \"GetClientToken\",\r\n \"environment\": null,\r\n \"identifier\": fid\r\n }).then((response) => {\r\n \r\n resolve(response.data.clienttoken);\r\n }).catch((error) => {\r\n reject(error);\r\n }); \r\n });\r\n }\r\n\r\n// dummy function to keep process happy\r\nexport const UpdatePaypalPaymentRequest = (props) => {\r\n return new Promise((resolve, reject) => {\r\n resolve(true);\r\n });\r\n}\r\n \r\n\r\n\r\nexport const PaypalForm = forwardRef((props, ref) => {\r\n const { t, i18n } = useTranslation();\r\n const [errors, setErrors] = useState([]);\r\n const [ paypalClientToken, setPaypalClientToken ] = useState(null);\r\n const [ dropinInstance, setDropinInstance ] = useState(null);\r\n const [dropinInitialized, setDropinInitialized] = useState(false);\r\n \r\n const fid = props.basket.id;\r\n\r\n \r\n const observer = new MutationObserver((mutations, observer) => {\r\n mutations.forEach((mutation) => {\r\n const { target } = mutation;\r\n \r\n if (mutation.attributeName === 'class') {\r\n if (mutation.target.classList.contains('braintree-show-methods')) {\r\n //GetPaymentMethod();\r\n }\r\n }\r\n });\r\n });\r\n\r\n const AttachObserver = () => {\r\n var dropinContainer = document.getElementById('dropin-container');\r\n\r\n observer.observe(dropinContainer, {\r\n subtree: true,\r\n attributes: true\r\n });\r\n //var dropinInstance = null;\r\n //var clientInstance = null;\r\n //var deviceData = null;\r\n\r\n //GetDeviceData(); \r\n }\r\n \r\n const GetDeviceData = () => {\r\n return new Promise((resolve, reject) => {\r\n client.create({\r\n authorization: paypalClientToken\r\n }, function(errClientCreate, clientInstance) {\r\n // Creation of any other components...\r\n if (errClientCreate) {\r\n \r\n reject(errClientCreate);\r\n }\r\n dataCollector.create({\r\n client: clientInstance\r\n }, function (errCollectorCreate, dataCollectorInstance) {\r\n if (errCollectorCreate) {\r\n // Handle error in creation of data collector\r\n \r\n reject(errCollectorCreate);\r\n }\r\n \r\n // At this point, you should access the dataCollectorInstance.deviceData value and provide it\r\n // to your server, e.g. by injecting it into your form as a hidden input.\r\n resolve(dataCollectorInstance.deviceData);\r\n });\r\n });\r\n }); \r\n }\r\n\r\n\r\n const GetPaymentMethod = (deviceData) => {\r\n return new Promise((resolve, reject) => {\r\n \r\n \r\n if (dropinInstance) {\r\n dropinInstance.requestPaymentMethod((error, payload) => {\r\n // Step four: when the user is ready to complete their\r\n // transaction, use the dropinInstance to get a payment\r\n // method nonce for the user's selected payment method, then add\r\n // it a the hidden field before submitting the complete form to\r\n // a server-side integration\r\n \r\n APIPost({\r\n \"controller\": \"Paypal\",\r\n \"action\": \"ProcessPayment\",\r\n \"environment\": null, \r\n \"data\": {\r\n fid: fid,\r\n deviceData: deviceData,\r\n nonce: payload.nonce,\r\n email: payload.details.email\r\n }\r\n }).then((response) => {\r\n resolve(response);\r\n }).catch((error) => {\r\n reject(error);\r\n });\r\n\r\n });\r\n }\r\n });\r\n }\r\n\r\n const InitializeDropIn = (paypalClientToken) => {\r\n return new Promise((resolve, reject) => {\r\n dropin.create({\r\n authorization: paypalClientToken,\r\n container: '#dropin-container',\r\n card: false,\r\n paypal: {\r\n flow: 'vault',\r\n landingPageType: 'login',\r\n buttonStyle: {\r\n color: 'black',\r\n shape: 'rect',\r\n size: 'medium',\r\n label: 'paypal',\r\n tagline: 'false'\r\n }\r\n }\r\n }, (createError, instance) => {\r\n if (createError) {\r\n \r\n reject(createError);\r\n }\r\n else {\r\n instance.on('paymentMethodRequestable', onAuthenticated);\r\n resolve(instance);\r\n }\r\n });\r\n });\r\n \r\n }\r\n\r\n const onAuthenticated = (event) => {\r\n props.onAuthentication(event.paymentMethodIsSelected);\r\n }\r\n\r\n \r\n\r\n useImperativeHandle(ref, () => ({\r\n confirmPayment(event) {\r\n GetDeviceData().then((deviceData)=>{\r\n GetPaymentMethod(deviceData).then((response)=>{\r\n \r\n gtmEventTriggers(\"add_payment_info\")\r\n \r\n let url= window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + response.data.OrderId;\r\n let updatedUrl= appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n \r\n }).catch((paymentMethodError) => {\r\n setErrors(paymentMethodError);\r\n })\r\n }).catch((deviceError) => {\r\n setErrors(deviceError);\r\n });\r\n },\r\n errors\r\n }));\r\n\r\n useEffect(() => {\r\n \r\n if (!paypalClientToken) {\r\n GetPaypalClientToken(props.basket.id).then((response) => {\r\n \r\n setPaypalClientToken(response);\r\n }).catch((error) => {\r\n\r\n });\r\n }\r\n \r\n if (paypalClientToken) {\r\n if (dropinInstance) {\r\n dropinInstance\r\n .teardown()\r\n .then(() => {\r\n InitializeDropIn(paypalClientToken).then((response) => {\r\n \r\n setDropinInstance(response);\r\n setDropinInitialized(true);\r\n }).catch((error) => {\r\n\r\n });\r\n });\r\n } else {\r\n InitializeDropIn(paypalClientToken).then((response) => {\r\n \r\n setDropinInstance(response);\r\n setDropinInitialized(true);\r\n }).catch((error) => {\r\n\r\n });\r\n }\r\n }\r\n \r\n }, [paypalClientToken, dropinInitialized])\r\n\r\n \r\n return (\r\n <> \r\n \r\n
\r\n\r\n \r\n
\r\n {t('paypal.instructionslabel')}
\r\n\r\n \r\n
\r\n \r\n );\r\n})","import React, { forwardRef,useContext, useState, useImperativeHandle, useRef, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { loadStripe } from '@stripe/stripe-js';\r\nimport { APIGet, APIPost } from '../../API/APIRequest';\r\nimport { useElements, useStripe, Elements, PaymentElement } from '@stripe/react-stripe-js';\r\nimport '../../../i18n'\r\nimport { PaymentFormContext, updateBillingAddress } from '../PaymentFormReducer';\r\nimport InputWrapperRefacture from '../../UI/Inputs/InputWrapperRefacture';\r\nimport ErrorBox from '../../UI/ErrorBox/ErrorBox';\r\nimport { gtmEventTriggers } from '../../Utilities/GtmFunctions';\r\nimport MessageBox from '../../UI/MessageBox/MessageBox';\r\n\r\n\r\nexport const InitialiseStripe = (props) => {\r\n return new Promise((resolve, reject) => {\r\n let basket = props.basket;\r\n const data = new FormData();\r\n let action = \"createpaymentintent\";\r\n if (basket.offertypename === \"paid free trial\" || basket.offertypename === \"free trial\")\r\n {\r\n action = \"createsetupintent\";\r\n }\r\n data.append(\"basketId\", basket.id);\r\n data.append(\"paymentTypeId\", props.paymentSelection);\r\n data.append(\"publisherCurrencyId\", basket.publishercurrencyid);\r\n\r\n APIPost({\r\n \"controller\": \"stripe\",\r\n \"action\": action,\r\n \"environment\": null,\r\n \"data\": data\r\n })\r\n .then((response) => {\r\n let publicKey = response.data.paymentproviderusername;\r\n \r\n let stripeResult = {\r\n \"publickey\": publicKey,\r\n \"secret\": response.data.secretkey,\r\n \"intentid\": response.data.stripeintentid\r\n };\r\n \r\n resolve(stripeResult);\r\n }).catch((error) => {\r\n \r\n reject(error);\r\n });\r\n });\r\n\r\n}\r\n\r\nexport const UpdateStripePaymentRequest = (props) => {\r\n return new Promise((resolve, reject) => {\r\n let basket = props.basket;\r\n console.log(basket);\r\n let action = \"updatepaymentintent\";\r\n if (basket.offertypename === \"paid free trial\") {\r\n action = \"updatesetupintent\";\r\n }\r\n const data = new FormData();\r\n data.append(\"basketId\", basket.id);\r\n data.append(\"orderId\", props.orderId);\r\n data.append(\"stripeIntentId\", props.stripeIntentId);\r\n APIPost({\r\n \"controller\": \"stripe\",\r\n \"action\": action,\r\n \"environment\": null,\r\n \"data\": data\r\n })\r\n .then((response) => {\r\n resolve(response);\r\n }).catch((error) => {\r\n reject(error);\r\n });\r\n });\r\n}\r\n\r\nexport const GetCardInfo = (props) => {\r\n return new Promise((resolve, reject) => {\r\n APIGet({\r\n \"controller\": \"stripe\",\r\n \"action\": \"getcardinfo\",\r\n \"environment\": null,\r\n \"identifier\": props.fid\r\n }).then((cardResponse) => {\r\n resolve(cardResponse.data);\r\n }).catch((cardError) => {\r\n var unexpected = [];\r\n unexpected.push(\"error.unexpected\");\r\n reject(unexpected);\r\n });\r\n });\r\n}\r\n\r\nexport const StripeForm = forwardRef((props, ref) => {\r\n let options = {\r\n paymentMethodCreation: 'manual',\r\n clientSecret: props.stripeCredentials.secret,\r\n appearance: {\r\n theme: 'stripe',\r\n variables: {\r\n colorPrimary: '#0570de',\r\n colorBackground: '#fafafa',\r\n colorText: '#30313d',\r\n colorDanger: '#df1b41', \r\n borderRadius: '0px',\r\n fontSizeSm: '16px',\r\n colorText: \"#00000\",\r\n spacingGridRow: '24px',\r\n colorDanger: '#DD2B1B'\r\n // See all possible variables below\r\n },\r\n rules: {\r\n '.p-GridCell': {\r\n marginBottom: '24px'\r\n },\r\n '.Label': {\r\n paddingBottom: '8px',\r\n fontWeight: '700',\r\n fontSize:'14px'\r\n\r\n },\r\n '.Input': {\r\n border: '1px solid transparent',\r\n boxShadow: '0px 0px 0px 1px #1175D2',\r\n },\r\n '.Input--empty': {\r\n border: '1px solid transparent',\r\n boxShadow: '0px 0px 0px 1px #DCDCDC',\r\n },\r\n '.Input--empty:focus': {\r\n border: '1px solid transparent',\r\n boxShadow: '0px 0px 0px 2px #1175D2',\r\n },\r\n '.Input:focus': {\r\n border: '1px solid transparent',\r\n boxShadow: '0px 0px 0px 1px #1175D2',\r\n },\r\n '.p-Input--focused': {\r\n border: '1px solid transparent',\r\n boxShadow: '0px 0px 0px 1px #1175D2',\r\n },\r\n '.Input--invalid': {\r\n boxShadow: '0px 0px 0px 1px #DD2B1B',\r\n color: '#000',\r\n border: '1px solid transparent',\r\n backgroundColor: '#FFF4F4'\r\n }, \r\n '.Input--invalid:after': {\r\n\r\n },\r\n '.Error': {\r\n fontSize: '14px',\r\n marginTop: '8px',\r\n borderLeft: '2px solid #DD2B1B', \r\n paddingLeft:'8px'\r\n }\r\n }\r\n },\r\n loader: 'always',\r\n \r\n } \r\n \r\n const [stripePromise, setStripePromise] = useState(() => loadStripe(props.stripeCredentials.publickey))\r\n \r\n \r\n return (\r\n \r\n
\r\n\r\n {errorStates?.cardDeclined &&\r\n {t('creditcardform.title')}
\r\n\r\n {t('creditcardform.carddeclineerror')} \r\n
}\r\n\r\n \r\n\r\n {/* {billingAddress && billingAddress.POSTCODE ?
\r\n\r\n {showCardHolderNameField && \r\n
\r\n } \r\n );\r\n\r\n});\r\n\r\n\r\nexport const checkForWalletMethods = async (basket, stripePublicKey, setWalletMethods) => {\r\n const result = {\r\n applePayAvailable: false,\r\n googlePayAvailable: false,\r\n };\r\n \r\n let amount = basket.gross * 100;\r\n let countryCode= basket.countrycode;\r\n let currencyCode = basket.currencycode.toLowerCase();\r\n \r\n const stripeInstance = window.Stripe(stripePublicKey);\r\n \r\n //checking for apple Pay availability\r\n const applePayRequest = stripeInstance.paymentRequest({\r\n country: countryCode,\r\n currency: currencyCode,\r\n total: {\r\n label: 'Amount',\r\n amount: amount,\r\n },\r\n });\r\n \r\n \r\n try {\r\n const applePayResponse = await applePayRequest.canMakePayment();\r\n if (applePayResponse && applePayResponse.applePay) {\r\n result.applePayAvailable = true;\r\n console.log(\"Apple Pay is available\");\r\n } else {\r\n result.applePayAvailable = false;\r\n console.log(\"Apple Pay is not available\");\r\n }\r\n } catch (error) {\r\n console.error(\"Error checking Apple Pay availability:\", error);\r\n }\r\n \r\n //check for Google Pay availability\r\n const googlePayRequest = stripeInstance.paymentRequest({\r\n country: countryCode,\r\n currency: currencyCode,\r\n total: {\r\n label: 'Amount',\r\n amount: amount,\r\n },\r\n });\r\n \r\n try {\r\n const googlePayResponse = await googlePayRequest.canMakePayment();\r\n if (googlePayResponse && googlePayResponse.googlePay) {\r\n result.googlePayAvailable = true;\r\n console.log(\"Google Pay is available\");\r\n } else {\r\n result.googlePayAvailable = false;\r\n console.log(\"Google Pay is not available\");\r\n }\r\n } catch (error) {\r\n console.error(\"Error checking Google Pay availability:\", error);\r\n }\r\n \r\n // Update the state with the result, storing for later retention\r\n sessionStorage.setItem(\"AvailableWalletMethods\", JSON.stringify(result))\r\n setWalletMethods(result);\r\n };\r\n \r\n\r\n\r\n\r\n\r\n\r\n","import React, { useEffect, useLayoutEffect,forwardRef,useContext, useState, useImperativeHandle, useRef } from 'react';\r\nimport axios from 'axios';\r\nimport { useTranslation } from 'react-i18next';\r\n//import { loadStripe } from '@stripe/stripe-js';\r\nimport { APIGet, APIPost, APIRootDomain } from '../../API/APIRequest'\r\nimport { ErrorBox } from '../../Utilities/ErrorBox'\r\n//import { useElements, useStripe, Elements, PaymentElement } from '@stripe/react-stripe-js';\r\nimport '../../../i18n'\r\nimport { PaymentFormContext, updateBillingAddress } from '../PaymentFormReducer';\r\n//import * as signalR from '@microsoft/signalr';\r\nimport { Loading } from '../../Utilities/Loading';\r\nimport { gtmEventTriggers } from '../../Utilities/GtmFunctions';\r\n\r\n\r\nexport const WorldPayForm = forwardRef((props, ref) => {\r\n //const [notification, setNotification] = useState('');\r\n const {setPaymentMethodErrors}= props;\r\n const fid = props.basket.id; \r\n const checkoutScriptUrl = \"https://payments.worldpay.com/resources/hpp/integrations/embedded/js/hpp-embedded-integration-library.js\";\r\n let checkout;\r\n var tries = 0;\r\n\r\n function scriptAlreadyLoaded(src) {\r\n return document.querySelector(`script[src=\"${src}\"]`);\r\n }\r\n\r\n\r\n function loadCheckoutScript(src) {\r\n return new Promise((resolve, reject) => {\r\n if (scriptAlreadyLoaded(src)) {\r\n resolve();\r\n return;\r\n }\r\n let checkoutScript = document.createElement(\"script\");\r\n checkoutScript.src = src;\r\n checkoutScript.onload = resolve;\r\n checkoutScript.onerror = reject;\r\n document.head.appendChild(checkoutScript);\r\n });\r\n }\r\n\r\n const addWorldpayCheckoutToPage = (props) =>{\r\n return new Promise((resolve, reject) => {\r\n \r\n //var handlerUrl = window.location.protocol + \"//\" + window.location.host + window.location.pathname.replace('payment', 'worldpayresponsehandler');\r\n //var WPCL = {};\r\n // Your custom options for injecting the iframe\r\n let customOptions = {\r\n url: props.hostedPageURL,\r\n type: 'iframe',\r\n inject: 'immediate',\r\n target: 'custom-html',\r\n language: 'en',\r\n country: 'gb',\r\n preferredPaymentMethod: 'ALL',\r\n accessibility: true,\r\n debug: false,\r\n /*\r\n successURL: handlerUrl + '/success',\r\n cancelURL: handlerUrl + '/cancel',\r\n failureURL: handlerUrl + '/failure',\r\n pendingURL: handlerUrl + '/pending',\r\n errorURL: handlerUrl + '/error'\r\n */\r\n resultCallback: WorldpayCallback\r\n \r\n }\r\n // Initialize the library and pass options\r\n let libraryObject = new window.WPCL.Library();\r\n libraryObject.setup(customOptions); \r\n \r\n });\r\n }\r\n\r\n \r\n const WorldpayCallback = (result) => {\r\n \r\n let redirect_url=\"\";\r\n let status = result.order.status;\r\n switch (status) {\r\n case \"success\":\r\n setTimeout(WaitForNotification, 500);\r\n gtmEventTriggers(\"add_payment_info\"); \r\n console.log(window.dataLayer);\r\n break;\r\n case \"failure\": // show error\r\n break;\r\n case \"cancelled\": // user cancelled, reshow payment options\r\n break;\r\n case \"error\": // show error\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n let hasRedirectedToWPResponseHandler = false;\r\n const WaitForNotification = () => {\r\n if (hasRedirectedToWPResponseHandler) return; // Prevent further redirects\r\n\r\n tries = tries + 1;\r\n APIPost({\r\n \"controller\": \"worldpay\",\r\n \"action\": \"checknotificationreceived\",\r\n \"environment\": null,\r\n \"identifier\": fid\r\n }).then((response) => {\r\n OnWorldpayNotification(response.data.status);\r\n }).catch((error) => {\r\n\r\n });\r\n }\r\n\r\n const OnWorldpayNotification = (status) => {\r\n switch (status) {\r\n case \"OK\":\r\n let handlerUrl = window.location.protocol + \"//\" + window.location.host + \"/WorldpayResponseHandler/\" + fid + window.location.search;\r\n if (!hasRedirectedToWPResponseHandler) {\r\n hasRedirectedToWPResponseHandler = true;\r\n window.location.href = handlerUrl; // success -> \r\n }\r\n break;\r\n case \"PENDING\":\r\n if (tries < 240) {\r\n setTimeout(WaitForNotification, 500);\r\n }\r\n else {\r\n alert(\"Timed out waiting for worldpay notification.\")\r\n }\r\n break;\r\n case \"CANCELLED\": // user cancelled, reshow payment options\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n \r\n const InitialiseWorldPay = (props) => {\r\n return new Promise((resolve, reject) => {\r\n let basket = props.basket;\r\n const data = new FormData();\r\n //string currencyCode, string amountWithoutDecimalSeperator ,string amountExponent, string shopperEmail\r\n data.append(\"fid\", basket.id);\r\n data.append(\"paymentTypeId\", props.paymentSelection);\r\n APIPost({\r\n \"controller\": \"worldpay\",\r\n \"action\": \"gethostedpageurl\",\r\n \"environment\": null,\r\n \"data\": data\r\n })\r\n .then((response) => {\r\n let hosteduri = response.data.worldpayurl;\r\n let wpResult = {\r\n //\"promise\": promise,\r\n \"hostedUrl\": hosteduri\r\n };\r\n resolve(wpResult);\r\n\r\n //'https://secure-test.worldpay.com/jsp/shopper/SelectPaymentMethod.jsp?OrderKey=ABACUSTESTECOM%5Eorder001u0zzdd0d1d6ss6wfts0s0eb212f233s'\r\n //addWorldpayCheckoutToPage(hosteduri)\r\n // .then((res) => {\r\n // let wpResult = {\r\n // //\"promise\": promise,\r\n // \"hostedUrl\": hosteduri\r\n // };\r\n // resolve(wpResult);\r\n // })\r\n // .catch(console.warn);\r\n\r\n }).catch((error) => {\r\n reject(error);\r\n });\r\n \r\n });\r\n }\r\n\r\n useEffect(() => {\r\n \r\n loadCheckoutScript(checkoutScriptUrl)\r\n .then((rr) => {\r\n InitialiseWorldPay({ \"paymentSelection\": props.paymentTypeId, \"basket\": props.basket }).then((wpResult) => {\r\n \r\n \r\n let uri = wpResult.hostedUrl;\r\n //'https://secure-test.worldpay.com/jsp/shopper/SelectPaymentMethod.jsp?OrderKey=ABACUSTESTECOM%5Eorder001u0zzdd0d1d6ss6wfts0s0eb212f233s';\r\n addWorldpayCheckoutToPage({ \"basketid\": props.basket.id, \"hostedPageURL\": uri})\r\n .then((checkoutInstance) => {\r\n //checkout = checkoutInstance;\r\n \r\n })\r\n .catch((error) => {\r\n let str = JSON.stringify(error, null, 4); \r\n console.log(str);\r\n if(error.response?.status===500){\r\n setPaymentMethodErrors(\"500_errors\")\r\n }\r\n /* added */\r\n });\r\n\r\n }).catch((error)=>{\r\n let str = JSON.stringify(error, null, 4);\r\n console.log(str);\r\n if(error.response?.status===500){\r\n setPaymentMethodErrors(\"500_errors\")\r\n }\r\n }\r\n \r\n )\r\n\r\n //let r = 1;\r\n })\r\n .catch(console.warn);\r\n\r\n /***************************SignalR**************************************/\r\n/*\r\n const connection = new signalR.HubConnectionBuilder()\r\n .withUrl(APIRootDomain()+\"/notificationHub\", {\r\n //skipNegotiation: true,\r\n //transport: signalR.HttpTransportType.WebSockets\r\n }) \r\n .withAutomaticReconnect()\r\n .configureLogging(signalR.LogLevel.Information)\r\n .build();\r\n const sessionGuid = fid;\r\n\r\n connection.start()\r\n .then(() => {\r\n \r\n // Now you can send data\r\n if (connection.state === signalR.HubConnectionState.Connected) {\r\n connection.on('ReceiveNotification', (bId, wpToken, oId) => {\r\n \r\n WorldpayCallback({ order: { status: \"AbacusOrderNotificationTokenReceived\", tokenInfo: wpToken, orderId: oId} });\r\n \r\n //setNotification(bId);\r\n });\r\n\r\n connection.invoke('JoinSessionGroup', sessionGuid)\r\n .catch(error => console.error('Error sending data:', error));\r\n\r\n } else {\r\n console.warn('SignalR connection is not in the \"Connected\" state. Waiting...');\r\n }\r\n })\r\n .catch(error => console.error('Error starting SignalR connection:', error));\r\n */\r\n return () =>\r\n {\r\n /*\r\n // Leave the SignalR group when the component unmounts\r\n connection.invoke('LeaveSessionGroup', sessionGuid).catch(err => console.error(err));\r\n connection.stop().catch(err => console.error(err));\r\n */\r\n };\r\n }, []);\r\n \r\n// useImperativeHandle(ref, () => ({\r\n// confirmPayment() {\r\n// APIPost({\r\n// \"controller\": \"worldpay\",\r\n// \"action\": \"processpayment\",\r\n// \"environment\": null,\r\n// \"identifier\": fid\r\n// }).then((response) => {\r\n// window.location.href = window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + response.data.OrderId;\r\n// }).catch((error) => {\r\n// throw (error);\r\n// });\r\n// },\r\n// errors\r\n// }\r\n// ));\r\n \r\n //useLayoutEffect(() => {\r\n // // Make sure to call the remove method (once) in order to deallocate the SDK from memory\r\n // return () => checkout.remove();\r\n //},\r\n // []);\r\n\r\n \r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n );\r\n});\r\n\r\n\r\n\r\n","import InputWrapperRefacture from \"../../UI/Inputs/InputWrapperRefacture\";\r\nimport { useState, useEffect } from \"react\";\r\nimport { useTranslation } from 'react-i18next';\r\nimport ErrorBoxCS from '../../UI/ErrorBox/ErrorBox';\r\nimport { APIPost, getEnvironment } from \"../../API/APIRequest\";\r\nimport SuccessBox from \"../../UI/SuccessBox/SuccessBox\";\r\n\r\n\r\n\r\n\r\nexport default function PromoCode(props) {\r\n\r\n\r\n const { fid, basket, purchasingFor, deliveryCountryCode, adToken, setActionName } = props;\r\n const [promoCode, setPromoCode] = useState(\"\");\r\n const [errorStates, setErrorStates] = useState({ \"invalid\": false, \"blank\": false })\r\n const [successStates, setSuccessStates] = useState({ \"applied\": false, \"removed\": false })\r\n const { t, i18n } = useTranslation();\r\n \r\n const [tagValue, setTagValue] = useState(\"\");\r\n const [variants, setVariants] = useState(\"\");\r\n const [quantities, setQuantities] = useState(\"\");\r\n const [tagCounts, setTagCounts] = useState(\"\");\r\n\r\n const discountCode = sessionStorage.getItem(\"discountApplied\");\r\n const prevBasketFid = sessionStorage.getItem(\"prevFid\");\r\n const params = new URLSearchParams(window.location.search);\r\n const discountRemoved= params.get(\"discountRemoved\"); //queryParam\r\n const queryParamsString = sessionStorage.getItem(\"queryParamsString\");\r\n\r\n \r\n const getPromoCodePayloadValues = () => {\r\n\r\n let tagCounts = {};\r\n let variants = [];\r\n let quantities = [];\r\n let tagValue = [];\r\n\r\n basket.lines.forEach(variant => {\r\n\r\n variants.push(variant?.productvariantid); // for variants\r\n quantities.push(variant?.quantity); // for quantity\r\n\r\n if (variant.tags && Array.isArray(variant.tags)) {\r\n variant.tags.forEach(tagObj => {\r\n tagValue.push(tagObj.tag); // for tag value\r\n const tag = tagObj.tag;\r\n if (tagCounts[tag]) {\r\n tagCounts[tag] += variant.quantity; //for tag counts\r\n } else {\r\n tagCounts[tag] = variant.quantity;\r\n }\r\n });\r\n }\r\n });\r\n\r\n setTagCounts(tagCounts);\r\n setTagValue(tagValue.join(','));\r\n setQuantities(quantities.join(','));\r\n setVariants(variants.join(','));\r\n }\r\n \r\n function removeQueryParam(param) {\r\n \r\n const url = new URL(window.location.href);\r\n \r\n if (url.searchParams.has(param)) {\r\n url.searchParams.delete(param);\r\n \r\n window.history.replaceState({}, '', url); //need to replace the url without refresh\r\n }\r\n }\r\n \r\n useEffect(() => {\r\n\r\n getPromoCodePayloadValues();\r\n\r\n if (discountCode) {\r\n setPromoCode(discountCode) // on application of discount code \r\n setSuccessStates({ applied: true, removed: false })\r\n if (adToken) {\r\n setActionName(\"Order Discount Code\") //discount code web activity.\r\n \r\n }\r\n }\r\n else {\r\n if (discountRemoved) { // on removal of discount code\r\n setSuccessStates({ applied: false, removed: true })\r\n removeQueryParam(\"discountRemoved\"); //only should show up for the first time\r\n }\r\n }\r\n\r\n }, [])\r\n\r\n\r\n const removePromoCode = () => {\r\n \r\n let baseUrl = \"\";\r\n if(adToken?.isGuest){\r\n baseUrl = '/guest/' + prevBasketFid;\r\n }else{\r\n baseUrl = '/payment/' + prevBasketFid; \r\n }\r\n \r\n const existingParams = window.location.search;\r\n const newParam = \"discountRemoved=true\";\r\n\r\n let prevBasketUrl = baseUrl;\r\n\r\n // To check for existing query parameters\r\n if (existingParams) {\r\n prevBasketUrl += existingParams + \"&\" + newParam;\r\n } else {\r\n prevBasketUrl += '?' + newParam;\r\n }\r\n \r\n sessionStorage.removeItem(\"discountApplied\"); // removing discount code\r\n sessionStorage.removeItem(\"purchasingFor\"); // removing session variables which were to be used for bypassing landingPage on discount code application\r\n sessionStorage.removeItem(\"prevBasketDataForDiscountFlow\");\r\n sessionStorage.removeItem(\"prevFid\");\r\n\r\n window.location.href = prevBasketUrl // redirection to prev basket\r\n }\r\n\r\n const applyPromoCode = (e) => {\r\n \r\n let validated = validationOnApply();\r\n\r\n if (validated) {\r\n\r\n const data = new FormData();\r\n data.append(\"discountCode\", promoCode);\r\n data.append(\"tagValues\", tagValue);\r\n data.append(\"quantity\", quantities);\r\n data.append(\"variantIDs\", variants);\r\n data.append(\"tagQuantity\", JSON.stringify(tagCounts));\r\n data.append(\"origin\", window.location.hostname);\r\n\r\n APIPost({\r\n \"controller\": \"basket\",\r\n \"action\": \"variantmappings\",\r\n \"environment\": null,\r\n \"identifier\": fid,\r\n data: data\r\n }).then((response) => {\r\n if (response.status === 200) {\r\n if (response?.data) {\r\n if (response?.data?.newUrl) {\r\n\r\n let discountCode = response?.data?.discountCode;\r\n let discountParam= `discountApplied=${discountCode}`\r\n let newUrlWithDiscount = response?.data?.newUrl;\r\n\r\n let existingParams = queryParamsString || \"\" //initial query params being retained from the session\r\n\r\n // To check for existing query parameters\r\n if (existingParams) {\r\n newUrlWithDiscount += \"&\" + existingParams + \"&\" + discountParam;\r\n } else {\r\n newUrlWithDiscount += \"&\" + discountParam;\r\n }\r\n \r\n newUrlWithDiscount = new URL(newUrlWithDiscount).toString();\r\n\r\n sessionStorage.setItem(\"purchasingFor\", purchasingFor); //creating session variables with data of existing basket for bypassing landingPage\r\n sessionStorage.setItem(\"prevBasketDataForDiscountFlow\", JSON.stringify(basket));\r\n sessionStorage.setItem(\"prevFid\", fid);\r\n sessionStorage.setItem(\"prevDeliveryCountryCode\", deliveryCountryCode);\r\n\r\n\r\n window.location.href = newUrlWithDiscount; //redirection to new basket with discount code applied\r\n }\r\n else {\r\n if (response?.data?.error) {\r\n let er = response?.data?.error; //in case of invalid discount code\r\n if (er === \"No mapped variants found - discount code probably invalid\") {\r\n setErrorStates(errorStates => ({ ...errorStates, invalid: true }))\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }).catch((error) => {\r\n console.error('Error:', error);\r\n\r\n });\r\n }\r\n }\r\n\r\n const handleOnChange = (value) => {\r\n setPromoCode(value);\r\n\r\n // reinitialising error states on input change\r\n setSuccessStates({ applied: false, removed: false })\r\n setErrorStates({ invalid: false, blank: false })\r\n }\r\n \r\n \r\n // validation on \"apply\" button click\r\n const validationOnApply = () => {\r\n \r\n let valid = true;\r\n // reinitialising error states on input change\r\n setSuccessStates(successStates=>({...successStates, removed: false }))\r\n setErrorStates(errorStates => ({ ...errorStates, blank: false, invalid: false }))\r\n\r\n if (promoCode.length < 1) {\r\n setErrorStates(errorStates => ({ ...errorStates, blank: true }))\r\n valid = false;\r\n }\r\n\r\n return valid;\r\n }\r\n\r\n const promoFieldUI = () => {\r\n return \r\n { handleOnBlur(e.target.value) }}\r\n onChange={(e) => { handleOnChange(e.target.value) }}\r\n />\r\n\r\n {errorStates.cardHolderNameBlank ? {t('creditcardform.blankcardholder')} : \"\"}\r\n\r\n
\r\n \r\n\r\n removePromoCode() : () => applyPromoCode(promoCode)}\r\n aria-invalid={errorStates?.invalid || errorStates?.blank}\r\n aria-describedby=\"promocode-alerts\"\r\n invalidClass={(errorStates?.invalid || errorStates?.blank) ? \"Invalid-input\" : \"\"}\r\n onChange={discountCode ? \"\" : (e) => handleOnChange(e.target.value)} />\r\n\r\n {errorStates?.blank && {t('payment.blankpromocode')} }\r\n {errorStates?.invalid && {t('payment.invalidpromocode')} }\r\n {successStates?.applied && {t('payment.promocodeadded')} }\r\n {successStates?.removed && {t('payment.promocoderemoved')} }\r\n\r\n
\r\n }\r\n\r\n\r\n\r\n return (\r\n \r\n {promoFieldUI()}\r\n \r\n
\r\n )\r\n}","import React, { useRef, useState, useEffect } from 'react';\r\nimport { useParams, useNavigate } from 'react-router-dom'\r\nimport axios from 'axios';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../i18n';\r\nimport \"../../general.scss\";\r\nimport { CreateMinimalBasketFromTxActivity, GetBasket } from './Payment/Basket';\r\nimport MessageBox from '../UI/MessageBox/MessageBox';\r\nimport ReactHtmlParser from 'html-react-parser';\r\nimport { t } from 'i18next';\r\nimport { Loading } from '../Utilities/Loading';\r\nimport { useAuth } from '../Authentication/AuthenticationProvider';\r\n\r\nexport function OrderUpgrade(props) {\r\n const {brandingElement} = props;\r\n const searchParams = new URLSearchParams(window.location.search); \r\n const { txactivityid } = useParams();\r\n const { txactivityhash } = useParams();\r\n const [errorStates, setErrorStates] = useState({\"upgradeUnavailable\":false});\r\n const [isLoading, setIsLoading] = useState(true);\r\n const auth = useAuth();\r\n\r\n useEffect(() => {\r\n \r\n sessionStorage.clear(); //cleaning prev flow's data in case any\r\n CreateMinimalBasketFromTxActivity({ txActivityId: txactivityid, txActivityHash: txactivityhash }).then((result) => { \r\n loadBasket(result.basketid, \"self\") \r\n \r\n }).catch((err) => {\r\n setIsLoading(false)\r\n setErrorStates({\"upgradeUnavailable\": true});\r\n });\r\n\r\n }, [])\r\n\r\n const loadBasket = (fid, purchaseTarget) => {\r\n\r\n GetBasket({ \"fid\": fid, \"loadfromserver\": true, \"userToken\": auth?.userData?.token, \"purchaseTarget\": purchaseTarget }).then((result) => {\r\n redirectToCheckout(result?.id);\r\n\r\n }).catch((err) => {\r\n setIsLoading(false)\r\n console.log(\"Issue with loading basket\")\r\n });\r\n }\r\n\r\n const redirectToCheckout = (id) => {\r\n\r\n let redirectUrlString = \"\";\r\n const existingParams = searchParams.toString() && searchParams || \"\";\r\n const newParam = `purchasingFor=self`;\r\n\r\n redirectUrlString = '/payment/' + id;\r\n\r\n if (existingParams) {\r\n redirectUrlString += \"?\" + existingParams + \"&\" + newParam;\r\n } else {\r\n redirectUrlString += \"?\" + newParam;\r\n }\r\n \r\n window.location.href = redirectUrlString;\r\n\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {errorStates?.upgradeUnavailable ? \r\n \r\n \r\n
\r\n ) \r\n }\r\n }\r\n else if (basket.defaultpaymentprovider === \"worldpay\") {\r\n return (<> \r\n \r\n \r\n
\r\n }\r\n\r\n //****************************************modal functions end***********************//\r\n\r\n\r\n const handleOnBackButton = () =>{\r\n\r\n //should take us to step 1 of world pay flow\r\n\r\n setShowWorldPay(false);\r\n }\r\n\r\n //showing and setting delivery details on completion of the ste, settings also needed for billing section\r\n const showSavedDeliveryDetails=(deliveryDetails)=>{\r\n \r\n let temp= {};\r\n\r\n try{\r\n temp=deliveryDetails;\r\n }catch(e){\r\n console.log(\"Issue with retrival of delivery data\")\r\n }\r\n \r\n let recipient= temp.recipient;\r\n let company = temp.company;\r\n let address = temp.address\r\n let phoneNumber = temp.phoneNumber;\r\n let isFilledDelivery = temp.IsFilledDelivery;\r\n let giftRecipientDetails = temp.giftRecipientDetails;\r\n\r\n if(recipient){\r\n setRecipientDetails(recipient);\r\n\r\n }\r\n if(company){\r\n setDeliveryCompany(company);\r\n \r\n }\r\n if(address){\r\n setDeliveryAddress(address);\r\n \r\n }\r\n\r\n if(phoneNumber){\r\n setPhoneNumber(phoneNumber);\r\n }\r\n \r\n if(isFilledDelivery){\r\n setIsFilledDelivery(isFilledDelivery);\r\n }\r\n \r\n if(giftRecipientDetails){\r\n setGiftRecipientDetails(giftRecipientDetails);\r\n }\r\n\r\n setSectionComplete(sectionComplete => ({ ...sectionComplete, deliveryDetails: true }))\r\n\r\n}\r\n return (<>{ !loading ? <>\r\n\r\n {/* when basket call goes successfully then only the checkout page will show */} \r\n\r\n {basket?.id ?\r\n \r\n
\r\n \r\n \r\n Sub-total\r\n {basket?.currencysymbol}{basket?.subtotal?.toFixed(2)}\r\n
\r\n {isOrderAnUpgrade && \r\n {t('basket.prepaymenttotallabel')} \r\n {t(\"upgrade.negativesign\")}{basket.currencysymbol}{prepaymenttotalgross?.toFixed(2)}\r\n
\r\n }\r\n \r\n Tax\r\n {basket?.currencysymbol}{basket?.tax?.toFixed(2)}\r\n
\r\n {basket.delivery &&\r\n \r\n Delivery\r\n {basket?.currencysymbol}{basket?.delivery?.toFixed(2)}\r\n
\r\n }\r\n \r\n \r\n \r\n Order total\r\n \r\n \r\n {basket?.currencysymbol}{isOrderAnUpgrade ? basket?.grosswithrebate?.toFixed(2) : basket?.gross?.toFixed(2)}\r\n \r\n
\r\n \r\n \r\n \r\n }\r\n\r\n \r\n \r\n {windowSize > 1000 &&\r\n \r\n \r\n }\r\n\r\n \r\n \r\n
\r\n : \r\n
\r\n \r\n {windowSize < 1000 &&\r\n\r\n // For mobile view: the basket data is going to show up on a modal\r\n <> \r\n {showModal && \r\n
\r\n \r\n
\r\n {t('payment.blockTitle') }
\r\n\r\n
\r\n\r\n \r\n }\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n {t('basket.title')} ({basket.lines.reduce((acc, line) => acc + line.quantity, 0)} items)
\r\n \r\n\r\n
\r\n \r\n {/* Flow specific to worldpay-2nd step that has card details block */}\r\n\r\n {showWorldPay ? <>\r\n\r\n \r\n
\r\n\r\n {/* User details block dependent on if it is guest flow or logged in user flow*/}\r\n\r\n {t('checkout.usertitle')}
\r\n\r\n
\r\n \r\n {phoneConfiguration !== \"Not shown\" &&\r\n \r\n {(isGuest || guestSession) ? \r\n props.reCaptchaKey && \r\n \r\n : <>
\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n
:\r\n\r\n // Flow for other payment methods\r\n <> \r\n \r\n\r\n \r\n
\r\n\r\n {paymentSelection ? displayForm() : \"\"}\r\n {paymentMethodErrors ? \r\n
\r\n\r\n \r\n \r\n {t('worldpayform.title')}
\r\n{t('worldpay.backlinktext')}
\r\n \r\n\r\n {\r\n ((alreadyPurchased.status===\"true\" || purchaseRestriction.status===\"true\") && !basket.allowgifting) ? \r\n {(alreadyPurchased?.text|| purchaseRestriction.text) && ReactHtmlParser(alreadyPurchased?.text||purchaseRestriction?.text||\"\")} \r\n : \r\n \r\n (isGuest && !guestSession && purchaseRestriction.status===\"\") ? \r\n \r\n \r\n \r\n \r\n \r\n :\"\" }\r\n
\r\n\r\n {basket.allowgifting && (alreadyPurchased.status===\"true\" || purchaseRestriction.status===\"true\") && sectionComplete.deliveryDetails ? \r\n {t('delivery.title')}
\r\n\r\n : \r\n \r\n ((isGuest && guestSession) || (!isGuest)) ? <>\r\n\r\n {/* if guest and guest session has started-****-not guest then delivery block should show */}\r\n\r\n\r\n
\r\n\r\n {t('delivery.title')}
\r\n\r\n {(alreadyPurchased?.text && ReactHtmlParser(alreadyPurchased?.text || \"\"))||(purchaseRestriction?.text && ReactHtmlParser(purchaseRestriction?.text || \"\"))} \r\n
\r\n\r\n :\"\"}\r\n\r\n \r\n {/*needs revisiting*/}\r\n {(((isGuest && guestSession && flags.isdeliverycountryrequired && !flags.isdeliverypostaladdressrequired && !basket.allowgifting) ||\r\n (!isGuest && flags.isdeliverycountryrequired && !flags.isdeliverypostaladdressrequired && !basket.allowgifting) ||\r\n\r\n (isGuest && guestSession && purchasingFor === \"self\" && flags.isdeliverycountryrequired && !flags.isdeliverypostaladdressrequired) ||\r\n (isGuest && guestSession && sectionComplete?.deliveryDetails) || !isGuest && sectionComplete?.deliveryDetails || (guestSession && purchasingFor === \"gift\" && sectionComplete.deliveryDetails)) || (isGuest && guestSession && sessionDeliveryDetails) || (!isGuest && sessionDeliveryDetails)) && (alreadyPurchased.status!==\"true\" && purchaseRestriction.status!==\"true\") ? <>\r\n\r\n
\r\n \r\n }\r\n \r\n
\r\n \r\n {/* Promo Code */}\r\n {basket?.promotionapplicationmode !== \"none\" ?\r\n {t('payment.title')}
\r\n\r\n
\r\n :\"\"}\r\n \r\n {basket.offertypename===\"free trial\" ? \r\n \r\n \r\n \r\n
\r\n \r\n {t('freetrial.message')} \r\n
\r\n\r\n : <>\r\n \r\n
\r\n \r\n {t('billingdetails.title')}
\r\n{t('payment.title')}
}\r\n\r\n
\r\n \r\n\r\n {/* when basket call errs */}\r\n \r\n \r\n
}\r\n \r\n : \r\n //
\r\n <>\r\n \r\n \r\n \r\n \r\n : )\r\n}\r\n","import React, { Component, useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../../i18n'\r\n\r\nexport function Acknowledgement(props) {\r\n const { t, i18n } = useTranslation();\r\n\r\n return (\r\n
\r\n
\r\n {Theme2()}\r\n
\r\n
\r\n {Theme3()}\r\n
\r\n
\r\n {Theme4()}\r\n
\r\n
\r\n {Theme5()}\r\n
\r\n
\r\n {Theme6()}\r\n
\r\n
\r\n \r\n }\r\n\r\n","import OptionCards from \"./OptionCards/OptionCards\";\r\nimport { Promo } from \"./Promo/Promo\";\r\nimport Variant from \"./Variants/Variant\";\r\nimport Variants from \"./Variants/Variants\";\r\n\r\nexport function ProductOffer(){\r\n\r\n return(\r\n\r\n {basicInputUI()}\r\n \r\n}\r\n\r\n\r\n\r\nexport default InputNew","import { forwardRef, Fragment, useState } from \"react\";\r\nimport {Link} from \"react-router-dom\";\r\nimport InputNew from \"./InputNew.js\";\r\n//import './Input.css';\r\n//import { shouldProcessLinkClick } from \"react-router-dom/dist/dom\";\r\nconst InputWrapper = (props) => {\r\n\r\n const { description, altText,edit, type, inputType, inputSize, label, details,btnText, showBtnText, hideBtnText, btnHandler, helpText, specs, subscriptionAmount, subscriptionPeriod } = props;\r\n\r\n const [showHelp, setShowHelp] = useState(false);\r\n const [showDetails, setShowDetails] = useState(false);\r\n const [showPassword, setShowPassword] = useState(false);\r\n const [editable, setEditable]=useState(false)\r\n //switch case for different Input Components\r\n const getInputUIForSpecs = () => {\r\n switch (specs) {\r\n case 'radio_and_checkbox_input':\r\n return radio_and_checkbox_input()\r\n case 'toggle_switch':\r\n return toggle_switch()\r\n case 'radio_input_with_altText':\r\n return radio_input_with_altText()\r\n case 'radio_input_with_description':\r\n return radio_input_with_description()\r\n case 'text_input_with_button':\r\n return text_input_with_button()\r\n case 'text_input_with_help':\r\n return text_input_with_help()\r\n case 'radio_input_with_border':\r\n return radio_input_with_border()\r\n case 'text_input':\r\n return text_input()\r\n case 'checkbox_input_for_amount':\r\n return checkbox_input_for_amount()\r\n case 'text_input_for_details':\r\n return text_input_for_details()\r\n case 'password_input_with_button':\r\n return password_input_with_button()\r\n default:\r\n return text_input() \r\n\r\n\r\n\r\n }\r\n }\r\n\r\n const getInputUIForType=()=>{\r\n switch (type){\r\n case 'text':\r\n return text_input()\r\n case 'password':\r\n return password_input_with_button()\r\n case 'radio':\r\n return radio_and_checkbox_input()\r\n case 'checkbox':\r\n return radio_and_checkbox_input()\r\n case 'email':\r\n return text_input()\r\n default :\r\n return text_input()\r\n \r\n\r\n \r\n\r\n \r\n\r\n }\r\n\r\n }\r\n\r\n\r\n\r\n //radio and checkbox inputs in the application\r\n const radio_and_checkbox_input = () => {\r\n return \r\n\r\n {!specs ? getInputUIForType : getInputUIForSpecs() }\r\n \r\n}\r\nexport default InputWrapper;","import { Fragment } from \"react\";\r\nimport Button from \"../Buttons/Button\";\r\nimport Input from '../Inputs/InputWrapperRefacture';\r\nimport InputWrapper from '../Inputs/InputWrapper';\r\nimport MessageBox from \"../MessageBox/MessageBox\";\r\nimport { ProductOffer } from \"../../ProductOffer/ProductOffer\";\r\n\r\nconst DesignReview = () => {\r\n return <>\r\n \r\n\r\n \r\n\r\n\r\n )\r\n}\r\n\r\n\r\n\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useParams } from 'react-router-dom';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { APIGet } from '../API/APIRequest'\r\nimport { GetCookieValue } from '../Utilities/ADFECookie'\r\nimport { GetADToken, RemoveADToken } from '../Utilities/TokenManager';\r\nimport parse from 'html-react-parser';\r\n\r\nexport function PageNotFound(props) {\r\n const { t, i18n } = useTranslation();\r\n\r\n const [message, setMessage] = useState({});\r\n\r\n useEffect(() => {\r\n APIGet({\r\n \"controller\": \"textasset\",\r\n \"action\": \"getsitetextassetbyname\",\r\n \"data\": { name: \"pagenotfound\" },\r\n \"environment\": null \r\n }).then((response) => {\r\n \r\n setMessage({ title: \"\", message: parse(response.data.textasset) });\r\n }).catch((error) => {\r\n setMessage({ title: t('pagenotfound.title') , message: t('pagenotfound.message') }); \r\n });\r\n \r\n }, [])\r\n\r\n return (\r\n \r\n \r\n \r\n {host !== \"localhost\" ? \"\" :\r\n <>\r\n } />\r\n } />\r\n } /> \r\n } />\r\n \r\n \r\n \r\n \r\n\r\n );\r\n\r\n}\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://cra.link/PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.0/8 are considered localhost for IPv4.\r\n window.location.hostname.match(/^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)\r\n);\r\n\r\nexport function register(config) {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://cra.link/PWA'\r\n );\r\n });\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then((registration) => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed. See https://cra.link/PWA.'\r\n );\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch((error) => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl, {\r\n headers: { 'Service-Worker': 'script' },\r\n })\r\n .then((response) => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then((registration) => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n console.log('No internet connection found. App is running in offline mode.');\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready\r\n .then((registration) => {\r\n registration.unregister();\r\n })\r\n .catch((error) => {\r\n console.error(error.message);\r\n });\r\n }\r\n}\r\n","const reportWebVitals = (onPerfEntry) => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React, { Suspense } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter, useHistory } from 'react-router-dom';\r\nimport Client from './Client';\r\nimport App from './App';\r\n\r\nimport * as serviceWorkerRegistration from './serviceWorkerRegistration';\r\nimport reportWebVitals from './reportWebVitals';\r\nimport { AuthenticationProvider } from './components/Authentication/AuthenticationProvider'\r\nimport { Loading } from './components/Utilities/Loading'\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\nconst rootElement = document.getElementById('root');\r\n\r\n\r\nReactDOM.render(\r\n \r\n \r\n \r\n \r\n \r\n \r\n ,\r\n rootElement);\r\n\r\n// If you want your app to work offline and load faster, you can change\r\n// unregister() to register() below. Note this comes with some pitfalls.\r\n// Learn more about service workers: https://cra.link/PWA\r\nserviceWorkerRegistration.unregister();\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n"],"sourceRoot":""}
\r\n
\r\n \r\n
\r\n {t('checkout.giftBuyingOptionTitle')}
\r\n \r\n\r\n
\r\n 135 && \"customScroll customScrollerHeight\"}`}>\r\n\r\n {basket.lines?.map((line, index) => {\r\n \r\n return <> \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {line.productvariantdisplayname ? line.productvariantdisplayname : line.productvariantname}
\r\n {line.quantity > 1 && x {line.quantity}}\r\n\r\n
{basket.currencysymbol}{line.linetotalnet?.toFixed(2)}
\r\n \r\n \r\n
\r\n \r\n \r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n )\r\n}","import React from 'react';\r\nimport './module.scss';\r\nconst Module = (props) => {\r\n console.log(props)\r\n const handleOnSubmit = (e) => {\r\n \r\n e.preventDefault();\r\n window.location.href = props?.url;\r\n \r\n }\r\n return <>\r\n \r\n {t('checkout.giftBuyingOptionChoiceLabel') } \r\n
\r\n \r\n
\r\n \r\n}\r\n\r\nexport default Module;","import { useState } from \"react\";\r\nimport Button from \"../../UI/Buttons/Button\";\r\nimport \"./Variant.scss\"\r\nimport ReactHtmlParser from 'html-react-parser';\r\nconst Variant = (props) => {\r\n return(\r\n \r\n
\r\n \r\n
\r\n {props?.header}
\r\n\r\n
\r\n {props?.description}
\r\n\r\n \r\n
\r\n \r\n {props?.badge &&\r\n
\r\n )\r\n\r\n}\r\n\r\nexport default Variant;","import { useState, useEffect } from \"react\";\r\nimport Button from \"../../UI/Buttons/Button\";\r\nimport Variant from \"./Variant\";\r\nimport \"./Variant.scss\";\r\nimport ReactHtmlParser from 'html-react-parser';\r\nimport { APIGet, APIPost } from '../../API/APIRequest';\r\nconst Variants = (props) => {\r\n\r\n const [productVariants, setProductVariants] = useState([]);\r\n\r\n const loadData = () => {\r\n\r\n APIGet({\r\n \"controller\": \"product\",\r\n \"action\": \"getproductvariants\",\r\n \"environment\": null\r\n }).\r\n then((response) => {\r\n\r\n setProductVariants(response.data);\r\n });\r\n }\r\n\r\n const variantData = [\r\n {\r\n highlighted: false,\r\n badge: \"New Offer\",\r\n emphasis: false,\r\n title: \"This offer is awesome\",\r\n titleDescription: \"The awesome description.\",\r\n previousPrice: \"7.99\",\r\n price: \"5.99\",\r\n priceTerms: \"Monthly\",\r\n taxText: \"Tax/Vat\",\r\n priceDescription: \"\r\n {props?.badge}\r\n
\r\n }\r\n \r\n
\r\n \r\n ![](\"https://via.placeholder.com/640x480.png\")
\r\n
\r\n \r\n \r\n {props.title}
\r\n {props?.titleDescription &&{ReactHtmlParser(props.titleDescription)}
}\r\n \r\n
\r\n \r\n \r\n {props.previousPrice}\r\n {props.price} \r\n {props.taxText}\r\n {props.priceTerm} \r\n
\r\n {ReactHtmlParser(props.priceDescription)}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {ReactHtmlParser(props.offerDescription)}\r\n
\r\n\r\n Your subscription will start today and renew automatically on the same day each month
\",\r\n offerButton: \"Subscribe\",\r\n offerDescription: '- Get unlimited access to our website, with 100s of new articles added each month.
- Complete access to our online archive of over 15,000 articles spanning more than a decade of coverage.
Your subscription will start today and renew automatically on the same day each month
\",\r\n offerButton: \"Subscribe\",\r\n offerDescription: '- Get unlimited access to our website, with 100s of new articles added each month.
- Complete access to our online archive of over 15,000 articles spanning more than a decade of coverage.
Your subscription will start today and renew automatically on the same day each month
\",\r\n offerButton: \"Subscribe\",\r\n offerDescription: '- Get unlimited access to our website, with 100s of new articles added each month.
- Complete access to our online archive of over 15,000 articles spanning more than a decade of coverage.
Your subscription will start today and renew automatically on the same day each month
\",\r\n offerButton: \"Subscribe\",\r\n offerDescription: '- Get unlimited access to our website, with 100s of new articles added each month.
- Complete access to our online archive of over 15,000 articles spanning more than a decade of coverage.
Your subscription will start today and renew automatically on the same day each month
\",\r\n offerButton: \"Subscribe\",\r\n offerDescription: '- Get unlimited access to our website, with 100s of new articles added each month.
- Complete access to our online archive of over 15,000 articles spanning more than a decade of coverage.
\r\n
\r\n \r\n \r\n )\r\n\r\n}\r\n\r\nexport default Variants;","import React, { useRef, useState, useEffect } from 'react';\r\nimport { useParams, useNavigate } from 'react-router-dom'\r\nimport axios from 'axios';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../i18n';\r\nimport \"../../general.scss\";\r\nimport { APIGet } from '../API/APIRequest'\r\nimport WhoIsItFor from '../ProductOffer/WhoIsItFor'\r\nimport { GenericErrorBox } from '../UI/ErrorBox/GenericErrorBox';\r\nimport Button from '../UI/Buttons/Button';\r\nimport { SaveToOrder, UpdateBasket, GetBasket, Basket } from './Payment/Basket';\r\nimport { useAuth } from '../Authentication/AuthenticationProvider';\r\nimport { Loading } from '../Utilities/Loading';\r\nimport usePageTitle from '../../Hooks/usePageTitle';\r\nimport ErrorBox from '../UI/ErrorBox/ErrorBox';\r\nimport { getOriginatingUrl, getThankyouPageUrl } from '../Utilities/GetUrlFunctions';\r\nimport { gtmEventTriggers } from '../Utilities/GtmFunctions';\r\nimport { LogWebActivity } from '../Webactivity/LogWebActivity';\r\nimport { GetADToken } from '../Utilities/TokenManager';\r\nimport Module from '../UI/module/Module';\r\nimport Variants from '../ProductOffer/Variants/Variants';\r\nimport { extractAndStoreParams} from '../Utilities/Functions';\r\n\r\nexport function LandingPage(props) {\r\n\r\n const searchParams = new URLSearchParams(window.location.search);\r\n \r\n const [errors, setErrors] = useState([]);\r\n const [basketErrors, setBasketErrors] = useState([]);\r\n const [actions, setActions] = useState([]);\r\n const [basket, setBasket] = useState(null);\r\n const [loading, setLoading] =useState(true)\r\n const [recipient, setRecipient] = useState(\"\");\r\n const [returnUrl, setReturnUrl] = useState(\"\");\r\n const [adTokenExpired, setAdTokenExpired]= useState({status:false, message:[\"error.tokenexpired\"] });\r\n const { fid } = useParams();\r\n const [showPopup, setShowPopup] = useState(true);\r\n const auth = useAuth();\r\n const { t, i18n } = useTranslation();\r\n const {setFid, metaData} = props;\r\n const [actionName, setActionName]= useState(\"\");\r\n const navigate = useNavigate();\r\n const [isIncompatibleVariant, setIsIncompatibleVariant] = useState(false)\r\n \r\n //for discount flow\r\n const adToken = GetADToken();\r\n const discountApplied = searchParams.get(\"discountApplied\");\r\n const prevBasketDataForDiscountFlow = sessionStorage.getItem(\"prevBasketDataForDiscountFlow\")\r\n const purchaseTargetForDiscountFlow = sessionStorage.getItem(\"purchasingFor\")\r\n \r\n\r\n const loadBasket = () => {\r\n let purchaseTargetFromSettings = \"\";\r\n if (!basket && !actions.includes(\"getbasket\")) {\r\n for (const p of searchParams) {\r\n \r\n }\r\n actions.push(\"getbasket\");\r\n let postCompleteUrl = searchParams.get(\"retURL\");\r\n \r\n let props = {\r\n \"fid\": fid, \"loadfromserver\": true, \"userToken\": auth?.userData?.token\r\n }\r\n if (postCompleteUrl) {\r\n props = { \"fid\": fid, \"loadfromserver\": true, \"userToken\": auth?.userData?.token, \"postCompleteUrl\": postCompleteUrl };\r\n }\r\n GetBasket(props).then((result) => {\r\n \r\n //when directly being taken to payment screen skipping landing page then we need to set recipeint values\r\n if(result?.offertypename===\"corporate subscription\"){\r\n purchaseTargetFromSettings=\"self\";\r\n }\r\n else{ \r\n if(result?.allowgifting && !result?.allowindividualcheckout){\r\n purchaseTargetFromSettings=\"gift\";\r\n }else if(!result?.allowgifting && result?.allowindividualcheckout){\r\n purchaseTargetFromSettings=\"self\";\r\n }}\r\n\r\n checkBasketForAutoRedirect(result, purchaseTargetFromSettings);\r\n setBasket(result); \r\n \r\n if(!discountApplied){\r\n sessionStorage.setItem(\"originatingUrl\", result?.originatingurl)\r\n }\r\n \r\n \r\n }).catch((basketerrors) => {\r\n setBasketErrors(basketerrors)\r\n \r\n setLoading(false);\r\n setReturnUrl(basketerrors?.originatingurl);\r\n \r\n });\r\n }\r\n }\r\n\r\n const loadBasketOnSelection = (purchaseTarget) => {\r\n \r\n GetBasket({ \"fid\": fid, \"loadfromserver\": true, \"userToken\": auth?.userData?.token, \"purchaseTarget\": purchaseTarget }).then((result) => {\r\n \r\n if(discountApplied){\r\n sessionStorage.setItem(\"discountApplied\", discountApplied)\r\n let prevBasketData= JSON.parse(prevBasketDataForDiscountFlow)\r\n checkBasketForAutoRedirectForDiscountFlow(prevBasketData, purchaseTarget) //redirection for discount flow\r\n }\r\n else{\r\n \r\n checkBasketForAutoRedirect(result); //redirections in other flows\r\n }\r\n \r\n setBasket(result);\r\n\r\n if(!discountApplied){\r\n sessionStorage.setItem(\"originatingUrl\", result?.originatingurl)\r\n }\r\n \r\n }).catch((basketerrors) => {\r\n setBasketErrors(basketerrors)\r\n \r\n setReturnUrl(basketerrors?.originatingurl);\r\n \r\n });\r\n\r\n \r\n }\r\n\r\n \r\n const checkBasketForAutoRedirect = (basketData, purchaseTargetFromSettings) => {\r\n \r\n let purchasingFor = recipient || purchaseTargetFromSettings //recipient comes from the choice made by the user //purchaseTarget from the settings come from basket settings\r\n let redirectUrlString = \"\";\r\n let queryParamsString = sessionStorage.getItem(\"queryParamsString\");\r\n const existingParams = queryParamsString || searchParams.toString() && searchParams || \"\" //queryParams string from session || at times when straightaway going to the checkout--fetching searchParams directly from the url\r\n \r\n const newParam = `purchasingFor=${purchasingFor}`;\r\n \r\n \r\n if (basketData?.offertypename === \"corporate subscription\") {\r\n\r\n redirectUrlString += \"/payment/\";\r\n\r\n } else {\r\n\r\n if (basketData?.allowindividualcheckout && basketData?.allowgifting) {\r\n setLoading(false);\r\n return;\r\n }\r\n\r\n if (basketData?.allowguestcheckout && !basketData?.allowcustomercheckout) {\r\n\r\n redirectUrlString += \"/guest/\";\r\n }\r\n else {\r\n\r\n redirectUrlString += \"/payment/\";\r\n }\r\n }\r\n redirectUrlString += fid;\r\n \r\n if(purchasingFor){\r\n // To check for existing query parameters\r\n if (existingParams) {\r\n \r\n redirectUrlString += \"?\" + existingParams + \"&\" + newParam;\r\n } else {\r\n \r\n redirectUrlString += \"?\" + newParam;\r\n }\r\n }\r\n window.location.href = redirectUrlString\r\n };\r\n \r\n //for discount flow\r\n const checkBasketForAutoRedirectForDiscountFlow = (basketData, purchaseTargetForDiscountFlow) => {\r\n\r\n let purchasingFor = purchaseTargetForDiscountFlow\r\n let redirectUrlString = \"\";\r\n let queryParamsString = sessionStorage.getItem(\"queryParamsString\");\r\n const existingParams = queryParamsString || \"\"; //initial query params being retained from session\r\n const newParam = `purchasingFor=${purchasingFor}`;\r\n \r\n if ((basketData?.allowguestcheckout && !basketData?.allowcustomercheckout) || (discountApplied && adToken?.isGuest)) {\r\n redirectUrlString += \"/guest/\";\r\n }\r\n else {\r\n redirectUrlString += \"/payment/\";\r\n }\r\n redirectUrlString += fid;\r\n \r\n if(purchasingFor){\r\n\r\n // To check for existing query parameters\r\n //Skip - appending \"purchasingFor\" if it is already present in the existingParams\r\n if (existingParams && !existingParams.includes(\"purchasingFor\")) {\r\n redirectUrlString += \"?\" + existingParams + \"&\" + newParam;\r\n }\r\n else if (existingParams) {\r\n redirectUrlString += \"?\" + existingParams;\r\n }\r\n else {\r\n redirectUrlString += '?' + newParam;\r\n }\r\n }\r\n \r\n window.location.href = redirectUrlString;\r\n\r\n };\r\n \r\n useEffect(()=>{\r\n\r\n let adTokenError = searchParams.get(\"error\");\r\n if (adTokenError) {\r\n setLoading(false);\r\n setAdTokenExpired(adTokenExpired => ({...adTokenExpired, status: true}));\r\n\r\n } else {\r\n\r\n let tempFid = sessionStorage.getItem(\"fid\")\r\n if(!tempFid || fid !== tempFid){\r\n \r\n //as the new session starts, removal of session variables\r\n sessionStorage.removeItem(\"BeginEventTriggered\");\r\n sessionStorage.removeItem(\"CheckoutStarted\");\r\n sessionStorage.removeItem(\"CheckoutCompleted\");\r\n sessionStorage.removeItem(\"CheckoutStartedFiredFor\");\r\n sessionStorage.removeItem(\"stripeData\");\r\n sessionStorage.removeItem(\"isOrderAnUpgrade\");\r\n sessionStorage.removeItem(\"AvailableWalletMethods\");\r\n \r\n //deletion once out of the flow for a basket\r\n let queryParamsString = sessionStorage.getItem(\"queryParamsString\");\r\n if(!discountApplied){\r\n sessionStorage.removeItem(\"sessionDeliveryDetails\");\r\n sessionStorage.removeItem(\"discountApplied\");\r\n if(queryParamsString){\r\n sessionStorage.removeItem(\"queryParamsString\"); \r\n }}\r\n }\r\n\r\n if (errors.length == 0) {\r\n\r\n let isStringPresent = sessionStorage.getItem(\"queryParamsString\");\r\n\r\n if (!isStringPresent && !discountApplied) {\r\n extractAndStoreParams(window.location.href); //extracting query params on first mount on LP, first prop is url, second prop can be any query param that you do not want to be stored-refer the function\r\n }\r\n \r\n if (discountApplied && purchaseTargetForDiscountFlow) {\r\n loadBasketOnSelection(purchaseTargetForDiscountFlow);\r\n \r\n } else {\r\n loadBasket();\r\n }\r\n\r\n }\r\n \r\n }\r\n\r\n }, [])\r\n\r\n useEffect(()=>{\r\n\r\n //begin_checkout event \r\n let beginEventTriggered= sessionStorage.getItem(\"BeginEventTriggered\");\r\n \r\n if (metaData?.basketmetadata && beginEventTriggered===null && (basket?.allowindividualcheckout && basket?.allowgifting)) {\r\n gtmEventTriggers(\"begin_checkout\");\r\n sessionStorage.setItem(\"BeginEventTriggered\", true)\r\n \r\n //web activity: checkout-started log to only be made if not fired before, to be fired once\r\n let checkoutStarted=sessionStorage.getItem(\"CheckoutStarted\");\r\n\r\n if(checkoutStarted===null){\r\n let adtoken=GetADToken();\r\n\r\n //if user is logged in then only the log should be made, else no log\r\n if (adtoken) {\r\n setActionName(\"Checkout started\");\r\n sessionStorage.setItem(\"CheckoutStartedFiredFor\", adtoken?.username)\r\n\r\n //sessionStorage.setItem(\"CheckoutStarted\", true);\r\n }\r\n }\r\n \r\n }}, [metaData?.basketmetadata])\r\n\r\n useEffect(()=>{\r\n \r\n setFid(fid); //to pass to metadata extraction\r\n },[fid])\r\n\r\n\r\n const handleOnSubmit=()=>{\r\n \r\n //selection by user\r\n\r\n if(basket){\r\n loadBasketOnSelection( recipient || \"unknown\" )\r\n }\r\n\r\n };\r\n\r\n //expose basketErrors and checks if the chosen variants are incompatible\r\n useEffect(() => { \r\n basketErrors?.messages?.map(item => {\r\n if (item === \"error.basketguestonlyandnoguest\" || item === \"error.basketnogiftnoindividual\") {\r\n\r\n setIsIncompatibleVariant(true);\r\n } else {\r\n setIsIncompatibleVariant(false);\r\n }\r\n\r\n })\r\n }, [basketErrors])\r\n \r\n //if there is an incompatible variants the change order button goes to url\r\n \r\n usePageTitle(`Checkout - choose order type - ${props.brandingElement?.id}`);\r\n\r\n \r\n\r\n return ( !loading ? \r\n \r\n <>\r\n \r\n \r\n {variantData.map(item => \r\n
\r\n \r\n <>\r\n {adTokenExpired.status ?
\r\n\r\n {/*Checkout started log needs actionName */}\r\n \r\n
\r\n }\r\n }\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n}","import React, { Component, useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../../i18n'\r\n\r\nexport function OrderSummary(props) {\r\n const { t, i18n } = useTranslation();\r\n\r\n return (\r\n {t('acknowledgement.title')}
\r\n\r\n
\r\n )\r\n}","import React, { Component, useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../i18n'\r\nimport { LogWebActivity } from '../Webactivity/LogWebActivity';\r\nimport { Acknowledgement } from './OrderComplete/Acknowledgement'\r\nimport { OrderSummary } from './OrderComplete/OrderSummary'\r\n\r\n\r\nexport function OrderComplete(props) {\r\n const { t, i18n } = useTranslation();\r\n\r\n return (\r\n {t('ordersummary.title')}
\r\n\r\n
\r\n )\r\n}","import { useEffect } from 'react';\r\n\r\nconst addBodyClass = className => className && document.body.classList.add(className);\r\nconst removeBodyClass = className => className && document.body.classList.remove(className);\r\n\r\nexport default function useBodyClass(className) {\r\n useEffect(\r\n () => {\r\n // Set up\r\n \r\n className instanceof Array ? className.map(addBodyClass) : addBodyClass(className);\r\n\r\n // Clean up\r\n return () => {\r\n className instanceof Array\r\n ? className.map(removeBodyClass)\r\n : removeBodyClass(className);\r\n };\r\n },\r\n [className]\r\n );\r\n}","import React, { forwardRef, useState, useImperativeHandle, useRef, useEffect } from 'react';\r\nimport { useParams } from 'react-router-dom';\r\nimport { Loading } from '../../Utilities/Loading'\r\nimport { useTranslation } from 'react-i18next';\r\nimport { APIPost } from '../../API/APIRequest'\r\nimport '../../../i18n';\r\nimport useBodyClass from '../../../Hooks/useBodyClass';\r\nimport { gtmEventTriggers } from '../../Utilities/GtmFunctions';\r\nimport usePageTitle from '../../../Hooks/usePageTitle';\r\nimport { appendClientQueryParams } from '../../Utilities/Functions';\r\n\r\nexport function StripeResponseHandler(props) {\r\n \r\n const [errors, setErrors] = useState([]);\r\n const { t, i18n } = useTranslation();\r\n const { fid } = useParams();\r\n const [currentAction, setCurrentAction] = useState([]);\r\n const [loading, setLoading] = useState(true);\r\n useBodyClass(['payment-process']);\r\n usePageTitle(`Payment Processing with stripe - ${props.brandingElement?.id}`);\r\n var params = (new URL(document.location)).searchParams;\r\n var setupIntentId= params.get(\"setup_intent\");\r\n var paymentIntentId = params.get(\"payment_intent\");\r\n var notificationredirect = params.get(\"notificationredirect\");\r\n \r\n const ProcessStripePayment = () => {\r\n if (currentAction.length == 0) {\r\n if (setupIntentId) {\r\n currentAction.push(\"ProcessingFTSetup\");\r\n APIPost({\r\n \"controller\": \"freetrial\",\r\n \"action\": \"completetokenisedfreetrialsetup\",\r\n \"data\": {\r\n \"fid\": fid,\r\n \"setupIntentId\": setupIntentId,\r\n \"source\": \"UserClient\",\r\n \"preferredPaymentSource\": params.get('preferredPaymentSource') || \"UserClient\"\r\n },\r\n \"environment\": null,\r\n \"identifier\": null\r\n }).then((ftresponse) => {\r\n console.log(ftresponse);\r\n let url= window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + ftresponse.data.OrderId ;\r\n let updatedUrl= appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n \r\n }).catch((fterror) => {\r\n if (fterror.response.data.idempotencyInfo && fterror.response.data.idempotencyInfo.source && fterror.response.data.idempotencyInfo.source === \"StripeEvent\") {\r\n if (fterror.response.data.idempotencyInfo.status && fterror.response.data.idempotencyInfo.status === \"S\") {\r\n let url = window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + fterror.response.data.OrderId\r\n let updatedUrl = appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n } else {\r\n if (fterror.response.data.idempotencyInfo.status && fterror.response.data.idempotencyInfo.status === \"P\") {\r\n // Get the current URL and its search parameters\r\n let currentUrl = new URL(window.location.href);\r\n let params = currentUrl.searchParams;\r\n\r\n // Get the current value of 'refreshtime', default to 1 if not set\r\n let refreshTime = parseInt(params.get('refreshtime')) || 1;\r\n\r\n // Increment the 'refreshtime' value\r\n params.set('refreshtime', refreshTime + 1);\r\n\r\n // Update the URL with the modified parameters\r\n currentUrl.search = params.toString();\r\n\r\n // Reload the page with the updated URL. user replace so that no new entry is added to history\r\n //window.location.href = currentUrl.toString();\r\n window.location.replace(currentUrl.toString());\r\n }\r\n }\r\n }\r\n });\r\n }\r\n else if (paymentIntentId) {\r\n currentAction.push(\"ProcessingPayment\");\r\n APIPost({\r\n \"controller\": \"stripe\",\r\n \"action\": \"processpayment\",\r\n \"data\":\r\n {\r\n \"fid\": fid,\r\n \"paymentIntentId\": paymentIntentId,\r\n \"source\": \"UserClient\",\r\n \"preferredPaymentSource\": params.get('preferredPaymentSource') || \"UserClient\"\r\n }\r\n }).then((response) => {\r\n \r\n let url= window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + response.data.OrderId \r\n let updatedUrl= appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n \r\n \r\n }).catch((error) => {\r\n if (error.response.data.idempotencyInfo && error.response.data.idempotencyInfo.source && error.response.data.idempotencyInfo.source === \"StripeEvent\") {\r\n if (error.response.data.idempotencyInfo.status && error.response.data.idempotencyInfo.status === \"S\") {\r\n let url = window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + error.response.data.OrderId\r\n let updatedUrl = appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n } else {\r\n if (error.response.data.idempotencyInfo.status && error.response.data.idempotencyInfo.status === \"P\") {\r\n // Get the current URL and its search parameters\r\n let currentUrl = new URL(window.location.href);\r\n let params = currentUrl.searchParams;\r\n\r\n // Get the current value of 'refreshtime', default to 1 if not set\r\n let refreshTime = parseInt(params.get('refreshtime')) || 1;\r\n\r\n // Increment the 'refreshtime' value\r\n params.set('refreshtime', refreshTime + 1);\r\n\r\n // Update the URL with the modified parameters\r\n currentUrl.search = params.toString();\r\n\r\n // Reload the page with the updated URL. user replace so that no new entry is added to history\r\n //window.location.href = currentUrl.toString();\r\n window.location.replace(currentUrl.toString());\r\n }\r\n }\r\n }\r\n })\r\n }\r\n else if (notificationredirect) {\r\n let oid = params.get(\"orderid\");\r\n let url = window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + oid;\r\n let updatedUrl = appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n }\r\n } \r\n }\r\n\r\n\r\n ProcessStripePayment();\r\n\r\n useEffect(()=>{\r\n props.setFid(fid); //to pass to metadata extraction\r\n },[fid]) \r\n\r\n return (\r\n {t('ordercomplete.title')}
\r\n\r\n
\r\n \r\n )\r\n}\r\n\r\n","import React, { forwardRef, useState, useImperativeHandle, useRef } from 'react';\r\nimport { useParams } from 'react-router-dom';\r\nimport { Loading } from '../../Utilities/Loading'\r\nimport { useTranslation } from 'react-i18next';\r\nimport { APIPost } from '../../API/APIRequest';\r\nimport { GetBasket } from './Basket';\r\nimport '../../../i18n';\r\nimport useBodyClass from '../../../Hooks/useBodyClass';\r\nimport usePageTitle from '../../../Hooks/usePageTitle';\r\nimport { appendClientQueryParams } from '../../Utilities/Functions';\r\nexport function WorldpayResponseHandler(props) {\r\n \r\n const [errors, setErrors] = useState([]);\r\n const { t, i18n } = useTranslation();\r\n const { fid } = useParams();\r\n const { status } = useParams();\r\n const [currentAction, setCurrentAction] = useState([]);\r\n const [loading, setLoading] = useState(true);\r\n const [isProcessing, setIsProcessing] = useState(false);\r\n useBodyClass(['payment-process']);\r\n usePageTitle(`Payment Processing with Worldpay - ${props.brandingElement?.id}`);\r\n var params = (new URL(document.location)).searchParams;\r\n \r\n\r\n const confirmPayment = () => {\r\n GetBasket({ \"fid\": fid, \"loadfromserver\": false }).then((basket) => {\r\n if (basket.offertypename !== \"paid free trial\") {\r\n APIPost({\r\n \"controller\": \"worldpay\",\r\n \"action\": \"processpayment\",\r\n \"environment\": null,\r\n \"identifier\": fid\r\n }).then((response) => {\r\n\r\n let url=window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + response.data.OrderId ;\r\n let updatedUrl= appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n }).catch((error) => {\r\n\r\n\r\n });\r\n }\r\n else {\r\n APIPost({\r\n \"controller\": \"freetrial\",\r\n \"action\": \"completetokenisedfreetrialsetup\",\r\n \"environment\": null,\r\n \"data\": {\r\n \"fid\": fid\r\n }\r\n }).then((response) => {\r\n\r\n let url=window.location.protocol + \"//\" + window.location.host + \"/thankyou/\" + response.data.OrderId ;\r\n let updatedUrl= appendClientQueryParams(url);\r\n window.location.href = updatedUrl;\r\n \r\n }).catch((error) => {\r\n\r\n\r\n });\r\n }\r\n }).catch((error) => {\r\n\r\n });\r\n \r\n }\r\n if (!isProcessing)\r\n {\r\n setIsProcessing(true);\r\n confirmPayment();\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {t('stripeHandling.title')}
\r\n\r\n
\r\n \r\n
\r\n {t('stripeHandling.message')}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\n"," \r\nimport React, { Component, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../../i18n';\r\nimport './WarningComponent.css'\r\nimport { Link } from 'react-router-dom'\r\nimport ErrorBoxCS from '../../UI/ErrorBox/ErrorBox';\r\nimport { ErrorBox, ProcessErrors } from '../../Utilities/ErrorBox';\r\nimport { GenericErrorBox } from '../../UI/ErrorBox/GenericErrorBox';\r\nimport { useAuth } from '../AuthenticationProvider'\r\nimport useCreateUrl from '../../../Hooks/useCreateUrl';\r\nimport useBodyClass from '../../../Hooks/useBodyClass';\r\nimport usePageTitle from '../../../Hooks/usePageTitle';\r\n\r\n\r\nexport function WarningComponent(props) {\r\n const { t, i18n } = useTranslation();\r\n const createUrl = useCreateUrl();\r\n const auth = useAuth();\r\n\r\n useBodyClass(['disabled-account', props.brandingElement?.bodyClass]);\r\n usePageTitle(`This account is disabled - ${props.brandingElement?.id}`);\r\n const htmlString = props.brandingElement?.disabledUserErrorText;\r\n \r\n //The use of dangerouslySetInnerHTML is replacing the innerHTML\r\n //if you need further information please read this https://reactjs.org/docs/dom-elements.html\r\n return (\r\n \r\n
\r\n \r\n
\r\n {t('worldpayHandling.title')}
\r\n\r\n
\r\n \r\n
\r\n {t('worldpayHandling.message')}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\n ","import { react, useState } from \"react\";\r\nimport \"./OptionCards.scss\";\r\nimport ReactHtmlParser from 'html-react-parser';\r\n\r\n\r\nexport default function OptionCards() {\r\n const [optionsArray, setOptionsArray] = useState([{ heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription...we've got great offers?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n { heading: \"Want to buy a gift subscription?\", description: \"Click here to find out the options for a gift subscription.\" },\r\n\r\n ])\r\n\r\n const mapFunction = (array) => {\r\n return array.map((item) => {\r\n return (\r\n \r\n \r\n {t('forgottenpassword.backlinktext')}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('error.accountinactive')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n })\r\n }\r\n\r\n const optionCardsUi = () => {\r\n let temp = [...optionsArray];\r\n let arrLength = temp.length;\r\n const maxWidth = window.matchMedia(\"(max-width=1025px)\")\r\n if (arrLength >= 7 && (arrLength % 3) === 1 && maxWidth.matches == false) {\r\n let arrTemp = temp.splice(arrLength - 4, 4)\r\n return \r\n
\r\n {item.heading}
\r\n\r\n
\r\n {item.description}
\r\n\r\n
\r\n }\r\n else {\r\n return \r\n {mapFunction(temp)}\r\n
\r\n \r\n {mapFunction(arrTemp)}\r\n
\r\n 9 ? \"wrap\" : \"\"}`}>\r\n {mapFunction(temp)}\r\n
\r\n }\r\n }\r\n return (\r\n
)\r\n }","import InputWrapperRefacture from \"../../UI/Inputs/InputWrapperRefacture\";\r\nimport \"./PromoCode.scss\";\r\nimport { useState, useEffect } from \"react\";\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport ErrorBoxCS from '../../UI/ErrorBox/ErrorBox';\r\n\r\n\r\nexport default function PromoCode() {\r\n\r\n const [showField, setShowField] = useState(false);\r\n const [promoCode, setPromoCode] = useState(\"\");\r\n const [promoText, setPromoText] = useState(\"I have a promo code\");\r\n const [IsBlank, setIsBlank] = useState({ promoCode: false })\r\n const [IsInvalid, setIsInvalid] = useState({ promoCode: false })\r\n const { t, i18n } = useTranslation();\r\n\r\n\r\n const promoField = () => {\r\n return \r\n
\r\n {optionCardsUi()}\r\n Other Subscription Options
\r\n\r\n
\r\n\r\n }\r\n\r\n const submitPromoCode = (e) => {\r\n if (Validated()) {\r\n\r\n }\r\n }\r\n\r\n\r\n const Validated = () => {\r\n\r\n let valid = true;\r\n setIsInvalid({ promoCode: false })\r\n setIsBlank({ promoCode: false })\r\n\r\n if (promoCode.length < 1) {\r\n setIsBlank({ promoCode: true });\r\n valid = false;\r\n }\r\n else if (promoCode.length > 1) {\r\n // && IsInvalid.promoCode\r\n setIsInvalid({ promoCode: true });\r\n valid = false;\r\n }\r\n return valid;\r\n\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n submitPromoCode(promoCode)}\r\n // ref={inputRef}\r\n // onBlur={(e) => { handleOnBlur(e) }}\r\n // setButtonEvent={setButtonEvent}\r\n aria-invalid={IsBlank.promoCode || IsInvalid.promoCode}\r\n aria-describedby=\"promocode-error\"\r\n invalidClass={(IsBlank.promoCode || IsInvalid.promoCode) ? \"Invalid-input\" : \"\"}\r\n onChange={(e) => setPromoCode(e.target.value)} />\r\n \r\n {IsBlank.promoCode && {t('productoffer.blankpromocode')} }\r\n {IsInvalid.promoCode && {t('productoffer.invalidpromocode')} }\r\n \r\n
\r\n \r\n \r\n {showField ? promoField() : \"\"}\r\n
\r\n )\r\n}","import \"./Promo.scss\"\r\nimport { useState, useEffect } from \"react\";\r\nimport { useTranslation } from 'react-i18next';\r\nimport PromoCode from \"../PromoCode/Promocode\";\r\n\r\n\r\nexport function Promo() {\r\n\r\n const [selectedTheme, setSelectedTheme]= useState(\"Theme1\")\r\n const [buttons, setButtons]= useState([{id:\"Theme1\",value:\"Theme1\"}, {id:\"Theme2\",value:\"Theme2\"}, \r\n {id:\"Theme3\",value:\"Theme3\"}, {id:\"Theme4\",value:\"Theme4\"}])\r\n\r\n \r\n const Theme1 = () => {\r\n return \r\n 
\r\n
\r\n }\r\n\r\n const Theme2 = () => {\r\n return \r\n
\r\n Title text goes here
\r\nSimple text box can be manipulated to have as much or little text as possible
\r\n\r\n
\r\n \r\n
\r\n Subtitle text can go here within the text box
\r\n- \r\n
- \r\n
Get unlimited access to our website, with 100s of new articles added each month with lots of other stuff.
\r\n \r\n - \r\n
Complete access to our online archive of over 15,000 articles spanning more than a decade of coverage.
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n }\r\n\r\n const Theme3 = () => {\r\n return \r\n
\r\n \r\n
\r\n Title text goes here
\r\n- \r\n
Get unlimited access to our website, with 100s of new articles added each month with lots of other stuff.
\r\n Complete access to our online archive of over 15,000 articles spanning more than a decade of coverage.
\r\n
\r\n \r\n \r\n
\r\n }\r\n\r\n const Theme4 = () => {\r\n return \r\n \r\n
\r\n Title text goes here
\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Non consectetur arcu, porta nunc tellus ut facilisi fringilla. Arcu, molestie consectetur sed gravida sagittis blandit. Ultrices ante blandit tempus praesent parturient sollicitudin ut vulputate.\r\n Ultrices malesuada mauris turpis eget. Sed diam pellentesque in viverra vel tristique nisi.
\r\n\r\n \r\n
\r\n }\r\n\r\n const Theme5 = () => {\r\n return \r\n
\r\n \r\n Title text goes here
\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Non consectetur arcu, porta nunc tellus ut facilisi fringilla. Arcu, molestie consectetur sed gravida sagittis blandit. Ultrices ante blandit tempus praesent parturient sollicitudin ut vulputate.\r\n Ultrices malesuada mauris turpis eget. Sed diam pellentesque in viverra vel tristique nisi.
\r\n\r\n \r\n
\r\n }\r\n \r\n\r\n const Theme6 = () => {\r\n return \r\n Title text goes here
\r\n\r\n
\r\n \r\n
\r\n Simple text box can be manipulated to have as much or little text as possible
\r\n\r\n
\r\n \r\n
\r\n Subtitle text can go here within the text box
\r\n- \r\n
- \r\n
Bullet point with icon
\r\n \r\n - \r\n
Bullet point with icon
\r\n \r\n
\r\n
\r\n \r\n
\r\n }\r\n\r\n \r\n \r\n return <> {/*this map logic is for testing the flow of themes, will be removed as we get the data from db. That's why have used inline styling*/}\r\n\r\n {/* \r\n
\r\n Title text goes here
\r\n\r\n
\r\n \r\n
\r\n Simple text box can be manipulated to have as much or little text as possible
\r\n\r\n
\r\n \r\n
\r\n Subtitle text can go here within the text box
\r\n- \r\n
- \r\n
Bullet point with icon
\r\n \r\n - \r\n
Bullet point with icon
\r\n \r\n
\r\n
\r\n \r\n {buttons.map((item, index) => {\r\n return \r\n })}\r\n
*/}\r\n {/* {selectedTheme === \"Theme1\" ? Theme1()\r\n : selectedTheme === \"Theme2\" ? Theme2()\r\n : selectedTheme === \"Theme3\" ? Theme3()\r\n : selectedTheme === \"Theme4\" ? Theme4() :\r\n \"\"} */}\r\n {Theme1()}\r\n \r\n
\r\n {Theme2()}\r\n
\r\n
\r\n {Theme3()}\r\n
\r\n
\r\n {Theme4()}\r\n
\r\n
\r\n {Theme5()}\r\n
\r\n
\r\n {Theme6()}\r\n
\r\n
\r\n \r\n }\r\n\r\n","import OptionCards from \"./OptionCards/OptionCards\";\r\nimport { Promo } from \"./Promo/Promo\";\r\nimport Variant from \"./Variants/Variant\";\r\nimport Variants from \"./Variants/Variants\";\r\n\r\nexport function ProductOffer(){\r\n\r\n return(\r\n
\r\n
\r\n )\r\n\r\n}","import { forwardRef, Fragment, useState } from \"react\";\r\nimport './Input.css';\r\nimport './ToggleInput.css';\r\nconst InputNew =(props) => {\r\n\r\n const { description, altText, showHelp, typeInThree, specs, value } = props;\r\n const [filled, setFilled]= useState(false) \r\n let inputType = () => {\r\n switch (props.inputType) {\r\n case 'text':\r\n return \"text\"\r\n case 'email':\r\n return \"email\" //added by megha\r\n case 'checkbox':\r\n return \"checkbox\"\r\n case 'radio':\r\n return \"radio\"\r\n case 'submit':\r\n return 'submit'\r\n default:\r\n return \"text\"\r\n }\r\n }\r\n\r\n let inputSize = () => {\r\n switch (props.inputSize) {\r\n case 'full-width':\r\n return \"full-width\"\r\n case 'medium':\r\n return \"medium\"\r\n case 'small':\r\n return \"small\"\r\n default:\r\n return \"full-width\"\r\n }\r\n }\r\n\r\n \r\n //switch case for returning UI on the basis of inputType\r\n const basicInputUI=()=>{\r\n switch (props.inputType) {\r\n case 'text':\r\n return get_Text_Input()\r\n case 'password':\r\n return get_Text_Input() \r\n case 'radio':\r\n return get_Radio_Input()\r\n case 'checkbox':\r\n return get_Radio_Input()\r\n default:\r\n return get_Text_Input()\r\n }\r\n }\r\n\r\n //for checkboxes and radios\r\n const get_Radio_Input = () => {\r\n return <>\r\n {specs == \"toggle_switch\" ?\r\n \r\n :\r\n \r\n }\r\n \r\n }\r\n\r\n //for text inputs, emails.\r\n const get_Text_Input = () => {\r\n return <>\r\n \r\n \r\n 0) ? \"filled\" : \"\"} `} type={props.inputType||props.type} {...props} />\r\n \r\n }\r\n\r\n return \r\n
\r\n \r\n
\r\n }\r\n\r\n //switch inputs in the application\r\n const toggle_switch = () => {\r\n return \r\n
\r\n }\r\n\r\n //radio and checkbox inputs with altText \r\n const radio_input_with_altText = () => {\r\n return {label}
\r\n\r\n {radio_and_checkbox_input()}\r\n
\r\n\r\n }\r\n\r\n //radio and checkbox inputs with description\r\n const radio_input_with_description = () => {\r\n return {altText}
\r\n\r\n {radio_and_checkbox_input()}\r\n {specs === \"radio_input_with_description\" && description &&
\r\n\r\n }\r\n\r\n //radio and checkbox inputs with border\r\n const radio_input_with_border = () => {\r\n return {description}
}\r\n\r\n {radio_and_checkbox_input()}\r\n
\r\n\r\n }\r\n\r\n //text and psw input with a button\r\n const text_input_with_button = () => {\r\n return \r\n \r\n {(props.specs === \"search_input\") &&
\r\n \r\n }\r\n //text and psw input with a button------to be edited later\r\n const text_input_with_button1 = () => {\r\n return Type first letters to find..
}\r\n\r\n
\r\n \r\n \r\n {(props.specs === \"search_input\") &&
\r\n }\r\n\r\n //psw input\r\n const password_input_with_button = () => {\r\n return Type first letters to find..
}\r\n\r\n
\r\n \r\n \r\n {(props.specs === \"search_input\") &&
\r\n }\r\n\r\n //text inputs with a help text which toggles with a button\r\n const text_input_with_help = () => {\r\n return Type first letters to find..
}\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n }\r\n\r\n\r\n //text inputs for details which toggles with a button\r\n const text_input_for_details = () => {\r\n return \r\n \r\n {getHelpTextUI()}\r\n
\r\n Type first three letters to find..
\r\n {showHelp && helpText &&\r\n
}\r\n \r\n About this question
\r\n{helpText}
\r\n\r\n }\r\n\r\n
\r\n\r\n }\r\n\r\n //basic text input with a label along with a standard subtext with an exception of email input box\r\n const text_input = () => {\r\n return \r\n
\r\n\r\n {showDetails && details && Tell me more about this
\r\n \r\n{details}
\r\n \r\n {(props.specs === \"search_input\") &&
\r\n\r\n }\r\n\r\n \r\n\r\n\r\n //returns the ui of help text section in text_input_with_help\r\n const getHelpTextUI = () => {\r\n return Type first letters to find..
}\r\n \r\n\r\n Optional |\r\n \r\n\r\n
\r\n\r\n\r\n }\r\n\r\n\r\n //checkbox input for selection of subscription amount and cycle\r\n const checkbox_input_for_amount = () => {\r\n return \r\n
\r\n }\r\n\r\n\r\n\r\n return \r\n \r\n
\r\n {subscriptionPeriod}
\r\n\r\n \r\n \r\n This is a warning \r\n
\r\nThis is an error message \r\n
\r\nThis is an info message \r\n
\r\nThis is a positive message \r\n
\r\nThis is a neutral message \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n Input wrapper starts here\r\n\r\n \r\n \r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n}\r\nexport default DesignReview;","import React, { Component, useState } from 'react';\r\nimport { useParams, Link } from 'react-router-dom'\r\nimport { useTranslation } from 'react-i18next';\r\nimport '../../i18n';\r\nimport { ErrorBox, ProcessErrors } from '../Utilities/ErrorBox';\r\nimport { APIGet } from '../API/APIRequest';\r\nimport { GenericErrorBox } from '../UI/ErrorBox/GenericErrorBox';\r\nimport usePageTitle from '../../Hooks/usePageTitle';\r\n\r\nexport function ClearCache(props) {\r\n const { t, i18n } = useTranslation(); \r\n const [sent, setSent] = useState(false);\r\n const [errors, setErrors] = useState([]);\r\n const [cacheCleared, setCacheCleared] = useState(false);\r\n\r\n const { environment } = useParams();\r\n const clearCache = () => {\r\n \r\n APIGet({\r\n \"controller\": \"cache\",\r\n \"action\": \"clearcache\",\r\n \"environment\": environment\r\n }).then((response) => {\r\n setCacheCleared(true);\r\n }).catch((errors) => {\r\n setErrors(ProcessErrors(errors));\r\n }); \r\n }\r\n\r\n\r\n usePageTitle(`Clear application cache - ${props.brandingElement?.id}`);\r\n if (!cacheCleared && errors.length == 0) {\r\n clearCache();\r\n }\r\n\r\n \r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
This is an H1
\r\nThis is an H2
\r\nThis is an H3
\r\nThis is an H4
\r\nThis is an H5
\r\nModule heading
\r\nModule sub-heading
\r\nModule description
\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
)\r\n}\r\n\r\n","import React, { useEffect } from 'react';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { Loading } from '../Utilities/Loading';\r\n\r\n\r\n\r\nexport function Redirection() {\r\n \r\n\r\n const { state } = useLocation();\r\n \r\n useEffect(()=>{\r\n\r\n if(state){\r\n window.location.replace(state?.returnUrl);\r\n }\r\n \r\n\r\n },[state])\r\n \r\n\r\n return ( Cache cleared
\r\n \r\n : \r\n }\r\n\r\n \r\n \r\n {\r\n productVariants?.map((productVariant) => (\r\n
\r\n
\r\n )\r\n }\r\n \r\n var content = displayData();\r\n return (\r\n | \r\n {productVariant.productvariantname}\r\n | \r\n\r\n {productVariant.price}\r\n | \r\n\r\n Add to basket\r\n | \r\n
\r\n
\r\n )\r\n \r\n}","import { t } from 'i18next';\r\nimport React, { useRef, useState, useEffect } from 'react';\r\nimport { format } from 'react-string-format';\r\n\r\n\r\nimport \"./../ThankyouPage.scss\";\r\n\r\nexport function BillingDetails(props) { \r\n \r\n return (\r\n \r\n
\r\n Test Product Offers
\r\n\r\n
\r\n\r\n {/* {showPopup ? \r\n \r\n \r\n
\r\n :\"\"} */}\r\n \r\n
\r\n )\r\n}","import React, { useRef, useState, useEffect } from 'react';\r\nimport { t } from 'i18next';\r\nimport \"./../ThankyouPage.scss\";\r\n\r\n\r\n\r\nexport function DeliveryDetails(props) {\r\n\r\n const [mergedArray, setMergedArray] = useState([]);\r\n const [uniqueKeys, setUniqueKeys] = useState([]);\r\n \r\n\r\n useEffect(() => {\r\n const mergedMap = new Map();\r\n\r\n // Merge duplicates based on a specific key (e.g., 'id')\r\n props?.recipients?.forEach(item => {\r\n\r\n\r\n const key = item.id; // Change this to the appropriate key\r\n if (mergedMap.has(key)) {\r\n mergedMap.get(key).count += 1;\r\n } else {\r\n mergedMap.set(key, { ...item, count: 1 });\r\n }\r\n });\r\n\r\n // Extract merged and unique entries\r\n const mergedArray = Array.from(mergedMap.values());\r\n const uniqueKeysArray = props?.recipients?.filter(item => !mergedMap.has(item.id))\r\n .map(item => item.id);\r\n\r\n // Update state with merged and unique entries\r\n setMergedArray(mergedArray);\r\n setUniqueKeys(uniqueKeysArray);\r\n\r\n\r\n }, [props?.recipients]);\r\n\r\n\r\n const Delivery = () => {\r\n\r\n return <>\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n {props?.billingAddress &&\r\n <>\r\n {props.billingAddress?.locationId !== 0 &&\r\n \r\n {t(\"thankyoupage.billingtitle\") }
\r\n\r\n
\r\n }\r\n \r\n }\r\n \r\n
\r\n {t(\"thankyoupage.billingaddress\")}
\r\n{props.billingAddress?.companyName && props?.billingAddress.companyName + ', '}\r\n {props.billingAddress?.address1 && props?.billingAddress.address1 + ', '}\r\n {props?.billingAddress?.address2 && props?.billingAddress.address2 + ', '}\r\n {props?.billingAddress?.address3 && props?.billingAddress.address3 + ', '}\r\n {props?.billingAddress?.town && props?.billingAddress.town + ', '}\r\n {props?.billingAddress?.county && props?.billingAddress.county + ', '}\r\n {props?.billingAddress?.country && props?.billingAddress.country + ', '}\r\n {props?.billingAddress?.postcode}\r\n
\r\n \r\n \r\n\r\n\r\n
\r\n {props?.nextPayment &&\r\n <>\r\n \r\n
\r\n \r\n {t(\"thankyoupage.billingpaymenttitle\")}
\r\n\r\n
\r\n {props.paymentType === 3 && {t(\"thankyoupage.billingpaymentwith\")} Direct Debit
}\r\n {(props.paymentType === 7 || props.paymentType === 2) && (\r\n{t(\"thankyoupage.billingpaymentcard\")} {props?.cardNumber}
\r\n )}\r\n {props.paymentType === 10010 &&{t(\"thankyoupage.billingpaymentwith\")} Paypal
}\r\n {(props.paymentType === 10008 || props.paymentType === 20) &&{t(\"thankyoupage.billingpaymentwithinvoice\")}
}\r\n\r\n \r\n \r\n
}\r\n\r\n \r\n
\r\n {t(\"thankyoupage.billingaccountholder\")}: {props.directDebit.accountholder}
\r\n {t(\"thankyoupage.billingBank\")}: {props.directDebit.bankname}
\r\n {t(\"thankyoupage.billingaccountnumber\")}: {props.directDebit.accountnumber}
\r\n {t(\"thankyoupage.billingsortcode\")}: {props.directDebit.sortcode}
\r\n \r\n \r\n \r\n
\r\n \r\n }\r\n {t(\"thankyoupage.nextcollectiondate\")}
{props?.nextPayment?.nextpaymentdate}
{t(\"thankyoupage.nextpayment\")}
{props?.currency}{props?.nextPayment?.amount?.toFixed(2)}
\r\n
\r\n {t(\"thankyoupage.deliverydetails\")}
\r\n\r\n {mergedArray && mergedArray?.map((recipientDetails, index) => (\r\n <>\r\n {recipientDetails?.id !== props?.purchaser?.id &&\r\n <>\r\n
\r\n \r\n\r\n }\r\n return (\r\n <>{mergedArray?.map((recipientDetails, index) => ( \r\n <> \r\n {((recipientDetails?.Address?.address1?.length > 0 || recipientDetails?.Address?.address2?.length > 0 || recipientDetails?.Address?.address3?.length > 0) || recipientDetails.id !== props.purchaser.id) &&\r\n <>\r\n\r\n {recipientDetails?.name}
\r\n {recipientDetails?.email}
\r\n \r\n }\r\n\r\n {(recipientDetails?.Address?.address1?.length > 0 || recipientDetails?.Address?.address2?.length > 0 || recipientDetails?.Address?.address3?.length > 0) &&\r\n \r\n \r\n
\r\n }\r\n \r\n ))}\r\n {t(\"thankyoupage.deliveryaddress\")}
\r\n{recipientDetails.Address?.companyName} {recipientDetails.Address.companyName && ', '}\r\n {recipientDetails.Address?.address1} {recipientDetails.Address.address1 && ', '}\r\n {recipientDetails.Address?.address2} {recipientDetails.Address.address2 && ', '}\r\n {recipientDetails.Address?.address3} {recipientDetails.Address.address3 && ', '}\r\n {recipientDetails.Address?.town} {recipientDetails.Address.town && ', '}\r\n {recipientDetails.Address?.county} {recipientDetails.Address.county && ', '}\r\n {recipientDetails.Address?.country} {recipientDetails.Address.country && ', '}\r\n {recipientDetails.Address?.postcode}
\r\n\r\n
\r\n \r\n }\r\n \r\n\r\n ))}\r\n \r\n \r\n\r\n )\r\n \r\n}\r\n","import React, { useRef, useState, useEffect } from 'react';\r\nimport { useParams } from 'react-router-dom'\r\nimport { useTranslation } from 'react-i18next';\r\nimport \"./../ThankyouPage.scss\";\r\nimport useFindHeight from '../../../../Hooks/useFindHeight';\r\nimport { t } from 'i18next';\r\n\r\nexport function OrderSummary(props) {\r\n \r\n const [observedDiv, elementHeight] = useFindHeight();\r\n \r\n\r\n return (\r\n \r\n \r\n {Delivery()}\r\n
\r\n \r\n
\r\n\r\n\r\n )\r\n}","import React from 'react';\r\nimport \"./../ThankyouPage.scss\";\r\nimport { t } from 'i18next';\r\n\r\n\r\nexport function CustomerDetails(props) { \r\n \r\n const BuyerDetails = () => {\r\n return <>\r\n \r\n
\r\n \r\n \r\n \r\n ))} \r\n \r\n
\r\n {props?.isOrderAnUpgrade ?\r\n \r\n {t(\"thankyoupage.ordersummary\")}
\r\n {props?.items?.map((item, index) => (\r\n <>\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n {item.displayname ? item.displayname : item.shortdescription}
\r\n x{item.quantity}\r\n\r\n {props?.currencysymbol}{item?.price?.toFixed(2)}\r\n
\r\n \r\n\r\n
\r\n\r\n :\r\n\r\n \r\n
\r\n\r\n {t(\"thankyoupage.ordersummarysubtotal\")}
\r\n{props?.currencysymbol}{props?.net !== \"\" ? props?.net?.toFixed(2) : props?.net}
\r\n\r\n
\r\n \r\n {props.delivery &&\r\n {t(\"thankyoupage.previoussubscriptiondiscount\")}
\r\n{t(\"upgrade.negativesign\")}{props?.currencysymbol}{props?.prevSubsDiscount !== \"\" ? props?.prevSubsDiscount?.toFixed(2) : props?.prevSubsDiscount}
\r\n\r\n
\r\n }\r\n\r\n {t(\"thankyoupage.ordersummarydelivery\")}
\r\n{props?.currencysymbol}{props?.delivery !== \"\" ? props?.delivery?.toFixed(2) : props?.delivery}
\r\n\r\n
\r\n\r\n \r\n {t(\"thankyoupage.ordersummarytax\")}
\r\n{props?.currencysymbol}{props?.tax !== \"\" ? props?.tax?.toFixed(2) : props?.tax }
\r\n\r\n
\r\n {t(\"thankyoupage.ordersummarytotal\")}
\r\n{props?.currencysymbol}{props?.amountToPay !== \"\" ? props?.amountToPay?.toFixed(2) : props?.amountToPay}
\r\n\r\n\r\n
\r\n }\r\n \r\n
\r\n \r\n {t(\"thankyoupage.ordersummarysubtotal\")}
\r\n{props?.currencysymbol}{props?.net !== \"\" ? props?.net?.toFixed(2) : props?.net}
\r\n\r\n
\r\n\r\n {props.delivery &&\r\n {t(\"thankyoupage.ordersummarytax\")}
\r\n{props?.currencysymbol}{props?.tax !== \"\" ? props?.tax?.toFixed(2) : props?.tax }
\r\n\r\n
\r\n }\r\n\r\n \r\n {t(\"thankyoupage.ordersummarydelivery\")}
\r\n{props?.currencysymbol}{props?.delivery !== \"\" ? props?.delivery?.toFixed(2) : props?.delivery}
\r\n\r\n
\r\n {t(\"thankyoupage.ordersummarytotal\")}
\r\n{props?.currencysymbol}{props?.total !== \"\" ? props?.total?.toFixed(2) : props?.total}
\r\n\r\n
\r\n \r\n \r\n }\r\n\r\n\r\n \r\n \r\n return (<> \r\n {BuyerDetails()} \r\n \r\n \r\n )\r\n}","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport \"./../ThankyouPage.scss\";\r\nimport \"../../../../general.scss\";\r\nimport DOMPurify from 'dompurify';\r\n\r\nexport function UserSignin(props) {\r\n const definedURL = sessionStorage.getItem(\"postcompleteurl-default\");\r\n const { t, i18n } = useTranslation();\r\n const {customThankyouMessage, customButtonText}= props;\r\n \r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {t(\"thankyoupage.yourdetails\")}
\r\n\r\n
\r\n \r\n \r\n
\r\n {props?.purchaserName}
\r\n \r\n
\r\n {props?.purchaserEmail}
\r\n\r\n
\r\n )\r\n}\r\n\r\n\r\n\r\n","import { useState, useEffect } from 'react';\r\n\r\nconst useDateLocalisation = (dateString, options = {}) => {\r\n const [localisedDate, setLocalisedDate] = useState('');\r\n\r\n useEffect(() => {\r\n if (dateString) {\r\n const dateObject = parseDateString(dateString);\r\n if (dateObject && isValidDate(dateObject)) {\r\n const formattedDate = formatDate(dateObject, options);\r\n setLocalisedDate(formattedDate || 'Invalid Date');\r\n } else {\r\n setLocalisedDate('Invalid Date');\r\n }\r\n }\r\n }, [dateString, options]);\r\n\r\n const parseDateString = (str) => {\r\n const parts = str.split(' ');\r\n const day = parseInt(parts[0], 10);\r\n const monthName = parts[1];\r\n const year = parseInt(parts[2], 10);\r\n const timeParts = parts[3].split(':');\r\n const hour = parseInt(timeParts[0], 10);\r\n const minute = parseInt(timeParts[1], 10);\r\n\r\n const monthIndex = new Date(Date.parse(monthName + \" 1, 2000\")).getMonth();\r\n\r\n return new Date(Date.UTC(year, monthIndex, day, hour, minute));\r\n };\r\n\r\n const isValidDate = (d) => d instanceof Date && !isNaN(d.getTime());\r\n\r\n const formatDate = (date, options) => {\r\n const {\r\n year = 'numeric',\r\n month = 'long',\r\n day = 'numeric',\r\n hour = 'numeric',\r\n minute = 'numeric',\r\n timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone, // Set to the desired time zone\r\n locale = navigator.language || 'en-GB',\r\n } = options;\r\n\r\n const dateMonthOptions = { year, month, timeZone };\r\n const dateDayOptions = { day, timeZone };\r\n const timeOptions = { hour: 'numeric', minute: 'numeric', hour12: false, timeZone };\r\n\r\n const formattedDay = date.toLocaleString(locale, dateDayOptions);\r\n\r\n const formattedMonth = date.toLocaleString(locale, dateMonthOptions);\r\n\r\n const formattedTime = date.toLocaleString(locale, timeOptions);\r\n\r\n // Concatenate date and time\r\n return `${formattedDay} ${formattedMonth} ${formattedTime}`;\r\n };\r\n\r\n return localisedDate;\r\n};\r\n\r\nexport default useDateLocalisation;","import React, { useState, useEffect } from 'react';\r\nimport ReactHtmlParser from 'html-react-parser';\r\nimport { useParams } from 'react-router-dom'; \r\nimport '../../../i18n'\r\nimport \"./ThankyouPage.scss\";\r\nimport { APIGet } from '../../API/APIRequest'\r\n import { BillingDetails } from './OrderDetails/BillingDetails';\r\nimport { DeliveryDetails } from './OrderDetails/DeliveryDetails';\r\n \r\nimport { OrderSummary } from './OrderDetails/OrderSummary';\r\nimport { GenericErrorBox } from '../../UI/ErrorBox/GenericErrorBox';\r\nimport { CustomerDetails } from './OrderDetails/CustomerDetails';\r\nimport { UserSignin } from './MessageBox/UserSignin';\r\nimport { UserGuest } from './MessageBox/UserGuest';\r\nimport { GetADToken, RemoveADToken } from '../../Utilities/TokenManager';\r\nimport usePageTitle from '../../../Hooks/usePageTitle';\r\nimport useDateLocalisation from '../../../Hooks/useDateLocalisation';\r\nimport { gtmEventTriggers } from '../../Utilities/GtmFunctions';\r\nimport { t } from 'i18next';\r\nimport { format } from 'react-string-format';\r\nimport { LogWebActivity } from '../../Webactivity/LogWebActivity';\r\n\r\nexport function ThankyouPage(props) {\r\n\r\n \r\n const {metaData} = props;\r\n const { orderid } = useParams();\r\n const [errors, setErrors] = useState([]);\r\n const [order, setOrder] = useState();\r\n const [actionName, setActionName] = useState(\"\");\r\n const [customThankyouMessage, setCustomThankyouMessage] = useState({\"show\": \"\", \"text\":\"\"});\r\n const [customButtonText, setCustomButtonText] = useState({ \"show\": \"\", \"text\": \"\" });\r\n const [isFreeTrial, setIsFreeTrial] = useState(false);\r\n const [upgradeDetails, setUpgradeDetails] =useState({})\r\n \r\n\r\n const fid= sessionStorage.getItem(\"fid\");\r\n const isOrderAnUpgrade=sessionStorage.getItem(\"isOrderAnUpgrade\");\r\n \r\n const userToken = GetADToken();\r\n \r\n usePageTitle(`Thank you for your order - ${props.brandingElement?.id}`);\r\n \r\n const LoadSummary = (orderid, data) => { \r\n APIGet({\r\n \"controller\": \"order\",\r\n \"action\": \"summary\",\r\n \"environment\" : null,\r\n \"identifier\": orderid,\r\n \"data\" : data,\r\n \"headers\": [{\r\n \"key\": \"UserToken\",\r\n \"value\": userToken.token\r\n }]\r\n }).then((response) => { \r\n sessionStorage.setItem(\"postcompleteurl-default\", response.data.postcompleteurl);\r\n setOrder(response.data.order); \r\n checkForThankyouMessage(response.data.order);\r\n checkForButtontext(response.data.order);\r\n if(isOrderAnUpgrade){\r\n getUpgradeDetails(response.data.order);\r\n }\r\n \r\n }).catch((error) => {\r\n var unexpected = [];\r\n unexpected.push(\"error.unexpected\");\r\n setErrors(unexpected);\r\n })\r\n }\r\n const formattedDate = useDateLocalisation(order?.orderdate);\r\n\r\n const getUpgradeDetails = (order) => {\r\n let prevSubsDiscount = 0;\r\n order?.paymentsbytype?.map((item) => {\r\n if (item?.name === \"Order Payment Transfer\") {\r\n prevSubsDiscount = item?.credit;\r\n setUpgradeDetails(upgradeDetails => ({ ...upgradeDetails, prevSubsDiscount: prevSubsDiscount }));\r\n }\r\n });\r\n let amountToPay = order?.total - prevSubsDiscount;\r\n setUpgradeDetails(upgradeDetails => ({ ...upgradeDetails, amountToPay: amountToPay }));\r\n }\r\n\r\n //Removing guest token on completing order\r\n useEffect(() => {\r\n\r\n LoadSummary(orderid);\r\n \r\n sessionStorage.setItem(\"orderId\", orderid)\r\n sessionStorage.removeItem(\"stripeData\"); //deletion once the process starts\r\n \r\n // if (userToken?.isGuest) {\r\n // RemoveADToken();\r\n // }\r\n\r\n }, [])\r\n \r\n useEffect(()=>{\r\n \r\n //to be fired once order is made and flow is completed\r\n if(metaData?.basketmetadata){\r\n gtmEventTriggers(\"purchase\", orderid);\r\n }\r\n\r\n //web-activity: not to fire the log if already fired, only to be fired once\r\n let checkoutCompleted = sessionStorage.getItem(\"CheckoutCompleted\");\r\n if (checkoutCompleted === null) {\r\n let adtoken = sessionStorage.getItem(\"adtoken\");\r\n \r\n //userToken is needed\r\n if (adtoken) {\r\n setActionName(\"Checkout completed\")\r\n sessionStorage.setItem(\"CheckoutCompleted\", true)}\r\n }\r\n\r\n }, [metaData?.basketmetadata]);\r\n\r\n useEffect(()=>{\r\n\r\n props.setFid(fid);\r\n\r\n }, [fid])\r\n\r\n //set state to check if is untokenised free trial\r\n useEffect(() => {\r\n if (order?.payment.NextPayment === null && order.ordertypename === \"Free trial\") {\r\n setIsFreeTrial(true)\r\n }\r\n }, [order])\r\n\r\n const checkForThankyouMessage=(order)=>{\r\n let count=0;\r\n if(order?.lines){\r\n order.lines.forEach((variant, id)=>{\r\n if (variant?.thankyoutext){\r\n setCustomThankyouMessage(customThankyouMessage=>({...customThankyouMessage, text:variant?.thankyoutext }))\r\n count=count+1;\r\n }\r\n })\r\n }\r\n if(count===1){\r\n setCustomThankyouMessage(customThankyouMessage=>({...customThankyouMessage, show: \"true\" })) \r\n }\r\n else{\r\n setCustomThankyouMessage(customThankyouMessage=>({...customThankyouMessage, show: \"false\" })) \r\n }}\r\n \r\n const checkForButtontext=(order)=>{\r\n let count=0;\r\n if(order?.lines){\r\n order.lines.forEach((variant, id)=>{\r\n if (variant?.thankyoubuttontext){\r\n setCustomButtonText(customButtonText=>({...customButtonText, text:variant?.thankyoubuttontext }))\r\n count=count+1;\r\n }\r\n })\r\n }\r\n if(count===1){\r\n setCustomButtonText(customButtonText=>({...customButtonText, show: \"true\"}))\r\n }else{\r\n setCustomButtonText(customButtonText=>({...customButtonText, show: \"false\"}))\r\n }} \r\n\r\n let orderConfirmationText = format(t('thankyoupage.orderconfirmationtext'), order?.purchaser?.email)\r\n\r\n if (order?.payment?.directdebit && upgradeDetails?.amountToPay) {\r\n order.payment.NextPayment.amount = upgradeDetails.amountToPay;\r\n }\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n {customThankyouMessage.show === \"true\" ? :\r\n customThankyouMessage.show === \"false\" ?
\r\n {customButtonText.show ===\"true\" ? customButtonText.text : \r\n customButtonText.show ===\"false\" ? t(\"thankyoucontinue.buttontext\") : \"\"}\r\n {t(\"thankyoucontinue.message\")}
:\"\"}\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n
\r\n {/* {isloggedIn !== null ? < UserSignin /> : \r\n
\r\n {t('thankyoupage.thankyoutext')}
\r\n{order?.purchaser?.email && ReactHtmlParser(orderConfirmationText || \"\")}
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {t('thankyoupage.orderdetailslabel')}
\r\n\r\n
\r\n {t('thankyoupage.reflabel')}
\r\n{order?.orderCode }
\r\n{t('thankyoupage.purchasedlabel')} {formattedDate}
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\n\r\n\r\n\r\n\r\n","import { useEffect, useState} from 'react';\r\n\r\n//go through for error handling\r\n\r\nexport function DynamicScriptComponent({ metaData, branding}) {\r\n\t\r\n const [metaScriptsAdded, setMetaScriptsAdded] = useState(false);\r\n const [brandingScriptsAdded, setBrandingScriptsAdded] = useState(false);\r\n\r\n const extractingScript = (data) => {\r\n const scripts = [];\r\n if (data) {\r\n\r\n let tempDiv = document.createElement('div');\r\n tempDiv.innerHTML = data;\r\n let scriptTags = tempDiv.getElementsByTagName('script');\r\n\r\n for (let i = 0; i < scriptTags.length; i++) {\r\n let scriptContent = scriptTags[i].textContent || scriptTags[i].innerText;\r\n let srcAttributeValue = scriptTags[i].getAttribute('src');\r\n let scriptId = scriptTags[i].id;\r\n let scriptType = scriptTags[i].type;\r\n scripts.push({ \"scriptContent\": scriptContent, \"src\": srcAttributeValue, \"id\":scriptId, 'type':scriptType });\r\n }\r\n }\r\n return scripts;\r\n }\r\n\r\n //element=where to append\r\n //pos= the position in the element\r\n const executingScripts = (scripts, element, pos) => {\r\n scripts.forEach(script => {\r\n const newScript = document.createElement('script');\r\n\r\n if(script.id){\r\n newScript.id = script.id;\r\n }\r\n if(script.type){\r\n newScript.type = script.type; \r\n }\r\n \r\n if (script.src) {\r\n newScript.src = script.src;\r\n } else {\r\n newScript.textContent = script.scriptContent;\r\n }\r\n\r\n if (element === \"body\") {\r\n document.body.insertAdjacentElement(pos, newScript);\r\n }\r\n else if (element === \"head\") {\r\n document.head.insertAdjacentElement(pos, newScript);\r\n }\r\n \r\n });\r\n }\r\n\r\n\r\n const removingScripts = (addedScripts) => {\r\n addedScripts.forEach(script => {\r\n if (script.src) {\r\n const existingScript = document.querySelector(`script[src=\"${script.src}\"]`);\r\n if (existingScript) {\r\n existingScript.remove();\r\n }\r\n } else if (script.scriptContent) {\r\n \r\n const existingScripts = document.querySelectorAll(`script`);\r\n existingScripts.forEach(existingScript => {\r\n if (existingScript.textContent === script.scriptContent) {\r\n existingScript.remove();\r\n }\r\n });\r\n }\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n\r\n if (!brandingScriptsAdded && branding) {\r\n\r\n try {\r\n\r\n const headHtmlScript = extractingScript(branding?.headHtml);\r\n executingScripts(headHtmlScript, \"head\", \"beforeend\");\r\n\r\n const afterBodyOpenScript = extractingScript(branding?.afterBodyOpenData);\r\n executingScripts(afterBodyOpenScript, \"body\", \"afterbegin\");\r\n\r\n const beforeBodyCloseScript = extractingScript(branding?.beforeBodyCloseData);\r\n executingScripts(beforeBodyCloseScript, \"body\", \"beforeend\");\r\n\r\n setBrandingScriptsAdded(true)\r\n\r\n return () => {\r\n removingScripts(headHtmlScript);\r\n removingScripts(afterBodyOpenScript);\r\n removingScripts(beforeBodyCloseScript);\r\n\r\n };\r\n\r\n } catch (error) {\r\n console.error('Error in appending the script. Please check if the call is taking place correctly', error);\r\n }\r\n }\r\n\r\n }, [branding]);\r\n\r\n\r\n useEffect(() => {\r\n \r\n if (!metaScriptsAdded && metaData) {\r\n try {\r\n\r\n const partyMetaDataScript = extractingScript(metaData?.partymetadata);\r\n executingScripts(partyMetaDataScript, \"head\", \"afterbegin\");\r\n\r\n const basketMetaDataScript = extractingScript(metaData?.basketmetadata);\r\n executingScripts(basketMetaDataScript, \"head\", \"afterbegin\");\r\n\r\n setMetaScriptsAdded(true)\r\n\r\n return () => {\r\n removingScripts(basketMetaDataScript);\r\n removingScripts(partyMetaDataScript);\r\n \r\n };\r\n\r\n } catch (error) {\r\n console.error('Error in appending the script. Please check if the call is taking place correctly', error);\r\n }\r\n }\r\n\r\n }, [metaData]);\r\n\r\n return (\r\n\r\n <>\r\n\r\n );\r\n}","import React, { forwardRef, useRef, useMemo, useImperativeHandle,useEffect } from \"react\";\r\nimport { Model } from \"survey-core\";\r\nimport { Survey } from \"survey-react-ui\";\r\nimport \"survey-core/defaultV2.min.css\";\r\nimport \"./resetSurvey.scss\"\r\n\r\n\r\nconst SurveyForm = forwardRef((props, ref) => {\r\n const { setSurveyData, setSurveyValidation } = props;\r\n\r\n const surveyJson = useMemo(() => ({\r\n showNavigationButtons: false,\r\n name: \"demographics\",\r\n elements: [\r\n {\r\n type: \"radiogroup\",\r\n name: \"gender\",\r\n title: \"How do you identify?\",\r\n choices: [\r\n { text: \"Male\", value: \"male\", category: \"By Birth\" },\r\n { text: \"Female\", value: \"female\", category: \"By Birth\" },\r\n { text: \"Non-Binary\", value: \"nonbinary\", category: \"Other Identities\" },\r\n { text: \"Prefer not to say\", value: \"prefer_not_say\", category: \"Other Identities\" }\r\n ],\r\n hasOther: true, // Enables \"Other\" option\r\n otherText: \"Other (please specify)\", // Custom label for \"Other\"\r\n isRequired: true\r\n \r\n },\r\n {\r\n type: \"dropdown\",\r\n name: \"education\",\r\n title: \"What is the highest level of education you have completed?\",\r\n choices: [\r\n { value: \"high-school\", text: \"High School\" },\r\n { value: \"associate-degree\", text: \"Associate Degree\" },\r\n { value: \"bachelor\", text: \"Bachelor’s Degree\" },\r\n { value: \"master\", text: \"Master’s Degree\" },\r\n { value: \"phd\", text: \"PhD\" },\r\n \r\n ], \r\n hasOther: true, // Enables \"Other\" option\r\n otherText: \"Other (please specify)\", // Custom label for \"Other\"\r\n isRequired: true\r\n },\r\n \r\n {\r\n type: \"dropdown\",\r\n name: \"employment\",\r\n title: \"What is your current employment status?\",\r\n description: \"Descibe how you feeling in your job\",\r\n titleTooltip: \"Get help here\",\r\n choices: [\r\n { value: \"full-time\", text: \"Employed full-time\" },\r\n { value: \"part-time\", text: \"Employed part-time\" },\r\n { value: \"self-employed\", text: \"Self-employed\" },\r\n { value: \"unemployed\", text: \"Unemployed\" },\r\n { value: \"student\", text: \"Student\" },\r\n { value: \"retired\", text: \"Retired\" }\r\n ],\r\n isRequired: false\r\n },\r\n {\r\n type: \"checkbox\",\r\n name: \"favoriteFruits\",\r\n title: \"Select your favorite fruits:\",\r\n choices: [\r\n \"Apple\",\r\n \"Banana\",\r\n \"Orange\",\r\n \"Grapes\",\r\n \"Mango\"\r\n ],\r\n hasOther: true, // Enables \"Other\" option\r\n otherText: \"Other (please specify)\", // Custom label for \"Other\"\r\n isRequired: true\r\n },\r\n {\r\n type: \"text\",\r\n name: \"age\",\r\n title: \"Enter your age:\",\r\n inputType: \"number\", // Makes it a numeric input\r\n isRequired: true,\r\n min: 1, // Minimum value allowed\r\n max: 120, // Maximum value allowed\r\n placeHolder: \"Enter a number\"\r\n },\r\n {\r\n type: \"text\",\r\n name: \"company\",\r\n title: \"Company:\", \r\n isRequired: true, \r\n placeHolder: \"Enter a company\"\r\n },\r\n {\r\n \"type\": \"dropdown\",\r\n \"name\": \"confirm\",\r\n \"title\": \"Do you agree?\",\r\n \"choices\": [\r\n { \"value\": \"yes\", \"text\": \"Yes\" },\r\n { \"value\": \"no\", \"text\": \"No\" }\r\n ],\r\n \"defaultValue\": \"yes\"\r\n },\r\n {\r\n \"type\": \"checkbox\",\r\n \"name\": \"confirm-dpa\",\r\n \"title\": \"DPA?\",\r\n \"choices\": [\r\n { \"value\": \"yes\", \"text\": \"This is a dpa\" },\r\n \r\n ],\r\n \"defaultValue\": [\"yes\"],\r\n isRequired: true, \r\n },\r\n {\r\n \"type\": \"radiogroup\",\r\n \"name\": \"confirm-answer\",\r\n \"title\": \"Do you agree?\",\r\n \"choices\": [\r\n { value: \"yes\", text : \"yes\" },\r\n { value: \"no\", text : \"no\" },\r\n\r\n ],\r\n \"defaultValue\": [\"yes\"],\r\n },\r\n {\r\n type: \"comment\",\r\n name: \"suggestions\",\r\n title: \"Text Area 5 rows\",\r\n isRequired: true,\r\n placeHolder: \"Write here...\", \r\n rows: 5 // Sets the initial height of the textarea\r\n },\r\n {\r\n type: \"comment\",\r\n name: \"suggestions2\",\r\n title: \"Text Area 5 rows with Max length\",\r\n isRequired: true,\r\n placeHolder: \"Write here...\",\r\n maxLength: 500, // Limits input to 500 characters\r\n rows: 5 // Sets the initial height of the textarea\r\n },\r\n {\r\n \"type\": \"text\",\r\n \"name\": \"phoneNumber\",\r\n \"title\": \"Enter your phone number\",\r\n \"isRequired\": true,\r\n \"inputType\": \"tel\",\r\n \"validators\": [{\r\n \"type\": \"regex\",\r\n \"text\": \"Only numbers, '+', '(', and ')' are allowed.\",\r\n \"regex\": \"^[0-9+()\\\\- ]+$\"\r\n }]\r\n }\r\n\r\n ],\r\n showCompletedPage: false,\r\n showQuestionNumbers: \"off\",\r\n completedHtml: \"\",\r\n questionErrorLocation: \"bottom\",\r\n isPanelless: true,\r\n }), []);\r\n\r\n const surveyModel = useRef(new Model(surveyJson)); // SurveyJS model initialization\r\n \r\n\r\n useEffect(() => {\r\n console.log(\"my\", surveyModel.current);\r\n const model = surveyModel.current;\r\n console.log(\"Model\", model);\r\n \r\n if (model) {\r\n \r\n }\r\n\r\n return () => {\r\n if (model) {\r\n model.onAfterRenderQuestion.remove(); // Cleanup event listener\r\n }\r\n };\r\n }, []);\r\n\r\n useImperativeHandle(ref, () => ({\r\n validateSurvey: () => surveyModel.current.validate(),\r\n getSurveyData: () => surveyModel.current.data\r\n }));\r\n\r\n return \r\n
\r\n \r\n
\r\n \r\n {message?.title ?
\r\n {message.title}
: \"\"}\r\n {message?.message} \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default CustomForms;\r\n\r\n\r\n","import React, { Component, Fragment, Suspense, useReducer, useEffect, useLayoutEffect, useState } from 'react';\r\nimport ReactDom from 'react-dom';\r\nimport ReactHtmlParser from 'html-react-parser';\r\nimport { Routes, Route , useParams} from 'react-router-dom';\r\nimport './general.scss'\r\nimport './normalize.css'\r\nimport './reset.css'\r\nimport Layout from './components/Layout';\r\nimport './i18n'\r\nimport PrivateRoute from './components/Utilities/PrivateRoute';\r\nimport { Payment } from './components/Order/Payment';\r\nimport { LandingPage } from './components/Order/LandingPage';\r\nimport { OrderComplete } from './components/Order/OrderComplete';\r\nimport { StripeResponseHandler } from './components/Order/Payment/StripeResponseHandler';\r\nimport { WorldpayResponseHandler } from './components/Order/Payment/WorldpayResponseHandler';\r\nimport TagManager from 'react-gtm-module'\r\nimport { WarningComponent } from './components/Authentication/WarningComponent/WarningComponent';\r\nimport { GetADToken, RefreshADToken } from './components/Utilities/TokenManager'\r\nimport { Loading } from './components/Utilities/Loading'\r\nimport { ErrorBox, ProcessErrors } from './components/Utilities/ErrorBox'\r\nimport { ProductOffer } from './components/ProductOffer/ProductOffer';\r\nimport { useAuth } from './components/Authentication/AuthenticationProvider';\r\nimport DesignReview from './components/UI/DesignReview/DesignReview';\r\nimport HeadProperties from './components/Layout/Head/HeadProperties';\r\nimport { ResetPassword } from './components/Authentication/ResetPassword/ResetPassword';\r\nimport { ClearCache } from './components/Caching/ClearCache';\r\nimport { APIGet, APIPost , getEnvironment } from './components/API/APIRequest';\r\nimport { Redirection } from './components/Redirection/Redirection';\r\nimport { Test } from './components/Test/Test';\r\nimport { TestProductOffer } from './components/Test/ProductOffer';\r\nimport {GoogleReCaptchaProvider, useGoogleReCaptcha} from 'react-google-recaptcha-v3';\r\nimport { CheckoutPage } from './components/Checkout/CheckoutPage';\r\nimport { ThankyouPage } from './components/Order/ThankyouPage/ThankyouPage';\r\nimport { formReducer, initialState, PaymentFormContext } from './components/Order/PaymentFormReducer';\r\nimport WhoIsItFor from './components/ProductOffer/WhoIsItFor';\r\nimport { Logout } from './components/Authentication/Logout';\r\nimport { PageNotFound } from './components/Site/PageNotFound'\r\nimport { DynamicScriptComponent } from './DynamicScriptComponent';\r\nimport { OrderUpgrade } from './components/Order/OrderUpgrade';\r\nimport SurveyForm from './components/UI/Forms/SurveyForm';\r\nimport CustomForm from './components/UI/Forms/CustomForm';\r\n\r\n// const Payment = React.lazy(() => import('./components/Order/Payment'));\r\n\r\n export default function App(props) {\r\n const [branding, setBranding] = useState(null);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [reCaptchaKey, setReCaptchaKey] = useState(null);\r\n const [metaDataInjected, setMetaDataInjected] = useState(null);\r\n const [metaData, setMetaData] = useState(null);\r\n const environment = getEnvironment();\r\n const auth = useAuth();\r\n const [tagManagerAdded, setTagManagerAdded] = useState(null);\r\n const [fid, setFid] = useState(null);\r\n const host = window.location.hostname;\r\n \r\n useEffect(()=>{\r\n\r\n if(branding && fid){\r\n metaDataExtraction(fid);\r\n }\r\n\r\n },[branding, fid])\r\n\r\n \r\n const metaDataExtraction = (fid) => {\r\n let userData= GetADToken();\r\n let token=\"\";\r\n if(userData){\r\n token=userData.token\r\n }\r\n \r\n APIGet({\r\n \"controller\": \"metadata\",\r\n \"action\": \"checkoutmetadata\",\r\n \"identifier\": fid,\r\n \"environment\": environment,\r\n \"headers\": [{\r\n \"key\": \"UserToken\",\r\n \"value\": token ?? \"\"\r\n }]\r\n }).then((response) => {\r\n \r\n addMetaHeadScript(response.data); \r\n \r\n }).catch(function (errors) {\r\n setMetaDataInjected(\"false\")\r\n \r\n })\r\n }\r\n\r\n useEffect(()=>{\r\n //if not already injected will run\r\n if(metaDataInjected === \"false\"){\r\n tagManager(branding);\r\n \r\n }\r\n },[metaDataInjected]);\r\n\r\n\r\n const loadheaderBranding = async (metadata) => {\r\n await APIGet({\r\n \"controller\": \"brand\",\r\n \"action\": \"getbranding\",\r\n \"environment\": environment\r\n })\r\n .then(function (response) {\r\n // handle success\r\n setBranding(response.data.branding);\r\n if (response.data.branding) {\r\n sessionStorage.setItem(\"brandName\", response.data.branding.id)\r\n if (response.data.branding?.reCAPTCHAkey) {\r\n setReCaptchaKey(response.data.branding?.reCAPTCHAkey)\r\n }\r\n else {\r\n setReCaptchaKey(\"no_recaptcha\")\r\n }\r\n } //this is also async..so may take time so directly pass in the function.\r\n //add metadata script to head\r\n htmlHeadScript(response.data.branding);\r\n cssHeadScript(response.data.branding);\r\n faviconCustom(response.data.branding)\r\n setIsLoading(false);\r\n \r\n })\r\n .catch(function (error) {\r\n // handle error\r\n setReCaptchaKey(\"no_recaptcha\") //if recaptcha snippet throws an error.\r\n setIsLoading(false)\r\n \r\n })\r\n\r\n }\r\n \r\n //injects gtm script along with executing scripts\r\n const tagManager = (branding, meta) => {\r\n if (branding) {\r\n const tagManagerArgs = { gtmId: branding.gtmId }\r\n TagManager.initialize(tagManagerArgs); \r\n }\r\n setTagManagerAdded(true);\r\n \r\n }\r\n\r\n //get branding call on mounting\r\n useEffect(() => {\r\n\r\n loadheaderBranding(); \r\n \r\n\r\n }, [])\r\n \r\n \r\n const htmlHeadScript = (br) => {\r\n const htmlHead = br.headHtml;\r\n const tempDiv = document.createElement('div');\r\n tempDiv.innerHTML=htmlHead;\r\n const scripts = tempDiv.querySelectorAll('script');\r\n\r\n scripts.forEach((script)=>{\r\n script.remove();\r\n })\r\n\r\n const modifiedHtml= tempDiv.innerHTML;\r\n return document.head.insertAdjacentHTML('beforeend', modifiedHtml);\r\n }\r\n\r\n const addMetaHeadScript = (meta) => {\r\n \r\n if (!metaDataInjected) {\r\n setTagManagerAdded(false);\r\n setMetaData(meta);\r\n setMetaDataInjected(\"true\");\r\n tagManager(branding)\r\n }\r\n \r\n };\r\n\r\n\r\n const cssHeadScript = (data) => {\r\n const inlinecssHead = ``;\r\n return document.head.insertAdjacentHTML('beforeend', inlinecssHead);\r\n }\r\n \r\n\r\n const faviconCustom = (data) => {\r\n const favString = data.favicon || \"\";\r\n const favicons = favString.split(',');\r\n\r\n favicons.map((favicon, i) => {\r\n const link = ``;\r\n return document.head.insertAdjacentHTML('beforeend', link);\r\n });\r\n\r\n }\r\n\r\n\r\n \r\n\r\n \r\n return (<> \r\n {/*executing MetaData script */}\r\n \r\n
\r\n SurveyJS Example
\r\n\r\n \r\n
\r\n