\n
\n\n \n
\n \n {isSelected && {attribute.name.toLowerCase()}
\n \n
\n );\n}\n","import React from 'react';\nimport ArrowLeft from 'images/arrow-back.svg';\n\nexport default function BackToConfigurator({\n setCurrentScreen,\n currencySymbol\n}) {\n const customizer = currencySymbol === '$' ? 'Customizer' : 'Customiser';\n\n return (\n \n {categories.map((category) => {\n if (categoriesWithoutPreview.includes(category)) {\n return;\n }\n const imageCodeSuffix =\n userSelections[category] ? `__${category}` : `default_${category}`;\n let imageCode;\n if (monogramCategories.includes(category)) {\n return null;\n } else if (category === 'pocket' && !userSelections[category]) {\n return null;\n } else if (category === 'fabric') {\n imageCode = `${fabricSelection}__${productKey}${imageCodeSuffix}`;\n } else {\n const gppCode =\n userSelections[category] ? userSelections[category].gpp_code : '';\n imageCode = `${fabricSelection}__${productKey}__${gppCode}${imageCodeSuffix}`;\n }\n\n return (\n \n \n \n : null}\n
\n setCurrentScreen('main')} className=\"fc-back-button\">\n 
\n \n Back to {customizer}\n \n
\n );\n}\n","import React, { useEffect, useRef } from 'react';\nimport NextStepButton from './NextStepButton';\nimport BackToConfigurator from './BackToConfigurator';\n\nexport default function BodySelectionPanel({\n productName,\n currencySymbol,\n nextAttribute,\n nextAttributeName,\n previousAttribute,\n iframeUrl,\n setCurrentScreen,\n selectedBody,\n updateSelectedBody,\n canAddToBasket\n}) {\n const iframeRef = useRef();\n const iframeSrc = useRef(\n selectedBody.userId ?\n iframeUrl + '/#/customers/' + selectedBody.userId\n : iframeUrl\n );\n\n useEffect(() => {\n const handleMessage = (event) => {\n if (event.source !== iframeRef.current.contentWindow) return;\n updateSelectedBody(event.data);\n };\n\n window.addEventListener('message', handleMessage);\n\n return () => {\n window.removeEventListener('message', handleMessage);\n };\n }, []);\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport ArrowRight from 'images/arrow-right.svg';\nimport cx from 'classnames';\n\nexport default function BodySelectionRow({\n setCurrentScreen,\n panelScreen,\n selectedBody,\n selectedFit,\n isBodyLocked\n}) {\n const arrowClasses = cx(\n 'fc-option-dropdown-arrow-collapsed',\n !selectedFit && 'fc-reduced-opacity'\n );\n const handleClick = () => {\n if (!isBodyLocked) {\n setCurrentScreen(panelScreen);\n setTimeout(() => {\n window.scroll({\n top: 0,\n left: 0,\n behavior: 'smooth'\n });\n }, 100);\n }\n };\n\n return (\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n Provide Measurements\n
\n \n
\n \n
\n );\n}\n","import React from \"react\";\nimport cx from \"classnames\";\nimport MonogramSelectedIcon from 'images/monogram-selected-check.png';\n\nexport default function ButtonholeColorItem({\n attr,\n isSelectedAttribute,\n setSelectedColor\n}) {\n const [isActive, setIsActive] = React.useState(null);\n\n const containerClasses = cx(\n 'monogram-color-blocks',\n (isActive || isSelectedAttribute) && 'monogram-color-blocks-active'\n );\n\n const handleColorSelection = () => {\n if (!isSelectedAttribute) {\n setSelectedColor(attr);\n }\n };\n\n const monogramBlock = cx('col-lg-4', 'col-sm-4', 'fc-monogram-pallet');\n\n const styles =\n attr.font_family !== '#FFFFFF' ?\n {\n backgroundColor: attr.font_family\n }\n : {\n backgroundColor: attr.font_family,\n border: '1px solid #d0d0d0',\n color: 'black'\n };\n\n if(attr.font_family === null) return;\n\n return (\n \n Sized For
\n {selectedBody.email ? (\n {\n selectedBody.lastName ?\n selectedBody.firstName + ' ' + selectedBody.lastName :\n selectedBody.email\n }\n {!selectedBody.scanId &&\n (No Measurements)\n }\n
\n ) : (\n \n Make a selection\n
\n )}\n \n
\n \n 
\n
\n \n
\n \n {attr.name}\n
\n \n
\n );\n}\n","import React from 'react';\nimport NextStepButton from '../NextStepButton';\nimport BackToConfigurator from '../BackToConfigurator';\nimport cx from 'classnames';\nimport ButtonholeColors from \"./ButtonholeColors\";\n\nconst CONTRAST_BUTTONHOLE = 'contrast_buttonhole'\n\nexport default function ButtonholeSelectionPanel({\n productName,\n currencySymbol,\n nextAttribute,\n nextAttributeName,\n previousAttribute,\n setCurrentScreen,\n isDisabled,\n selectableOptionsTable,\n setSelectedAttributeFunctions,\n userSelections,\n canAddToBasket\n}) {\n\n const defaultOption = selectableOptionsTable[CONTRAST_BUTTONHOLE]?.find((option) => option.font_family === null || option.name === \"NO\");\n\n const enabled = JSON.stringify(userSelections[CONTRAST_BUTTONHOLE]) !== JSON.stringify(defaultOption) && userSelections[CONTRAST_BUTTONHOLE] !== null;\n\n const toggleButtonholes = () => {\n if (enabled) {\n setSelectedAttributeFunctions[CONTRAST_BUTTONHOLE](defaultOption);\n } else {\n const options = selectableOptionsTable[CONTRAST_BUTTONHOLE];\n setSelectedAttributeFunctions[CONTRAST_BUTTONHOLE](options?.[0]);\n }\n };\n\n React.useEffect(() => {\n if(userSelections[CONTRAST_BUTTONHOLE] === null) {\n setSelectedAttributeFunctions[CONTRAST_BUTTONHOLE](defaultOption);\n }\n }, [userSelections]);\n\n const containerClasses = cx(\n 'row no-gutters fc-fabric-selection-pallet',\n enabled ?\n 'monogram-selection-pallet-scrollbar'\n : 'monogram-selection-w-pallet-scrollbar'\n );\n\n return (\n Choose Color
\n\n \n {options?.map((color) => {\n return (\n
\n \n
\n );\n}\n","import React, { useEffect, useState } from 'react';\n\nexport const useProductOptions = ({\n categories,\n productKey,\n fitOptions,\n existingLineItemId,\n fabricDisplayValue\n}) => {\n const [productOptions, setProductOptions] = useState({});\n\n const getProductOptions = async () => {\n if (!fitOptions) return;\n\n for (const fitOption of fitOptions) {\n const shapeCode = fitOption.gpp_shape_code;\n for (const category of categories) {\n let endpoint = `/products/${productKey}/product_option_categories/${category}.json?shape_code=${shapeCode}`;\n\n if (existingLineItemId) {\n endpoint = endpoint + `&line_item_id=${existingLineItemId}`;\n }\n\n const response = await fetch(endpoint, {\n headers: { 'Content-Type': 'application/json' }\n });\n\n const parsedResponse = await response.json();\n\n if (fabricDisplayValue && category === 'fabric') {\n for (const fabric of parsedResponse) {\n // If the value and name are same, no need to repeat.\n // This is to prevent something like \"FW01034646-0002 FW01034646-0002\" showing up\n fabric.name =\n fabric.name.includes(fabric.gpp_value) ?\n fabric.name\n : fabric.name + ' ' + fabric.gpp_value;\n }\n }\n\n setProductOptions((prev) => ({\n ...prev,\n [shapeCode]: {\n ...prev[shapeCode],\n [category]: parsedResponse\n }\n }));\n }\n }\n };\n\n useEffect(() => { getProductOptions() }, [\n categories,\n productKey,\n fitOptions,\n existingLineItemId,\n fabricDisplayValue\n ]);\n\n return productOptions;\n};\n\nexport function useProductPreferences(productKey) {\n const endpoint = `/products/${productKey}/product_preferences.json`;\n const [productPreferencesRequest, setProductPreferencesRequest] =\n useState({ loading: true, data: null, error: null });\n\n useEffect(() => {\n window\n .fetch(endpoint, {\n headers: { 'Content-Type': 'application/json' }\n })\n .then((response) => {\n return response.json();\n })\n .then((parsedResponse) => {\n setProductPreferencesRequest({\n loading: false,\n data: parsedResponse,\n error: null\n });\n })\n .catch((errorResponse) => {\n setProductPreferencesRequest({\n loading: false,\n data: null,\n error: errorResponse.message\n });\n });\n }, [endpoint]);\n\n return productPreferencesRequest;\n}\n","// Run this example by adding <%= javascript_pack_tag 'Configurator_react' %> to the head of your layout file,\n// like app/views/layouts/application.html.erb. All it does is render \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n Select Contrast Buttonholes\n
\n \n
\n \n \n
\n \n
\n ) : (\n \n Contrast Buttonholes are another way to add a special detail.\n
\n Choose from several colors.\n
\n
\n Configurator React
at the bottom\n// of the page.\n\nimport React, { useEffect, useMemo } from 'react';\nimport ModelImagePreview from './ModelImagePreview';\nimport AttributesImagePreview from './AttributesImagePreview';\nimport FitImagePreview from './FitImagePreview';\nimport BodySelectionPanel from './BodySelectionPanel';\nimport FabricSelectionPanel from './FabricSelectionPanel';\nimport MonogramSelectionPanel from './MonogramSelectionPanel';\nimport FabricDescriptionModal from './FabricDescriptionModal';\nimport AttributeSelectionPanel from './AttributeSelectionPanel';\nimport ContrastStitchingSelectionPanel from './ContrastStitchingSelectionPanel';\nimport NextStepButton from './NextStepButton';\nimport ConfiguratorHome from './ConfiguratorHome';\nimport FitSelectionPanel from './FitSelectionPanel';\nimport {\n useProductPreferences,\n useProductOptions\n} from '../actions/configurator_actions';\nimport {\n CONTRAST_STITCHING_NO_OPTION_GPP_CODE,\n CONTRAST_STITCHING_CATEGORIES_SET,\n CONTRAST_STITCHING_CATEGORIES_ARRAY\n} from '../constants/contrast_stitching';\nimport { SHOW_BODY_SELECTOR } from '../constants/body_selector';\nimport { hasProp } from '../utils/object';\nimport PopupBodySelector from './PopupBodySelector';\nimport ButtonholeSelectionPanel from \"./Buttonhole/ButtonholeSelectionPanel\";\nimport WhiteCollarSelectionPanel from \"./WhiteCollar/WhiteCollarSelectionPanel\";\nimport WhiteCuffSelectionPanel from \"./WhiteCuff/WhiteCuffSelectionPanel\";\nimport RushSelectionPanel from \"./Rush/RushSelectionPanel\";\nimport SelectionCheckbox from './SelectionCheckbox/SelectionCheckbox';\n\nconst MONOGRAM_STYLES_SPECS = {\n VC26019: {\n min: 1,\n max: 16,\n validCharacters: '-*!@#$%&+?:;)(\"=A-Za-z0-9 ',\n validCharactersDisplay: 'alphabetic (a-z, A-Z, 0-9, !@#$%&*+?:;)(-\"=)',\n textTransform: 'uppercase',\n previewInitials: 'EDS',\n margin: 12,\n style: {\n fontFamily: 'Roboto Condensed' + ', sans-serif',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC26018: {\n min: 1,\n max: 16,\n validCharacters: '-*!@#$%&+?:;)(\"=A-Za-z0-9 ',\n validCharactersDisplay: 'alphabetic (a-z, A-Z, 0-9, !@#$%&*+?:;)(-\"=)',\n textTransform: 'uppercase',\n previewInitials: 'ABC',\n margin: 12,\n style: {\n fontFamily: 'Roboto Condensed' + ', sans-serif',\n fontWeight: 700\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC26017: {\n min: 1,\n max: 16,\n validCharacters: '-*!@#$%&+?:;)(\"=A-Za-z0-9 ',\n validCharactersDisplay: 'alphabetic (a-z, A-Z, 0-9, !@#$%&*+?:;)(-\"=)',\n textTransform: 'uppercase',\n previewInitials: 'ABC',\n margin: 12,\n style: {\n fontFamily: 'Roboto Condensed' + ', sans-serif',\n fontWeight: 700\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC00183: {\n min: 1,\n max: 9,\n validCharacters: '-*!@#$%&+?:;)(\"=A-Za-z0-9 ',\n validCharactersDisplay: 'alphabetic (a-z, A-Z, 0-9, !@#$%&*+?:;)(-\"=)',\n textTransform: 'uppercase',\n previewInitials: 'JMS',\n margin: 12,\n style: {\n fontFamily: 'Roboto Condensed' + ', sans-serif',\n fontWeight: 700\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC00496: {\n min: 3,\n max: 3,\n validCharacters: 'A-Za-z ',\n validCharactersDisplay: 'alphabetic (A-Z)',\n textTransform: 'uppercase',\n previewInitials: 'JHC',\n margin: 10,\n style: {\n fontFamily: 'Diamond Mono Center' + ', sans-serif',\n fontWeight: 2500\n },\n monogramPreviewStyle: 'diamond-monogram'\n },\n VC00693: {\n min: 1,\n max: 9,\n validCharacters: '-*!@#$%&+?:;)(\"=A-Za-z0-9 ',\n validCharactersDisplay: 'alphabetic (a-z, A-Z, 0-9, !@#$%&*+?:;)(-\"=)',\n textTransform: 'uppercase',\n previewInitials: 'ABC',\n margin: 30,\n style: {\n fontFamily: 'Pinyon Script' + ', cursive',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC00583: {\n min: 2,\n max: 2,\n validCharacters: 'a-z',\n validCharactersDisplay: 'alphabetic (A-Z)',\n textTransform: 'uppercase',\n previewInitials: 'Rc',\n margin: 30,\n style: {\n fontFamily: 'Pinyon Script' + ', cursive',\n fontWeight: 400\n },\n monogramPreviewStyle: 'script-initial-code'\n },\n VC08864: {\n min: 1,\n max: 8,\n validCharacters: 'A-Za-z0-9 ',\n validCharactersDisplay: 'alphanumeric (a-z, A-Z, 0-9)',\n textTransform: 'none',\n previewInitials: 'ABC',\n margin: 12,\n style: {\n fontFamily: 'Stardos Stencil' + ', serif',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC08866: {\n min: 1,\n max: 8,\n validCharacters: 'A-Za-z0-9 ',\n validCharactersDisplay: 'alphanumeric (a-z, A-Z, 0-9)',\n textTransform: 'none',\n previewInitials: 'Aa1',\n margin: 12,\n style: {\n fontFamily: 'Source_Sans_3' + ', sans-serif',\n fontWeight: 700\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC08867: {\n min: 1,\n max: 8,\n validCharacters: 'A-Za-z0-9 ',\n validCharactersDisplay: 'alphanumeric (a-z, A-Z, 0-9)',\n textTransform: 'none',\n previewInitials: 'Aa1',\n margin: 12,\n style: {\n fontFamily: 'Pinyon Script' + ', cursive',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC23091: {\n min: 1,\n max: 3,\n validCharacters: 'A-Za-z ',\n validCharactersDisplay: 'alphabetic (A-Z)',\n textTransform: 'uppercase',\n previewInitials: 'ABC',\n margin: 12,\n style: {\n fontFamily: 'DM Serif Display' + ', serif',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC23072: {\n min: 1,\n max: 3,\n validCharacters: 'A-Za-z ',\n validCharactersDisplay: 'alphabetic (A-Z)',\n textTransform: 'uppercase',\n previewInitials: 'ABC',\n margin: 12,\n style: {\n fontFamily: 'Roboto Condensed' + ', sans-serif',\n fontWeight: 700\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC25510: {\n min: 1,\n max: 16,\n validCharacters: '-*!@#$%&+?:;)(\"<>A-Za-z0-9 ',\n validCharactersDisplay: 'alphabetic (a-z, A-Z, 0-9, !@#$%&*+?:;)(-\"<>)',\n textTransform: 'none',\n previewInitials: 'Abc',\n margin: 12,\n style: {\n fontFamily: 'Roboto Condensed' + ', sans-serif',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC25511: {\n min: 1,\n max: 16,\n validCharacters: '-*!@#$%&+?:;)(\"<>A-Za-z0-9 ',\n validCharactersDisplay: 'alphabetic (a-z, A-Z, 0-9, !@#$%&*+?:;)(-\"<>)',\n textTransform: 'none',\n previewInitials: 'Abc',\n margin: 12,\n style: {\n fontFamily: 'Pinyon Script' + ', cursive',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC24519: {\n min: 1,\n max: 16,\n validCharacters: 'A-Za-z ',\n validCharactersDisplay: 'alphabetic (A-Z)',\n textTransform: 'none',\n previewInitials: 'Abc',\n margin: 12,\n style: {\n fontFamily: 'Roboto Condensed' + ', sans-serif',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n VC24520: {\n min: 1,\n max: 16,\n validCharacters: 'A-Za-z ',\n validCharactersDisplay: 'alphabetic (A-Z)',\n textTransform: 'none',\n previewInitials: 'Abc',\n margin: 12,\n style: {\n fontFamily: 'Pinyon Script' + ', cursive',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n },\n default: {\n min: 0,\n max: 0,\n validCharacters: '',\n validCharactersDisplay: '',\n textTransform: 'none',\n previewInitials: 'Aa1',\n margin: 12,\n style: {\n fontFamily: 'Pinyon Script' + ', cursive',\n fontWeight: 400\n },\n monogramPreviewStyle: 'monogram-style-text'\n }\n};\n\nconst OPTION_FILTERS = {\n monogram_location: {\n VC00394: (userSelections) =>\n // 'Center Pocket' is not an option when \"no pocket\" is selected\n userSelections.pocket?.gpp_code !== 'VC00052',\n VC00678: (userSelections) =>\n // 'Top Pocket Hem' is not an option when \"no pocket\" is selected\n userSelections.pocket?.gpp_code !== 'VC00052' &&\n userSelections.monogram_style?.gpp_code !== 'VC00496' &&\n userSelections.monogram_style?.gpp_code !== 'VC00583',\n VC00171: (userSelections) =>\n // 'Left Breast' is only an option when \"no pocket\" is selected (or no pocket selection has been made)\n userSelections.pocket?.gpp_code === 'VC00052' || !userSelections.pocket,\n VC22536: (userSelections) =>\n // 'Inside Collar Band' is not an option when monogram style \"MOH\" is selected\n userSelections.monogram_style?.gpp_code !== 'VC00496' &&\n userSelections.monogram_style?.gpp_code !== 'VC00583'\n },\n contrast_stitching_color: {\n ...CONTRAST_STITCHING_NO_OPTION_GPP_CODE.contrast_stitching_color.reduce(\n (a, gpp_code) => {\n a[gpp_code] = () => false;\n return a;\n },\n {}\n )\n },\n contrast_stitching_location: {\n ...CONTRAST_STITCHING_NO_OPTION_GPP_CODE.contrast_stitching_location.reduce(\n (a, gpp_code) => {\n a[gpp_code] = () => false;\n return a;\n },\n {}\n )\n }\n};\n\nconst UNHIDDABLE_CATEGORIES = new Set(['fabric']);\n\nconst REQUIRED_MONOGRAM_CATEGORIES = new Set([\n 'monogram_initials',\n 'monogram_style'\n]);\n\nconst CUSTOM_NEXT_ATTRIBUTE_NAME = {\n monogram: 'Monogram',\n contrast_stitching: 'Contrast Stitching'\n};\n\nexport default function Configurator({\n productKey,\n productName,\n productExternalId,\n hasLaydownPreview,\n existingBody,\n confirmedFitShapeCode,\n existingLineItemOptions,\n existingMonogramInitials,\n startingQuantity,\n authenticityToken,\n remoteImagesPath,\n resizedRemoteImagesPath,\n resizedImageExtension,\n categorySettings,\n cartSettings,\n currencyCode,\n hidePayment,\n bodySelectorIframeUrl,\n showBodySelector = SHOW_BODY_SELECTOR.NONE,\n fabricDisplayValue,\n brandCode,\n showCustomPreviewImage = false,\n showFabricDetail,\n isIframeIntegrated = false,\n isItemClone = false,\n isAttendant = false\n}) {\n const [currentScreen, setCurrentScreen] = React.useState('main');\n const [existingLineItems, setExistingLineItems] = React.useState(\n existingLineItemOptions\n );\n const [contrastStitchingEnabled, setContrastStitchingEnabled] =\n React.useState(false);\n const queryParams = new URLSearchParams(window.location.search);\n const view = queryParams.get('view');\n let essQueryParams = {};\n if (queryParams.has('formcut_email') && queryParams.has('formcut_scan_id')) {\n essQueryParams = {\n formcut_email: queryParams.get('formcut_email'),\n formcut_scan_id: queryParams.get('formcut_scan_id')\n };\n }\n\n const popupQueryParamConfiguredItemIds = (\n queryParams.get('configured_item_ids') || ''\n ).split(',');\n\n // We need monogram_style regardless of if its hidden or not because the min max character for monogram initials\n // depends on the style\n const categories = useMemo(\n () =>\n Object.keys(categorySettings).filter(\n (c) => c === 'monogram_style' || categorySettings[c]?.hidden === false\n ),\n [categorySettings]\n );\n\n const categoriesWithoutPreview = Object.keys(categorySettings).filter(\n (c) => categorySettings[c]?.has_laydown_preview === false\n );\n let currencySymbol;\n if (currencyCode === 'GBP') {\n currencySymbol = '£';\n } else if (currencyCode === 'HKD') {\n currencySymbol = 'HK$';\n } else {\n currencySymbol = '$';\n }\n\n const defaultSelectedBody = useMemo(() => {\n if (existingBody?.email) return existingBody;\n\n let localStorageBodyData = localStorage.getItem('selectedBody');\n\n if (localStorageBodyData) {\n try {\n localStorageBodyData = JSON.parse(localStorageBodyData);\n } catch {\n localStorageBodyData = undefined;\n }\n }\n if (localStorageBodyData) {\n return localStorageBodyData;\n }\n\n const currentExternalCartId = new URLSearchParams(\n window.location.search\n ).get('externalCartId');\n if (!currentExternalCartId) return {};\n\n const previousExternalCartId = localStorage.getItem('externalCartId');\n if (previousExternalCartId === currentExternalCartId) {\n return JSON.parse(localStorage.getItem('selectedBody')) || {};\n } else {\n localStorage.setItem('externalCartId', currentExternalCartId);\n return {};\n }\n }, [existingBody]);\n\n const [selectedBody, setSelectedBody] = React.useState(defaultSelectedBody);\n const updateSelectedBody = (body) => {\n setSelectedBody(body);\n // In case of iframe-integration, the user body data is managed by ESS\n if (!isIframeIntegrated) {\n localStorage.setItem('selectedBody', JSON.stringify(body));\n }\n };\n\n const fitOptions = useProductPreferences(productKey).data;\n const [selectedFit, setSelectedFit] = React.useState(null);\n\n useLoadExistingFit(\n fitOptions,\n existingLineItems.fit || confirmedFitShapeCode,\n setSelectedFit\n );\n\n const defaultUserSelection = useMemo(() => {\n const initialUserSelections = {};\n categories.forEach((category) => {\n initialUserSelections[category] = null;\n });\n return initialUserSelections;\n }, [categories]);\n\n const [userSelections, setUserSelections] =\n React.useState(defaultUserSelection);\n\n const setSelectedAttributeFunctions = categories.reduce(\n (obj, category) => (\n (obj[category] = (newAttributeValue) => {\n setUserSelections((us) => ({ ...us, [category]: newAttributeValue }));\n }),\n obj\n ),\n {}\n );\n\n const [wasInMonogramSection, setWasInMonogramSection] = React.useState(false);\n const [wasInContrastStitchingSection, setWasInContrastStitchingSection] =\n React.useState(false);\n\n const productOptions = useProductOptions({\n categories,\n productKey,\n fitOptions,\n existingLineItemId: existingLineItems.id,\n fabricDisplayValue\n });\n let unselectableOptionsTable = {};\n\n const selectableOptionsTable =\n (Object.keys(productOptions).length &&\n Object.entries(productOptions[selectedFit?.gpp_shape_code] ?? {}).reduce(\n (acc, [key, options]) => {\n if (hasProp(OPTION_FILTERS, key)) {\n acc[key] = [];\n\n for (const option of options) {\n if (\n OPTION_FILTERS[key][option.gpp_code]?.(userSelections) ??\n true\n ) {\n acc[key].push(option);\n } else {\n unselectableOptionsTable[key] = [\n ...(unselectableOptionsTable[key] || []),\n option\n ];\n }\n }\n } else {\n acc[key] = options;\n }\n\n return acc;\n },\n {}\n )) ||\n defaultUserSelection;\n\n useEffect(() => {\n const selections = categories.reduce((obj, category) => {\n // Look/check for userSelection in selectable options\n let selection = selectableOptionsTable[category]?.find(\n (attrOption) => attrOption.id === userSelections[category]?.id\n );\n\n // Else try to restore existing line item options\n // except for monograms and contrast stitching panel\n if (\n !selection &&\n !(wasInMonogramSection && monogramCategories.includes(category)) &&\n !(\n wasInContrastStitchingSection &&\n CONTRAST_STITCHING_CATEGORIES_SET.has(category)\n )\n ) {\n selection = selectableOptionsTable[category]?.find(\n (attrOption) => attrOption.id === existingLineItems[category]\n );\n }\n\n // Only for contrast stitching categories:\n // Check if the userSelection is the None option\n // None options aren't present in selectableOptionsTable\n if (!selection && CONTRAST_STITCHING_CATEGORIES_SET.has(category)) {\n selection = unselectableOptionsTable[category]?.find(\n (attrOption) => attrOption.id === userSelections[category]?.id\n );\n\n if (!selection && !wasInContrastStitchingSection) {\n selection = unselectableOptionsTable[category]?.find(\n (attrOption) => attrOption.id === existingLineItems[category]\n );\n }\n }\n\n return { ...obj, [category]: selection || null };\n }, {});\n\n if (JSON.stringify(selections) !== JSON.stringify(userSelections)) {\n setUserSelections(selections);\n\n // When restoring the selection from existing line items, set the appropriate\n // checkbox state for contrast stitching panel\n if (!wasInContrastStitchingSection) {\n // check if contrast stitching is enabled\n const didUserDisable = CONTRAST_STITCHING_CATEGORIES_ARRAY.every(\n (category) => {\n return CONTRAST_STITCHING_NO_OPTION_GPP_CODE[category].some(\n (gpp_code) => gpp_code === selections[category]?.gpp_code\n );\n }\n );\n\n setContrastStitchingEnabled(!didUserDisable);\n }\n }\n }, [\n selectableOptionsTable,\n wasInMonogramSection,\n wasInContrastStitchingSection\n ]);\n\n const selectableOptionsTableLoaded =\n Object.keys(selectableOptionsTable).length == categories.length &&\n !Object.values(selectableOptionsTable).every((x) => !x);\n\n const selectableOptions = selectableOptionsTable[currentScreen];\n const currentSelectedAttribute = userSelections[currentScreen];\n const currentSetSelectedAttribute =\n setSelectedAttributeFunctions[currentScreen];\n\n const categoriesToShow = categories.filter((category) => {\n if (!selectableOptionsTableLoaded) {\n // Show category if it's not hidden when the table hasn't loaded\n return !categorySettings[category].hidden;\n } else {\n // Show category if it has selectable options or is unhiddable\n const hasSelectableOptions =\n (selectableOptionsTable[category] &&\n selectableOptionsTable[category].length > 1 &&\n !REQUIRED_MONOGRAM_CATEGORIES.has(category)) ||\n (REQUIRED_MONOGRAM_CATEGORIES.has(category) &&\n selectableOptionsTable[category] &&\n selectableOptionsTable[category].length > 0);\n const isUnhiddable = UNHIDDABLE_CATEGORIES.has(category);\n return hasSelectableOptions || isUnhiddable;\n }\n });\n\n // If even preview image for a single category is unable to load, get rid of all the preview images and show the default one\n const [isDefaultImageActive, setIsDefaultImageActive] = React.useState(false);\n const triggerDefaultImage = () => {\n setIsDefaultImageActive(true);\n };\n\n //monogram\n const [monogramInitials, setMonogramInitials] = React.useState(\n existingMonogramInitials || ''\n );\n const monogramCategories = categoriesToShow.filter(\n (c) => categorySettings[c]?.selection_panel_layout === 'monogram'\n );\n const monogramSelections = monogramCategories.reduce((obj, key) => {\n if (userSelections[key] !== undefined) {\n obj[key] = userSelections[key];\n }\n return obj;\n }, {});\n\n const selectedMonogramStyleSpecs =\n MONOGRAM_STYLES_SPECS[userSelections.monogram_style?.gpp_code] ||\n (selectableOptionsTable?.monogram_style?.length ?\n {\n min: 0,\n max: Math.max(\n ...selectableOptionsTable.monogram_style.map(\n (s) => MONOGRAM_STYLES_SPECS[s.gpp_code].max\n )\n ),\n validCharacters: selectableOptionsTable.monogram_style\n .map((s) => MONOGRAM_STYLES_SPECS[s.gpp_code].validCharacters)\n .reduce((a, b) => (a.length > b.length ? a : b)),\n validCharactersDisplay: selectableOptionsTable.monogram_style\n .map((s) => MONOGRAM_STYLES_SPECS[s.gpp_code])\n .reduce((a, b) =>\n a.validCharacters.length > b.validCharacters.length ? a : b\n ).validCharactersDisplay,\n textTransform:\n selectableOptionsTable.monogram_style\n .map((s) => MONOGRAM_STYLES_SPECS[s.gpp_code].textTransform)\n .reduce((a, b) =>\n a === 'none' || b === 'none' ? 'none'\n : a === 'uppercase' || b === 'uppercase' ? 'uppercase'\n : a === 'lowercase' || b === 'lowercase' ? 'lowercase'\n : null\n ) || 'none',\n previewInitials:\n MONOGRAM_STYLES_SPECS[\n selectableOptionsTable.monogram_style[0].gpp_code\n ].previewInitials,\n margin: MONOGRAM_STYLES_SPECS.default.margin,\n style:\n MONOGRAM_STYLES_SPECS[\n selectableOptionsTable.monogram_style[0].gpp_code\n ].style,\n monogramPreviewStyle:\n MONOGRAM_STYLES_SPECS[\n selectableOptionsTable.monogram_style[0].gpp_code\n ].monogramPreviewStyle\n }\n : MONOGRAM_STYLES_SPECS.default);\n const defaultMonogramColor =\n selectableOptionsTable?.monogram_color?.length ?\n selectableOptionsTable.monogram_color.find(\n (c) => c.font_family === '#000000'\n ) || selectableOptionsTable.monogram_color[0]\n : { font_family: '#000000' };\n const monogramError =\n monogramInitials.length < selectedMonogramStyleSpecs.min ?\n `Please update your initials: the style you have selected requires at least ${\n selectedMonogramStyleSpecs.min\n } character${selectedMonogramStyleSpecs.min == 1 ? '' : 's'}`\n : monogramInitials.length > selectedMonogramStyleSpecs.max ?\n `Please update your initials: the style you have selected supports at most ${selectedMonogramStyleSpecs.max} characters`\n : (\n !new RegExp(\n `^[${selectedMonogramStyleSpecs.validCharacters}]*$`,\n 'i'\n ).test(monogramInitials)\n ) ?\n `Please update your initials: the style you have selected only supports ${selectedMonogramStyleSpecs.validCharactersDisplay} characters.`\n : '';\n const monogramFullySelected =\n ((wasInMonogramSection || !!existingLineItems.id) &&\n !userSelections.monogram_initials) ||\n (!monogramError && Object.values(monogramSelections).every(Boolean));\n const transformedMonogramInitials =\n selectedMonogramStyleSpecs.textTransform === 'uppercase' ?\n monogramInitials.toUpperCase()\n : selectedMonogramStyleSpecs.textTransform === 'lowercase' ?\n monogramInitials.toLowerCase()\n : monogramInitials;\n\n const clearMonogram = () => {\n setMonogramInitials('');\n setUserSelections({\n ...userSelections,\n ...Object.fromEntries(\n monogramCategories.map((category) => [category, null])\n )\n });\n };\n\n let categoryIndex = -1;\n\n for (let i = 0; i < categoriesToShow.length; i++) {\n if (currentScreen === 'monogram') {\n if (categoriesToShow[i] === 'monogram_initials') {\n categoryIndex = i;\n break;\n }\n } else if (currentScreen === 'contrast_stitching') {\n if (CONTRAST_STITCHING_CATEGORIES_SET.has(categoriesToShow[i])) {\n categoryIndex = i;\n break;\n }\n } else if (categoriesToShow[i] === currentScreen) {\n categoryIndex = i;\n break;\n }\n }\n\n let nextAttribute = categoriesToShow[categoryIndex + 1];\n let previousAttribute = categoriesToShow[categoryIndex - 1];\n if (categoryIndex == 0 && !confirmedFitShapeCode) previousAttribute = 'fit';\n\n // Monogram options are handled on their own screen.\n if (currentScreen === 'monogram') {\n for (\n let indexOffset = 2;\n monogramCategories.includes(nextAttribute);\n indexOffset++\n ) {\n nextAttribute = categoriesToShow[categoryIndex + indexOffset];\n }\n } else if (currentScreen === 'contrast_stitching') {\n if (nextAttribute !== 'monogram') {\n for (\n let indexOffset = 1;\n CONTRAST_STITCHING_CATEGORIES_SET.has(nextAttribute);\n indexOffset++\n ) {\n nextAttribute = categoriesToShow[categoryIndex + indexOffset];\n }\n }\n }\n\n if (nextAttribute) {\n if (CONTRAST_STITCHING_CATEGORIES_SET.has(nextAttribute))\n nextAttribute = 'contrast_stitching';\n else if (monogramCategories.includes(nextAttribute))\n nextAttribute = 'monogram';\n }\n\n if (previousAttribute) {\n if (CONTRAST_STITCHING_CATEGORIES_SET.has(previousAttribute))\n previousAttribute = 'contrast_stitching';\n else if (monogramCategories.includes(previousAttribute))\n previousAttribute = 'monogram';\n }\n\n const nextAttributeName =\n CUSTOM_NEXT_ATTRIBUTE_NAME[nextAttribute] ||\n categorySettings[nextAttribute]?.display_name;\n\n const canAddToBasket = !!(\n (cartSettings.cart === 'iframePostMessage' || selectedBody.scanId) &&\n selectedFit &&\n categoriesToShow.every(\n (category) =>\n monogramCategories.includes(category) ||\n userSelections[category] !== null\n ) &&\n monogramFullySelected\n );\n\n const canAddToAttendantBasket = !!(\n selectedFit &&\n categoriesToShow.every(\n (category) =>\n monogramCategories.includes(category) ||\n userSelections[category] !== null\n ) &&\n monogramFullySelected &&\n isAttendant\n );\n\n let screenToDisplay;\n let mobileNextStepsButton;\n switch (currentScreen) {\n case 'main': {\n const pricedSelections = Object.values(userSelections);\n const itemCost = pricedSelections\n .map((selection) => {\n return selection && parseFloat(selection.price);\n })\n .reduce((total, num) => total + num);\n\n mobileNextStepsButton = null;\n screenToDisplay = (\n \n Pocket Square is automatically made in the same fabric selected for\n your Shirt\n \n );\n\n mobileNextStepsButton = (\n
\n {showBodySelector === SHOW_BODY_SELECTOR.POPUP && (\n
\n );\n}\n\nexport function useLoadExistingFit(\n fitOptions,\n existingFitShapeCode,\n setSelectedFit\n) {\n useEffect(() => {\n if (!fitOptions || !existingFitShapeCode) return;\n\n const initialFit = fitOptions.find(\n (option) => option.gpp_shape_code === existingFitShapeCode\n );\n if (initialFit) {\n setSelectedFit(initialFit);\n }\n }, [existingFitShapeCode, fitOptions, setSelectedFit]);\n}\n\n//for monogram\n\n// Run this example by adding <%= javascript_pack_tag 'Configurator_react' %> to the head of your layout file,\n// like app/views/layouts/application.html.erb. All it does is render \n
\n \n {imagePreviewScreenToDisplay}\n
\n {screenToDisplay}\n \n {mobileNextStepsButton}\n
\n {fabricOptions &&\n fabricOptions.map((fabric) => (\n Configurator React
at the bottom\n// of the page.\n","import React from 'react';\n\nexport default function ConfiguratorHeader({ productName, currencySymbol }) {\n const title = currencySymbol === '$' ? 'Customizer' : 'Customiser';\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport ConfiguratorHeader from './ConfiguratorHeader';\nimport BodySelectionRow from './BodySelectionRow';\nimport FitSelectionRow from './FitSelectionRow';\nimport FabricSelectionRow from './FabricSelectionRow';\nimport MonogramSelectionRow from './MonogramSelectionRow';\nimport CustomAttributeRow from './CustomAttributeRow';\nimport ContrastStitchingRow from './ContrastStitchingRow';\nimport OrderTotals from './OrderTotals';\nimport OrderActions from './OrderActions';\nimport { CONTRAST_STITCHING_CATEGORIES_SET } from '../constants/contrast_stitching';\nimport { SHOW_BODY_SELECTOR } from '../constants/body_selector';\n\nexport default function ConfiguratorHome({\n itemCost,\n productKey,\n productName,\n selectedBody,\n selectedFit,\n setCurrentScreen,\n canOpenAttributes,\n currencySymbol,\n authenticityToken,\n fitOptions,\n lineItemId,\n userSelections,\n categorySettings,\n categoriesToShow,\n isFitLocked,\n startingQuantity,\n monogramCategories,\n monogramSelections,\n monogramFullySelected,\n monogramInitials,\n hidePayment,\n showBodySelector,\n productExternalId,\n cartSettings,\n contrastStitchingEnabled,\n isItemClone,\n canAddToBasket,\n isAttendant\n}) {\n const [quantity, setQuantity] = React.useState(startingQuantity);\n\n const customAttributeRows = categoriesToShow.map((categoryKey, idx) => {\n const attributeName = categorySettings[categoryKey].display_name;\n\n if (categoryKey === 'fabric') {\n return (\n {title}
\n \n \n Choose from our carefully curated selection of fabrics and then\n customize the {productName.toLowerCase()} to your preference.{' '}\n \n \n The {productName.toLowerCase()} will be cut to your shape.\n \n
\n \n
\n );\n}\n","import React from 'react';\nimport ArrowRight from 'images/arrow-right.svg';\nimport cx from 'classnames';\nimport { CONTRAST_STITCHING_CATEGORIES_ARRAY } from '../constants/contrast_stitching';\nimport { hasProp } from '../utils/object';\n\nexport default function ContrastStitchingRow({\n setCurrentScreen,\n canOpen,\n contrastStitchingEnabled,\n userSelections\n}) {\n const classNames = cx(\n 'fc-option-dropdown-arrow-collapsed',\n !canOpen && 'fc-reduced-opacity'\n );\n const handleClick = () => {\n if (canOpen) {\n setCurrentScreen('contrast_stitching');\n }\n };\n\n const selectionMade = CONTRAST_STITCHING_CATEGORIES_ARRAY.every((category) =>\n hasProp(userSelections, category) ? userSelections[category] !== null : true\n );\n\n return (\n \n
\n \n
\n \n {showBodySelector === SHOW_BODY_SELECTOR.SELECTION && (\n
\n \n
\n );\n}\n","import React from 'react';\nimport NextStepButton from './NextStepButton';\nimport BackToConfigurator from './BackToConfigurator';\nimport SubSelectionPalletColor from './SubSelectionPalletColor';\nimport SubSelectionPalletLocation from './SubSelectionPalletLocation';\nimport { CONTRAST_STITCHING_CATEGORIES_ARRAY } from '../constants/contrast_stitching';\nimport cx from 'classnames';\n\nconst palletComponents = {\n contrast_stitching_color: SubSelectionPalletColor,\n contrast_stitching_location: SubSelectionPalletLocation\n};\n\nexport default function ContrastStitchingSelectionPanel({\n productName,\n currencySymbol,\n nextAttribute,\n nextAttributeName,\n previousAttribute,\n setCurrentScreen,\n isDisabled,\n selectableOptionsTable,\n unselectableOptionsTable,\n setSelectedAttributeFunctions,\n userSelections,\n enabled,\n setEnabled,\n wasInContrastStitchingSection,\n setWasInContrastStitchingSection,\n canAddToBasket\n}) {\n const containerClasses = cx(\n 'row no-gutters fc-fabric-selection-pallet',\n enabled ?\n 'monogram-selection-pallet-scrollbar'\n : 'monogram-selection-w-pallet-scrollbar'\n );\n\n const toggleCheckbox = () => {\n if (enabled) {\n setEnabled(false);\n CONTRAST_STITCHING_CATEGORIES_ARRAY.forEach((category) => {\n setSelectedAttributeFunctions[category](\n unselectableOptionsTable[category][0]\n );\n });\n } else {\n setEnabled(true);\n CONTRAST_STITCHING_CATEGORIES_ARRAY.forEach((category) => {\n setSelectedAttributeFunctions[category]();\n });\n }\n };\n\n React.useEffect(() => {\n setWasInContrastStitchingSection(true);\n\n // Set the selection to be none initially, unless there is a selection present already.\n if (userSelections && !wasInContrastStitchingSection) {\n CONTRAST_STITCHING_CATEGORIES_ARRAY.forEach((category) => {\n !!userSelections[category] ||\n setSelectedAttributeFunctions[category](\n unselectableOptionsTable[category][0]\n );\n });\n }\n }, []);\n\n return (\n Contrast Stitching
\n {!contrastStitchingEnabled && selectionMade ?\n \n No contrast stitching\n
\n : contrastStitchingEnabled && selectionMade ?\n \n {[\n ...CONTRAST_STITCHING_CATEGORIES_ARRAY.map(\n (c) => userSelections[c].name\n )\n ].join(', ')}\n
\n : \n Make a selection\n
\n }\n \n
\n \n \n
\n \n
\n );\n}\n","import React from 'react';\nimport ArrowRight from 'images/arrow-right.svg';\nimport cx from 'classnames';\n\nexport default function CustomAttributeRow({\n attributeName,\n selectedAttribute,\n setCurrentScreen,\n panelScreen,\n canOpen\n}) {\n const arrowClasses = cx(\n 'fc-option-dropdown-arrow-collapsed',\n !canOpen && 'fc-reduced-opacity'\n );\n const handleClick = () => {\n if (canOpen) {\n setCurrentScreen(panelScreen);\n }\n };\n\n return (\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n Select a Contrast Stitching\n
\n \n
\n \n \n
\n \n Choose from several colors and placements.\n
\n : null}\n\n {enabled ?\n\n {Object.keys(palletComponents).map((category) => {\n const Pallet = palletComponents[category];\n return Pallet ?\n
\n : null}\n \n
\n \n
\n );\n}\n","import React from 'react';\nimport FabricInfoIcon from 'images/fabric-info-icon.svg';\n\nexport default function FabricDescriptionModal({ fabric, currencySymbol }) {\n const rawDescription = fabric.text.description;\n let description;\n if (rawDescription) {\n const lowerCaseDescription = fabric.text.description\n .split('. ')\n .map(\n (sentence) =>\n sentence[0] &&\n sentence[0].toUpperCase() + sentence.substring(1).toLowerCase()\n );\n description = lowerCaseDescription && lowerCaseDescription.join('. ');\n }\n\n return (\n {attributeName}
\n {selectedAttribute ? (\n \n {selectedAttribute.name}\n
\n ) : (\n \n Make a selection\n
\n )}\n \n
\n \n \n
\n \n
\n \n );\n}\n","import React, { useMemo, useState, useEffect } from 'react';\nimport classNames from 'classnames';\nimport BackToConfigurator from './BackToConfigurator';\nimport NextStepButton from './NextStepButton';\nimport FabricSelectedIcon from 'images/fabric-selected-check.svg';\nimport DefaultFabricImage from 'images/PhotoComingSoon.png';\nimport SearchIcon from 'images/search.svg';\nimport CutLengthsIcon from 'images/cut-length.svg';\nimport ArrowDown from 'images/arrow-down-small.svg';\nimport useImageLoader from \"../hooks/useImageLoader\";\n\nconst CUT_LENGTH_TYPE = 'CUTLENGTH';\n\nexport default function FabricSelectionPanel({\n productName,\n fabrics,\n hasMoreInfo,\n attributeName,\n setSelectedAttribute,\n selectedAttribute,\n setCurrentScreen,\n currencySymbol,\n nextAttribute,\n nextAttributeName,\n previousAttribute,\n hidePayment,\n showFabricDetail,\n canAddToBasket\n}) {\n const attributeTitle =\n attributeName.charAt(0).toUpperCase() + attributeName.slice(1);\n const hasFabrics = !!fabrics;\n const [touched, setTouched] = useState(false);\n const [query, setQuery] = useState('');\n const [activeBook, setActiveBook] = useState('');\n\n const filteredFabrics = useMemo(() => {\n if (query === '' || fabrics === null) {\n return sortByBookName(fabrics);\n } else {\n const lowerCasedQuery = query.toLowerCase();\n return sortByBookName(fabrics.filter((_fabric) =>\n _fabric.name.toLowerCase().includes(lowerCasedQuery) ||\n _fabric.gpp_book_name.toLowerCase().includes(lowerCasedQuery)\n ));\n }\n }, [fabrics, query]);\n\n const handleOnClickSearch = () => {\n setTouched(true);\n };\n\n const handleSearch = (e) => {\n setQuery(e.target.value);\n };\n\n useEffect(() => {\n setQuery('');\n }, [attributeName]);\n\n function sortByBookName(arr) {\n return arr.reduce((sortedObj, item) => {\n sortedObj[item.gpp_book_name] = [...(sortedObj[item.gpp_book_name] || []), item];\n return sortedObj;\n }, {});\n }\n\n const sortByCutLength = (a, b) => a.gpp_selection_type === CUT_LENGTH_TYPE ? 1 : b.gpp_selection_type === CUT_LENGTH_TYPE ? -1 : 0;\n\n return (\n \n
\n \n \n ×\n \n
\n \n
\n \n \n
\n {description}
\n\n {currencySymbol}\n {Math.round(fabric.price)}\n
\n\n
\n \n );\n}\n\nexport function FabricPallet({\n currencySymbol,\n fabric,\n setSelectedAttribute,\n isSelectedAttribute,\n hasMoreInfo,\n hidePayment,\n showFabricDetail\n}) {\n const [isActive, setIsActive] = React.useState(null);\n const isDetailVisible = (isSelectedAttribute || isActive) && hasMoreInfo;\n const showFabricInfoDetails = showFabricDetail && isDetailVisible;\n const loadedImageUrl = useImageLoader(fabric.thumbnail_url || fabric.images.display, DefaultFabricImage);\n const handleFabricSelection = () => {\n if (!isSelectedAttribute) {\n setSelectedAttribute(fabric);\n }\n };\n\n return (\n \n \n
\n\n \n
\n \n
\n\n \n
\n \n \n
\n \n Select a {attributeTitle}\n
\n \n\n {Object.keys(filteredFabrics).length === 1 ?\n (\n <>\n {Object.keys(filteredFabrics).map((key) => (\n
\n \n {hasFabrics &&\n filteredFabrics[key].sort(sortByCutLength).map((fabric) => {\n const isSelectedAttribute = selectedAttribute === fabric;\n return (\n
\n ))}\n \n ) :\n (\n <>\n {Object.keys(filteredFabrics).map((key) => (\n \n
\n ))}\n \n )\n }\n setActiveBook((prev) => prev === key ? '' : key)}>\n
\n {key.toLowerCase()}
\n \n 
\n
\n \n {hasFabrics &&\n filteredFabrics[key].sort(sortByCutLength).map((fabric) => {\n const isSelectedAttribute = selectedAttribute === fabric;\n return (\n
\n \n
\n \n {fabric?.gpp_selection_type === CUT_LENGTH_TYPE && (\n
\n \n
\n )}\n cut lengths
\n \n 
\n
\n \n
\n )}\n \n {Object.keys(fabric.attributes).map((attributeTitle) => {\n const displayTitle =\n attributeTitle.charAt(0).toUpperCase() +\n attributeTitle.slice(1);\n const attributeText = fabric.attributes[attributeTitle];\n\n return (\n
\n \n \n {displayTitle}:{' '}\n \n \n {attributeText}\n \n
\n );\n })}\n {fabric.name}
\n {!hidePayment && hasMoreInfo && (\n \n {currencySymbol}\n {Math.round(fabric.price)}\n
\n )}\n \n );\n}\n","import React from 'react';\nimport ArrowRight from 'images/arrow-right.svg';\nimport cx from 'classnames';\n\nexport default function FabricSelectionRow({\n fabric,\n setCurrentScreen,\n canOpen\n}) {\n const classNames = cx(\n 'fc-option-dropdown-arrow-collapsed',\n !canOpen && 'fc-reduced-opacity'\n );\n const handleClick = () => {\n if (canOpen) {\n setCurrentScreen('fabric');\n }\n };\n\n return (\n \n
\n );\n}\n\nexport function FabricSelection({ fabric }) {\n return Fabric
\n {fabric ? (\n Make a selection
\n )}\n \n
\n \n \n
\n {fabric.name}
;\n}\n","import React from 'react';\nimport ModelImagePreview from './ModelImagePreview';\n\nexport default function FitImagePreview({\n productKey,\n selectedFit,\n remoteImagesPath,\n brandCode,\n showCustomPreviewImage\n}) {\n return selectedFit && selectedFit.image ? (\n \n
\n ) : (\n \n
\n );\n}\n\nexport function FitSelection({\n fit,\n isSelected,\n setSelectedFit,\n resetSelections\n}) {\n const [isActive, setIsActive] = React.useState(null);\n const loadedImageUrl = useImageLoader(fit.image, DefaultFitImage);\n\n const containerClasses = cx(\n 'row no-gutters fc-custom-selection',\n (isActive || isSelected) && 'fc-custom-selection-active'\n );\n const handleClick = () => {\n if (!isSelected) {\n setSelectedFit(fit);\n resetSelections();\n }\n };\n\n return (\n \n
\n \n
\n\n \n
\n \n
\n \n
\n Select a Fit
\n \n
\n \n {fitOptions &&\n fitOptions.map((fit) => {\n return (\n
\n \n
\n \n
\n\n \n
\n \n {isSelected && {fit.answer}
\n\n \n {fit.description}\n
\n \n
\n );\n}\n","import React, { useState, useMemo, useEffect } from 'react';\n\nexport default function ModelImagePreview({\n productKey,\n selectedFabric,\n remoteImagesPath,\n brandCode,\n showCustomPreviewImage\n}) {\n const [imageIndex, setImageIndex] = useState(0);\n // Array of images sources. We'll start with index 0 and fallback to the next one if\n // we are unable to load current image\n const imageSources = useMemo(() => {\n let sourcesArray = [];\n\n if (selectedFabric) {\n sourcesArray.push(\n `${remoteImagesPath}/${selectedFabric.gpp_code}__${productKey}__model.jpg`\n );\n }\n\n if (showCustomPreviewImage) {\n sourcesArray.push(\n `${remoteImagesPath}/default__${brandCode}__${productKey}__model.jpg`\n );\n }\n\n sourcesArray.push(`${remoteImagesPath}/default__${productKey}__model.jpg`);\n\n return sourcesArray;\n }, [productKey, selectedFabric, remoteImagesPath]);\n\n const handleOnError = () => {\n setImageIndex((imgIdx) =>\n imgIdx < imageSources.length - 1 ? imgIdx + 1 : imgIdx\n );\n };\n\n useEffect(() => {\n // reset image index when the imageSources array gets updated\n setImageIndex(0);\n }, [imageSources]);\n\n return (\n Fit
\n {selectedFit ? (\n \n {selectedFit.answer}\n
\n ) : (\n \n Make a selection\n
\n )}\n \n
\n \n \n
\n \n
\n );\n}\n","import React from 'react';\nimport cx from 'classnames';\nimport MonogramSelectedIcon from 'images/monogram-selected-check.png';\n\nexport default function MonogramPalletStyle({\n options,\n selectedAttribute,\n setSelectedAttribute,\n monogramStylesSpecs\n}) {\n return (\n \n
\n );\n}\n\nexport function MonogramPalletStyleItem({\n attr,\n setSelectedStyle,\n isSelectedAttribute,\n monogramStyleSpecs\n}) {\n const [isActive, setIsActive] = React.useState(null);\n\n const containerClasses = cx(\n 'monogram-color-blocks',\n (isActive || isSelectedAttribute) && 'monogram-color-blocks-active'\n );\n\n const handleColorSelection = () => {\n if (!isSelectedAttribute) {\n setSelectedStyle(attr);\n }\n };\n\n const monogramPreviewStyle = monogramStyleSpecs.monogramPreviewStyle;\n\n return (\n \n Choose Style
\n \n {options?.map((style) => {\n return (\n
\n \n
\n \n {monogramStyleSpecs.previewInitials\n .split('')\n ?.map((val, index) => (\n \n {val}\n \n ))}\n
\n {attr.name}
\n \n );\n}\n\n\n","import React, { useEffect, useRef, useState } from 'react';\nimport MonogramOffset from './monogramStyles/MonogramOffset';\nimport MonogramDiamond from './monogramStyles/MonogramDiamond';\nimport MonogramDefault from './monogramStyles/MonogramDefault';\n\nexport default function MonogramPreview({\n userSelections,\n monogramInitials,\n monogramError,\n selectedMonogramStyleSpecs,\n defaultMonogramColor\n}) {\n const [key, setKey] = useState(0);\n\n useEffect(() => {\n // Incrementing the key whenever monogramInitials or userSelections.monogram_style changes\n setKey((prevKey) => prevKey + 1);\n }, [\n monogramInitials,\n userSelections.monogram_style,\n userSelections.monogram_color\n ]);\n\n return (\n \n );\n}\n\nfunction MonogramContent({\n userSelections,\n monogramInitials,\n selectedMonogramStyleSpecs,\n defaultMonogramColor\n}) {\n const svgRef = useRef();\n\n useEffect(() => {\n const textElements = svgRef.current.querySelectorAll('text');\n if (textElements.length > 0) {\n const bbox = Array.from(textElements).reduce(\n (acc, text) => text.getBBox(),\n textElements[0].getBBox()\n );\n\n const margin = selectedMonogramStyleSpecs.margin;\n svgRef.current.setAttribute(\n 'viewBox',\n `${bbox.x - margin} ${bbox.y} ${bbox.width + 2 * margin} ${bbox.height}`\n );\n }\n }, [monogramInitials, userSelections.monogram_style]);\n\n const MonogramComponents = {\n 'monogram-style-text': MonogramDefault,\n 'script-initial-code': MonogramOffset,\n 'diamond-monogram': MonogramDiamond,\n };\n\n const selectedMonogramStyle = selectedMonogramStyleSpecs.monogramPreviewStyle;\n const MonogramComponent = MonogramComponents[selectedMonogramStyle];\n\n return (\n \n );\n}\n","import React from 'react';\nimport NextStepButton from './NextStepButton';\nimport BackToConfigurator from './BackToConfigurator';\nimport SubSelectionPalletColor from './SubSelectionPalletColor';\nimport SubSelectionPalletLocation from './SubSelectionPalletLocation';\nimport MonogramPalletStyle from './MonogramPalletStyle';\nimport cx from 'classnames';\n\nexport default function MonogramSelectionPanel({\n productName,\n currencySymbol,\n nextAttribute,\n nextAttributeName,\n previousAttribute,\n setCurrentScreen,\n isDisabled,\n selectableOptionsTable,\n setSelectedAttributeFunctions,\n userSelections,\n clearMonogram,\n monogramError,\n monogramCategories,\n monogramStylesSpecs,\n selectedMonogramStyleSpecs,\n monogramInitials,\n setMonogramInitials,\n setWasInMonogramSection,\n canAddToBasket\n}) {\n const enabled = userSelections.monogram_initials !== null;\n\n const palletComponents = {\n monogram_style: MonogramPalletStyle,\n monogram_color: SubSelectionPalletColor,\n monogram_location: SubSelectionPalletLocation\n };\n\n const toggleMonogram = () => {\n if (enabled) {\n clearMonogram();\n } else {\n const options = selectableOptionsTable['monogram_initials'];\n setSelectedAttributeFunctions['monogram_initials'](options?.[0]);\n }\n };\n\n let characterRegExp = new RegExp(\n `[^${selectedMonogramStyleSpecs.validCharacters}]`,\n 'gi'\n );\n\n const pallets = monogramCategories.map((category) => {\n if (category === 'monogram_initials') {\n return (\n \n Enter Initials\n {\n e.target.value = e.target.value.replace(characterRegExp, '');\n }}\n style={{ textTransform: selectedMonogramStyleSpecs.textTransform }}\n onChange={(e) => setMonogramInitials(e.target.value)}\n maxLength={selectedMonogramStyleSpecs.max}\n />\n {monogramError ?\n
\n );\n }\n\n let Pallet = palletComponents[category];\n // Don't show monogram styles if they have only a single option\n if (\n Pallet &&\n !(\n category === 'monogram_style' &&\n selectableOptionsTable[category].length < 2\n )\n ) {\n return (\n \n maximum characters vary by style\n
\n\n
\n : null}\n {monogramError}
\n\n
\n );\n}\n","import React from 'react';\nimport ArrowRight from 'images/arrow-right.svg';\nimport cx from 'classnames';\n\nexport default function MonogramSelectionRow({\n setCurrentScreen,\n canOpen,\n monogramSelections,\n monogramInitials,\n monogramFullySelected\n}) {\n const classNames = cx(\n 'fc-option-dropdown-arrow-collapsed',\n !canOpen && 'fc-reduced-opacity'\n );\n const handleClick = () => {\n if (canOpen) {\n setCurrentScreen('monogram');\n }\n };\n\n const selections = Object.keys(monogramSelections).filter(\n (key) => key !== 'monogram_initials'\n );\n\n return (\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n Select a Monogram\n
\n \n
\n \n \n
\n \n A monogram is another way to emphasize that this shirt was\n made for you, by you.\n
\n Choose from several styles, colors, and placements.\n
\n {pallets}\n
\n : null}\n \n
\n \n
\n );\n}\n","import React from 'react';\nimport cx from 'classnames';\n\nexport default function NextStepButton({\n nextAttribute,\n nextAttributeName,\n previousAttribute,\n isDisabled,\n productName,\n setCurrentScreen,\n canAddToBasket\n}) {\n const nextScreen = nextAttribute || 'main';\n const previousScreen = previousAttribute || 'main';\n\n const changeScreen = (newScreen) => {\n setCurrentScreen(newScreen);\n setTimeout(() => {\n window.scroll({\n top: 0,\n left: 0,\n behavior: 'smooth'\n });\n }, 100);\n };\n\n const handleNextClick = () => {\n changeScreen(nextScreen);\n };\n\n const handlePreviousClick = () => {\n changeScreen(previousScreen);\n };\n\n const enableShortcutButton = nextAttribute && canAddToBasket;\n\n return (\n Monogram
\n {monogramFullySelected && !monogramSelections.monogram_initials ?\n No monogram
\n : monogramFullySelected ?\n \n {[\n monogramInitials,\n ...selections.map((s) => monogramSelections[s].name)\n ].join(', ')}\n
\n : \n Make a selection\n
\n }\n \n
\n \n \n
\n \n \n Previous\n \n\n \n {nextAttribute ?\n `Continue to ${nextAttributeName || nextAttribute}`\n : `Finalize my ${productName}`}\n \n\n {enableShortcutButton && (\n changeScreen('main')}\n disabled={isDisabled}\n >\n {`Finalize my ${productName}`}\n \n )}\n
\n );\n}\n","export const addToCartResultHandling = (\n data,\n cartUrl,\n skipSingleItemRestriction\n) => {\n if (\n !skipSingleItemRestriction &&\n data.error === 'single_item_restriction_fit_confirm_pending'\n ) {\n alert(\n `It looks like your first shirt has not been fit confirmed yet.\\n\\nWe only allow one product per category for first time orders.This ensures you get exactly the right fit and that all of your expectations are met.Your next order will allow the purchase of multiple items.`\n );\n } else if (data.error === 'user_not_signed_in') {\n $('#ScanRequiredModal').modal('show');\n } else {\n window.open(cartUrl, '_top');\n }\n};\n","import { addToCartResultHandling } from './result-handling';\n\nconst addToCart = async ({\n configured_item,\n quantity,\n authenticityToken,\n cartUrl\n}) => {\n const queryString = new URLSearchParams({\n configured_item_id: configured_item.id,\n quantity: quantity\n }).toString();\n\n const res = await window.fetch(`/line_items?${queryString}`, {\n headers: {\n 'X-CSRF-Token': authenticityToken\n },\n method: 'POST'\n });\n const data = await res.json();\n\n addToCartResultHandling(data, cartUrl, true);\n};\n\nconst updateInCart = async ({\n lineItemId,\n selections,\n quantity,\n authenticityToken,\n cartUrl\n}) => {\n const queryString = new URLSearchParams({\n ...selections,\n quantity: quantity\n }).toString();\n\n const res = await window.fetch(`/line_items/${lineItemId}?${queryString}`, {\n headers: {\n 'X-CSRF-Token': authenticityToken\n },\n method: 'PUT'\n });\n\n const data = await res.json();\n addToCartResultHandling(data, cartUrl, true);\n return;\n};\n\nexport const localCartService = {\n addToCart,\n updateInCart\n};\n","import { addToCartResultHandling } from './result-handling';\n\nconst addToCart = async ({\n cartApi,\n configured_item,\n itemCost,\n quantity,\n description,\n preview,\n cartUrl\n}) => {\n const res = await window.fetch(cartApi, {\n method: 'POST',\n body: JSON.stringify({\n configured_item: configured_item.id,\n price: itemCost * quantity,\n description,\n preview\n })\n });\n\n const data = await res.json();\n addToCartResultHandling(data, cartUrl);\n};\n\nexport const webhookCartService = {\n addToCart\n};\n","import { localCartService } from './local-cart';\nimport { webhookCartService } from './webhook-cart';\nimport { iframePostMessageCartService } from './iframePostMessage-cart';\nimport {useState} from \"react\";\n\nconst getDescriptions = ({\n categoriesToShow,\n categorySettings,\n userSelections,\n selectedFit,\n selectedBody,\n monogramSelections,\n monogramInitials\n}) => {\n const descriptions = [\n ['Sized For', selectedBody.firstName + ' ' + selectedBody.lastName],\n ['Fit', selectedFit.answer],\n ...categoriesToShow.reduce((acc, k) => {\n const v = categorySettings[k];\n if (v && v.selection_panel_layout != 'monogram') {\n acc.push([v.display_name, userSelections[k].name]);\n }\n return acc;\n }, [])\n ];\n\n if (Object.keys(userSelections).includes('monogram_initials')) {\n const monogramText =\n !userSelections['monogram_initials'] ? 'No' : (\n `(${[\n monogramInitials.toUpperCase(),\n ...Object.values(monogramSelections).map((v) => v.name)\n ].join(', ')})`\n );\n\n descriptions.push(['Monogram', monogramText]);\n }\n\n return descriptions;\n};\n\nconst getDescription = (descriptions) => {\n const { monogram, ...descriptionTexts } = descriptions;\n\n var monogramText;\n if (!monogram) {\n monogramText = '';\n } else if (monogram === 'No') {\n monogramText = `, with no monogram`;\n } else {\n monogramText = `, with monogram ${monogram}`;\n }\n\n return (\n Object.entries(descriptionTexts)\n .map((category, selection) => `${selection} ${category}`)\n .join(', ') + monogramText\n );\n};\n\nconst cartServices = {\n local: localCartService,\n webhook: webhookCartService,\n iframePostMessage: iframePostMessageCartService\n};\n\nexport const useCartServices = ({\n productKey,\n monogramInitials,\n lineItemId,\n authenticityToken,\n quantity,\n itemCost,\n userSelections,\n selectedFit,\n selectedBody,\n monogramSelections,\n productExternalId,\n categoriesToShow,\n categorySettings,\n cartSettings,\n isItemClone,\n isAttendant,\n attendantToken,\n attendantCustomerId\n}) => {\n const { cart, cartUrl, cartApi } = cartSettings;\n const [loading, setLoading] = useState(false);\n\n const fetchLineItem = async (url, method, body) => {\n const res = await window.fetch(url, {\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(body),\n method,\n });\n\n const response = await res.json();\n return response.order_id;\n };\n\n const handleSubmit = async () => {\n setLoading(true);\n try {\n const selections = {\n ...Object.keys(userSelections).reduce((acc, category) => {\n acc[category] = userSelections[category]?.id;\n return acc;\n }, {}),\n product_key: productKey,\n fit: selectedFit.gpp_shape_code,\n monogram_initials_text: monogramInitials || ''\n };\n\n const descriptions = getDescriptions({\n categoriesToShow,\n categorySettings,\n userSelections,\n selectedFit,\n selectedBody,\n monogramSelections,\n monogramInitials\n });\n const description = getDescription(descriptions);\n\n if (isAttendant && attendantToken) {\n const url = lineItemId\n ? `/attendants/${attendantToken}/line_items/${lineItemId}`\n : `/attendants/${attendantToken}/line_items`;\n\n const method = lineItemId ? 'PUT' : 'POST';\n\n const body = { ...selections, selected_body: selectedBody, quantity };\n\n if (attendantCustomerId) {\n body.user_id = +attendantCustomerId;\n }\n\n const orderId = await fetchLineItem(url, method, body);\n\n window.location.href = `/attendants/${attendantToken}/orders/${orderId}/basket`;\n return;\n }\n\n if (lineItemId && !isItemClone) {\n await cartServices[cart].updateInCart({\n cartApi,\n lineItemId,\n selections,\n itemCost,\n quantity,\n descriptions,\n description,\n cartUrl,\n productExternalId,\n authenticityToken\n });\n } else {\n const requestBody = { ...selections, selected_body: selectedBody };\n if (isItemClone) {\n // Find source line item from the URL\n let matched = false;\n let matchedSlug = '';\n\n window.location.pathname.split('/').some((slug) => {\n if (slug === 'clone') {\n matched = true;\n return;\n }\n\n if (matched) {\n matchedSlug = slug;\n return true;\n }\n });\n\n if (matchedSlug) {\n requestBody['source_line_item'] = matchedSlug;\n }\n }\n\n console.log('requestBody', { ...selections, selected_body: selectedBody, quantity })\n\n const res = await window.fetch(`/configured_items`, {\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': authenticityToken\n },\n body: JSON.stringify(requestBody),\n method: 'POST'\n });\n const response = await res.json();\n const { configured_item } = response;\n\n const preview = `${window.location.origin}/configured_items/${configured_item.id}/preview`;\n\n await cartServices[cart].addToCart({\n cartApi,\n configured_item,\n itemCost,\n quantity,\n descriptions,\n description,\n preview,\n cartUrl,\n productExternalId,\n authenticityToken,\n selectedBody\n });\n }\n } catch (e) {\n console.log('ERROR', e);\n alert(`Something went wrong. Your item was not added to the basket.`);\n } finally {\n setLoading(false)\n }\n };\n\n return [handleSubmit, loading];\n};\n","import React, { useState } from 'react';\nimport { useCartServices } from '../actions/cart-services/index';\n\nexport default function OrderActions({\n canAddToBasket,\n lineItemId,\n isItemClone,\n isAttendant,\n ...props\n}) {\n const attendantCustomerId = new URLSearchParams(window.location.search).get('user_id');\n\n const [buttonWasPressed, setButtonWasPressed] = useState(false);\n const [attendantToken, setAttendantToken] = useState(null);\n\n const [handleSubmit, loading] = useCartServices({ lineItemId, isItemClone, isAttendant, attendantToken, attendantCustomerId, ...props });\n\n const pressHandler = () => {\n if (window.dataLayer && !lineItemId) {\n gtag('event', 'add_to_basket', {\n params: JSON.stringify({ ...props.userSelections, ...props.quantity })\n });\n }\n if (window.dataLayer && lineItemId && isItemClone) {\n gtag('event', 're_order_modified', {\n modified_line_item_id: lineItemId,\n params: JSON.stringify({ ...props.userSelections, ...props.quantity })\n });\n }\n setButtonWasPressed(true);\n handleSubmit();\n };\n\n React.useEffect(() => {\n if(isAttendant) {\n const url = window.location.pathname;\n const segments = url.split('/');\n setAttendantToken(segments[2]);\n }\n }, [isAttendant]);\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport cx from 'classnames';\n\nexport default function OrderTotals({\n currencySymbol,\n itemCost,\n quantity,\n setQuantity,\n isLimitedQuantity,\n hidePayment,\n isAttendant\n}) {\n const [isInvalidQuantity, setIsInvalidQuantity] = React.useState(false);\n const totalCost = quantity ? quantity * itemCost : 0;\n const quantityClassNames = cx(\n 'fc-quantity-value',\n (!isLimitedQuantity || isAttendant) && 'fc-quantity-value-enabled'\n );\n const handleQuantityChange = (e) => {\n const newQuantity = parseInt(e.target.value);\n if (newQuantity < 1) {\n setQuantity(1);\n setIsInvalidQuantity(false);\n } else if (newQuantity > 99) {\n setIsInvalidQuantity(false);\n setQuantity(99);\n } else {\n setIsInvalidQuantity(false);\n setQuantity(isNaN(newQuantity) ? '' : newQuantity);\n }\n };\n\n return (\n \n
\n \n \n {loading ? 'LOADING' : lineItemId ? 'SAVE CHANGES' : 'ADD TO BASKET' }\n \n
\n \n {isInvalidQuantity && (\n \n setIsInvalidQuantity(false)}\n >\n ×\n \n \n Note: We only allow one product per category for first time orders.\n This ensures you get exactly the right fit and that all of your\n expectations are met. Your next order will allow the purchase of\n multiple items.\n \n
\n )}\n \n
\n \n );\n}\n","import { useEffect } from 'react';\n\n/**\n * Intended to be used in iframes with ESS. This forwards local storage get/set post messages\n * to its parent window.\n */\nexport const usePostedMessageForwarder = (iframeUrl, cartApi) => {\n useEffect(() => {\n const handleMessage = (event) => {\n if (!event.data.action) return;\n // cartApi\n if (event.origin === iframeUrl) {\n if (event.data.action === 'storeData' && event.data.body.key) {\n window.parent.postMessage(event.data, cartApi);\n } else if (\n event.data.action === 'retrieveData' &&\n event.data.body.key\n ) {\n window.parent.postMessage(event.data, cartApi);\n }\n } else if (event.origin === cartApi) {\n if (event.data.action === 'returnRetrievedData') {\n const iframeEl = document.querySelector('.fc-iframe-shopify-ess');\n if (!iframeEl) return;\n\n iframeEl.contentWindow.postMessage(event.data, iframeUrl);\n }\n }\n };\n\n window.addEventListener('message', handleMessage);\n\n return () => window.removeEventListener('message', handleMessage);\n }, []);\n};\n","import React, { useEffect, useRef, useState } from 'react';\nimport { iframePostMessageCartService } from '../actions/cart-services/iframePostMessage-cart';\nimport { usePostedMessageForwarder } from '../hooks/postedMessageForwarder';\n\nconst MOBILE_SCREEN = 450;\n\nexport default function PopupBodySelector({\n iframeUrl,\n updateSelectedBody,\n isEssOnly,\n essQueryParams,\n configuredItemIds,\n authenticityToken,\n cartApi\n}) {\n const [screenWidth, setScreenWidth] = useState(window.innerWidth);\n const iframeRef = useRef();\n const iframeQueryParams = new URLSearchParams(essQueryParams);\n if (isEssOnly) {\n iframeQueryParams.append('view', 'ess-only');\n }\n const iframeSrc = useRef(iframeUrl + `?${iframeQueryParams.toString()}`);\n const isMobile = screenWidth <= MOBILE_SCREEN;\n\n usePostedMessageForwarder(iframeUrl, cartApi);\n\n useEffect(() => {\n const handleMessage = async (event) => {\n if (event.origin !== iframeUrl) return;\n if (event.data.action === 'essIframeResize') {\n iframeRef.current.style.width = event.data.body.width;\n iframeRef.current.style.height = event.data.body.height;\n\n let left = '0px',\n right = '0px';\n\n if (event.data.body.event === 'modalOpen') {\n right = 'auto';\n } else if (\n event.data.body.event === 'accountBtnCollapsed' ||\n event.data.body.event === 'accountBtnExpanded'\n ) {\n left = 'auto';\n right = isMobile ? '0px' : '100px';\n }\n\n iframeRef.current.style.left = left;\n iframeRef.current.style.right = right;\n } else if (event.data.action === 'setUserData') {\n const sb = event.data.body.userData;\n updateSelectedBody(sb);\n if (isEssOnly) {\n await iframePostMessageCartService.updateInCart({\n configuredItemIds,\n descriptions: [['Sized For', sb.firstName + ' ' + sb.lastName]],\n selectedBody: sb,\n authenticityToken,\n cartApi\n });\n }\n }\n };\n\n window.addEventListener('message', handleMessage);\n\n return () => {\n window.removeEventListener('message', handleMessage);\n };\n }, []);\n\n return (\n \n Quantity\n \n {\n if (isNaN(Number(quantity))) {\n setQuantity(1);\n }\n }}\n onChange={handleQuantityChange}\n />\n \n
\n \n {!hidePayment && (\n <>\n {currencySymbol}\n {totalCost}\n \n )}\n
\n \n
\n );\n}\n","import React from 'react';\nimport NextStepButton from '../NextStepButton';\nimport BackToConfigurator from '../BackToConfigurator';\nimport cx from 'classnames';\n\nexport default function SelectionCheckbox({\n productName,\n currencySymbol,\n nextAttribute,\n nextAttributeName,\n previousAttribute,\n setCurrentScreen,\n isDisabled,\n selectableOptionsTable,\n setSelectedAttributeFunctions,\n userSelections,\n canAddToBasket,\n defaultOption,\n category,\n title,\n checkboxLabel,\n ConditionTextTemplate\n }) {\n\n\n const enabled = JSON.stringify(userSelections[category]) !== JSON.stringify(defaultOption) && userSelections[category] !== null;\n\n const toggleButtonholes = () => {\n debugger\n if (enabled) {\n setSelectedAttributeFunctions[category](defaultOption);\n } else {\n const options = selectableOptionsTable[category];\n setSelectedAttributeFunctions[category](options?.[1]);\n }\n };\n\n React.useEffect(() => {\n if(userSelections[category] === null) {\n setSelectedAttributeFunctions[category](defaultOption);\n }\n }, [userSelections]);\n\n const containerClasses = cx(\n 'row no-gutters fc-fabric-selection-pallet',\n enabled ?\n 'monogram-selection-pallet-scrollbar'\n : 'monogram-selection-w-pallet-scrollbar'\n );\n\n return (\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n Select Rush\n
\n \n
\n \n \n
\n \n *There will be a Rush Fee added when you select \"Yes\"\n
\n\n
\n \n
\n );\n}\n","import React from 'react';\nimport cx from 'classnames';\nimport MonogramSelectedIcon from 'images/monogram-selected-check.png';\n\nexport default function SubSelectionPalletColor({\n options,\n selectedAttribute,\n setSelectedAttribute\n}) {\n return (\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n {title}\n
\n \n
\n \n \n
\n \n {ConditionTextTemplate}\n {/* Contrast Buttonholes are another way to add a special detail.\n
\n Choose from several colors. */}\n
\n
\n \n
\n );\n}\n\nexport function SubSelectionPalletColorItem({\n attr,\n isSelectedAttribute,\n setSelectedColor\n}) {\n const [isActive, setIsActive] = React.useState(null);\n\n const containerClasses = cx(\n 'monogram-color-blocks',\n (isActive || isSelectedAttribute) && 'monogram-color-blocks-active'\n );\n\n const handleColorSelection = () => {\n if (!isSelectedAttribute) {\n setSelectedColor(attr);\n }\n };\n\n const monogramBlock = cx('col-lg-4', 'col-sm-4', 'fc-monogram-pallet');\n\n const styles =\n attr.font_family !== '#FFFFFF' ?\n {\n backgroundColor: attr.font_family\n }\n : {\n backgroundColor: attr.font_family,\n border: '1px solid #d0d0d0',\n color: 'black'\n };\n\n return (\n \n Choose Color
\n\n \n {options?.map((color) => {\n return (\n
\n \n
\n \n {attr.name}\n
\n \n
\n );\n}\n\nexport function SubSelectionPalletLocationItem({\n attr,\n setSelectedPlacement,\n isSelectedAttribute\n}) {\n const [isActive, setIsActive] = React.useState(null);\n const containerClasses = cx(\n 'monogram-color-blocks',\n (isActive || isSelectedAttribute) && 'monogram-color-blocks-active'\n );\n\n const handleColorSelection = () => {\n if (!isSelectedAttribute) {\n setSelectedPlacement(attr);\n }\n };\n\n return (\n \n Choose Placement
\n \n {options?.map((placement) => {\n return (\n
\n \n
\n \n {attr.name}\n
\n \n
\n );\n}\n","import React from 'react';\nimport NextStepButton from '../NextStepButton';\nimport BackToConfigurator from '../BackToConfigurator';\nimport cx from 'classnames';\n\nconst CONTRAST_WHITE_CUFF = 'contrast_white_cuff'\n\nexport default function WhiteCuffSelectionPanel({\n productName,\n currencySymbol,\n nextAttribute,\n nextAttributeName,\n previousAttribute,\n setCurrentScreen,\n isDisabled,\n selectableOptionsTable,\n setSelectedAttributeFunctions,\n userSelections,\n canAddToBasket\n }) {\n\n const defaultOption = selectableOptionsTable[CONTRAST_WHITE_CUFF]?.find((option) => option.font_family === null || option.name === \"NO\");\n\n const enabled = JSON.stringify(userSelections[CONTRAST_WHITE_CUFF]) !== JSON.stringify(defaultOption) && userSelections[CONTRAST_WHITE_CUFF] !== null;\n\n const toggleButtonholes = () => {\n if (enabled) {\n setSelectedAttributeFunctions[CONTRAST_WHITE_CUFF](defaultOption);\n } else {\n const options = selectableOptionsTable[CONTRAST_WHITE_CUFF];\n setSelectedAttributeFunctions[CONTRAST_WHITE_CUFF](options?.[1]);\n }\n };\n\n React.useEffect(() => {\n if(userSelections[CONTRAST_WHITE_CUFF] === null) {\n setSelectedAttributeFunctions[CONTRAST_WHITE_CUFF](defaultOption);\n }\n }, [userSelections]);\n\n const containerClasses = cx(\n 'row no-gutters fc-fabric-selection-pallet',\n enabled ?\n 'monogram-selection-pallet-scrollbar'\n : 'monogram-selection-w-pallet-scrollbar'\n );\n\n return (\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n Select Contrast White Collar\n
\n \n
\n \n \n
\n \n
\n \n
\n );\n}\n","// MonogramDefault.js\nimport React from 'react';\n\nconst MonogramDefault = ({ monogramInitials, style, fontColor }) => (\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n Select Contrast White Cuff\n
\n \n
\n \n \n
\n \n
\n