\n 
\n
\n )\n );\n },\n },\n {\n Header: t('collection.table.header.product'),\n accessor: (row) => `${row.title}: ${row.title}`,\n Cell: ({ cell }) => {\n const lineItem = cell.row.original;\n return (\n <>\n {lineItem.title}\n {lineItem.inventoryQuantity == lineItem.quantity && lineItem.inventoryPolicy === 'deny' && !!lineItem.inventoryManagement && (\n \n {t('collection.badge.all_in_cart')}\n \n )}\n \n );\n },\n },\n {\n Header: t('collection.table.header.sku'),\n accessor: \"sku\",\n },\n {\n Header: t('collection.table.header.quantity'),\n Cell: ({ cell }) => {\n const lineItem = cell.row.original;\n\n return (\n \n {formatMoney(lineItem.price)}\n
\n );\n },\n },\n {\n Header: t('cart.table.header.total_amount'),\n accessor: \"totalAmount\",\n Cell: ({ cell }) => {\n const lineItem = cell.row.original;\n\n return (\n \n {formatMoney(lineItem.totalAmount)}\n
\n );\n },\n },\n ], [lineItems, formatMoney]\n );\n\n const tableInstance = useTable(\n {\n columns,\n data: lineItems,\n initialState: {\n pageSize: 20,\n },\n },\n usePagination\n );\n\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n page,\n setPageSize,\n state: { pageSize },\n prepareRow,\n } = tableInstance;\n\n const handleQuantityChange = useCallback((lineItem, newQuantity) => {\n if(newQuantity === undefined || newQuantity === '' || isNaN(newQuantity) || newQuantity < 0) return;\n if(newQuantity === lineItem.quantity) return;\n\n if(lineItem.inventoryManagement && lineItem.inventoryPolicy !== 'continue' && newQuantity > lineItem.inventoryQuantity) {\n newQuantity = lineItem.inventoryQuantity\n }\n\n updateLineItem(lineItem, newQuantity);\n }, [lineItems]);\n\n return (\n \n \n \n {headerGroups.map((headerGroup) => (\n
\n {lineItems.length > pageSize && (\n
\n );\n};\n","import React from \"react\";\nimport { useCartContext } from \"@/app_proxy/providers/CartProvider\";\nimport { useTranslation } from \"react-i18next\";\nimport {useFormatMoney} from \"@/app_proxy/hooks/useFormatMoney\";\n\nexport function ProgressBar() {\n const { cart } = useCartContext();\n const { t } = useTranslation();\n const { formatMoney } = useFormatMoney();\n\n if (\n !cart?.minOrderValue ||\n !cart?.minOrderValueDiff ||\n !cart?.minOrderValueProgress\n )\n return null;\n\n return (\n | 3 ? \"text-right\" : \"\"}`} key={columnIndex}>\n \n {column.render(\"Header\")}\n \n | \n ))}\n
|---|
| \n { cell.render(\"Cell\") }\n | \n );\n })\n }\n
\n \n
\n )}\n \n
\n \n \n \n
\n \n {formatMoney(cart.minOrderValue)}\n
\n \n {t(\"cart.footer.min_order_value_info\", {\n amount: formatMoney(cart.minOrderValueDiff),\n })}\n
\n \n );\n}\n","import {useAppInfoContext} from \"@/app_proxy/providers/AppInfoProvider\";\nimport {buildI18nPath} from \"@/app_proxy/hooks/useLocalizedPath\";\n\nexport function useSaveNavigateToCheckout() {\n const { appInfo } = useAppInfoContext();\n\n return (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (appInfo.b2bCheckout) {\n window.location.href = buildI18nPath([\"apps\", \"b2b\", \"checkout\"]);\n } else {\n window.location.href = buildI18nPath([\"apps\", \"b2b\", \"api\", \"shopify_checkout\"]);\n }\n };\n}","import React from \"react\";\nimport { useCartContext } from \"@/app_proxy/providers/CartProvider\";\nimport { ProgressBar } from \"@/app_proxy/components/ProgressBar\";\nimport { useSaveNavigateToCheckout } from \"@/app_proxy/hooks/useSaveNavigateToCheckout\";\nimport { useTranslation } from \"react-i18next\";\nimport {useFormatMoney} from \"@/app_proxy/hooks/useFormatMoney\";\n\nexport default () => {\n const { cartLoading, cart, minOrderValueReached } = useCartContext();\n const { t } = useTranslation();\n const { formatMoney } = useFormatMoney();\n\n return (\n\n { !cartLoading &&\n
\n );\n}\n","import React from \"react\";\nimport { CartProvider, useCartContext } from \"@/app_proxy/providers/CartProvider\";\nimport { useAppInfoContext } from \"@/app_proxy/providers/AppInfoProvider\";\nimport { useAppStatusError } from \"@/app_proxy/hooks/useAppStatusError\";\nimport AppStatusError from \"@/app_proxy/components/AppStatusError\";\nimport { PageHeader } from \"@/app_proxy/components/PageHeader\";\nimport CartTable from \"@/app_proxy/components/Cart/CartTable\";\nimport CartFooter from \"@/app_proxy/components/Cart/CartFooter\";\nimport { LoadingIcon } from \"@/app_proxy/components/Icons\";\nimport { useTranslation } from \"react-i18next\";\nimport {useFetchPaginatedData} from \"@/app_proxy/hooks/useFetchPaginatedData\";\n\nexport default function CartPage() {\n return (\n \n
\n }\n \n {t(\"cart.footer.subtotal\")}\n \n {formatMoney(cart.subTotal)}\n \n
\n\n {!minOrderValueReached &&\n {t(\"cart.footer.taxes_and_shipping_info\")}\n
\n\n {cart?.shippingAllowance &&\n\n {t(`cart.footer.shippingAllowanceInfo.${cart?.shippingAllowance.allowance}`, {\n amount: formatMoney(cart.shippingAllowance?.amount),\n amountEU: formatMoney(cart.shippingAllowance?.amountEU),\n })}\n
\n }\n\n\n \n
\n \n }\n \n
\n );\n}\n","export function validateCheckoutForm(checkoutData) {\n let newErrors = {};\n\n newErrors = { ...newErrors, ...validateCountryCode(checkoutData, 'shippingCountryCode') };\n if (!checkoutData.useShippingAddressForBilling) {\n newErrors = { ...newErrors, ...validateCountryCode(checkoutData, 'billingCountryCode') };\n }\n\n let requiredFields = ['shippingLastName', 'shippingAddress1', 'shippingZip', 'shippingCity'];\n if (!checkoutData.useShippingAddressForBilling) {\n requiredFields = [...requiredFields, 'billingCompany', 'billingLastName', 'billingAddress1', 'billingZip', 'billingCity'];\n }\n newErrors = { ...newErrors, ...validateRequiredFields(checkoutData, requiredFields) };\n\n newErrors = { ...newErrors, ...validatePhoneNumber(checkoutData, 'shippingPhone') };\n\n return newErrors;\n}\n\nexport const validateRequiredFields = (data, fields) => {\n let errors = {};\n fields.forEach(field => {\n if (!data[field]) {\n errors[field] = 'blank';\n }\n });\n return errors;\n};\n\nexport const validateCountryCode = (data, field) => {\n let errors = {};\n if (data[field] === '0') {\n errors[field] = 'select';\n }\n return errors;\n};\n\nexport const validatePhoneNumber = (data, field) => {\n let errors = {};\n const PHONE_PATTERN = /^(?:\\(\\+?\\d{1,3}\\)|\\+?\\d{1,3}|\\+?\\(\\d{1,3}\\)|\\(\\d{2,7}\\)|\\d{2,7})(?:\\s*[\\-/]*\\s*\\d{2,9}){1,2}$/;\n if (data[field] && !PHONE_PATTERN.test(data[field])) {\n errors[field] = 'invalid';\n }\n return errors;\n};\n","import { useState, useCallback } from 'react';\nimport { useFetchAPI } from \"@/app_proxy/hooks/useFetchAPI\";\n\nexport const useStockProblems = ({ onCloseModal, onStockProblemsFound }) => {\n const [stockProblems, setStockProblems] = useState({});\n const [stockProblemsModalOpen, setStockProblemsModalOpen] = useState(false);\n const [isChecking, setIsChecking] = useState(false);\n\n const checkStockProblems = useCallback(async () => {\n if (isChecking) return false;\n\n try {\n setIsChecking(true);\n const stockProblemsData = await useFetchAPI('stock_problems');\n const hasStockProblems = Object.keys(stockProblemsData).length > 0;\n\n if (hasStockProblems) {\n setStockProblems(stockProblemsData);\n setStockProblemsModalOpen(true);\n onStockProblemsFound?.(stockProblemsData);\n }\n\n return hasStockProblems;\n } catch (error) {\n console.error('Error checking stock problems:', error);\n return false;\n } finally {\n setIsChecking(false);\n }\n }, [isChecking, onStockProblemsFound]);\n\n const handleCloseStockProblemsModal = useCallback(() => {\n setStockProblemsModalOpen(false);\n setStockProblems({});\n onCloseModal?.();\n }, [onCloseModal]);\n\n return {\n stockProblems,\n stockProblemsModalOpen,\n isChecking,\n checkStockProblems,\n handleCloseStockProblemsModal\n };\n};\n","import React, {createContext, useContext, useEffect, useState} from \"react\";\nimport {useFetchAPI} from \"@/app_proxy/hooks/useFetchAPI\";\nimport {validateCheckoutForm} from '@/app_proxy/utils/checkoutValidationUtils';\nimport { getUserLocale } from \"@/app_proxy/utils/i18nUtils\";\nimport {camelizeKeys, decamelizeKeys} from 'humps';\nimport {useCartContext} from \"@/app_proxy/providers/CartProvider\";\nimport {useStockProblems} from \"@/app_proxy/hooks/useStockProblems\";\n\nconst CheckoutContext = createContext();\n\nexport function CheckoutProvider({ children }) {\n const [checkoutLoading, setCheckoutLoading] = useState(true);\n const [checkoutData, setCheckoutData] = useState({});\n const [customer, setCustomer] = useState({});\n const [shippingCountries, setShippingCountries] = useState([]);\n const [shippingRatesLoading, setShippingRatesLoading] = useState(true);\n const [shippingRates, setShippingRates] = useState([]);\n const [checkoutTotalsLoading, setCheckoutTotalsLoading] = useState(true);\n const [checkoutTotals, setCheckoutTotals] = useState({});\n const [submitInProcess, setSubmitInProcess] = useState(false);\n const { reloadCart, reloadLineItems } = useCartContext();\n const {\n stockProblems,\n stockProblemsModalOpen,\n checkStockProblems,\n handleCloseStockProblemsModal\n } = useStockProblems({ onCloseModal: reloadLineItems });\n const [errors, setErrors] = useState({});\n\n useEffect(() => {\n (async () => {\n const checkoutResponse = await useFetchAPI('checkout');\n setCheckoutData(checkoutResponse.checkout);\n setCustomer(checkoutResponse.customer);\n setShippingCountries(checkoutResponse.shippingCountries);\n\n await checkStockProblems();\n setCheckoutLoading(false);\n })();\n }, []);\n\n useEffect(() => {\n if (!checkoutData?.shippingCountryCode || checkoutData?.shippingCountryCode === '0') {return}\n\n (async () => {\n setShippingRatesLoading(true);\n const response = await useFetchAPI(`shipping_rates?country_code=${checkoutData.shippingCountryCode}&locale=${getUserLocale()}`);\n\n setShippingRates(response.shippingRates);\n if (response.shippingRates.length > 0) {\n handleChange('shippingCosts', response.shippingRates[0].costs)\n }\n setShippingRatesLoading(false);\n })();\n }, [checkoutData?.shippingCountryCode]);\n\n useEffect(() => {\n if (!checkoutData?.shippingCountryCode || checkoutData?.shippingCountryCode === '0' || !checkoutData?.shippingCosts === null) {return}\n\n (async () => {\n setCheckoutTotalsLoading(true);\n const response = await useFetchAPI(`checkout_totals?country_code=${checkoutData.shippingCountryCode}&shipping_costs=${checkoutData.shippingCosts}`);\n\n setCheckoutTotals(response);\n setCheckoutTotalsLoading(false);\n })();\n }, [checkoutData?.shippingCountryCode, checkoutData?.shippingCosts]);\n\n const handleChange = (field, value) => {\n setErrors(prevErrors => ({...prevErrors, [field]: null}));\n setCheckoutData(prevValues => ({...prevValues, [field]: value}));\n };\n\n const handleSubmit = async (event) => {\n event.preventDefault();\n setSubmitInProcess(true);\n\n const hasStockProblems = await checkStockProblems();\n if (hasStockProblems) {\n setSubmitInProcess(false);\n return;\n }\n\n const formErrors = validateCheckoutForm(checkoutData);\n if (Object.keys(formErrors).length > 0) {\n setErrors(formErrors);\n setSubmitInProcess(false);\n return;\n }\n\n submitForm(checkoutData, onSaveSuccess, onSaveFailure);\n }\n\n const submitForm = async (checkoutData, successCallback, errorCallback) => {\n const response = await fetch(\"/apps/b2b/api/checkout\", {\n method: \"POST\",\n body: JSON.stringify(decamelizeKeys(checkoutData)),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n\n const json = await response.json();\n const data = camelizeKeys(json);\n\n data?.success ? successCallback(data.redirectUrl) : errorCallback(data);\n }\n\n const onSaveSuccess = (redirectUrl) => {\n window.location.href = redirectUrl;\n reloadCart();\n }\n\n const onSaveFailure = (data) => {\n if (data?.checkout?.errors) {\n setCheckoutData(data.checkout);\n const backendErrors = Object.keys(data.checkout.errors).reduce((acc, key) => {\n acc[key] = data.checkout.errors[key].join(', ');\n return acc;\n }, {});\n setErrors(backendErrors);\n setSubmitInProcess(false);\n } else if (data?.error === 'orderCreationError') {\n // TODO: use this to render a global error component later - ask PM for design\n }\n }\n\n const values = {\n checkoutLoading,\n checkoutData,\n customer,\n shippingCountries,\n shippingRatesLoading,\n shippingRates,\n checkoutTotalsLoading,\n checkoutTotals,\n stockProblems,\n stockProblemsModalOpen,\n handleCloseStockProblemsModal,\n handleChange,\n errors,\n handleSubmit,\n submitInProcess\n }\n\n return \n {appInfoLoading ? (
\n \n
\n );\n}\n","export function newAddress(addressType, countryCode, countries = []) {\n const validShippingCountryCode = countries.find((e) => e === countryCode) || countries[0];\n\n let newAddress = {\n id: '0',\n countryCode: (addressType === 'shipping') ? validShippingCountryCode : countryCode,\n company: '',\n firstName: '',\n lastName: '',\n address1: '',\n address2: '',\n zip: '',\n city: '',\n };\n\n if (addressType === 'shipping') {newAddress.phone = '';}\n\n return newAddress;\n}\n\nexport function mapAddressHashToString(address) {\n const parts = [];\n const nameParts = [];\n\n if (address.address1) parts.push(`${address.address1},`);\n if (address.zip || address.city) parts.push(`${address.zip} ${address.city},`);\n if (address.country) parts.push(address.country);\n if (address.firstName || address.lastName) nameParts.push(`${address.firstName} ${address.lastName}`);\n if (address.company) nameParts.push(address.company);\n\n return `${parts.join(' ')} ${nameParts.length ? `(${nameParts.join(', ')})` : ''}`.trim();\n}\n","import { useMemo } from 'react';\nimport { useTranslation } from \"react-i18next\";\nimport { mapAddressHashToString } from \"@/app_proxy/utils/addressUtils\";\nimport {camelize} from \"humps\";\nimport {newAddress} from \"@/app_proxy/utils/addressUtils\";\n\nexport function useAddressOptions(customer, addressType, countries) {\n const addresses = customer?.addresses;\n const lastAddress = customer[camelize(`last_${addressType}Address`)]\n const { t } = useTranslation();\n\n\n // NOTE: especially for the shipping addresses: only allow addresses, where the country is in the list of available countries\n return useMemo(() => {\n let options = [];\n\n if (lastAddress && countries.includes(lastAddress.countryCode)) {\n options.push({\n label: t('checkout.address.lastUsedAddress'),\n value: lastAddress.id,\n });\n }\n\n if(addresses) {\n addresses.forEach(address => {\n if (!countries.includes(address.countryCode)) return;\n\n options.push({\n label: mapAddressHashToString(address),\n value: address.id,\n });\n });\n }\n\n options.push({\n label: t('checkout.address.useNewAddress'),\n value: '0',\n });\n\n return options;\n }, [addresses, lastAddress]);\n}\n\nexport function useFirstAddressFromOptions(customer, addressType, countries) {\n const lastAddress = customer[camelize(`last_${addressType}Address`)];\n const addresses = [lastAddress].concat(customer.addresses).filter(Boolean);\n\n // NOTE: because billing can be from all countries, we can just take the first address we find or create a new one\n if (addressType === 'billing') {\n return addresses[0] || newAddress(addressType, customer.countryCode);\n }\n\n // NOTE: for shipping addresses we have to check on every address if it is in the list of available countries. If not\n // we have to create a new address with the first available country\n const firstValidShippingAddress = addresses.find(address => address && countries.includes(address.countryCode));\n\n if (firstValidShippingAddress) {\n return firstValidShippingAddress;\n } else {\n return newAddress(addressType, customer.countryCode, countries); }\n}\n","import React from \"react\";\nimport {useTranslation} from \"react-i18next\";\n\nexport const CustomInputField = ({id, name, type = 'text', required = false, value, onChange, error = null }) => {\n const {t} = useTranslation();\n\n return (\n \n
\n \n {t(\"checkout.contact.title\")}\n
\n\n\n
\n \n {`${customer.firstName} ${customer.lastName} (${customer.email})`}\n
\n\n \n {t(\"checkout.contact.logout\")}\n \n\n
\n );\n};\n\nexport const CustomSelect = ({ id, name, required = false, options, value, onChange, error = null }) => {\n const { t } = useTranslation();\n\n return (\n \n \n {t(`checkout.address.${name}`)}\n {required && *}\n \n
\n\n {error && {t(`checkout.address.${name}`) + \" \" +t(`errors.${error}`)}
}\n \n
\n );\n};\n","import React, {useEffect, useMemo, useState} from 'react';\nimport { useCheckoutContext } from '@/app_proxy/providers/CheckoutProvider';\nimport { useAddressOptions, useFirstAddressFromOptions } from '@/app_proxy/hooks/useAddressOptions';\nimport { CustomInputField, CustomSelect } from \"@/app_proxy/components/FormFields\";\nimport { newAddress } from \"@/app_proxy/utils/addressUtils\";\nimport { camelize } from 'humps';\nimport { useTranslation } from \"react-i18next\";\n\nexport default ({addressType}) => {\n const { t } = useTranslation();\n const { checkoutData, shippingCountries, customer, handleChange, errors} = useCheckoutContext();\n\n // NOTE: for billing use all countries that are available in the I18n locale file\n const countries = useMemo(() => {\n if(!shippingCountries) return;\n\n return addressType === 'shipping' ? shippingCountries : Object.keys(t('countries', {returnObjects: true}))\n }, [addressType, shippingCountries])\n\n const countryOptions = useMemo(() => {\n let options = [];\n\n options.push({\n label: t('checkout.address.selectCountry'),\n value: '0',\n });\n\n // NOTE: We do not address the edge case, that shop owners haven't set up any markets. In this case the checkout\n // form is broken and users can't proceed.\n if (addressType === \"shipping\" && !shippingCountries) return options;\n\n // Add countries sorted by their translated names\n const countryOptions = countries.map(country => ({\n label: t(`countries.${country}`),\n value: country,\n }));\n countryOptions.sort((a, b) => a.label.localeCompare(b.label));\n options = options.concat(countryOptions);\n\n return options;\n }, [countries])\n\n const [selectedAddress, setSelectedAddress] = useState('');\n const addressOptions = useAddressOptions(customer, addressType, countries);\n\n // NOTE: on load set a initial selected address and fill the form to calculate the shipping rates and total costs\n useEffect(() => {\n if (Object.keys(customer).length === 0 || countries.length === 0 || selectedAddress !== '') return;\n\n const firstAddress = useFirstAddressFromOptions(customer, addressType, countries)\n setSelectedAddress(firstAddress.id);\n\n Object.keys(firstAddress).forEach(key => {\n handleChange(camelize(`${addressType}_${key}`), firstAddress[key]);\n });\n }, [customer, countries, selectedAddress, addressType]);\n\n const handleAddressChange = (event) => {\n const addressId = event.target.value.toString();\n const lastAddress = customer[camelize(`last_${addressType}Address`)];\n const addresses = [lastAddress].concat(customer.addresses).filter(Boolean);\n const selected = addresses.find(addr => addr.id.toString() === addressId) ||\n newAddress(addressType, customer.countryCode, countries);\n\n setSelectedAddress(selected.id.toString());\n Object.keys(selected).forEach(key => {\n handleChange(camelize(`${addressType}_${key}`), selected[key]);\n });\n };\n\n return (\n \n \n {options.map(option => (\n \n ))}\n \n \n {t(`checkout.address.${name}`)}\n {required && *}\n \n
\n\n {error && {t(`checkout.address.${name}`) + \" \" +t(`errors.${error}`)}
}\n \n handleChange(`${addressType}CountryCode`, e.target.value)}\n error={errors[`${addressType}CountryCode`]}\n />\n handleChange(`${addressType}Company`, e.target.value)}\n error={errors[`${addressType}Company`]}\n />\n handleChange(`${addressType}Address1`, e.target.value)}\n error={errors[`${addressType}Address1`]}\n />\n handleChange(`${addressType}Address2`, e.target.value)}\n />\n handleChange('shippingPhone', e.target.value)}\n error={errors.shippingPhone}\n />\n }\n
\n )\n}\n","import React from \"react\";\nimport { useCheckoutContext } from \"@/app_proxy/providers/CheckoutProvider\";\nimport { LoadingIcon } from \"@/app_proxy/components/Icons\";\nimport { useTranslation } from \"react-i18next\";\nimport {useFormatMoney} from \"@/app_proxy/hooks/useFormatMoney\";\n\nconst ShippingRate = ({id, rate, defaultChecked}) => {\n const {handleChange} = useCheckoutContext();\n const {t} = useTranslation();\n const { formatMoney } = useFormatMoney();\n\n return (\n \n handleChange(`${addressType}FirstName`, e.target.value)}\n />\n handleChange(`${addressType}LastName`, e.target.value)}\n error={errors[`${addressType}LastName`]}\n />\n
\n \n handleChange(`${addressType}Zip`, e.target.value)}\n error={errors[`${addressType}Zip`]}\n />\n handleChange(`${addressType}City`, e.target.value)}\n error={errors[`${addressType}City`]}\n />\n
\n {addressType === 'shipping' &&\n \n \n
\n )\n}\n\nexport default () => {\n const {shippingRatesLoading, shippingRates} = useCheckoutContext();\n\n return (\n <>\n {shippingRatesLoading && \n { checkoutData &&\n
\n