\n e.stopPropagation()}\n value={selectedAddOn}\n >\n \n {addOn &&\n addOn.map((addOn) => (\n \n ))}\n \n
\n )\n}\n\nexport default AddOnSelect\n","import React from \"react\"\n\ntype ButtonProps = {\n text: string\n onClick: () => void\n className: string\n style: Object\n}\nconst PrimaryButton = ({ text, onClick, className, style }: ButtonProps) => (\n \n {onSelect !== undefined && (\n 
\n
\n \n
\n )}\n \n \n Select a {addOnName} from the dropdown below\n
\n
\n {name}
\n{description}\n \n \n X\n
\n \n
\n \n \n )\n}\n\nconst Field = ({ input, placeholder, wrapperClass, className, type }) => (\n Your details
\n\n \n \n
\n)\n\nconst TextAreaField = ({\n input,\n placeholder,\n wrapperClass,\n className,\n type,\n}) => (\n \n
\n)\n\nconst CountrySelect = ({ input, placeholder, wrapperClass, className }) => (\n \n \n
\n)\n\nCustomerDetailsModal.propTypes = {\n show: PropTypes.bool.isRequired,\n handleSubmit: PropTypes.func,\n onClose: PropTypes.func.isRequired,\n customerDetails: PropTypes.shape(),\n updateCustomerDetails: PropTypes.func,\n onModalSubmit: PropTypes.func,\n}\n\nconst mapStateToProps = (state) => ({ customerDetails: state.customerDetails })\n\nconst mapDispatchToProps = (dispatch) =>\n bindActionCreators({ updateCustomerDetails }, dispatch)\nexport default connect(\n mapStateToProps,\n mapDispatchToProps,\n)(CustomerDetailsModal)\n","import React from \"react\"\n\ntype DropdownProps = {\n label?: string\n value?: string\n onChange: (option: Option) => void\n options: Option[]\n className?: string\n defaultName?: string\n}\n\ntype Option = {\n label: string\n value: string\n}\n\nconst Dropdown = ({\n label,\n value,\n onChange,\n options,\n className,\n defaultName,\n}: DropdownProps) => {\n const onSelect = (e: any) => {\n let labelValue = e.target.value\n if (label) labelValue = label\n\n onChange({ label: labelValue, value: e.target.value })\n }\n return (\n \n {label && \n \n {options.map((option, index) => (\n \n ))}\n \n
\n )\n}\n\nexport default Dropdown\n","import React from \"react\"\nimport Logo from \"images/EPOS_ikon.svg\"\nimport LogoFull from \"images/Epos.jpg\"\nimport useWindowWidth from \"hooks/useWindowWidth\"\n\nconst Header = () => {\n const { isMobile } = useWindowWidth()\n\n return (\n <>\n {isMobile ? (\n {label}
}\n \n 
\n
\n ) : (\n \n )}\n \n )\n}\n\nexport default Header\n","import React from \"react\"\nimport AccessoryInfo from \"../AccessoryInfo\"\n\ntype Props = {\n id: number\n name: string\n microphone_type: string | null | string[]\n active_gard: string | null | string[]\n wearing_style: string | null | string[]\n image_url: string\n onSelect?: (id: number) => void\n series?: boolean\n className?: string\n description?: string\n}\n\nconst HeadsetCard = (props: Props) => {\n const {\n id,\n name,\n microphone_type,\n active_gard,\n wearing_style,\n image_url,\n onSelect,\n series,\n className,\n description,\n } = props\n\n const transformWearingStyle = (wearing_style: string | string[] | null) => {\n if (!wearing_style || wearing_style.length === 0) return \"-\"\n\n if (Array.isArray(wearing_style)) {\n if (wearing_style.length === 2) return \"Single sided | Double sided\"\n return wearing_style.includes(\"single_sided\")\n ? \"Single sided\"\n : \"Double sided\"\n }\n\n return wearing_style === \"single_sided\" ? \"Single sided\" : \"Double sided\"\n }\n\n const transformMicrophoneName = (\n microphone_type: string | string[] | null,\n ) => {\n if (!microphone_type || microphone_type.length === 0) return \"-\"\n if (typeof microphone_type === \"string\")\n return microphone_type[0].toUpperCase() + microphone_type.slice(1)\n\n return microphone_type\n .map((microphone) => microphone[0].toUpperCase() + microphone.slice(1))\n .join(\" | \")\n }\n\n const transformActiveGuard = (active_gard: string | string[] | null) => {\n if (!active_gard || active_gard.length === 0) return \"-\"\n if (active_gard === \"both\")\n return \"With ActiveGard™ | Without ActiveGard™\"\n if (active_gard === \"only_with\") return \"With ActiveGard™\"\n if (active_gard === \"only_without\") return \"Without ActiveGard™\"\n\n if (Array.isArray(active_gard)) {\n if (active_gard.includes(\"Both\")) {\n return \"With ActiveGard™ | Without ActiveGard™\"\n } else {\n return active_gard.join(\" | \")\n }\n }\n return \"-\"\n }\n\n const listOfAccessories = [\n {\n accessoryType: \"Microphone\",\n accessoryName: transformMicrophoneName(microphone_type),\n },\n {\n accessoryType: \"ActiveGuard\",\n accessoryName: transformActiveGuard(active_gard),\n },\n {\n accessoryType: \"Headset Type\",\n accessoryName: transformWearingStyle(wearing_style),\n },\n ]\n\n return (\n \n
\n \n COMMAND line\n headset configurator\n
\n \n Main site
\n \n\n {onSelect !== undefined && (\n \n
\n \n
\n )}\n \n Choose and continue\n
\n\n \n {listOfAccessories.map((accessory) => (\n \n
\n \n )\n}\n\nexport default HeadsetCard\n","import React from \"react\"\n\ntype InputFieldProps = {\n label: string\n placeholder: string\n style: Object\n value: string\n onChange: () => void\n}\n\nconst InputField = ({\n label,\n style,\n placeholder,\n onChange,\n value,\n}: InputFieldProps) => {\n return (\n \n {series ? `${name} Series` : name}\n
\n {!series && (\n\n {description}\n \n )}\n \n
\n )\n}\n\nexport default InputField\n","import React from \"react\"\nimport \"./style.scss\"\n\nexport type Order = {\n name: string\n image_url: string\n title: string\n content: string\n}\ntype OrderDetailsProps = {\n order: Order[]\n}\n\nconst OrderDetails = ({ order }: OrderDetailsProps) => {\n\n const arrayOfItems: any = []\n\n const itemsToDisplay = (order: any) => {\n const headset = order.find(\n (item: { title: string }) => item.title === \"Headset\",\n )\n const ptt = order.find((item: { title: string }) => item.title === \"PTT\")\n\n if (headset) {\n if (headset.microphone_type === \"electret\") {\n arrayOfItems.push({\n title: \"Microphone\",\n subtitle: \"Electret\",\n })\n } else {\n arrayOfItems.push({\n title: \"Microphone\",\n subtitle: \"Dynamic\",\n })\n }\n if (headset.wearing_style === \"single_sided\") {\n arrayOfItems.push({\n title: \"Headset Type\",\n subtitle: \"Single Sided\",\n })\n } else {\n arrayOfItems.push({\n title: \"Headset Type\",\n subtitle: \"Double Sided\",\n })\n }\n\n if (headset.active_gard === \"only_with\") {\n arrayOfItems.push({\n title: \"ActiveGard\",\n subtitle: \"With ActiveGard™\",\n })\n } else if (headset.active_gard === \"only_without\") {\n arrayOfItems.push({\n title: \"ActiveGard\",\n subtitle: \"Without ActiveGard™\",\n })\n } else {\n arrayOfItems.push({\n title: \"ActiveGard\",\n subtitle: \"With/ Without ActiveGard™\",\n })\n }\n }\n\n if (ptt) {\n if (ptt.port_type === \"usb\") {\n arrayOfItems.push({\n title: \"Interface\",\n subtitle: \"USB\",\n })\n } else {\n arrayOfItems.push({\n title: \"Interface\",\n subtitle: \"Analogue\",\n })\n }\n if (ptt.microphone_preamplifier) {\n arrayOfItems.push({\n title: \"Micrphone Preamplifier\",\n subtitle: \"With Preamplifier\",\n })\n } else {\n arrayOfItems.push({\n title: \"Micrphone Preamplifier\",\n subtitle: \"Without Preamplifier\",\n })\n }\n\n if (ptt.plug_type === \"direct\") {\n arrayOfItems.push({\n title: \"Connector Type\",\n subtitle: \"Direct\",\n })\n } else {\n arrayOfItems.push({\n title: \"Connector Type\",\n subtitle: \"TA6\",\n })\n }\n }\n }\n itemsToDisplay(order)\n\n return (\n {label}
\n \n
\n )\n}\n\nexport default OrderDetails\n","import React from \"react\"\nimport { Order } from \"../OrderDetails\"\n\ntype OrderDetailsVisualProps = {\n order: Order[]\n}\n\nconst OrderDetailsVisual = ({ order }: OrderDetailsVisualProps) => {\n const plugConfigurationObject = order.find(\n (item: { title: string }) => item.title === \"Plug Configuration\",\n )\n\n let string = plugConfigurationObject?.content.replace(\n \"resistorValue\",\n \"Resistor Value\",\n )\n string = string?.replace(\"additionalRequirements\", \"Comments\")\n\n const arrayToJoin = string?.split(\"* \").slice(1)\n\n return (\n \n {arrayOfItems.map((order: any) => (\n
\n \n
\n ))}\n {/* {order.map((order: Order) => (\n {order.title}
\n\n \n {order.subtitle}\n
\n \n
\n ))} */}\n \n {order.title == \"Plugs\" ? \"Connector Type\" : order.title}\n
\n {order.title == \"Plug Configuration\" ? (\n \n {order.content}\n
\n ) : (\n \n {order.name}\n
\n )}\n \n {order.map((value: Order, index: number) => (\n \n
\n ))}\n \n )\n}\n\nexport default OrderDetailsVisual\n","import React, { useState, useEffect } from \"react\"\nimport \"./style.scss\"\n\ntype ProgressBarType = {\n numberOfSteps: number\n activeStep: number\n title?: string\n}\n\nconst ProgressBar = ({ numberOfSteps, activeStep, title }: ProgressBarType) => {\n const [width, setWidth] = useState\n 
\n
\n {value.title == \"Plug Configuration\" ? (\n \n {arrayToJoin &&\n arrayToJoin.map((item: any) => (\n
\n ) : (\n {item}
\n ))}\n{value.name}
\n )}\n \n
\n {title && (\n \n
\n \n {/* */}\n \n {title}\n
\n \n )}\n \n )\n}\n\nexport default ProgressBar\n","import React from \"react\"\nimport smallArrow from \"images/small-arrow.svg\"\nimport useWindowWidth from \"hooks/useWindowWidth\"\nimport { useSelector } from \"react-redux\"\nimport { getCart } from \"../../cartSelector\"\nimport { getFooterArray } from \"../../utils/getFooterArray\"\n\ntype ProgressFooterProps = {\n skipStep?: () => void\n backStep?: () => void\n skipStepText?: String\n}\n\nconst ProgressFooter = ({\n skipStep,\n backStep,\n skipStepText,\n}: ProgressFooterProps) => {\n const { isMobile, isScreenSmaller } = useWindowWidth()\n\n const cartObject = useSelector((state: any) => getCart(state))\n\n const [variant, ...sections] = getFooterArray(cartObject)\n\n const Section = ({ section }: any) => {\n if (!section) return \n\n return (\n {section}
\n )\n }\n\n return (\n \n \n 
\n
\n\n \n
\n\n {skipStep && (\n <>\n {isMobile ? (\n \n {isScreenSmaller ? (\n
\n \n ...\n \n
\n ) : (\n \n {variant}\n {sections.map((section: String, index: number) => (\n \n ))}\n
\n )}\n \n {skipStepText ?? \"Skip this step\"}\n
\n \n )}\n \n )}\n \n )\n}\n\nexport default ProgressFooter\n","import React from \"react\"\nimport AccessoryInfo from \"../AccessoryInfo\"\n\ntype Props = {\n id: number\n name: string\n microphone_preamplifier: boolean | null | boolean[]\n plug_type: string | null | string[]\n port_type: string | null | string[]\n image_url: string\n onSelect?: (id: number) => void\n series?: boolean\n className?: string\n description?: string\n}\n\nconst PttCard = (props: Props) => {\n const {\n id,\n name,\n microphone_preamplifier,\n plug_type,\n port_type,\n image_url,\n onSelect,\n series,\n className,\n description,\n } = props\n\n const transformPreamplifier = (\n microphone_preamplifier: boolean | boolean[] | null,\n ) => {\n if (microphone_preamplifier == null) return \"-\"\n if (microphone_preamplifier === false) {\n return \"Without Preamplifier\"\n }\n if (microphone_preamplifier === true) {\n return \"With Preamplifier\"\n }\n if (Array.isArray(microphone_preamplifier)) {\n if (microphone_preamplifier.length > 1) {\n return \"With Preamplifier | Without Preamplifier\"\n } else if (microphone_preamplifier[0] === true) {\n return \"With Preamplifier\"\n } else if (microphone_preamplifier[0] === false) {\n return \"Without Preamplifier\"\n } else {\n return \"-\"\n }\n }\n return \"-\"\n }\n\n const transformPlugOrPort = (accessory: string | string[] | null) => {\n if (accessory == null || accessory.length == 0 || accessory[0] == null)\n return \"-\"\n if (typeof accessory === \"string\") {\n if (accessory === \"analogue\" || accessory === \"direct\") {\n return accessory[0].toUpperCase() + accessory.slice(1)\n }\n return accessory.toUpperCase()\n }\n if (Array.isArray(accessory)) {\n if (accessory.length === 0) return \"-\"\n if (accessory.length > 1 && accessory.includes(\"analogue\")) {\n return \"Analogue | USB\"\n } else if (accessory.length > 1 && accessory.includes(\"direct\")) {\n return \"Direct | TA6\"\n }\n if (accessory[0] === \"analogue\" || accessory[0] === \"direct\") {\n return accessory[0][0].toUpperCase() + accessory[0].slice(1)\n } else {\n return accessory[0].toUpperCase()\n }\n }\n return \"-\"\n }\n\n const listOfAccessories = [\n {\n accessoryType: \"Interface\",\n accessoryName: transformPlugOrPort(port_type),\n },\n {\n accessoryType: \"Microphone Preamplifier\",\n accessoryName: transformPreamplifier(microphone_preamplifier),\n },\n {\n accessoryType: \"Connector Type\",\n accessoryName: transformPlugOrPort(plug_type),\n },\n ]\n\n return (\n →
\n \n {onSelect !== undefined && (\n \n
\n \n
\n )}\n \n Choose and continue\n
\n\n
\n \n )\n}\n\nexport default PttCard\n","import React, { useMemo, useState } from \"react\"\nimport AddOnSelect, { TopCable } from \"../AddOnSelect\"\nimport AccessoryInfo from \"../AccessoryInfo\"\nimport attentionImage from \"images/attention.svg\"\nimport { connect } from \"react-redux\"\nimport { filterIncompatibleTopCables } from \"../../helpers/IncompatibilityHelper\"\n\ntype Props = {\n id: number\n name: string\n microphone_preamplifier: boolean | null | boolean[]\n plug_type: string | null | string[]\n port_type: string | null | string[]\n image_url: string\n onSelect?: (pttId: number, topCableId: number) => void\n series?: boolean\n className?: string\n description?: string\n topCables: TopCable[]\n incompatibilities: any\n cartIds: number[]\n addOnName: string\n}\n\nconst PttCardWithDropdown = (props: Props) => {\n const {\n id,\n name,\n microphone_preamplifier,\n plug_type,\n port_type,\n image_url,\n onSelect,\n series,\n className,\n description,\n topCables,\n incompatibilities,\n cartIds,\n addOnName,\n } = props\n\n const [selectedCable, setSelectedCable] = useState\n {series ? `${name} Series` : name}\n
\n {!description && (\n{description}\n )}\n \n {listOfAccessories.map((accessory) => (\n
\n \n {onSelect !== undefined && (\n \n
\n \n
\n )}\n \n \n Select a {addOnName} from the dropdown below\n
\n
\n \n {series ? `${name} Series` : name}\n
\n {!series && (\n{description}\n )}\n \n {listOfAccessories.map((accessory) => (\n
\n \n {text}\n
\n)\n\nStepHeader.propTypes = {\n text: PropTypes.string,\n}\n\nexport default StepHeader\n","import React from \"react\"\n\ntype TextAreaProps = {\n label: string\n placeholder: string\n style: Object\n value: string\n onChange: () => void\n}\nconst TextArea = ({\n label,\n placeholder,\n style,\n value,\n onChange,\n}: TextAreaProps) => {\n return (\n\n \n
\n )\n}\n\nexport default TextArea\n","import React from \"react\"\nimport PropTypes from \"prop-types\"\ntype Props = {\n text: string\n className: string\n}\n\nconst Tooltip = ({ text = \"\", className }: Props) => (\n {label}
\n