\n \n \n {\n setEmail(e.target.value)\n }}\n />\n\n {\n handleNotifyClick(\n market.countryIso,\n market.locale,\n market.stockLocationId\n )\n }}\n />\n
\n \n
\n )\n}\n\nexport default ProductSubmit\n", "import React, { useState, useEffect, useRef } from \"react\"\n\ninterface QuantityPickerProps {\n quantity: number\n setQuantity: (quantity: number) => void\n variantId?: number | null\n setCartQuantity?: (quantityValue: number) => void\n disabled?: boolean\n}\n\nconst QuantityPicker: React.FC\n
\n \n
\n \n {\n if (quantity - 1 > 0) {\n updateQuantity(-1)\n\n if (isFreeForm) {\n setCartQuantity(quantity - 1)\n setIsFreeForm(false)\n } else {\n setCartQuantity(quantity - 1)\n }\n }\n }}\n disabled={quantity === 1}\n >\n \u2212\n \n {\n updateQuantity(1)\n if (isFreeForm) {\n setCartQuantity(quantity + 1)\n setIsFreeForm(false)\n } else {\n setCartQuantity(quantity + 1)\n }\n }}\n >\n +\n \n
\n )\n}\n\nexport default QuantityPicker\n", "import React, { useContext, useState } from \"react\"\n\nimport TranslationContext, {\n Translations\n} from \"@warp/context/TranslationContext\"\nimport ActionButton from \"@warp/components/ActionButton\"\n\ninterface AddToBasketProps {\n onClick?: () => void\n disabled?: boolean\n fullWidth?: boolean\n inStock?: boolean\n hoverable?: boolean\n disabledText?: string | null\n}\n\nconst AddToBasket: React.FC\n
\n \n handleClick(translations)}\n disabled={disabled}\n fullWidth={fullWidth}\n hoverable={hoverable}\n />\n
\n )\n}\n\nexport default AddToBasket\n", "// This method gets the first two items in the pathname\n// which are the locale and country iso of the user's session.\nconst getLocaleParams = () => {\n return [\n window.location.pathname.split(\"/\")[1],\n window.location.pathname.split(\"/\")[2]\n ]\n}\n\nexport default getLocaleParams\n", "import getLocaleParams from \"./localeParams\"\nimport aa from \"search-insights\"\n\ntype VariantParam = {\n quantity: number\n variantId: number\n}\n\ntype Params = VariantParam | Array<{ id: number; quantity: number }>\n\nfunction isSingleVariant(params: Params): params is VariantParam {\n return \"variantId\" in params\n}\n\nexport const addToCart = (params: Params) => {\n const [country_iso, locale] = getLocaleParams()\n\n const body = JSON.stringify(\n isSingleVariant(params)\n ? {\n quantity: params.quantity,\n variant_id: params.variantId\n }\n : { variants: params }\n )\n\n return fetch(`/${country_iso}/${locale}/orders/populate`, {\n body: body,\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\"\n },\n method: \"POST\"\n })\n .then((response) =>\n response.ok ? response.json() : Promise.reject(response)\n )\n .then((json) => {\n if (!window.miniCartAdded) {\n return\n }\n\n window.miniCartAdded(json.miniCartAdded, json.miniCart, json.itemCount)\n\n // GA4 watches the window's dataLayer for event data.\n window.dataLayer = window.dataLayer || []\n window.dataLayer.push(json.gtmOrder)\n\n // We send Algolia data through the Insights API.\n if (!!json.algoliaData?.insightsData?.userToken) {\n aa(\"init\", {\n appId: json.algoliaData.appId,\n apiKey: json.algoliaData.apiKey,\n region: \"de\",\n // The user token will only be present in the DOM if the user\n // has consented through Cookiebot.\n useCookie: true\n })\n\n aa(json.algoliaData.methodName, json.algoliaData.insightsData)\n }\n })\n}\n\nexport const downloadPattern = ({\n email,\n variantId,\n countryIso,\n locale\n}: {\n email: string\n variantId: number\n countryIso: string\n locale: string\n}) => {\n const body = JSON.stringify({\n email: email,\n variant_id: variantId,\n locale: locale,\n country_iso: countryIso\n })\n\n return fetch(`/api/quilt/free_patterns/download`, {\n body: body,\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\"\n },\n method: \"POST\"\n })\n}\n", "import * as React from \"react\"\nimport { Badge, Image, ProductData } from \"@warp/types/product\"\nimport { MultipleVariantSelectorProvider } from \"@warp/context/MultipleVariantSelectorContext\"\nimport MultipleVariantSelectorDialog from \"./MultipleVariantSelectorDialog\"\n\nexport interface VariantSelectorProps {\n productName: string\n productData: ProductData\n slides: Image[]\n badges: Badge[]\n}\n\nexport default ({\n productName,\n productData,\n slides,\n badges\n}: VariantSelectorProps) => {\n return (\n \n
\n )}\n {title}
\n\n {variants.map((variant) => (\n \n ))}\n
\n \n )\n}\n", "import React from \"react\"\nimport cn from \"classnames\"\nimport { Variant } from \"@warp/types/product\"\nimport Checkbox from \"./Checkbox\"\nimport QuantityPicker from \"../QuantityPicker\"\nimport { useMultipleVariantSelector } from \"@warp/context/MultipleVariantSelectorContext\"\nimport OutOfStock from \"@warp/components/OutOfStock\"\nimport Price from \"@warp/components/pdp/Price\"\n\nexport interface OptionProps {\n variant: Variant\n}\n\nconst Option = ({ variant }: OptionProps) => {\n const { selectedVariants, setVariantQuantity } = useMultipleVariantSelector()\n const [notifyHidden, setNotifyHidden] = React.useState(true)\n\n const setQuantity = (quantity: number) => {\n setVariantQuantity(variant.id, quantity)\n }\n\n const handleNotifyClick = () => {\n setNotifyHidden((previous) => !previous)\n }\n\n return (\n \n
\n\n {!notifyHidden && \n
\n \n \n
\n )\n}\n\nexport default Checkbox\n", "import { ProductData } from \"@warp/types/product\"\n\nexport function getColourType(productData: ProductData) {\n return productData.optionTypes.find((optionType) =>\n productData.colourTypeIds.includes(optionType.id)\n )\n}\n\n/**\n * Returns the title for the option type presentations,\n * excluding any colour option types, joined with a pipe (`|`).\n *\n * The colour option type has a separate step in the variant selection.\n */\nexport function getSelectableOptionsText(productData: ProductData) {\n return productData.optionTypes\n .filter((optionType) => !productData.colourTypeIds.includes(optionType.id))\n .map((optionType) => optionType.presentation)\n .join(\" | \")\n}\n\n/**\n * Returns the title for the option value presentations,\n * joined with a pipe (`|`).\n */\nexport function getOptionValuesText(\n productData: ProductData,\n optionValueIds: number[]\n) {\n return productData.optionValues\n .filter((value) => optionValueIds.includes(value.id))\n .map((value) => value.presentation)\n .join(\" | \")\n}\n", "import React, { useRef } from \"react\"\n\ninterface QuantityPickerProps {\n quantity: number\n setQuantity: (quantity: number) => void\n variantId?: number | null\n disabled?: boolean\n}\n\nconst QuantityPicker: React.FC\n {\n updateQuantity(-1)\n }}\n >\n \u2212\n \n {\n updateQuantity(1)\n }}\n >\n +\n \n
\n )\n}\n\nexport default QuantityPicker\n", "import React from \"react\"\nimport cn from \"classnames\"\nimport { Variant } from \"@warp/types/product\"\nimport TranslationContext from \"@warp/context/TranslationContext\"\n\ninterface PriceProps {\n variant: Variant\n onNotifyClick?: () => void\n}\n\nexport default function Price({ variant, onNotifyClick }: PriceProps) {\n const translations = React.useContext(TranslationContext)\n const finalPrice = variant.discountedPrice || variant.price\n\n return (\n \n
\n \n {variant.discountedPrice && (\n \n {variant.inStock ? (\n finalPrice\n ) : (\n <>\n {translations.out_of_stock}\n {onNotifyClick && (\n \n {translations.get_notified}\n \n )}\n \n )}\n
\n \n )\n}\n", "import React from \"react\"\nimport { useMultipleVariantSelector } from \"@warp/context/MultipleVariantSelectorContext\"\nimport { addToCart } from \"@warp/utilities/api\"\nimport { errorToast, handleErrors } from \"@warp/utilities/errors\"\n\ninterface FooterProps {\n translations: Record{variant.price}
\n )}\n \n {filteredSlides.map((image) => (\n
\n )\n}\n", "import { ProductData } from \"@warp/types/product\"\nimport { getColourType, getSelectableOptionsText } from \"./product\"\n\nconst PLACEHOLDER = \"$js_drawer\"\n\nexport function productTranslation(\n translation: string,\n productData: ProductData\n): string | null {\n let unselectedDrawerText = translation\n\n /* If the translation does not include the placeholder, fallback to default\n * disabled messaging. */\n if (translation.includes(PLACEHOLDER)) {\n const colourType = getColourType(productData)\n const selectableOptionsText = getSelectableOptionsText(productData)\n if (colourType) {\n unselectedDrawerText = translation.replace(\n PLACEHOLDER,\n colourType.presentation\n )\n } else if (selectableOptionsText) {\n unselectedDrawerText = translation.replace(\n PLACEHOLDER,\n selectableOptionsText\n )\n }\n }\n\n return unselectedDrawerText\n}\n\nexport function optionTypeTranslation(\n translation: string,\n optionTypePresentation: string\n) {\n return translation.replace(PLACEHOLDER, optionTypePresentation)\n}\n", "import React from \"react\"\n\nimport { ProductData, Variant } from \"@warp/types/product\"\nimport Stepper from \"@warp/components/Stepper\"\nimport { Step } from \"@warp/types/stepper\"\nimport Colour from \"./Colour\"\nimport Format from \"./Format\"\nimport Thread from \"./Thread\"\nimport Tools from \"./Tools\"\nimport Upload from \"./Upload\"\nimport { StitchYourPhotoProvider } from \"@warp/context/StitchYourPhotoContext\"\nimport { useTranslation } from \"@warp/context/TranslationContext\"\nimport StitchYourPhotoDialog from \"./StitchYourPhotoDialog\"\n\nexport interface StitchYourPhotoProps {\n productName: string\n productData: ProductData\n accessories: Variant[]\n helpAndAdvicePath: string\n}\n\nexport default ({\n productData,\n accessories,\n helpAndAdvicePath\n}: StitchYourPhotoProps) => {\n const translations = useTranslation()\n const orderedAccessories = React.useMemo(() => {\n const outOfStock = accessories.filter((accessory) => !accessory.inStock)\n const rest = accessories.filter((accessory) => accessory.inStock)\n\n return [...rest, ...outOfStock]\n }, [accessories])\n\n const steps: Step[] = [\n {\n id: \"upload\",\n label: translations.step_upload,\n component: (\n \n
\n ))}\n \n \n \n {index + 1}\n
\n {step.label}\n \n \n \n )\n }\n)\n\nexport default Step\n", "import React from \"react\"\n\nimport { useStitchYourPhoto } from \"@warp/context/StitchYourPhotoContext\"\nimport SubStep from \"@warp/components/Stepper/SubStep\"\nimport { STITCH_YOUR_PHOTO_VALUES } from \"./Defaults\"\n\nexport interface ColourProps {\n translations: Record\n \n \n \n {STITCH_YOUR_PHOTO_VALUES.colors.map((value, i) => {\n return (\n \n\n
\n\n
\n )\n}\n\nexport default Colour\n", "import React, { useEffect } from \"react\"\n\nimport { STITCH_YOUR_PHOTO_VALUES } from \"../components/pdp/StitchYourPhoto/Defaults\"\nimport { sendWizardData } from \"../components/pdp/StitchYourPhoto/Services\"\nimport { ProductData } from \"../types/product\"\nimport { useStepper } from \"./StepperContext\"\nimport { Variant } from \"../types/product\"\nimport { useMarket } from \"./MarketContext\"\n\ninterface StitchYourPhotoContextValue {\n originalImage?: File\n originalImagePreviewUrl?: string\n crossStitchImageUrl?: string\n totalPrice?: string\n productData: ProductData\n patternPrice?: string\n threadPrice?: string\n patternAmount?: number\n threadAmount?: number\n pictureCode?: string\n selectedFilter: string\n selectedColor: string\n selectedCanvasType: string\n selectedCanvasSize: string\n selectedThread: string\n selectedAccessories: Variant[]\n toggleAccessory: (accessory: Variant) => void\n customPatternId?: number\n}\n\nconst StitchYourPhotoContext = React.createContext<\n StitchYourPhotoContextValue & {\n setOriginalImage: (image: File) => void\n setOriginalImagePreviewUrl: (previewURL: string) => void\n setCrossStitchImageUrl: (imageUrl: string) => void\n setThreadAmount: (amount: number) => void\n setPictureCode: (code: string) => void\n setSelectedFilter: (filter: string) => void\n setSelectedColor: (color: string) => void\n setSelectedCanvasType: (canvasType: string) => void\n setSelectedCanvasSize: (canvasSize: string) => void\n setSelectedThread: (thread: string) => void\n reset: () => void\n setSelectedAccessories: (accessories: Variant[]) => void\n setCustomPatternId: (id: number) => void\n }\n>({\n productData: {} as ProductData,\n selectedFilter: \"\",\n selectedColor: \"\",\n selectedCanvasType: \"\",\n selectedCanvasSize: \"\",\n selectedThread: \"\",\n setOriginalImage: () => {},\n setOriginalImagePreviewUrl: () => {},\n setCrossStitchImageUrl: () => {},\n setThreadAmount: () => {},\n setPictureCode: () => {},\n setSelectedFilter: () => {},\n setSelectedColor: () => {},\n setSelectedCanvasType: () => {},\n setSelectedCanvasSize: () => {},\n setSelectedThread: () => {},\n reset: () => {},\n selectedAccessories: [],\n setSelectedAccessories: () => {},\n toggleAccessory: () => {},\n setCustomPatternId: () => {}\n})\n\ntype StitchYourPhotoContextProviderProps = {\n value: Omit<\n StitchYourPhotoContextValue,\n | \"pictureCode\"\n | \"selectedFilter\"\n | \"selectedColor\"\n | \"selectedCanvasType\"\n | \"selectedCanvasSize\"\n | \"selectedThread\"\n | \"selectedAccessories\"\n | \"toggleAccessory\"\n >\n children: React.ReactNode\n}\n\nexport const StitchYourPhotoProvider = ({\n value,\n children\n}: StitchYourPhotoContextProviderProps) => {\n const [originalImage, setOriginalImage] = React.useState\n {STITCH_YOUR_PHOTO_VALUES.filters.map((filter, i) => (\n \n
\n \n \n
\n )\n })}\n \n\n
{translations.step_colour_disclaimer_paragraph_1}
\n{translations.step_colour_disclaimer_paragraph_2}
\n{translations.step_colour_disclaimer_paragraph_3}
\n\n
\n )\n}\n\nexport default SubStep\n", "import React from \"react\"\n\nimport { useStitchYourPhoto } from \"@warp/context/StitchYourPhotoContext\"\nimport { QuestionMark } from \"@warp/icons/QuestionMark\"\nimport SubStep from \"@warp/components/Stepper/SubStep\"\nimport { STITCH_YOUR_PHOTO_VALUES } from \"./Defaults\"\n\nexport interface FormatProps {\n translations: Record{title}
\n {children}\n\n \n {STITCH_YOUR_PHOTO_VALUES.canvasTypes.map((canvasType, i) => (\n \n \n {STITCH_YOUR_PHOTO_VALUES.canvasSizes.map((canvasSize, i) => (\n \n\n
\n\n
\n )\n}\n\nexport default Format\n", "import React from \"react\"\n\nexport function QuestionMark({ fill, ...rest }: React.SVGProps\n \n \n {translations[canvasType.name + \"_description\"]}\n
\n ))}\n \n \n
\n ))}\n \n\n
{translations.step_format_disclaimer}
\n\n \n \n\n
\n\n
\n \n )\n}\n\nexport default Thread\n", "import React from \"react\"\nimport SubStep from \"@warp/components/Stepper/SubStep\"\nimport { useStitchYourPhoto } from \"@warp/context/StitchYourPhotoContext\"\nimport { Variant } from \"@warp/types/product\"\nimport Tool from \"./Tool\"\nexport interface ToolsProps {\n translations: Record\n \n {threadPrice}\n
\n \n \n {patternPrice}\n
\n \n\n
\n \n {accessories.map((accessory, index) => {\n return (\n \n
\n )\n}\n\nexport default Tools\n", "import React from \"react\"\nimport cn from \"classnames\"\nimport Price from \"@warp/components/pdp/Price\"\nimport OutOfStock from \"@warp/components/OutOfStock\"\nimport { Variant } from \"@warp/types/product\"\n\ninterface ToolProps {\n accessory: Variant\n selectedAccessories: Variant[]\n toggleAccessory: (accessory: Variant) => void\n}\n\nconst Tool: React.FC\n \n
\n\n {!notifyHidden && (\n \n
\n )\n}\n\nexport default Upload\n", "import React from \"react\"\n\nexport function QualityIcon({ fill, ...rest }: React.SVGProps{translations.please_note}
\n\n {translations.upload_file_types}\n
\n\n {translations.upload_copyright_notice}\n
\n {errorMessage &&{errorMessage}
}\n\n\n {isLoading && }\n {!isLoading && (\n fileInputRef.current?.click()}\n >\n {translations.upload_file}\n \n )}\n
\n \n ![\"Original]()
\n
\n )}\n {isLoading && }\n {stitchImage && !isLoading && !isZoomActive && (\n \n \n
\n )}\n \n )\n }\n }, [\n isFirstStep,\n isZoomActive,\n originalImagePreviewUrl,\n isLoading,\n stitchImage,\n crossStitchImageUrl\n ])\n\n return (\n \n {translations.total}\n {totalPrice}\n
\n\n \n {translations.total}\n {totalPrice}\n
\n\n \n \n
\n \n {variant.quantity}\n
\n \n {variant.imageUrl && (\n
\n \n
\n \n ))}\n {arrowsEnabled && (\n \n \n {groupedVariants.map(({ colourGroup, variants }) => (\n \n \n ))}\n {outOfStockVariants.length > 0 && (\n \n {outOfStockMessage}\n {!!selectedOutOfStockVariant && (\n
\n )}\n \n )}\n {showScrollToTopButton && (\n \n
\n {groupedVariants.length === 0 ? (\n \n
\n \n \n {!showSearch && (\n \n )}\n
\n {showSearch && \n setIsGridView(true)}\n >\n setIsGridView(false)}\n >\n
\n \n {search ? (\n <>\n {t[\"components.site_search.no_results_matching\"]}\n
\n ) : (\n {`'${search}'`}
\n \n ) : (\n {t[\"components.products.dialog.filters.no_results\"]}\n )}\n\n \n {\"presentation\" in colourGroup\n ? colourGroup.presentation\n : t[\n `components.products.dialog.colour_groups.${colourGroup.name}`\n ]}\n \n
\n {variants.map((variant) => (\n \n \n {!gridView && !variant.inStock ? (\n
\n {(badges?.length ?? 0) > 0 && (\n \n {t[\"out_of_stock\"]}\n
\n ) : checked && quantity && onQuantityChange ? (\n \n
\n ) : null}\n \n
\n \n {filteredBadges.map((badge, index) => (\n
\n )\n}\n\nexport default ColourBadges\n", "import { useVariantSelectorWizard } from \"@warp/context/VariantSelectorWizardContext\"\nimport { CloseIcon } from \"@warp/icons/CloseIcon\"\nimport React from \"react\"\nimport { useFilters } from \"./FiltersContext\"\nimport { ColourGroup } from \"@warp/types/product\"\nimport CheckIcon from \"@warp/icons/Check\"\nimport { useTranslation } from \"@warp/context/TranslationContext\"\n\nexport interface ColourFiltersProps {\n onClose: () => void\n}\n\ntype ColourInfo = Record<\n number,\n { colourGroup: ColourGroup; variantCount: number }\n>\n\nexport default function ColourFilters({ onClose }: ColourFiltersProps) {\n const { filteredVariants } = useVariantSelectorWizard()\n const { colourGroupIds, selectColourGroup, removeColourGroup, reset } =\n useFilters()\n const t = useTranslation()\n\n const colourGroupInfo: ColourInfo = React.useMemo(() => {\n const colourGroupInfo: ColourInfo = {}\n\n filteredVariants.forEach((variant) => {\n if (variant.colour?.colourGroup) {\n if (!colourGroupInfo[variant.colour.colourGroup.id]) {\n colourGroupInfo[variant.colour.colourGroup.id] = {\n colourGroup: variant.colour.colourGroup,\n variantCount: 0\n }\n }\n\n colourGroupInfo[variant.colour.colourGroup.id].variantCount += 1\n }\n })\n\n return colourGroupInfo\n }, [filteredVariants])\n\n const handleColourGroupChange = (colourGroupId: number) => () => {\n if (colourGroupIds.includes(colourGroupId)) {\n removeColourGroup(colourGroupId)\n } else {\n selectColourGroup(colourGroupId)\n }\n }\n\n return (\n \n
\n )\n}\n", "import React from \"react\"\n\nexport default function CheckIcon() {\n return (\n \n
\n \n
\n\n \n \n
\n \n {t[\"components.products.dialog.filters.title\"]}\n
\n \n
\n\n \n
\n \n {t[\"step_colour_title\"]}\n
\n- \n {Object.values(colourGroupInfo).map((info) => (\n
\n
\n \n \n \n {t[\"components.products.dialog.filters.reset\"]}\n \n \n \n \n {t[\"components.products.dialog.filters.done\"]}\n \n \n
\n \n
\n )\n}\n", "import React from \"react\"\n\nconst ListViewIcon = () => {\n return (\n \n
\n {titleText}
\n {subtitleText && customTitle && (\n \n {subtitleText}\n \n )}\n\n {optionValues.map((optionValue) => (\n
\n \n )\n}\n", "import { useTranslation } from \"@warp/context/TranslationContext\"\nimport { useVariantSelectorWizard } from \"@warp/context/VariantSelectorWizardContext\"\nimport { OptionType, OptionValue } from \"@warp/types/product\"\nimport { getLastSrcsetUrl } from \"@warp/utilities/images\"\nimport cn from \"classnames\"\nimport React, { useMemo } from \"react\"\n\nexport interface OptionValueProps {\n optionValue: OptionValue\n optionType: OptionType\n additionalData?: OptionValue\n availableVariants?: number | null\n minPrice?: string | null\n}\n\nconst OptionValue = ({\n optionValue,\n optionType,\n availableVariants,\n minPrice\n}: OptionValueProps) => {\n const {\n selectOptionValue,\n selectedOptionValueIds,\n removeOptionValue,\n productData,\n productType\n } = useVariantSelectorWizard()\n const t = useTranslation()\n\n // Check if the option value is currently selected for this option type\n const checked = useMemo(\n () => selectedOptionValueIds[optionType.id] === optionValue.id,\n [selectedOptionValueIds, optionType.id, optionValue.id]\n )\n\n // Determine if the option value should be disabled\n const isDisabled = useMemo(() => {\n const otherSelectedOptionValues = Object.entries(selectedOptionValueIds)\n .filter(([typeId]) => parseInt(typeId) !== optionType.id)\n .map(([, valueId]) => valueId!)\n\n const validVariants = productData.variants.filter((variant) =>\n otherSelectedOptionValues.every((valueId) =>\n variant.optionValueIds.includes(valueId)\n )\n )\n\n const validOptionValueIds = [\n ...new Set(validVariants.flatMap((variant) => variant.optionValueIds))\n ]\n\n return !validOptionValueIds.includes(optionValue.id)\n }, [productData, optionType.id, selectedOptionValueIds, optionValue.id])\n\n // Handle selection or deselection of the option value\n function handleChange() {\n if (checked) {\n removeOptionValue(optionType.id) // Remove selection for the current option type\n } else {\n selectOptionValue(optionType.id, optionValue.id) // Select this option value\n }\n }\n\n let availableVariantsText = null\n if (availableVariants) {\n const key = (\n t[\"components.product.dialog.available_variants\"] as unknown as Record<\n string,\n any\n >\n )?.[productType]\n if (key) {\n availableVariantsText = availableVariants > 1 ? key[\"other\"] : key[\"one\"]\n availableVariantsText = availableVariantsText.replace(\n \"%{count}\",\n availableVariants\n )\n }\n } else if (availableVariants === 0) {\n availableVariantsText = (\n t[\"components.product.dialog.no_variants_available\"] as unknown as Record<\n string,\n any\n >\n )?.[productType]\n }\n\n return (\n \n
\n \n )\n}\n\nexport default OptionValue\n", "import { useVariantSelectorWizard } from \"@warp/context/VariantSelectorWizardContext\"\nimport React from \"react\"\n\nexport default function SelectedValuesHeader() {\n const { productData, selectedOptionValueIds } = useVariantSelectorWizard()\n\n const optionValues = React.useMemo(\n () =>\n productData.optionValues.reduce\n
\n \n \n
\n \n {selectedOptions.map(({ optionType, optionValue }) => (\n
\n )\n}\n", "import * as React from \"react\"\nimport { Image, ProductData, ProductType } from \"@warp/types/product\"\nimport Dialog from \"./Dialog\"\nimport { KitSelectorProvider } from \"./context/KitSelectorContext\"\nimport { KitSelectorDownloadFormProvider } from \"./context/KitSelectorDownloadFormContext\"\n\nexport interface VariantSelectorProps {\n productType: ProductType\n productName: string\n productData: ProductData\n currentUserEmail?: string\n slides: Image[]\n}\n\nexport default ({\n productName,\n productData,\n productType,\n currentUserEmail,\n slides\n}: VariantSelectorProps) => {\n return (\n \n {optionType}: {optionValue}\n
\n ))}\n \n
\n )\n}\n\nexport default PatternStep\n", "import React, { useMemo } from \"react\"\n\nimport {\n ProductData,\n ProductType,\n Image,\n KitVariant,\n KitItem,\n Badge\n} from \"@warp/types/product\"\nimport { useMarket } from \"@warp/context/MarketContext\"\n\n// We need the price amount here because the variant are too deep in kitData\ntype SelectedVariantsState = Array<{\n id: number\n quantity: number\n}>\n\ntype SelectedVariantsAction =\n | { type: \"set\"; payload: SelectedVariantsState }\n | { type: \"add\" | \"increment\"; payload: { id: number; quantity?: number } }\n | { type: \"remove\"; payload: { id: number } }\n | { type: \"updateVariantQuantity\"; payload: { id: number; quantity: number } }\n | { type: \"reset\" }\n\ninterface KitSelectorContextValue {\n totalPrice?: string\n totalAmount?: number\n productData: ProductData\n productType: ProductType\n slides: Image[]\n currentUserEmail?: string\n pdfOnly: boolean\n // Variants that come from the kit items\n swatchVariants: (KitVariant &\n Omit\n
\n \n {t[\"components.products.kit_builder.add_materials\"]}\n
\n\n
\n \n \n \n {productData.kitData?.patternType === \"free\"\n ? t[\"quilt.free\"]\n : productData.kitData?.minimumVariantPrice}\n \n
\n \n \n {productData.kitData?.minimumGarmentPrice}\n
\n\n \n {t[\"components.products.kit_builder.pattern_download_description\"]}\n
\n \n {translations.total}\n {totalPrice}\n
\n\n \n
\n \n )\n}\n\nexport default FixedColoursStep\n", "import { KitItem, KitVariant } from \"@warp/types/product\"\nimport React, { useMemo } from \"react\"\nimport { useKitSelector } from \"./context/KitSelectorContext\"\nimport ColourItem from \"../ColourItem\"\n\nexport interface Colour {\n variant: KitVariant & Omit\n {t[\"components.products.kit_builder.fixed_colours_step_description\"]}\n
\n \n {swatchVariants.map((variant) => (\n \n {!!selectedOutOfStockVariant && (\n
\n )}\n \n
\n )\n}\n", "import { useMarket } from \"@warp/context/MarketContext\"\nimport { useTranslation } from \"@warp/context/TranslationContext\"\nimport { errorToast } from \"@warp/utilities/errors\"\nimport React from \"react\"\nimport useDownloadPattern from \"../hooks/useDownloadPattern\"\nimport { useKitSelector } from \"./KitSelectorContext\"\nimport { useStepper } from \"@warp/context/StepperContext\"\n\ninterface KitSelectorDownloadFormContextValue {\n email: string\n password: string\n isNewsletterForm: boolean\n isLoading: boolean\n}\n\nconst KitSelectorDownloadFormContext = React.createContext<\n KitSelectorDownloadFormContextValue & {\n setEmail: (email: string) => void\n setPassword: (password: string) => void\n setIsNewsletterForm: (isNewsletterForm: boolean) => void\n reset: () => void\n submit: () => void\n }\n>({\n email: \"\",\n password: \"\",\n isNewsletterForm: false,\n isLoading: false,\n setEmail: () => {},\n setPassword: () => {},\n setIsNewsletterForm: () => {},\n reset: () => {},\n submit: () => {}\n})\n\nexport const KitSelectorDownloadFormProvider = ({\n children\n}: {\n children: React.ReactNode\n}) => {\n const [email, setEmail] = React.useState(\"\")\n const [password, setPassword] = React.useState(\"\")\n const [isNewsletterForm, setIsNewsletterForm] = React.useState(false)\n const [isLoading, setIsLoading] = React.useState(false)\n const {\n setCurrentUserEmail,\n currentUserEmail,\n reset: resetKitSelector\n } = useKitSelector()\n const { resetSteps } = useStepper()\n const { countryIso, locale } = useMarket()\n const { downloadPattern } = useDownloadPattern()\n const t = useTranslation()\n\n const reset = React.useCallback(() => {\n setEmail(\"\")\n setPassword(\"\")\n setIsNewsletterForm(false)\n }, [setEmail, setPassword, setIsNewsletterForm])\n\n const validateLoginFields = () => {\n // Regex from: https://linuxhint.com/validate-email-on-client-side-javascript/\n let mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/\n if (!email.match(mailformat)) {\n errorToast(new Error(t[\"errors.enter_valid_email\"]))\n return false\n } else if (!password) {\n errorToast(new Error(t[\"errors.enter_valid_password\"]))\n return false\n } else {\n return true\n }\n }\n\n const submitLoginForm = async () => {\n if (!validateLoginFields()) {\n return false\n }\n\n const csrfElement = document.querySelector(\n \"meta[name=csrf-token]\"\n ) as HTMLMetaElement\n\n const response = await fetch(`/${countryIso}/${locale}/account/sign_in`, {\n method: \"POST\",\n body: JSON.stringify({\n spree_user: {\n email: email,\n password: password\n },\n authenticity_token: csrfElement?.content,\n intent: \"kit_builder\"\n }),\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-CSRF-Token\": csrfElement?.content\n }\n })\n\n if (response.ok) {\n await response.json()\n } else {\n throw new Error(t[\"errors.something_went_wrong\"])\n }\n }\n\n const submit = async () => {\n try {\n setIsLoading(true)\n // In this case we are in the login form\n if (!isNewsletterForm && !currentUserEmail) {\n await submitLoginForm()\n }\n\n if (await downloadPattern(email)) {\n if (!isNewsletterForm) {\n setCurrentUserEmail(email)\n }\n reset()\n resetKitSelector()\n resetSteps()\n }\n } catch (e) {\n errorToast(new Error(t[\"errors.something_went_wrong\"]))\n } finally {\n setIsLoading(false)\n }\n }\n\n return (\n \n
\n \n {t[\"components.products.kit_builder.download_your_pattern\"]}\n
\n\n
\n \n {t[\"components.products.kit_builder.download_pattern_below\"]}\n
\n\n {!isDekstop && (\n \n
\n )}\n\n \n \n \n {t[\"components.products.kit_builder.download_now\"]}\n \n \n
\n \n {t[\"components.products.kit_builder.download_alternative\"]}\n
\n \n
\n )\n}\n", "import { useTranslation } from \"@warp/context/TranslationContext\"\nimport React from \"react\"\nimport ActionButton from \"../../../ActionButton\"\nimport InputField from \"../../../InputField\"\nimport { useKitSelectorDownloadForm } from \"./context/KitSelectorDownloadFormContext\"\nimport { useIsDesktop } from \"@warp/hooks/breakpoints\"\n\nconst LoginForm = () => {\n const t = useTranslation()\n const { email, setEmail, password, setPassword, submit } =\n useKitSelectorDownloadForm()\n const isDesktop = useIsDesktop()\n\n return (\n \n
\n \n {\n t[\n \"components.products.kit_builder.add_free_pattern_to_account_library\"\n ]\n }\n
\n\n {\n event.preventDefault()\n setIsNewsletterForm(true)\n }}\n >\n {t[\"components.products.kit_builder.or_subscribe_and_download\"]}\n \n
\n \n \n\n \n
\n )\n}\n\nexport default LoginForm\n", "import React from \"react\"\nimport cn from \"classnames\"\n\ninterface InputFieldProps extends React.ComponentPropsWithoutRef<\"input\"> {\n initialValue?: string\n isRequired?: boolean\n label: string\n maxLength?: number\n variant?: string\n containerClassName?: string\n}\n\nconst InputField: React.FC\n
\n )\n}\n\nexport default InputField\n", "import React from \"react\"\nimport { useTranslation } from \"@warp/context/TranslationContext\"\nimport ActionButton from \"@warp/components/ActionButton\"\nimport InputField from \"@warp/components/InputField\"\nimport { useKitSelectorDownloadForm } from \"../../context/KitSelectorDownloadFormContext\"\nimport { useIsDesktop } from \"@warp/hooks/breakpoints\"\n\nexport default function NewsletterDownload() {\n const t = useTranslation()\n const { email, setEmail, submit } = useKitSelectorDownloadForm()\n const isDesktop = useIsDesktop()\n\n return (\n \n
\n )\n}\n", "import { useStepper } from \"@warp/context/StepperContext\"\nimport { useTranslation } from \"@warp/context/TranslationContext\"\nimport { ArrowIcon } from \"@warp/icons/ArrowIcon\"\nimport React from \"react\"\nimport cn from \"classnames\"\nimport { useKitSelector } from \"../context/KitSelectorContext\"\nimport { useKitSelectorDownloadForm } from \"../context/KitSelectorDownloadFormContext\"\nimport { useIsDesktop } from \"@warp/hooks/breakpoints\"\n\nexport default function DownloadFooter() {\n const t = useTranslation()\n const { nextStep, prevStep, activeStepIndex, isLastStep, isFirstStep } =\n useStepper()\n const { currentUserEmail } = useKitSelector()\n const { submit, isLoading, isNewsletterForm, setIsNewsletterForm } =\n useKitSelectorDownloadForm()\n const isDesktop = useIsDesktop()\n\n const handlePrevStep = () => {\n // We are in the second step and we maybe are in the\n // newsletter form, so we need to reset the state\n if (activeStepIndex === 1) {\n setIsNewsletterForm(false)\n }\n prevStep(true)\n }\n\n const handleNextStep = () => {\n if (isLastStep) {\n submit()\n } else {\n nextStep(true)\n }\n }\n\n let submitButtonLabel = t.next_step\n\n if (isLastStep) {\n if (currentUserEmail) {\n submitButtonLabel = t[\"components.products.kit_builder.download_now\"]\n } else if (isNewsletterForm) {\n submitButtonLabel =\n t[\"components.products.kit_builder.subscribe_and_download\"]\n } else {\n submitButtonLabel =\n t[\"components.products.kit_builder.download_your_pattern\"]\n }\n }\n\n const prevButton = (\n <>\n \n
\n\n \n {\n t[\n \"components.products.kit_builder.free_pattern_download_for_guests\"\n ]\n }\n
\n\n
\n \n setEmail(event.target.value)}\n />\n
\n {!isDesktop && (\n \n
\n )}\n