\n {showCloseButton &&\n !disableClosing &&\n (!closeButton ? (\n
\n )}\n {!components.Header &&\n showCloseButton &&\n !disableClosing &&\n (!closeButton ? (\n {title}
}\n {components?.Content && (\n{children}
\n )}\n {components.Footer != null && (\n \n
\n )}\n ,\n document.body\n )\n : null;\n }\n);\n\nSideMenu.displayName = 'SideMenu';\n\nexport default SideMenu;\n","import React from 'react';\nimport { useMemo } from 'react';\nimport Icon from '../Icon';\nimport { InputProps } from './types/Input.types';\nimport clsx from 'clsx';\n\nconst Input: React.FC<\n InputProps & React.InputHTMLAttributes\n {(register && props.name) ?\n \n : \n }\n {typeof icon == 'string' &&
\n {helperText && {helperText}}\n {message && (\n \n {showMessageIcon && messageIcon}\n {message}\n \n )}\n \n );\n };\n\nexport default Input;\n","import React, { useState } from 'react';\nimport Icon from '../Icon';\nimport Input from '../Inputs/Input';\nimport clsx from 'clsx';\nimport { translate } from '../../Services/translation';\n\ninterface QuantityInputAttributes {\n className?: string;\n wrapperClassName?: string;\n onChange?: (quantity: number) => void;\n quantity?: number;\n showButtons?: boolean;\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n packagingSize: number;\n}\n\nconst QuantityInput = (props: QuantityInputAttributes) => {\n const {\n className = '',\n wrapperClassName = '',\n onChange,\n quantity,\n showButtons = false,\n min,\n max,\n step,\n disabled = false,\n packagingSize,\n } = props;\n\n const [internalValue, setInternalValue] = useState\n
\n );\n};\n\nexport default QuantityInput;\n","import React from 'react';\nimport Icon from '../Icon';\nimport clsx from 'clsx';\n\ninterface StockStatusProps {\n inStock: boolean;\n description: string;\n quantity: number;\n showStock?: boolean;\n}\n\nconst StockStatus: React.FC<\n StockStatusProps & React.HTMLAttributes\n div]:h-full')}\n type=\"number\"\n value={internalValue ?? ''}\n onChange={(e) => onInputChanged(e.target.value)}\n onBlur={(e) => onSubmitChange(e.target.value)}\n onKeyDown={onKeyDown}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n inputSize=\"medium\"\n />\n {showButtons && (\n <>\n onSubmitChange(internalValue - 1)}\n >\n onSubmitChange(internalValue + 1)}\n >\n
\n {packagingSize && packagingSize > 1 ? (\n \n {packagingSize} {translate('general.pieces')}\n
\n ) : (\n \n {translate('general.piece')}\n
\n )}\n \n
\n );\n};\nexport default StockStatus;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { update } from '../../Actions/Cart.action';\nimport { translate } from '../../Services/translation';\nimport { OrderRow } from '../../Types/OrderRow';\nimport QuantityInput from '../QuantityInput/QuantityInput';\nimport StockStatus from '../StockStatus/StockStatus';\nimport clsx from 'clsx';\nimport Icon from '../Icon';\n\ninterface OrderRowProductCardProps {\n row: OrderRow;\n onRemoveClick?: (row: OrderRow) => void;\n className?: string;\n priceToggleType?: string;\n}\n\nconst OrderRowProductCard = ({\n row,\n onRemoveClick,\n className = '',\n priceToggleType = '',\n}: OrderRowProductCardProps) => {\n const dispatch = useDispatch();\n\n const [abortController, setAbortController] = useState<\n AbortController | undefined\n >();\n\n useEffect(() => setAbortController(new AbortController()), []);\n\n const onQuantityChange = useCallback(\n (row: OrderRow, quantity: number) => {\n dispatch(\n update(\n row.articleNumber,\n quantity,\n row.rowSystemId,\n abortController\n )\n );\n },\n [abortController, dispatch]\n );\n\n return (\n \n {row.image && (\n \n
\n \n
\n {row.productFee &&\n row.productFee.length > 0 &&\n row.productFee.map((fee) => (\n \n
\n \n {row.brand && (\n
\n )}\n {row.brand}
\n )}\n \n {row.name}\n
\n {row.articleNumber && (\n \n {translate('product.articleno')} {row.articleNumber}\n
\n )}\n {row.itemBIDPromotionCode && (\n\n {translate('product.item-bid')}: {row.itemBIDPromotionCode}\n
\n )}\n {row.extraInfo && (\n\n {row.extraInfo.items.map((item) => (\n \n {item.key}: {item.value}\n
\n ))}\n \n {row.totalCampaignPrice ? (\n
\n \n \n {row.campaignPrice}/st\n \n \n {row.totalPrice}\n \n
\n ) : (\n row.totalPrice && (\n \n {row.totalCampaignPrice}\n
\n\n \n {row.price}/st\n \n
\n )\n )}\n \n {row.totalPrice}\n
\n\n {row.navisionStock?.stockStatuses[0] && (\n
\n ) : (\n \n
\n )\n ) : (\n \n
\n )}\n\n {row.orderRowInfoMessage && (\n \n
\n )}\n\n \n onQuantityChange(row, quantity)}\n />\n {onRemoveClick && !row.isFreeGift && (\n onRemoveClick && onRemoveClick(row)}\n >\n {translate('general.remove')}\n \n )}\n
\n \n \n );\n};\n\nexport default OrderRowProductCard;\n","import { TypedUseSelectorHook, useSelector } from 'react-redux';\nimport { RootState } from '../reducers';\n\nexport const useTypedSelector: TypedUseSelectorHook\n
\n );\n\n const Footer = hasOrderRows\n ? () => (\n \n {translate('general.cart')}{' '}\n {orderRows.length > 0 ? `(${totalOrderRowQuantity})` : ''}\n
\n\n \n {translate('cart.to-checkout')}\n \n
\n )\n : undefined;\n\n const Content = () => (\n \n
\n {translate('general.total')}
\n{orderTotal}
\n\n
\n )}\n \n );\n\n const removeRow = (row: OrderRow) => {\n dispatch(update(row.articleNumber, 0, row.rowSystemId));\n };\n\n return (\n {translate('cart.empty')}
\n {emptyCartLink && (\n \n \n \n )}\n\n
\n \n {translate('general.cart')}\n \n \n );\n};\n\nexport default MiniCartButton;\n","import clsx from 'clsx';\nimport React from 'react';\n\nconst CheckoutSectionHeader = ({ children, className = '' }) => {\n return (\n {title}
\n {titleRight}\n\n {usedDiscountCodes.length > 0 && (\n !inputDiscountCode}\n value={inputDiscountCode}\n onKeyDown={(e) =>\n e.key == 'Enter' && submitDiscount(inputDiscountCode)\n }\n placeholder={translate('checkout.campaign-code.placeholder')}\n onChange={(e) => onChange(e.target.value)}\n disabled={isLoading}\n message={\n errors['discountCode']?.length > 0\n ? errors['discountCode'][0]\n : null\n }\n inputState={\n errors['discountCode']?.length > 0 ? 'error' : 'default'\n }\n />\n submitDiscount(inputDiscountCode)}\n disabled={!inputDiscountCode || isLoading}\n >\n {translate('general.use')}\n \n \n )}\n
\n );\n};\n\nexport default Discount;\n","import { translate } from '../../Services/translation';\nimport React from 'react';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport clsx from 'clsx';\nimport Discount from './Checkout.Discount';\n\nconst CheckoutOrderSummary = ({ className }: { className?: string }) => {\n const cart = useTypedSelector((state) => state.cart);\n const { current: userInfo } = useTypedSelector(\n (state) => state.userInfo\n );\n\n return (\n \n {usedDiscountCodes.map((code) => (\n dispatch(deleteDiscountCode(code))}\n >\n {code}\n \n ))}\n
\n )}\n {!showDiscountInput ? (\n setShowDiscountInput(true)}>\n {translate('checkout.campaign-code')}\n \n ) : (\n <>\n \n
\n );\n};\n\nexport default CheckoutOrderSummary;\n","import React from 'react';\nimport { useDispatch } from 'react-redux';\nimport OrderRowProductCard from '../OrderRowProductCard/OrderRowProductCard';\nimport CheckoutSection from './utils/Checkout.Section';\nimport { translate } from '../../Services/translation';\nimport CheckoutOrderSummary from './Checkout.OrderSummary';\nimport { update } from '../../Actions/Cart.action';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { OrderRow } from '../../Types/OrderRow';\n\nconst Cart = () => {\n const dispatch = useDispatch();\n const cart = useTypedSelector((state) => state.cart);\n const hasOrderRows =\n cart.orderRows && Object.keys(cart.orderRows).length > 0;\n const removeRow = (row: OrderRow) => {\n dispatch(update(row.articleNumber, 0, row.rowSystemId));\n };\n const { currentType } = useTypedSelector((state) => state.priceToggle);\n\n return (\n \n {translate('checkout.summary.title')}\n
\n\n
\n {!userInfo?.isBusinessCustomer && \n {translate('checkout.order.sum')}\n {cart.orderTotal}\n
\n {cart.discount && (\n \n {translate('checkout.order.saved')}\n {cart.discount}\n
\n )}\n {!userInfo?.isBusinessCustomer && cart.deliveryCost && (\n \n {translate('checkout.order.shipping')}\n {cart.deliveryCost}\n
\n )}\n {cart.paymentCost && (\n \n {translate('checkout.order.fee')}\n {cart.paymentCost}\n
\n )}\n\n \n {translate('checkout.order.grand-total')}\n {cart.grandTotal}\n
\n \n {translate('checkout.order.vat')}\n {cart.vat}\n
\n \n {translate('checkout.cart.title') +\n ' (' +\n cart.orderRows.length +\n ')'}\n
\n {hasOrderRows && (\n\n {Object.values(cart.orderRows).map((row: any) => (\n removeRow(row)}\n priceToggleType={currentType}\n />\n ))}\n
\n )}\n {children}
\n);\n\nexport default CheckoutSectionContent;\n","import React from 'react';\n\ninterface CheckoutSectionFooterProps {\n children?: any;\n className?: string;\n}\n\nconst CheckoutSectionFooter = ({\n children,\n className,\n}: CheckoutSectionFooterProps) => (\n {children}
\n);\n\nexport default CheckoutSectionFooter;\n","import { translate } from '../../../Services/translation';\nimport { string, object, boolean, mixed } from 'yup';\n\nconst requiredTranslation = translate('validation.required');\n\nexport const alwaysRequiredSchema = object().shape({\n acceptTermsOfCondition: boolean()\n .required(translate('validation.checkrequired'))\n .oneOf([true]),\n selectedDeliveryMethod: object().required(requiredTranslation),\n selectedPaymentMethod: object().required(requiredTranslation),\n});\n\nexport const privateCustomerAddressSchema = object().shape({\n lastName: string().nullable().required(requiredTranslation),\n firstName: string().nullable().required(requiredTranslation),\n address: string().nullable().required(requiredTranslation),\n zipCode: string().nullable().required(requiredTranslation),\n city: string().nullable().required(requiredTranslation),\n country: mixed()\n .nullable()\n .required(requiredTranslation)\n .notOneOf([''], requiredTranslation),\n phoneNumber: string().nullable().required(requiredTranslation),\n email: string()\n .nullable()\n .required(requiredTranslation)\n .email(translate(`validation.email`)),\n});\n\nexport const privateCustomerAlternativeAddressSchema = object().shape({\n city: string().nullable().required(requiredTranslation),\n zipCode: string().nullable().required(requiredTranslation),\n address: string().nullable().required(requiredTranslation),\n lastName: string().nullable().required(requiredTranslation),\n firstName: string().nullable().required(requiredTranslation),\n});\n\nexport const businessCustomerDetailsSchema = object().shape({\n email: string()\n .required(requiredTranslation)\n .nullable()\n .email(translate('validation.email')),\n selectedDeliveryAddressId: string()\n .nullable()\n .required(requiredTranslation),\n selectedBillingAddressId: string()\n .nullable()\n .required(requiredTranslation),\n});\n\nexport const businessAlternativeAddressCustomerDetailsSchema = object().shape({\n name: string().nullable().required(requiredTranslation),\n address: string().nullable().required(requiredTranslation),\n zipCode: string().nullable().required(requiredTranslation),\n city: string().nullable().required(requiredTranslation),\n country: mixed()\n .nullable()\n .required(requiredTranslation)\n .notOneOf([''], requiredTranslation),\n phoneNumber: string().nullable().required(requiredTranslation),\n email: string()\n .nullable()\n .required(requiredTranslation)\n .email(translate(`validation.email`)),\n});\n\nexport const postnordLocationSchema = object().shape({\n selectedServicePointId: string().nullable().required(requiredTranslation)\n})\n","import React, { useMemo } from 'react';\nimport Icon from '../Icon';\nimport { InputProps } from './types/Input.types';\nimport clsx from 'clsx';\n\nconst Checkbox: React.FC<\n InputProps & React.InputHTMLAttributes\n {showMessageIcon && messageIcon}\n {message}\n
\n )}\n \n );\n};\n\nexport default Checkbox;\n","import React, { useCallback, useMemo } from 'react';\nimport { useDispatch } from 'react-redux';\nimport CheckoutSection from './utils/Checkout.Section';\nimport CheckoutSectionContent from './utils/Checkout.SectionContent';\nimport CheckoutSectionFooter from './utils/Checkout.SectionFooter';\nimport {\n acceptTermsOfCondition as setAcceptTermsOfCondition,\n setStatusSubmitButton,\n setValidationErrors,\n submit,\n submitDone,\n setCheckoutIsSubmitting,\n saveCustomerDetail,\n} from '../../Actions/Checkout.action';\nimport {\n alwaysRequiredSchema,\n businessCustomerDetailsSchema,\n privateCustomerAddressSchema,\n privateCustomerAlternativeAddressSchema,\n postnordLocationSchema,\n} from './utils/Checkout.ValidationSchema';\nimport { translate } from '../../Services/translation';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport Checkbox from '../Inputs/Checkbox';\nimport clsx from 'clsx';\n\nconst ConfirmOrder = () => {\n const dispatch = useDispatch();\n const checkout = useTypedSelector((state) => state.checkout);\n const {\n payload,\n validationErrors = {},\n checkoutIsSubmitting,\n } = checkout;\n const {\n customerDetails,\n alternativeAddress,\n selectedDeliveryAddressId,\n selectedBillingAddressId,\n selectedDeliveryMethod,\n selectedPaymentMethod,\n showAlternativeAddress,\n isBusinessCustomer,\n acceptTermsOfCondition,\n postnordLocationId,\n selectedServicePointId,\n } = payload;\n\n const onSubmit = useCallback(() => dispatch(submit()), [dispatch]);\n\n const placeOrder = useCallback(async () => {\n dispatch(setCheckoutIsSubmitting(true));\n const notCustomerDetailFields = [\n 'selectedDeliveryAddressId',\n 'selectedBillingAddressId',\n 'selectedPaymentMethod',\n 'selectedDeliveryMethod',\n 'acceptTermsOfCondition',\n 'selectedServicePointId',\n ];\n\n const onValidationFailed = (stateKey: string, errors: any[]) => {\n const key = (err: any) =>\n stateKey && !notCustomerDetailFields.includes(err.path)\n ? `${stateKey}-${err.path}`\n : err.path;\n\n const newValidationErrors = errors.reduce(\n (prev, err) => ({\n ...prev,\n [key(err)]: err.errors,\n }),\n {}\n );\n dispatch(\n setValidationErrors({\n ...validationErrors,\n ...newValidationErrors,\n })\n );\n dispatch(setStatusSubmitButton(true));\n dispatch(submitDone(null));\n };\n\n dispatch(setStatusSubmitButton(false));\n\n // Validate, then submit. Not proud of this validation, but better than Litium default\n try {\n if (isBusinessCustomer) {\n // Business customer\n try {\n await businessCustomerDetailsSchema.validate(\n {\n ...customerDetails,\n selectedDeliveryAddressId,\n selectedBillingAddressId,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw {\n stateKey: 'customerDetails',\n error: ex.inner,\n };\n }\n } else {\n // Private customer\n try {\n await privateCustomerAddressSchema.validate(\n {\n ...customerDetails,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw {\n stateKey: 'customerDetails',\n error: ex.inner,\n };\n }\n\n // Alternative address\n if (showAlternativeAddress) {\n try {\n await privateCustomerAlternativeAddressSchema.validate(\n {\n ...alternativeAddress,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw {\n stateKey: 'alternativeAddress',\n error: ex.inner,\n };\n }\n }\n }\n\n // Postnord location service\n if (selectedDeliveryMethod?.id == postnordLocationId) {\n try {\n await postnordLocationSchema.validate(\n {\n selectedServicePointId,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw {\n stateKey: 'service-point',\n error: ex.inner,\n };\n }\n }\n\n // Always required\n try {\n await alwaysRequiredSchema.validate(\n {\n acceptTermsOfCondition,\n selectedPaymentMethod,\n selectedDeliveryMethod,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw { stateKey: null, error: ex.inner };\n }\n\n // Will not be reached if any validation failed\n dispatch(saveCustomerDetail()).then(() => onSubmit());\n } catch (err) {\n console.log('ConfirmOrder error', err);\n\n dispatch(setCheckoutIsSubmitting(false));\n onValidationFailed(err.stateKey, err.error);\n }\n }, [\n dispatch,\n validationErrors,\n isBusinessCustomer,\n customerDetails,\n selectedDeliveryAddressId,\n selectedBillingAddressId,\n showAlternativeAddress,\n alternativeAddress,\n acceptTermsOfCondition,\n selectedPaymentMethod,\n selectedDeliveryMethod,\n onSubmit,\n ]);\n\n const acceptTermsError = useMemo(\n () =>\n validationErrors['acceptTermsOfCondition']\n ? validationErrors['acceptTermsOfCondition'][0]\n : null,\n [validationErrors]\n );\n\n return (\n \n {title}\n {description && {description}}\n
\n \n \n {translate('checkout.preferreddeliverydate')}\n \n setCalendarStartDate(date)}\n onSelect={(date) => {\n setPreferredDeliveryDate(date);\n onPreferredDeliveryDateChanged(date);\n }}\n minDate={calendarStartDate}\n disabledKeyboardNavigation\n onKeyDown={keyboardHandling}\n className=\"border border-gray-400 p-4\"\n />\n
\n \n \n {translate('checkout.jointdelivery.header')}\n \n onCheckboxJointDelivery(!isJointDelivery)}\n label={translate(`checkout.jointdelivery.checkboxtext`)}\n />\n
\n \n );\n};\n\nexport default CustomDeliveryFields;\n","import React, { useEffect, useState } from 'react';\nimport { translate } from '../../../Services/translation';\nimport { ServicePoint } from '../types/ServicePoint';\nimport Input from '../../Inputs/Input';\nimport RadioButton from '../../Inputs/Radiobutton';\nimport { useDispatch } from 'react-redux';\nimport { setSelectedServicePoint } from '../../../Actions/Checkout.action';\nimport { getServicePoints } from '../services/PostnordService';\n\nconst ServicePointLocator = ({\n selectedServicePointId,\n validationErrors,\n}: {\n selectedServicePointId?: string;\n validationErrors: any;\n}) => {\n const [servicePointList, setServicePointList] = useState\n
\n );\n\n return (\n <>\n {inputFields && (\n {translate(`postnord.title`)}
\n\n setStreetName(e.target.value)}\n />\n setCity(e.target.value)}\n />\n
\n {servicePoints}
\n )}\n {errorMessage && (\n {errorMessage}
\n )}\n \n );\n};\n\nexport default ServicePointLocator;\n","import { get } from \"../../../Services/http\";\n\nexport const getServicePoints = (city: string, streetName: string) => {\n return get(`/api/postnord?city=${city}&streetName=${streetName}`);\n}","import React from 'react';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport ServicePointLocator from './ui/ServicePointLocator';\n\nconst PostnordLocation = () => {\n const checkout = useTypedSelector((state) => state.checkout);\n const { validationErrors = {} } = checkout;\n const { selectedServicePointId } = checkout.payload;\n\n return (\n \n
\n );\n};\n\nexport default PostnordLocation;\n","import React, { useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport CheckoutSection from './utils/Checkout.Section';\nimport Radio from './utils/Checkout.Radio';\nimport { setDelivery, setSelectedServicePoint } from '../../Actions/Checkout.action';\nimport { translate } from '../../Services/translation';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport CustomDeliveryFields from './Checkout.CustomDeliveryFields';\nimport PostnordLocation from '../PostnordLocation/PostnordLocation';\n\nconst DeliveryMethods = () => {\n const dispatch = useDispatch();\n const checkout = useTypedSelector((state) => state.checkout);\n const { deliveryMethods, selectedDeliveryMethod, postnordLocationId } = checkout.payload;\n const { current: userInfo } = useTypedSelector(\n (state) => state.userInfo\n );\n\n useEffect(() => {\n if (!selectedDeliveryMethod) return;\n\n dispatch(setDelivery(selectedDeliveryMethod));\n }, []);\n\n useEffect(() => {\n dispatch(setSelectedServicePoint('', ''));\n }, [selectedDeliveryMethod])\n\n return (\n {translate('checkout.delivery.title')}
\n {deliveryMethods &&\n deliveryMethods.map((method) => (\n\n
\n ))}\n \n {label && }\n
\n \n onOptionSelected(e.target.value)}\n onClick={() => setDropdownOpen(!dropdownOpen)}\n onBlur={() => setDropdownOpen(false)}\n disabled={disabled}\n >\n {placeholder && (\n \n )}\n {options.map((option, index) => (\n \n {option.label ?? option.value}\n \n ))}\n \n
\n - \n {options.map((option, index) => (\n
\n {translate('checkout.customerinfo.existingcustomer')}{' '}\n \n {translate('checkout.customerinfo.login')}\n \n
\n ) : undefined,\n [authenticated, loginUrl]\n );\n\n return (\n \n {title &&
\n );\n};\n\nexport default InfoContainer;\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport CheckoutSection from './utils/Checkout.Section';\nimport { translate } from '../../Services/translation';\nimport Dropdown from '../Dropdown';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { useDispatch } from 'react-redux';\nimport {\n setSelectedDeliveryAddress,\n setSelectedBillingAddress,\n} from '../../Actions/Checkout.action';\nimport {\n setCustomerDetails,\n setAlternativeAddress,\n setShowAlternativeAddress,\n} from '../../Actions/Checkout.action';\nimport { businessAlternativeAddressCustomerDetailsSchema } from './utils/Checkout.ValidationSchema';\nimport InfoContainer from './utils/Checkout.InfoContainer';\nimport RadioButton from '../Inputs/Radiobutton';\nimport { CustomerInfoInput } from './Checkout.CustomerInfoInput';\n\nconst BusinessCustomerInfo = () => {\n const dispatch = useDispatch();\n const { payload } = useTypedSelector((state) => state.checkout);\n const countriesInChannelList = globalThis.LitiumConstants.countriesInChannel;\n const countriesList = globalThis.LitiumConstants.countries.filter(x => x.custom == false);\n const [country, setCountry] = useState(countriesList[0].value);\n\n const addressList = useMemo(\n () =>\n payload.companyAddresses.filter(\n (type) => type.addressType !== 'Billing'\n ),\n [payload.companyAddresses]\n );\n const billingList = useMemo(\n () =>\n payload.companyAddresses.filter(\n (type) => type.addressType == 'Billing'\n ),\n [payload.companyAddresses]\n );\n const selectedDeliveryAddress = useMemo(\n () =>\n addressList.find(\n (a) => a.systemId == payload.selectedDeliveryAddressId\n ),\n [addressList, payload.selectedDeliveryAddressId]\n );\n const selectedBillingAddress = useMemo(\n () =>\n billingList.find(\n (a) => a.systemId == payload.selectedBillingAddressId\n ),\n [billingList, payload.selectedBillingAddressId]\n );\n const deliveryAddressCountry = useMemo(\n () =>\n countriesInChannelList.find(\n (x) => x.value == selectedDeliveryAddress?.country\n ),\n [selectedDeliveryAddress]\n );\n\n const billingAddressCountry = useMemo(\n () =>\n countriesInChannelList.find(\n (x) => x.value == selectedBillingAddress?.country\n ),\n [selectedBillingAddress]\n );\n const reference = payload.customerDetails;\n\n const firstName = reference.firstName ? `${reference.firstName} ` : '';\n const lastName = reference.lastName ?? '';\n const name = firstName + lastName;\n\n const onCustomerDetailsChange = useCallback(\n (stateKey, id, value) => {\n if (id == 'country') {\n setCountry(value); \n }\n switch (stateKey) {\n case 'customerDetails':\n dispatch(setCustomerDetails(id, value));\n break;\n case 'alternativeAddress':\n dispatch(setAlternativeAddress(id, value));\n break;\n }\n },\n [dispatch]\n );\n\n return (\n {title}
}\n \n
\n \n {company && {company}}\n {name && {name}}\n {phone && (\n \n {translate('general.phone')}: {phone}\n \n )}\n {email && (\n \n {translate('general.email')}: {email}\n \n )}\n {address && {address}}\n\n \n {zip && zip} {city && city}\n \n\n {country && {country}}\n
\n \n {translate('checkout.customerinfo.title')}\n
\n\n \n {translate('checkout.selectdelivery')}\n \n
\n\n {payload.showAlternativeAddress ? (\n \n ) : (\n \n dispatch(setShowAlternativeAddress(false))}\n checked={payload.showAlternativeAddress == false}\n inputSize=\"large\"\n />\n dispatch(setShowAlternativeAddress(true))}\n checked={payload.showAlternativeAddress == true}\n inputSize=\"large\"\n />\n
\n \n ({\n value: address.systemId,\n label: `${\n address.customData.shipToName ?? payload.companyName\n }, ${address.address}, ${address.city}, ${\n address.zipCode\n }, ${address.country}`,\n }))}\n onChange={({ value }) => {\n dispatch(setSelectedDeliveryAddress(value));\n }}\n disabled={addressList.length <= 1}\n />\n\n
\n )}\n \n ({\n value: address.systemId,\n label: `${\n address.customData.shipToName ?? payload.companyName\n }, ${address.address}, ${address.city}, ${address.zipCode}, ${\n address.country\n }`,\n }))}\n onChange={({ value }) => setSelectedBillingAddress(value)}\n disabled={billingList.length <= 1}\n />\n
\n \n {translate('checkout.empty.title')}\n
\n {emptyCartMessage && (\n\n
\n \n );\n};\nexport default Checkout;\n","import React, { useEffect, useState } from 'react';\nimport { Collapse } from 'react-collapse';\nimport Icon from './Icon';\nimport clsx from 'clsx';\n\ninterface CollapsibleAttributes {\n label?: string | JSX.Element;\n className?: string;\n labelClassName?: string;\n transitionDuration?: string;\n onStateChange?: Function;\n isOpen?: boolean;\n hideBorder?: boolean;\n children?: any;\n}\n\nconst Collapsible = ({\n children,\n label,\n className = '',\n labelClassName = '',\n transitionDuration = '0.2s',\n onStateChange: externalStateChange,\n isOpen: externalIsOpen,\n hideBorder,\n}: CollapsibleAttributes) => {\n const [isOpen, setIsOpen] = useState\n \n
\n )}\n {errorMessages['general'] && (\n \n {translate('checkout.title')}\n
\n {message && (\n\n
\n )}\n \n \n \n
\n \n
\n \n {children} \n
\n \n );\n};\n\nexport default Collapsible;\n","import React from 'react';\nimport Checkbox from '../../Inputs/Checkbox';\nimport RadioButton from '../../Inputs/Radiobutton';\nimport { FilterElementAttributes } from '../types/FilterElementAttributes';\n\nconst FilterCheckbox = ({\n filter,\n option,\n onChange,\n}: FilterElementAttributes) => {\n return option ? (\n {value}
\n \n );\n\n const renderTrack = ({ props, children }: IRenderTrackParams) => (\n \n setValue(e.target.value)}\n placeholder={translate('general.search')}\n />\n
\n );\n};\n\nexport default FilterSearchInput;\n","import React from 'react';\nimport { useCallback } from 'react';\nimport { useDispatch } from 'react-redux';\nimport {\n onOptionChanged as onOptionChangedAction,\n onRangeChanged as onRangeChangedAction,\n queryProductFiltering,\n} from '../../Actions/ProductFiltering.action';\nimport { translate } from '../../Services/translation';\nimport FilterCheckbox from './FilterOptions/FilterCheckbox';\nimport FilterRangeSlider from './FilterOptions/FilterRangeSlider';\nimport FilterSearchInput from './FilterSearchInput';\nimport { FilterGroup } from './types/FilterGroup';\nimport { FilterGroupOption } from './types/FilterGroupOption';\nimport { FilterGroupType } from './types/FilterGroupType';\n\ninterface FilterGroupFactoryAttributes {\n filter: FilterGroup;\n options: FilterGroupOption[];\n showAll?: boolean;\n showAllButtonVisible?: boolean;\n onShowHideAllClick?: Function;\n onSearch?: Function;\n onChange?: Function;\n}\n\nconst FilterGroupElement = ({\n filter,\n options,\n showAll,\n showAllButtonVisible,\n onShowHideAllClick,\n onSearch,\n}: FilterGroupFactoryAttributes) => {\n const dispatch = useDispatch();\n\n // When a filter checkbox/radiobutton is changed, this is called, which triggers a filter query\n const onOptionChanged = useCallback(\n async (filterId: string, optionId: string) => {\n dispatch(onOptionChangedAction(filterId, optionId));\n dispatch(queryProductFiltering());\n },\n [dispatch]\n );\n\n // When a filter range is changed, this is called, which triggers a filter query\n const onRangeChanged = useCallback(\n async (filterId: string, values: number[]) => {\n dispatch(onRangeChangedAction(filterId, values));\n dispatch(queryProductFiltering());\n },\n [dispatch]\n );\n\n // Renders each filter group depending on the filter group type\n const renderFilterOptions = useCallback(\n (filter: FilterGroup) => {\n switch (filter.filterGroupType) {\n case FilterGroupType.Checkbox:\n return options.map((opt) => (\n - \n {sortCriteria?.sortItems.map((item) => (\n
\n
\n );\n};\n\nexport default CategoryNavigation;\n","import React from 'react';\nimport CategoryNavigation from '../ProductListing/CategoryNavigation';\n\nconst CategoriesMenu = () => {\n return (\n \n {foundCategory ? (\n {currentCategory.name}\n ) : (\n currentCategory.name\n )}\n
\n - \n {sortedSubCategories(subCategories).map((link, idx) => (\n
div]:text-lg [&_div]:flex [&_ul]:gap-4 [&_ul]:border-b-0\">\n
\n );\n};\n\nexport default CategoriesMenu;\n","import React, { useMemo } from 'react';\nimport ProductFiltering from '../ProductFiltering/ProductFiltering';\nimport SideMenu from '../SideMenu/SideMenu';\nimport { translate } from '../../Services/translation';\nimport ProductSortingRadios from './ProductSortingRadios';\nimport { clearAllFilters } from '../../Actions/ProductFiltering.action';\nimport { useDispatch } from 'react-redux';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport CategoriesMenu from './CategoriesMenu';\n\nconst FilterMenu = ({\n currentMenu,\n setCurrentMenu,\n}: {\n currentMenu: string | undefined;\n setCurrentMenu: any;\n}) => {\n const dispatch = useDispatch();\n const { totalProductsCount } = useTypedSelector(\n (state) => state.productListing\n );\n const filters = useTypedSelector(\n (state) => state.productFiltering.filters\n );\n const hasAnyOptionSelected = useMemo(() => {\n if (filters && filters.length > 0) {\n return filters.findIndex((f) => f.selectedOptions.length > 0) != -1;\n }\n return false;\n }, [filters]);\n\n const Header = () => (\n <>\n {currentMenu == 'categories' ? (\n {translate('filter.categories')}
\n ) : null}\n {currentMenu == 'filters' ? (\n{translate('filter.filter')}
\n ) : null}\n {currentMenu == 'sorting' ? (\n{translate('filter.sort')}
\n ) : null}\n \n );\n\n const Content = () => (\n <>\n {currentMenu == 'categories' ?\n
\n ) : null}\n {currentMenu == 'sorting' ? \n dispatch(clearAllFilters())}\n >\n {translate('filter.clear')}\n \n setCurrentMenu(undefined)}\n >\n {translate('filter.view')} ({totalProductsCount})\n \n
\n ) : null}\n \n );\n\n return (\n <>\n \n {!!subNavigation.links.length && (\n setCurrentMenu('categories')}\n >\n {translate('filter.categories')}\n \n )}\n setCurrentMenu('filters')}\n >\n {translate('filter.filter')}\n \n setCurrentMenu('sorting')}\n >\n {translate('filter.sort')}\n \n
\n\n \n
\n \n );\n};\n\nexport default FilterBar;\n","import {\n LOGIN_SET_IS_LOADING,\n LOGIN_SET_ORGANIZATIONS,\n LOGIN_SET_USERNAME_PASSWORD,\n LOGIN_SET_MODAL_OPEN,\n LOGIN_SET_LOGIN_MODE,\n LOGIN_ERROR,\n LOGIN_SET_REDIRECT_URL,\n LOGIN_SET_MAGIC_LINK_MODEL,\n INVOICE_DEBT_ACKNOWLEDGE\n} from '../constants';\nimport { RootState } from '../reducers';\nimport { post } from '../Services/http';\nimport { translate } from '../Services/translation';\nimport LoginMode from '../Types/LoginMode';\nimport LoginOrganization from '../Types/LoginOrganization';\nimport LoginResponse from '../Types/LoginResponse';\nimport { MagicLinkModel } from '../Types/MagicLinkModel';\n\nexport const performLogin = (username: string, password: string) => (\n dispatch\n) => {\n dispatch(setLoginFormLoading(true));\n const redirectUrl = new URLSearchParams(location.search.toLowerCase()).get(\n 'redirecturl'\n );\n\n post(`/api/login${redirectUrl ? `?redirectUrl=${redirectUrl}` : ''}`, {\n username,\n password,\n redirectUrl,\n })\n .then((res) => res.json())\n .then((response: LoginResponse) => dispatch(handleLoginResponse(response)))\n .catch((err) => dispatch(handleErrorResponse(err)));\n};\n\nexport const selectOrganization = (selectedOrganizationId: string) => (\n dispatch,\n getState: () => RootState\n) => {\n dispatch(setLoginFormLoading(true));\n const redirectUrl = getState().login.redirectUrl;\n post(\n `/api/login/organizations/${selectedOrganizationId}${\n redirectUrl ? `?redirectUrl=${redirectUrl}` : ''\n }`,\n {}\n )\n .then((res) => res.json())\n .then((response: LoginResponse) => {\n dispatch(onError(response.error));\n if (response.success) {\n onSuccessfulLogin(response);\n } else {\n dispatch(setLoginFormLoading(false));\n }\n })\n .catch((err) => dispatch(handleErrorResponse(err)));\n};\n\nexport const submitChangePassword = (\n username,\n oldPassword,\n newPassword,\n passwordConfirmation\n) => (dispatch, getState: () => RootState) => {\n if (newPassword !== passwordConfirmation) {\n dispatch(onError(translate('login.password-mismatch')));\n return;\n }\n\n const { redirectUrl, magicLinkModel } = getState().login;\n dispatch(setLoginFormLoading(true));\n post(\n `/api/login/changepassword${\n redirectUrl ? `?redirectUrl=${redirectUrl}` : ''\n }`,\n {\n username,\n oldPassword,\n newPassword,\n magicLinkModel,\n }\n )\n .then((res) => res.json())\n .then((response: LoginResponse) => {\n if (response.success) {\n dispatch(handleLoginResponse(response));\n } else {\n dispatch(onError(response.error));\n dispatch(setLoginFormLoading(false));\n }\n })\n .catch((err) => dispatch(handleErrorResponse(err)));\n};\n\nexport const submitForgotPassword = (username: string): any => (\n dispatch\n): Promise\n {totalProductsCount}{' '}\n {translate('general.products').toLowerCase()}\n
\n \n
\n \n \n dispatch(setProductListingType(ProductListingType.Grid))\n }\n />\n \n dispatch(setProductListingType(ProductListingType.List))\n }\n />\n \n dispatch(\n setProductListingType(ProductListingType.SingleCard)\n )\n }\n />\n
\n {sortItems && (\n \n ({\n value: item.query,\n label: item.name,\n }))}\n selectedValue={sortItems.find((s) => s.selected)?.query}\n onChange={onSortingChanged}\n size=\"small\"\n disableInitialTrigger={true}\n />\n
\n )}\n \n \n {\n e.target.value == 'log-out'\n ? signOut()\n : navigate(e.target.value);\n }}\n className=\"mb-4 h-full w-full border-0 text-transparent focus:outline-none\"\n >\n {navigation.map((option) => (\n \n {option.name}\n \n ))}\n \n \n
\n );\n};\n\nexport default MyPagesMobileMenu;\n","import React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport Icon from '../Icon';\nimport { signOut } from '../../Actions/Login.action';\nimport { translate } from '../../Services/translation';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\n\nconst MyPagesDesktopMenu = ({ navigation }) => {\n const { current: userInfo } = useTypedSelector(\n (state) => state.userInfo\n );\n\n return (\n \n \n {userInfo?.currentOrganizationName ??\n translate('mypage.site.title')}\n \n
\n \n {userInfo?.firstName} {userInfo?.lastName}\n
\n\n
\n );\n};\n\nexport default MyPagesDesktopMenu;\n","import { USER_INFO_UPDATE, USER_INFO_SET_ERRORS } from '../constants';\nimport { userInfoActions } from '../Reducers/UserInfo.reducer';\nimport { post } from '../Services/http';\nimport { translate } from '../Services/translation';\nimport Address from '../Types/Address';\nimport { UserInfoModel } from '../Types/UserInfoModel';\n\nconst BASE_ROUTE = '/api/userinfo';\n\ninterface ResponseError extends Error {\n response?: Response;\n}\n\nconst handleErrorResponse = (error: ResponseError) => async (dispatch) => {\n if (error.response) {\n const res = error.response;\n const isJson = res.headers\n .get('content-type')\n ?.includes('application/json');\n const data = isJson ? await res.json() : { general: await res.text() };\n\n dispatch(userInfoActions.setErrors(data));\n dispatch(userInfoActions.setSuccessMessage(undefined));\n }\n};\n\nexport const setUserInfoErrors = (errors: { [key: string]: string[] }) => ({\n type: USER_INFO_SET_ERRORS,\n payload: {\n errors,\n },\n});\n\nexport const saveUserInfo = (userInfo: UserInfoModel): any => (dispatch) => {\n return post(`${BASE_ROUTE}/details`, userInfo)\n .then(() => {\n dispatch(userInfoActions.updateUserInfo(userInfo));\n dispatch(userInfoActions.resetErrors());\n dispatch(\n userInfoActions.setSuccessMessage(translate('general.changes-saved'))\n );\n })\n .catch((err) => dispatch(handleErrorResponse(err)));\n};\n\nexport const saveUsername = (username: string): any => (dispatch) => {\n return post(`${BASE_ROUTE}/username`, { username })\n .then(() => {\n dispatch(userInfoActions.updateUsername(username));\n dispatch(userInfoActions.resetErrors());\n dispatch(\n userInfoActions.setSuccessMessage(translate('general.changes-saved'))\n );\n })\n .catch((err) => dispatch(handleErrorResponse(err)));\n};\n\nexport const savePassword = (password: string): any => (dispatch) => {\n return post(`${BASE_ROUTE}/password`, { password })\n .then(() => {\n dispatch(userInfoActions.resetErrors());\n dispatch(\n userInfoActions.setSuccessMessage(translate('general.changes-saved'))\n );\n })\n .catch((err) => dispatch(handleErrorResponse(err)));\n};\n\nexport const saveAddress = (address: Address): any => (dispatch) => {\n return post(`${BASE_ROUTE}/address`, address)\n .then(() => {\n dispatch(userInfoActions.updateAddress(address));\n dispatch(userInfoActions.resetErrors());\n dispatch(\n userInfoActions.setSuccessMessage(translate('general.changes-saved'))\n );\n })\n .catch((err) => dispatch(handleErrorResponse(err)));\n};\n\nexport const setUserInfo = (userInfo: UserInfoModel) => ({\n type: USER_INFO_UPDATE,\n payload: userInfo,\n});\n","import { useDispatch } from 'react-redux';\nimport { AppDispatch } from '../store';\n\nexport const useTypedDispatch: () => AppDispatch = useDispatch;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { translate } from '../../Services/translation';\nimport Input from '../Inputs/Input';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport {\n saveAddress,\n savePassword,\n saveUserInfo,\n saveUsername,\n} from '../../Actions/UserInfo.action';\nimport { useTypedDispatch } from '../../Hooks/useTypedDispatch';\nimport Icon from '../Icon';\n\nconst MyPagesSettings = () => {\n const {\n current: userInfo,\n errors = {},\n successMessage,\n } = useTypedSelector((state) => state.userInfo);\n const [address, setAddress] = useState(userInfo?.address);\n const [isLoading, setIsLoading] = useState\n \n {userInfo?.currentOrganizationName ??\n translate('mypage.site.title')}\n \n
\n \n {userInfo?.firstName} {userInfo?.lastName}\n
\n- \n {navigation.map((option) => (\n
{err}
),\n [errors]\n );\n\n useEffect(() => {\n if (errors['general']?.length || !!successMessage) {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }, [errors, successMessage]);\n\n return (\n\n
\n );\n};\n\nexport default MyPagesSettings;\n","import React from 'react';\nimport { translate } from '../../../Services/translation';\nimport { Order } from '../../../Types/Order';\n\nconst OrderListItemMobile = ({\n order,\n onClick,\n}: {\n order: Order;\n onClick: (order: Order) => void;\n}) => {\n return (\n {translate('mypage.info.title')}
\n\n {translate('mypage.settings.text') !== 'mypage.settings.text' &&\n translate('mypage.settings.text')}\n
\n {hasErrors('general') ? (\n\n
\n ) : null}\n {successMessage ? (\n \n
\n ) : null}\n \n\n {!userInfo?.isBusinessCustomer && (\n \n )}\n {userInfo?.mayEditLogin && (\n <>\n \n \n \n )}\n \n {translate('orderlist.column.ordernumber')}:{' '}\n {order.externalOrderID}\n
\n\n
\n \n
\n \n {translate('orderlist.column.quantity')}\n
\n{order.orderRows.length}
\n\n
\n \n {translate('orderlist.column.grandtotal')}\n
\n\n {order.orderGrandTotal} {order.currencyCode}\n
\n\n
\n \n {translate('orderlist.column.orderdate')}\n
\n{order.orderDate}
\n\n
\n \n {translate('orderlist.column.status')}\n
\n{order.status}
\n- \n {currentPageIndex > 1 && (\n
\n
\n );\n};\n\nexport default MyPagesOrderHistory;\n","import React from 'react';\nimport { translate } from '../../../Services/translation';\n\nconst ProductCardMyOrders = ({ order, product }) => {\n console.log(product);\n\n return (\n {translate('mypage.order.title')}
\n\n {translate('mypage.order.text') !== 'mypage.order.text' &&\n translate('mypage.order.text')}\n
\n- \n
- \n
- \n
\n {translate('general.ordernumber')}\n
\n\n {translate('orderdetail.yourordernumber')}\n
\n\n {translate('general.quantity')}\n
\n\n {translate('orderdetail.orderdate')}\n
\n\n {translate('orderdetail.grandtotal')}\n
\n \n
\n \n index !== currentPageIndex && setCurrentPageIndex(index)\n }\n />\n
\n \n \n 
\n \n
\n );\n};\n\nexport default ProductCardMyOrders;\n","import React, { useMemo } from 'react';\nimport { translate } from '../../Services/translation';\nimport ProductCardMyOrders from './ui/ProductCardMyOrders';\nimport { Order } from '../../Types/Order';\nimport { EditorStringModel } from '../../Types/EditorString';\nimport SalesAddress from '../../Types/OrderDetailAddress';\nimport clsx from 'clsx';\n\ninterface OrderDetailProps {\n order: Order;\n isConfirmation: boolean;\n confirmationTitle?: string;\n confirmationText?: EditorStringModel;\n confirmationExtraText?: EditorStringModel;\n}\n\nconst OrderDetail = ({\n order,\n isConfirmation,\n confirmationTitle,\n confirmationText,\n confirmationExtraText,\n}: OrderDetailProps) => {\n const deliveryAddress = useMemo(\n () => (order.deliveries?.length ? order.deliveries[0].address : null),\n [order.deliveries]\n );\n\n return (\n \n \n {product.name}\n \n \n {translate('product.articleno')} {product.articleNumber}\n \n {product.extraInfo &&\n product.extraInfo.items.map((item) => (\n \n {item.key}: {item.value}\n \n ))}\n
\n \n {translate('mypage.order.quantity')}:\n {product.quantityString}\n
\n \n {translate('mypage.order.outstandingquantity')}:\n {product.outstandingQuantityString}\n
\n \n {translate('product.unitprice')}:\n \n {product.unitPrice} {order.currencyCode}\n \n
\n \n {translate('mypage.order.total')}:\n \n {product.totalPrice} {order.currencyCode}\n \n
\n \n {translate('mypage.order.deliverydate')}:\n {product.deliveryDate}\n
\n \n
\n )}\n \n ) : (\n {confirmationTitle}
\n\n \n {translate('general.ordernumber')}:\n {order.externalOrderID}\n \n \n {translate('orderdetail.orderdate')}:\n {order.orderDate}\n \n
\n {confirmationText?.value && (\n \n
\n )}\n \n {translate('general.ordernumber')}: {order.externalOrderID}\n
\n\n \n {translate('orderdetail.orderdate')}:\n {order.orderDate}\n \n
\n \n {order.orderRows\n .slice()\n .sort((a, b) => a.articleNumber.localeCompare(b.articleNumber))\n .map((product) => (\n
\n {isConfirmation && confirmationExtraText?.value && (\n \n
\n \n {translate('checkout.order.sum')}\n {order.orderTotal} {order.currencyCode}\n
\n {!order.isBusinessCustomer && (\n \n {translate('checkout.order.shipping')}\n {order.orderTotalDeliveryCost} {order.currencyCode}\n
\n )}\n \n {translate('orderdetail.grandtotal')}\n {order.orderGrandTotal} {order.currencyCode}\n
\n \n {translate('checkout.order.vat')}\n {order.orderTotalVat} {order.currencyCode}\n
\n \n
\n );\n};\n\nexport default MyPagesOrderDetail;\n","import { ViewMode } from '../constants';\nimport { get, post, put, remove as httpRemove } from '../Services/http';\nimport { catchError } from './Error.action';\nimport { PERSON_RECEIVE, PERSON_ERROR, PERSON_CHANGE_MODE } from '../constants';\n\nconst rootRoute = '/api/mypageperson';\n\nexport const changeMode = (mode) => ({\n type: PERSON_CHANGE_MODE,\n payload: {\n mode,\n },\n});\n\nexport const query = (mode = ViewMode.List) => (dispatch) => {\n return get(rootRoute)\n .then((response) => response.json())\n .then((result) => {\n dispatch(receive(result, mode));\n })\n .catch((ex) => dispatch(catchError(ex, (error) => setError(error))));\n};\n\nexport const remove = (personSystemId) => (dispatch) =>\n httpRemove(rootRoute, personSystemId)\n .then(() => dispatch(query()))\n .catch((ex) => dispatch(catchError(ex, (error) => setError(error))));\n\nexport const add = (person, navigate) => (dispatch) =>\n{\n return post(rootRoute, person)\n .then(() => {\n dispatch(query())\n navigate(-1);\n })\n .catch((ex) => dispatch(catchError(ex, (error) => setError(error))));\n}\n\nexport const edit = (person) => (dispatch) =>\n put(rootRoute, person)\n .then(() => dispatch(query()))\n .catch((ex) => dispatch(catchError(ex, (error) => setError(error))));\n\nexport const getPerson = (systemId) => {\n return get(`${rootRoute}/${systemId}`).then((response) => response.json());\n};\n\nconst receive = (list, mode) => ({\n type: PERSON_RECEIVE,\n payload: {\n list,\n mode,\n },\n});\n\nexport const setError = (error) => ({\n type: PERSON_ERROR,\n payload: {\n error,\n },\n});\n","import React from 'react';\nimport { translate } from '../../../Services/translation';\nimport Icon from '../../Icon';\nimport { useNavigate } from 'react-router-dom';\nimport { remove as removeUser } from '../../../Actions/Person.action';\nimport { useDispatch } from 'react-redux';\n\nconst UserListItemMobile = ({ person }) => {\n const navigate = useNavigate();\n const dispatch = useDispatch();\n\n return (\n \n {\n navigate(-1);\n }}\n >\n
\n {order && \n \n
\n \n {person.firstName} {person.lastName}\n
\n\n
\n \n
\n \n {translate('mypage.person.email')}:\n
\n{person.email}
\n\n
\n \n {translate('mypage.person.phone')}:\n
\n{person.phone}
\n\n
\n {person.role !== 'Admin' && (\n \n {translate('mypage.person.role')}:\n
\n{person.role}
\n\n navigate(`edit/${person.systemId}`)}\n >\n {\n dispatch(removeUser(person.systemId));\n }}\n >\n
\n )}\n \n navigate(`edit/${person.systemId}`)}\n >\n {\n dispatch(removeUser(person.systemId));\n }}\n >\n
\n )}\n \n navigate('add')}\n >\n {translate('mypage.person.adduser')}\n \n
\n );\n};\n\nexport default MyPagesUsers;\n","import React, { useState } from 'react';\nimport { translate } from '../../Services/translation';\nimport { add as addPerson } from '../../Actions/Person.action';\nimport { useDispatch } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\nimport Input from '../Inputs/Input';\nimport RadioButton from '../Inputs/Radiobutton';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\n\nconst MyPagesAddUser = () => {\n const navigate = useNavigate();\n const dispatch = useDispatch();\n const { persons } = useTypedSelector(\n (state) => state.myPage\n );\n\n // FORM-VALUES\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [email, setEmail] = useState('');\n const [phone, setPhone] = useState('');\n const [role, setRole] = useState{translate('mypage.person.title')}
\n\n {translate('mypage.users.text') !== 'mypage.users.text' &&\n translate('mypage.users.text')}\n
\n- \n
- \n
\n
\n \n {translate('mypage.person.name')}\n
\n\n {translate('mypage.person.email')}\n
\n\n {translate('mypage.person.phone')}\n
\n\n {translate('mypage.person.role')}\n
\n\n
\n );\n};\n\nexport default MyPagesAddUser;\n","import React, { useEffect, useState } from 'react';\nimport { translate } from '../../Services/translation';\nimport {\n getPerson,\n edit as editPerson,\n} from '../../Actions/Person.action';\nimport { useDispatch } from 'react-redux';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport Person from '../../Types/Person';\nimport Input from '../Inputs/Input';\nimport RadioButton from '../Inputs/Radiobutton';\n\nconst MyPagesEditUser = () => {\n const { id } = useParams();\n const navigate = useNavigate();\n const dispatch = useDispatch();\n const [isLoading, setIsLoading] = useState(true);\n const [person, setPerson] = useState{translate('mypage.person.adduser')}
\n\n {translate('mypage.addusers.text') !== 'mypage.addusers.text' &&\n translate('mypage.addusers.text')}\n
\n \n\n {persons?.errors &&\n Object.entries(persons.errors).map(([key, value]) => (\n
\n \n {value}\n
\n ))\n }\n \n submitForm()}\n >\n {translate('general.save')}\n \n navigate(-1)}\n >\n {translate('general.cancel')}\n \n
\n \n
\n );\n};\n\nexport default MyPagesEditUser;\n","import { ViewMode } from '../constants';\nimport { get, post, put, remove as httpRemove } from '../Services/http';\nimport { catchError } from './Error.action';\nimport {\n ADDRESS_CHANGE_MODE,\n ADDRESS_RECEIVE,\n ADDRESS_ERROR,\n} from '../constants';\nconst rootRoute = '/api/mypageaddress';\n\nexport const changeMode = (mode) => ({\n type: ADDRESS_CHANGE_MODE,\n payload: {\n mode,\n },\n});\n\nexport const query = (mode = ViewMode.List) => (dispatch) => {\n return get(rootRoute)\n .then((response) => response.json())\n .then((result) => {\n dispatch(receive(result, mode));\n })\n .catch((ex) => dispatch(catchError(ex, (error) => setError(error))));\n};\n\nexport const remove = (addressSystemId) => (dispatch) =>\n httpRemove(rootRoute, addressSystemId)\n .then(() => dispatch(query()))\n .catch((ex) => dispatch(catchError(ex, (error) => setError(error))));\n\nexport const add = (address) => (dispatch) =>\n post(rootRoute, address)\n .then(() => dispatch(query()))\n .catch((ex) => {\n dispatch(catchError(ex, (error) => setError(error)));\n throw ex;\n });\n\nexport const edit = (address) => (dispatch) =>\n put(rootRoute, address)\n .then(() => dispatch(query()))\n .catch((ex) => {\n dispatch(catchError(ex, (error) => setError(error)));\n throw ex;\n });\n\nexport const getAddress = (systemId) => {\n return get(`${rootRoute}/${systemId}`).then((response) => response.json());\n};\n\nconst receive = (list, mode) => ({\n type: ADDRESS_RECEIVE,\n payload: {\n list,\n mode,\n },\n});\n\nexport const setError = (error) => ({\n type: ADDRESS_ERROR,\n payload: {\n error,\n },\n});\n","import React from 'react';\nimport Icon from '../../Icon';\nimport { useNavigate } from 'react-router-dom';\nimport { remove as removeAddress } from '../../../Actions/Address.action';\nimport { useDispatch } from 'react-redux';\nimport clsx from 'clsx';\nimport { add } from 'lodash';\n\nconst AddressListItemDesktop = ({ address }) => {\n const navigate = useNavigate();\n const dispatch = useDispatch();\n\n /*\n * Non editable addresses are updated in NAV\n */\n const editable = () => {\n return (\n address &&\n !(address.customData && address.customData.shipToCode) &&\n !address.addressType?.toLowerCase().includes('billing')\n );\n };\n\n return (\n {translate('mypage.person.edituser')}
\n\n {translate('mypage.editusers.text') !== 'mypage.editusers.text' &&\n translate('mypage.editusers.text')}\n
\n \n\n submitForm()}\n disabled={isLoading}\n >\n {translate('general.save')}\n \n navigate(-1)}\n >\n {translate('general.cancel')}\n \n
\n \n
\n \n {address.address}\n
\n\n {address.zipCode} {address.city}\n
\n{address.country}
\n\n navigate(`edit/${address.systemId}`)}\n >\n {\n dispatch(removeAddress(address.systemId));\n }}\n >\n
\n \n );\n};\nexport default AddressListItemMobile;\n","import React, { useEffect } from 'react';\nimport { translate } from '../../Services/translation';\nimport { query as queryAddresses } from '../../Actions/Address.action';\nimport { useDispatch } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport AddressListItemDesktop from './ui/AddressListItemDesktop';\nimport AddressListItemMobile from './ui/AddressListItemMobile';\nimport SkeletonListItemDesktop from './ui/SkeletonListItemDesktop';\nimport SkeletonListItemMobile from './ui/SkeletonListItemMobile';\n\nconst MyPagesUsers = () => {\n const dispatch = useDispatch();\n const navigate = useNavigate();\n const { addresses } = useTypedSelector\n \n navigate('add')}\n >\n {translate('mypage.address.addaddress')}\n \n
\n );\n};\nexport default MyPagesUsers;\n","import React, { useState } from 'react';\nimport { translate } from '../../Services/translation';\nimport { add as addAddress } from '../../Actions/Address.action';\nimport { useDispatch } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\nimport Input from '../Inputs/Input';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport Dropdown from '../Dropdown';\nimport { CustomData } from '../../Types/AddressViewModel';\n\nconst MyPagesAddAddress = () => {\n\n const navigate = useNavigate();\n const dispatch = useDispatch();\n const countriesInChannelList = globalThis.LitiumConstants.countriesInChannel;\n const countriesList = globalThis.LitiumConstants.countries.filter(x => x.custom == false);\n const { errors = {} } = useTypedSelector(\n (state) => state.myPage.addresses\n );\n\n // FORM-VALUES\n const [customData, setCustomData] = useState{translate('mypage.address.title')}
\n\n {translate('mypage.addresses.text') !== 'mypage.addresses.text' &&\n translate('mypage.addresses.text')}\n
\n- \n
\n
\n \n {translate('mypage.address.name')}\n
\n\n {translate('mypage.address.address')}\n
\n\n {translate('mypage.address.zipcode')}\n
\n\n {translate('mypage.address.city')}\n
\n\n {translate('mypage.address.adresstype')}\n
\n\n
\n );\n};\nexport default MyPagesAddAddress;\n","import React, { useEffect, useState } from 'react';\nimport { translate } from '../../Services/translation';\nimport {\n getAddress,\n edit as editAddress,\n} from '../../Actions/Address.action';\nimport { useDispatch } from 'react-redux';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport Input from '../Inputs/Input';\nimport AddressViewModel from '../../Types/AddressViewModel';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport Dropdown from '../Dropdown';\n\nconst MyPagesEditAddress = () => {\n const [isLoading, setIsLoading] = useState(true);\n const [address, setAddress] = useState{translate('mypage.address.addaddress')}
\n\n {translate('mypage.addaddress.text') !== 'mypage.addaddress.text' &&\n translate('mypage.addaddress.text')}\n
\n \n\n
\n );\n};\nexport default MyPagesEditAddress;\n","import { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nexport default function ScrollToTop() {\n const { pathname } = useLocation();\n\n useEffect(() => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }, [pathname]);\n\n return null;\n}\n","import { translate } from '../../../Services/translation';\nimport {\n ExtapiInvoiceReturnRequest,\n ExtapiInvoiceSearchQueryParams,\n InteractiveTableHeaders,\n} from '../../../Types/MyPages/InvoicesModel';\nimport { DropdownOption } from '../../Dropdown';\n\nexport const defaultReturnRequestModel: ExtapiInvoiceReturnRequest = {\n firstName: '',\n lastName: '',\n phone: '',\n email: '',\n isDamagedProduct: false,\n beenInContact: false,\n beenInContactPerson: '',\n returns: [],\n};\n\nexport const defaultInvoiceQueryParams: ExtapiInvoiceSearchQueryParams = {\n startDate: new Date(new Date().setMonth(new Date().getMonth() - 1))\n .toISOString()\n .split('T')[0]!,\n endDate: new Date().toISOString().split('T')[0]!,\n filterField: 'ItemNo',\n filterFieldSearchValue: '',\n};\n\nexport const defaultRmaQueryParams: ExtapiInvoiceSearchQueryParams = {\n startDate: new Date(\n new Date().setFullYear(new Date().getFullYear() - 1)\n ).toLocaleDateString(),\n endDate: new Date().toLocaleDateString(),\n filterField: 'itemNo',\n filterFieldSearchValue: '',\n};\n\nexport const myPagesRmaFilterDefaultOption: DropdownOption = {\n label: translate('mypage.rma.itemnumber'),\n value: 'itemNo',\n};\n\nexport const myPagesInvoiceFilterOptions: DropdownOption[] = [\n {\n label: translate('mypage.rma.itemnumber'),\n value: 'ItemNo',\n },\n {\n label: translate('mypage.rma.ean'),\n value: 'EanCode',\n },\n {\n label: translate('mypage.rma.invoicenumber'),\n value: 'InvoiceNo',\n },\n {\n label: translate('mypage.rma.ordernumber'),\n value: 'OrderNo',\n },\n {\n label: translate('mypage.rma.customerordernumber'),\n value: 'CustomerOrderNo',\n },\n];\n\nexport const myPagesRmaFilterOptions: DropdownOption[] = [\n {\n label: translate('mypage.rma.itemnumber'),\n value: 'itemNo',\n },\n {\n label: translate('mypage.rma.ean'),\n value: 'ean',\n },\n {\n label: translate('mypage.rma.invoicenumber'),\n value: 'invoiceNo',\n },\n {\n label: translate('mypage.rma.ordernumber'),\n value: 'orderNo',\n },\n {\n label: translate('mypage.rma.customerordernumber'),\n value: 'custOrderNo',\n },\n];\n\nexport const tableHeaders: InteractiveTableHeaders[] = [\n {\n id: 'documentNo',\n displayTextName: 'mypage.rma.invoicenumber',\n },\n {\n id: 'orderNo',\n displayTextName: 'mypage.rma.ordernumber',\n },\n {\n id: 'yourOrderNo',\n displayTextName: 'mypage.rma.yourordernumber',\n },\n {\n id: 'postingDate',\n displayTextName: 'mypage.rma.postingdate',\n },\n];\n","import React from 'react';\nimport Input from '../../Inputs/Input';\nimport Dropdown, { DropdownOption } from '../../Dropdown';\nimport { translate } from '../../../Services/translation';\nimport { defaultInvoiceQueryParams } from '../rma/MyPagesRmaDefaults';\nimport { ExtapiInvoiceSearchQueryParams } from '../../../Types/MyPages/InvoicesModel';\nimport LoadingSpinner from '../../LoadingSpinner';\n\nexport const filterFieldOptions: DropdownOption[] = [\n {\n label: translate('mypage.rma.itemnumber'),\n value: 'ItemNo',\n },\n {\n label: translate('mypage.rma.ean'),\n value: 'EanCode',\n },\n {\n label: translate('mypage.rma.invoicenumber'),\n value: 'InvoiceNo',\n },\n {\n label: translate('mypage.rma.ordernumber'),\n value: 'OrderNo',\n },\n {\n label: translate('mypage.rma.customerordernumber'),\n value: 'CustomerOrderNo',\n },\n];\n\ninterface MyPagesInvoiceFilterFormProps {\n filter?: ExtapiInvoiceSearchQueryParams;\n onFilterChange: (filter: ExtapiInvoiceSearchQueryParams) => void;\n onSearch: () => void;\n isLoading: boolean;\n}\n\nconst MyPagesInvoiceFilterForm = ({\n filter = defaultInvoiceQueryParams,\n onFilterChange,\n onSearch,\n isLoading,\n}: MyPagesInvoiceFilterFormProps) => {\n return (\n <>\n {translate('mypage.address.editaddress')}
\n\n {translate('mypage.editaddress.text') !== 'mypage.editaddress.text' &&\n translate('mypage.editaddress.text')}\n
\n\n \n\n \n onFilterChange({\n ...(filter ?? defaultInvoiceQueryParams),\n startDate: e.target.value,\n })\n }\n required\n />\n \n onFilterChange({\n ...(filter ?? defaultInvoiceQueryParams),\n endDate: e.target.value,\n })\n }\n required\n />\n
\n \n div]:bg-white\"\n selectClassName=\"lg:h-[40px]\"\n selectedValue={\n filter?.filterField ?? defaultInvoiceQueryParams.filterField\n }\n options={filterFieldOptions}\n onChange={(option) =>\n onFilterChange({\n ...(filter ?? defaultInvoiceQueryParams),\n filterField: option.value,\n })\n }\n label=\"Filter\"\n size=\"medium\"\n />\n
\n \n );\n};\n\nexport default MyPagesInvoiceFilterForm;\n","import React from 'react';\nimport { ExtapiInvoice } from '../../../Types/MyPages/InvoicesModel';\nimport { Link } from 'react-router-dom';\nimport { translate } from '../../../Services/translation';\nimport Icon from '../../Icon';\nimport clsx from 'clsx';\n\ninterface MyPagesInvoiceListProps {\n isLoading: boolean;\n onInvoiceClick?: (invoice: ExtapiInvoice) => void;\n onDownloadInvoice?: (invoice: ExtapiInvoice) => void;\n invoices?: ExtapiInvoice[];\n hasError?: boolean;\n showDownload?: boolean;\n invoiceButtonText?: string;\n invoiceClassName?: (invoice: ExtapiInvoice) => string;\n}\n\nconst MyPagesInvoiceList = ({\n isLoading,\n hasError,\n invoices,\n onInvoiceClick,\n onDownloadInvoice,\n invoiceButtonText,\n invoiceClassName,\n showDownload = true,\n}: MyPagesInvoiceListProps) => {\n return (\n <>\n {/* Mobile */}\n \n x.value == filter?.filterField\n )?.label\n }\n onKeyDown={(e) => e.key == 'Enter' && onFilterChange(filter)}\n wrapperClassName=\"lg:self-end [&_.input]:text-lg col-span-2\"\n type=\"text\"\n value={\n filter?.filterFieldSearchValue ??\n defaultInvoiceQueryParams.filterFieldSearchValue\n }\n disabled={isLoading || !filter?.filterField}\n onChange={(e) =>\n onFilterChange({\n ...(filter ?? defaultInvoiceQueryParams),\n filterFieldSearchValue: e.target.value,\n })\n }\n placeholder={\n filterFieldOptions.find(\n (x) => x.value == filter?.filterField\n )?.label\n }\n />\n onSearch()}\n >\n {!isLoading && translate('form.invoices.search')}\n {isLoading &&
\n - \n {!isLoading &&\n !hasError &&\n invoices?.map((invoice) => (\n
\n
\n \n {translate('mypage.rma.invoicenumber')}:{' '}\n {invoice.documentNo}\n
\n\n \n {translate('mypage.invoices.open')}\n \n
\n \n
\n \n
\n \n {translate('mypage.rma.ordernumber')}\n
\n{invoice.orderNo}
\n\n
\n \n {translate('mypage.rma.yourordernumber')}\n
\n{invoice.yourOrderNo}
\n\n
\n \n {translate('mypage.rma.postingdate')}\n
\n{invoice.postingDate}
\n\n
\n \n {translate('mypage.rma.amount')}\n
\n{invoice.originalAmount}
\n\n
\n \n {translate('mypage.rma.duedate')}\n
\n{invoice.dueDate}
\n\n {!onInvoiceClick && (\n \n {translate('general.read-more')}\n \n )}\n {onInvoiceClick && (\n onInvoiceClick(invoice)}\n >\n {invoiceButtonText ?? translate('general.read-more')}\n \n )}\n {showDownload && (\n \n typeof onDownloadInvoice === 'function' &&\n onDownloadInvoice(invoice)\n }\n disabled={!invoice.canDownload}\n >\n
\n \n ))}\n {isLoading &&\n Array.from({ length: 3 }).map((_, idx) => (\n \n
\n \n ))}\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n - \n
- \n
\n {translate('mypage.invoices.open')}\n
\n\n {translate('mypage.rma.invoicenumber')}\n
\n\n {translate('mypage.rma.ordernumber')}\n
\n\n {translate('mypage.rma.yourordernumber')}\n
\n\n {translate('mypage.rma.postingdate')}\n
\n\n {translate('mypage.rma.amount')}\n
\n\n {translate('mypage.rma.duedate')}\n
\n \n {!isLoading &&\n invoices?.map((invoice) => (\n - \n
\n fetchInvoices(queryParams)}\n isLoading={isLoading}\n />\n {errorMessage && (\n {errorMessage}\n )}\n
\n );\n}\n","import React, {\n Fragment,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { translate } from '../../Services/translation';\nimport Input from '../Inputs/Input';\nimport { getPriceLabels } from '../../Actions/PriceLabel.action';\nimport PriceLabelModel from '../../Types/MyPages/PriceLabelModel';\nimport { createPortal } from 'react-dom';\nimport { useReactToPrint } from 'react-to-print';\nimport clsx from 'clsx';\nimport { scrollTopToElement } from '../../Services/Scroll.service';\n\nconst MyPagesPriceLabels = () => {\n const [articleNumbers, setArticleNumbers] = useState('');\n const [searchError, setSearchError] = useState(null);\n const [isLoading, setIsLoading] = useState{translate('mypage.invoices.title')}
\n\n {translate('mypage.invoices.description')}\n
\n\n
\n ))}\n \n \n ))}\n \n ,\n document.getElementById('price-labels-container')!\n )}\n \n );\n};\n\nfunction groupArrayByCount(arr: any[], count: number) {\n const grouped: any[][] = [];\n\n for (let i = 0; i < arr.length; i += count) {\n grouped.push(arr.slice(i, i + count));\n }\n\n return grouped;\n}\n\nexport default MyPagesPriceLabels;\n","export const scrollTopToElement = (\n elementId: string,\n offset: number = 8\n) => {\n const element = document.getElementById(elementId);\n if (!element) return;\n\n const headerOffset = 75; // Always 75px when scrolled down\n const elementPosition =\n element.getBoundingClientRect().top + window.scrollY;\n const offsetPosition = elementPosition - headerOffset - offset;\n\n window.scrollTo({\n top: offsetPosition,\n behavior: 'smooth',\n });\n};\n","import { get } from '../Services/http';\n\nconst rootRoute = '/api/mypages/pricelabels';\n\nexport const getPriceLabels = (articleNumber) => {\n return get(`${rootRoute}/generate/${articleNumber}`).then((response) =>\n response.json()\n );\n};\n","import React, { useState } from 'react';\nimport { translate } from '../../Services/translation';\n\nconst MyPagesService = (props) => {\n const [searchError, setSearchError] = useState(null);\n const [isLoading, setIsLoading] = useState{translate('mypage.pricelabels.title')}
\n\n {translate('mypage.pricelabels.description')}\n
\n\n {searchError &&{searchError}
}\n\n \n\n {priceLabelModel &&\n priceLabelModel.barcodeItems &&\n priceLabelModel.barcodeItems.length > 0 &&\n createPortal(\n\n \n {item.price}\n
\n \n
\n \n \n {translate('general.save')}\n \n
\n {priceLabelModel.title}
\n\n
\n {translate('mypage.pricelabel.edit-tips')}
\n \n {groupedPriceLabels.map((group, groupIdx) => (\n \n \n {group.map((item, idx) => (\n 0 && '[@media_not_print]:border-t-0'\n )}\n >\n
\n \n
\n \n \n {item.barCodeString}\n
\n \n \n {item.productName}\n \n \n {item.articleNumber}\n \n
\n \n \n {translate('form.service.open')}\n \n\n
\n );\n};\n\nexport default MyPagesService;","import React from 'react';\nimport { translate } from '../../../Services/translation';\nimport clsx from 'clsx';\n\nconst OrderListItemMobile = ({ order, onClick, onClickApprove }) => {\n return (\n {translate('mypage.service.title')}
\n\n {translate('mypage.service.description')}\n
\n\n\n {translate('mypage.service.alert.portapro')}\n
\n\n {searchError &&{searchError}
}\n\n\n {translate('orderlist.column.ordernumber')}:{' '}\n {order.externalOrderID}\n
\n\n
\n \n
\n \n {translate('orderlist.column.quantity')}\n
\n{order.orderRows.length}
\n\n
\n \n {translate('orderlist.column.grandtotal')}\n
\n{order.orderGrandTotal}
\n\n
\n \n {translate('orderlist.column.orderdate')}\n
\n{order.orderDate}
\n\n
\n \n {translate('orderlist.column.status')}\n
\n{order.status}
\n\n onClick && onClick(order)}\n className={clsx(\n 'btn',\n 'btn--outline',\n 'btn--small',\n 'col-span-2',\n 'mt-3',\n 'font-bold',\n 'md:col-span-1',\n 'md:mt-0',\n 'flex-1'\n )}\n >\n {translate('orderlist.column.readmore')}\n \n onClickApprove && onClickApprove(order)}\n className={clsx(\n 'btn',\n 'btn--primary',\n 'btn--small',\n 'col-span-2',\n 'mt-3',\n 'font-bold',\n 'md:col-span-1',\n 'md:mt-0',\n 'flex-1'\n )}\n >\n {translate('orderapproverlist.column.approve')}\n \n
\n \n );\n};\n\nexport default OrderListItemMobile;\n","import React from 'react';\nimport { translate } from '../../../Services/translation';\nimport clsx from 'clsx';\nimport Icon from '../../Icon';\n\nconst OrderListItemDesktop = ({ order, onClick, onClickApprove }) => {\n return (\n \n setShowOnlyMyOrders(!showOnlyMyOrders)}\n >\n {!showOnlyMyOrders\n ? translate('mypage.order.show-only-my-orders')\n : translate('mypage.order.show-organization-orders')}\n \n {!isLoading && (!orderList || orderList.length == 0) && (\n
\n );\n};\n\nexport default MyPagesOrderApprover;\n","import React, { useMemo } from 'react';\nimport { translate } from '../../../Services/translation';\nimport {\n ExtapiInvoiceReturnRequest,\n RmaInvoice,\n} from '../../../Types/MyPages/InvoicesModel';\nimport { groupBy } from 'lodash';\nimport clsx from 'clsx';\n\ninterface MyPagesRmaSummaryProps {\n form: ExtapiInvoiceReturnRequest;\n invoices: RmaInvoice[];\n}\n\nexport default function MyPagesRmaSummary({\n form,\n invoices,\n}: MyPagesRmaSummaryProps) {\n const groupedInvoiceRows = useMemo(\n () =>\n groupBy(\n invoices.flatMap((x) => x.rows),\n (x) => x.invoiceNo\n ),\n [invoices]\n );\n\n return (\n {translate('mypage.order.title')}
\n\n {translate('mypage.orderapprover.text') !==\n 'mypage.orderapprover.text' &&\n translate('mypage.orderapprover.text')}\n
\n {generalError &&{generalError}
}\n{translate('mypage.order.no-orders')}
\n )}\n- \n
- \n
\n
\n \n {translate('general.ordernumber')}\n
\n\n {translate('general.quantity')}\n
\n\n {translate('orderdetail.orderdate')}\n
\n\n {translate('orderdetail.grandtotal')}\n
\n\n \n index !== currentPageIndex && setCurrentPageIndex(index)\n }\n />\n
\n \n
\n ))}\n \n \n );\n}\n","import React, { useEffect, useState } from 'react';\nimport Icon from '../../Icon';\nimport Input from '../../Inputs/Input';\nimport { translate } from '../../../Services/translation';\n\ninterface MyPagesRmaRowQuantityInputProps {\n value: number;\n maxValue: number;\n onChange: (quantity: number) => void;\n}\n\nconst MyPagesRmaRowQuantityInput = ({\n value,\n maxValue,\n onChange,\n}: MyPagesRmaRowQuantityInputProps) => {\n const [quantity, setQuantity] = useState(value);\n\n useEffect(() => {\n setQuantity(value);\n }, [value]);\n\n useEffect(() => {\n if (quantity > maxValue) {\n setQuantity(maxValue);\n onChange(maxValue);\n } else if (quantity <= 0 && maxValue > 1) {\n setQuantity(1);\n onChange(1);\n }\n }, [maxValue, onChange, quantity]);\n\n return (\n \n
\n\n \n
\n {translate('mypage.rma.reference.title')}
\n \n {form.firstName} {form.lastName}\n \n {form.phone}\n {form.email}\n\n
\n {translate('mypage.rma.general.title')}
\n \n {translate('mypage.rma.is.damage.product')}{' '}\n \n {form.isDamagedProduct == 1\n ? translate('mypage.rma.yes')\n : translate('mypage.rma.no')}\n \n \n \n {translate('mypage.rma.been.in.contact')}{' '}\n \n {form.beenInContact == 1\n ? translate('mypage.rma.yes')\n : translate('mypage.rma.no')}\n \n \n {form.beenInContact == 1 && (\n \n {translate('mypage.rma.been.in.contact.with.who')}{' '}\n {form.beenInContactPerson}\n \n )}\n{translate('mypage.rma.header.summary')}
\n\n \n \n
\n )\n )}\n \n
\n\n {Object.keys(groupedInvoiceRows).map((returnInvoice, idx) => (\n \n {translate('mypage.rma.itemnumber')}\n
\n\n {translate('mypage.rma.header.description')}\n
\n\n {translate('mypage.rma.reason')}\n
\n\n {translate('mypage.rma.quantity')}\n
\n\n \n {translate('mypage.rma.invoicenumber')}: {returnInvoice}\n \n
\n {groupedInvoiceRows[returnInvoice]?.map(\n (groupedReturnInvoice, idx) => (\n \n {groupedReturnInvoice.articleNumber}\n
\n\n {groupedReturnInvoice.description}\n
\n\n {groupedReturnInvoice.reason}\n
\n\n {groupedReturnInvoice.returnQuantity}\n
\n\n onChange(quantity - 1)}\n />\n setQuantity(e.target.valueAsNumber)}\n onBlur={(e) => onChange(e.target.valueAsNumber)}\n />\n onChange(quantity + 1)}\n />\n
\n );\n};\n\nexport default MyPagesRmaRowQuantityInput;\n","import React, { useEffect, useState } from 'react';\nimport { translate } from '../../../Services/translation';\n\ninterface MyPagesRmaRowCommentBoxProps {\n value?: string;\n onChange: (comment: string) => void;\n}\n\nconst MyPagesRmaRowCommentBox = ({\n value,\n onChange,\n}: MyPagesRmaRowCommentBoxProps) => {\n const [comment, setComment] = useState(value ?? '');\n\n useEffect(() => {\n setComment(value ?? '');\n }, [value]);\n\n return (\n \n
\n \n {translate('mypage.invoices.articlenumber')}:{' '}\n {row.articleNumber}\n
\n\n onToggle(row, e.target.checked)}\n checked={isSelected}\n />\n
\n \n
\n \n {isSelected && (\n \n
\n \n {translate('mypage.invoices.productname')}\n
\n{row.description}
\n\n
\n \n {translate('mypage.invoices.invoicequantity')}\n
\n{row.pickedQuantity}
\n\n
\n \n {translate('mypage.invoices.unitprice')}\n
\n{row.unitPrice}
\n\n
\n \n {translate('mypage.invoices.lineprice')}\n
\n{row.lineAmount}
\n\n onQuantityChanged(row, value)}\n />\n
\n )}\n \n\n {/* Desktop */}\n \n onCommentChanged(row, value)}\n />\n
\n {row.articleNumber}
\n {row.description}
\n {row.unitPrice}
\n {row.lineAmount}
\n {row.pickedQuantity}
\n \n \n onQuantityChanged(row, value)}\n />\n
\n )}\n \n \n );\n};\n\nexport default MyPagesRmaRowsModal;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport {\n ExtapiInvoice,\n ExtapiInvoiceSearchQueryParams,\n ExtapiInvoiceSearchResult,\n RmaInvoice,\n} from '../../../Types/MyPages/InvoicesModel';\nimport MyPagesInvoiceFilterForm from '../Invoices/MyPagesInvoiceFilterForm';\nimport { getInvoiceHeaders } from '../../../Actions/Invoices.action';\nimport MyPagesInvoiceList from '../Invoices/MyPagesInvoiceList';\nimport Icon from '../../Icon';\nimport { translate } from '../../../Services/translation';\nimport clsx from 'clsx';\nimport MyPagesRmaRowsModal from './MyPagesRmaRowsModal';\n\ninterface MyPagesRmaListProps {\n onInvoiceSaved: (invoice: RmaInvoice) => void;\n currentInvoices: RmaInvoice[];\n}\n\nconst MyPagesRmaList = ({\n onInvoiceSaved,\n currentInvoices,\n}: MyPagesRmaListProps) => {\n const [selectedInvoice, setSelectedInvoice] = useState<\n RmaInvoice | undefined\n >();\n const [invoices, setInvoices] = useState<\n ExtapiInvoiceSearchResult | undefined\n >();\n const [isLoading, setIsLoading] = useState\n onCommentChanged(row, value)}\n />\n
\n \n
\n \n ) : (\n \n {totalReturnQuantity}{' '}\n {translate('mypage.rma.selectedarticles').toLowerCase()}.{' '}\n {currentInvoices.length}{' '}\n {translate('mypage.rma.invoices').toLowerCase()}\n
\n \n
\n )}\n {selectedInvoice && (\n \n e.preventDefault()}\n >\n {rmaState == RmaState.GENERAL && (\n <>\n
\n );\n}\n","var _path, _path2;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nconst SvgArrowSquareOut = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 256 256\",\n width: \"1em\",\n height: \"1em\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"none\",\n d: \"M0 0h256v256H0z\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"none\",\n stroke: \"currentColor\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 16,\n d: \"m216 104-.01-63.99L152 40M136 120l80-80M184 136v72a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8V80a8 8 0 0 1 8-8h72\"\n})));\nexport default SvgArrowSquareOut;","import React, { Fragment, useEffect, useMemo, useState } from 'react';\nimport { translate } from '../../../Services/translation';\nimport {\n ExtapiInvoice,\n InvoiceRow,\n} from '../../../Types/MyPages/InvoicesModel';\nimport clsx from 'clsx';\nimport { Link, useNavigate, useParams } from 'react-router-dom';\nimport { getInvoiceHead } from '../../../Actions/Invoices.action';\nimport ArrowSquareOutIcon from '../../../../icons/arrow-square-out.svg';\nimport Icon from '../../Icon';\n\ninterface GroupedInvoiceRows {\n [parcelNumber: string]: InvoiceRow[];\n}\n\nexport default function MyPageInvoiceDetails() {\n const { id } = useParams();\n const navigate = useNavigate();\n\n const [invoice, setInvoice] = useState{translate('mypage.rma.title')}
\n\n {translate('mypage.rma.description')}\n
\n\n
\n {translate('mypage.rma.general.title')}
\n\n \n {translate('mypage.rma.is.damage.product')}*\n \n
\n \n
\n \n \n {translate('mypage.rma.been.in.contact')}*\n \n
\n \n
\n {beenInContact == 1 && (\n \n \n
\n \n \n
\n \n \n
\n )}\n \n
\n \n )}\n\n {rmaState == RmaState.INVOICE && (\n {translate('mypage.rma.reference.title')}
\n\n
\n \n
\n \n \n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n
\n )}\n\n \n {rmaState != RmaState.FINISH && (\n <>\n {/* Back button */}\n {rmaState != RmaState.GENERAL && (\n \n {translate('mypage.rma.back')}\n \n )}\n {/* Next button */}\n {rmaState != RmaState.SUMMARY && (\n \n {translate('mypage.rma.next')}\n \n )}\n \n )}\n {/* Submit button */}\n {rmaState == RmaState.SUMMARY && (\n \n {translate('mypage.rma.send')}\n \n )}\n {rmaState == RmaState.FINISH && (\n \n {translate('mypage.rma.sent')}\n
\n \n \n
\n \n ))}\n \n \n ))}\n {isLoading &&\n Array.from({ length: 3 }).map((_, idx) => (\n \n navigate(-1)}\n >\n
\n\n \n {invoice?.documentNo && (\n
\n {/* Mobile */}\n \n {translate('mypage.invoices.invoicenumber')}:{' '}\n {invoice?.documentNo}\n
\n )}\n {/* */}\n- \n {errorMessage && (\n \n {errorMessage}\n \n )}\n {!isLoading &&\n invoiceRows &&\n Object.keys(invoiceRows)?.map((parcelNumber, idx) => (\n
\n
\n - \n {invoiceRows[parcelNumber]!.map((row, idx) => (\n
\n
\n \n {translate('mypage.invoices.articlenumber')}:{' '}\n {row.articleNumber}\n
\n\n
\n \n {translate('mypage.invoices.productname')}\n
\n{row.description}
\n\n
\n {!isCredit && (\n \n {translate('mypage.invoices.invoicequantity')}\n
\n{row.invoicedQty}
\n\n
\n )}\n \n {translate('mypage.invoices.unitprice')}\n
\n{row.unitPrice}
\n\n
\n {!isCredit && (\n \n {translate('mypage.invoices.lineprice')}\n
\n{row.lineAmount}
\n\n
\n )}\n \n {translate('mypage.invoices.deliverydate')}\n
\n{row.postingDate}
\n\n
\n \n ))}\n \n {/* Desktop */}\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n - \n
- \n
\n
\n \n {invoiceRows[parcelNumber]!.map((row, idx) => (\n
\n {translate('mypage.invoices.articlenumber')}\n
\n\n {translate('mypage.invoices.productname')}\n
\n\n {translate('mypage.invoices.invoicequantity')}\n
\n {!isCredit && (\n\n {translate('mypage.invoices.unitprice')}\n
\n )}\n\n {translate('mypage.invoices.lineprice')}\n
\n {!isCredit && (\n\n {translate('mypage.invoices.deliverydate')}\n
\n )}\n \n {!isLoading &&\n invoiceRows &&\n Object.keys(invoiceRows)?.map((parcelNumber, idx) => (\n{row.articleNumber}
\n{row.description}
\n{row.invoicedQty}
\n {!isCredit && (\n{row.unitPrice}
\n )}\n{row.lineAmount}
\n {!isCredit && (\n\n {row.postingDate}\n
\n )}\n \n ))}\n\n \n {translate('form.image.storage.open')}\n \n
\n );\n};\n\nexport default MyPagesImageStorage;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { HashRouter, Route, Routes } from 'react-router-dom';\nimport MyPagesMobileMenu from './MyPagesMobileMenu';\nimport MyPagesDesktopMenu from './MyPagesDesktopMenu';\nimport MyPagesSettings from './MyPagesSettings';\nimport MyPagesOrderHistory from './MyPagesOrderHistory';\nimport MyPagesOrderDetail from './MyPagesOrderDetail';\nimport MyPagesUsers from './MyPagesUsers';\nimport MyPagesAddUser from './MyPagesAddUser';\nimport MyPagesEditUser from './MyPagesEditUser';\nimport MyPagesAddresses from './MyPagesAddresses';\nimport MyPagesAddAddress from './MyPagesAddAddress';\nimport MyPagesEditAddress from './MyPagesEditAddress';\nimport { translate } from '../../Services/translation';\nimport ScrollToTop from './ui/ScrollToTop';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport MyPagesInvoices from './Invoices/MyPagesInvoices';\nimport MyPagesPriceLabels from './MyPagesPriceLabels';\nimport MyPagesService from './MyPagesService';\nimport MyPagesOrderApprover from './MyPagesOrderApprover';\nimport MyPagesRma from './rma/MyPagesRma';\nimport MyPageInvoiceDetails from './Invoices/MyPagesInvoiceDetails';\nimport MyPagesImageStorage from './MyPagesImageStorage';\nimport clsx from 'clsx';\n\nconst navigation = [\n { name: translate('mypage.info.title'), url: '/', isB2bOnly: false },\n {\n name: translate('mypage.order.title'),\n url: '/orders',\n isB2bOnly: false,\n },\n {\n name: translate('mypage.person.title'),\n url: '/users',\n isB2bOnly: true,\n },\n {\n name: translate('mypage.address.addresses'),\n url: '/addresses',\n isB2bOnly: true,\n },\n {\n name: translate('mypage.invoices.title'),\n url: '/invoices',\n isB2bOnly: false,\n },\n {\n name: translate('mypage.image.storage.title'),\n url: '/imagestorage',\n isB2bOnly: true,\n },\n {\n name: translate('mypage.pricelabels.title'),\n url: '/pricelabels',\n isB2bOnly: false,\n },\n {\n name: translate('mypage.service.title'),\n url: '/service',\n isB2bOnly: false,\n },\n {\n name: translate('mypage.rma.title'),\n url: '/rma',\n isB2bOnly: false,\n },\n {\n name: translate('mypage.orderapprover.title'),\n url: '/orderapprover',\n isB2bOnly: false,\n },\n];\n\nconst MyPagesContainer = (props) => {\n const { current: userInfo } = useTypedSelector(\n (state) => state.userInfo\n );\n const [ready, setReady] = useState(false);\n\n const filteredNav = useMemo(\n () =>\n navigation.filter((option) =>\n !userInfo?.isBusinessCustomer ? !option.isB2bOnly : true\n ),\n [userInfo?.isBusinessCustomer]\n );\n\n useEffect(() => {\n document.getElementById('my-pages-loading-spinner')?.remove();\n setReady(true);\n }, []); \n\n return (\n <>\n {translate('mypage.image.storage.title')}
\n\n {translate('mypage.image.storage.description')}\n
\n\n {errorMessage &&{errorMessage}
}\n\n\n
\n {blocks.length > 0 && }\n \n \n );\n};\n\nexport default MegaMenu;\n","import React from 'react';\nimport MegaMenu from '../MegaMenu/MegaMenu';\nimport clsx from 'clsx';\n\nconst NavigationLink = ({\n link,\n isActive,\n onLinkHover,\n onMouseLeaveLink,\n onMegaMenuClose,\n blocks,\n right = false,\n}) => (\n <>\n \n {link.links?.length > 0 &&\n link.links\n .sort((a, b) => (a.name > b.name ? 1 : -1))\n .map((subLink, idx) => (\n \n \n {subLink.name ?? <> }\n \n {subLink.links?.length > 0 &&\n subLink.links\n .sort((a, b) => (a.name > b.name ? 1 : -1))\n .slice(0, 5)\n .map((subSubLink) => (\n \n {subSubLink.name}\n \n ))}\n {subLink.links?.length > 5 && (\n \n {translate('megamenu.show-more')}\n \n )}\n
\n ))}\n \n
\n ) : null;\n};\n\nexport default Navigation;\n","import React, { createRef, useEffect, useMemo, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { addOverlay, removeOverlay } from '../../Actions/Overlay.action';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { Pagination, Thumbs, FreeMode, Zoom } from 'swiper';\nimport 'swiper/css/bundle';\nimport 'swiper/css/zoom';\nimport Icon from '../Icon';\nimport SliderImage from '../../Types/SliderImage';\n\ninterface FullscreenImageSliderProps {\n showCloseButton?: boolean;\n images: SliderImage[];\n initialSlide?: number;\n onClosed?: () => void;\n}\n\nconst FullscreenImageSlider = ({\n showCloseButton = true,\n images,\n initialSlide = 0,\n onClosed,\n}: FullscreenImageSliderProps) => {\n const dispatch = useDispatch();\n const contentRef = createRef\n {contentLinks.map((link) => (\n 0 && activeMegaMenuLink == link}\n onLinkHover={() => onLinkHover(link)}\n onMouseLeaveLink={onMouseLeaveLink}\n onMegaMenuClose={onMegaMenuClose}\n blocks={blockElements?.filter(\n (b) =>\n link.blockSystemIds.indexOf(b.dataset['litiumBlockId']) !=\n -1\n )}\n />\n ))}\n
\n \n
\n ) : null;\n};\n\nexport default FullscreenImageSlider;\n","import React, { useEffect, useState } from 'react';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport {\n Pagination,\n Thumbs,\n FreeMode,\n Swiper as SwiperClass,\n} from 'swiper';\nimport 'swiper/css/bundle';\nimport FullscreenImageSlider from '../FullscreenImageSlider/FullscreenImageSlider';\nimport { useMemo } from 'react';\nimport SliderImage from '../../Types/SliderImage';\n\ninterface ProductPageImageSliderProps {\n images: SliderImage[];\n}\n\nconst THUMBNAILS_PER_VIEW = 8;\n\nconst ProductPageImageSlider = ({\n images,\n}: ProductPageImageSliderProps) => {\n const [thumbsSwiper, setThumbsSwiper] = useState<\n SwiperClass | undefined\n >();\n const [fullscreenOpen, setFullscreenOpen] = useState(false);\n const [activeSlideIndex, setActiveSlideIndex] = useState(0);\n const [rendered, setRendered] = useState(false);\n const imageCount = useMemo(\n () => (images && images?.length) || 0,\n [images]\n );\n useEffect(() => setRendered(true), []);\n\n return (\n \n {showCloseButton && (\n setOpen(false)}\n />\n )}\n\n onZoom(swiper.realIndex, scale)}\n pagination={{\n dynamicBullets: true,\n dynamicMainBullets: 3,\n }}\n >\n {images?.map((img, idx) => (\n \n
\n \n {!rendered && images?.length > 0 && (\n 8 ? true : false,\n dynamicMainBullets: 3,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[FreeMode, Pagination, Thumbs]}\n lazy={true}\n loop={true}\n slidesPerView={1}\n className=\"!overflow-x-clip !overflow-y-visible border border-gray-100\"\n onSlideChange={(swiper) =>\n setActiveSlideIndex(swiper.realIndex)\n }\n >\n {images?.map((image, index) => (\n setFullscreenOpen(true)}\n >\n THUMBNAILS_PER_VIEW\n ? THUMBNAILS_PER_VIEW\n : imageCount\n }\n slidesPerGroup={\n imageCount > THUMBNAILS_PER_VIEW\n ? THUMBNAILS_PER_VIEW\n : imageCount\n }\n modules={[FreeMode, Thumbs]}\n className=\"hidden md:block\"\n >\n {images?.map((image, index) => (\n \n setFullscreenOpen(false)}\n initialSlide={activeSlideIndex}\n />\n )}\n
\n );\n};\n\nexport default ProductPageImageSlider;\n","import React from 'react';\nimport { LinkModel } from '../../Types/LinkModel';\nimport clsx from 'clsx';\n\nexport interface BannerItemProps {\n imageUrl: string;\n mobileImageUrl?: string;\n linkText?: string;\n actionText?: string;\n overlay: boolean;\n link?: LinkModel;\n bodyText?: string;\n lazyLoadImage?: boolean;\n className?: string;\n}\n\nconst BannerBlockItem = ({\n imageUrl,\n mobileImageUrl,\n linkText,\n actionText,\n overlay,\n link,\n bodyText,\n lazyLoadImage = false,\n className,\n}: BannerItemProps) => {\n const hasLinkButton = link && actionText;\n\n const DivOrAnchor = ({ children, ...rest }) =>\n hasLinkButton && link?.href ? (\n {children}\n ) : (\n \n
\n )}\n {rendered && (\n <>\n {children}
\n );\n\n return (\n {linkText}
\n {bodyText &&{bodyText}
}\n {hasLinkButton && (\n\n {actionText}\n
\n )}\n \n {overlay && (\n \n
\n )}\n {title}
\n {link?.href && (\n \n {link.text}\n \n )}\n\n
\n ) : (\n product.price.formattedPrice && (\n \n {product.price.formattedCampaignPrice}\n
\n\n
\n {product.price.formattedPrice &&\n translate('product.recommended-price') +\n ': ' +\n product.price.formattedPrice}\n
\n \n\n {product.navPriceServiceEnabled ? (\n
\n )\n )}\n {product.productFee &&\n product.productFee.length > 0 &&\n product.productFee.map(\n (fee) =>\n fee.priceModel.formattedPrice && (\n {product.price.formattedPrice}
\n ) : (\n <>\n\n {translate('product.recommended-price-ex') + ': '}\n
\n{product.price.formattedPrice}
\n \n )}\n\n {product.brand && (\n \n {product.name}\n \n {product.id && (\n
\n {currentPriceToggleType &&\n product.showNavStock &&\n navisionStock?.formattedExpectedArrivalDate && (\n \n {product.brand}\n
\n )}\n\n {translate('product.articleno')} {product.id}\n
\n )}\n {product.hasOtherVariants ? (\n\n
\n ) : (\n <>\n )}\n \n {translate('product.multiple-variants')}\n
\n\n {isInBuyableState &&\n formatIncomingStocksString(\n navisionStock.totalIncomingQuantity,\n navisionStock.firstShipmentQuantity,\n navisionStock.formattedExpectedArrivalDate\n )}\n
\n )}\n \n {isInBuyableState ? (\n <>\n {showBothPrices ? (\n <>\n \n {translate('product.fee')} ({fee.feeTypeName})\n {': '}\n {fee.priceModel.formattedPrice}\n \n )\n )}\n \n ) : (\n defaultPriceSection\n )}\n \n ) : (\n
\n\n {isInBuyableState && (\n \n {(isInBuyableState && navisionPrice?.formattedPrice) ??\n translate('product.placeholder.fetching.price')}\n
\n\n {product.price.formattedPrice &&\n translate('product.recommended-price') +\n ' : ' +\n product.price.formattedPrice}\n
\n {product.productFee &&\n product.productFee.length > 0 &&\n product.productFee.map(\n (fee) =>\n fee.priceModel.formattedPrice && (\n\n {product.price.formattedPrice &&\n translate('product.recommended-price') +\n ' : ' +\n product.price.formattedPrice}\n
\n )}\n\n {products.map((product, idx) => (\n p?.productId === product.id\n )}\n navisionStock={navisionStocks?.find(\n (p) => p?.productId === product?.id\n )}\n currentPriceToggleType={currentPriceToggleType}\n isInBuyableState={isInBuyableState}\n />\n ))}\n
\n );\n};\n\nexport default ProductBlockNoSlider;\n","import { Swiper, SwiperSlide } from 'swiper/react';\nimport React, { useEffect, useState } from 'react';\nimport ProductCard from '../Components/ProductCards/ProductCard';\nimport { Pagination } from 'swiper';\nimport Product from '../Types/Product';\nimport ProductBlockNoSlider from './ProductBlockNoSlider';\nimport clsx from 'clsx';\nimport { getListingPricesJson } from '../Components/NavisionPrice/services/NavisionPriceService';\nimport { useTypedSelector } from '../Hooks/useTypedSelector';\nimport { getListingstocksJson } from '../Components/NavisionStock/services/NavisionStockService';\nimport { ProductStocks } from '../Components/NavisionStock/types/ProductStocks';\nimport useShowBothPrices from '../Hooks/useShowBothPrices';\n\ninterface ProductSliderProps {\n products: Product[];\n}\n\nconst ProductSlider = ({ products }: ProductSliderProps) => {\n const [renderSlider, setRenderSlider] = useState(false);\n const [navisionPrices, setNavisionPrices] = useState<\n ProductPriceResponseItem[]\n >([]);\n const [navisionStocks, setNavisionStocks] = useState\n
\n );\n};\n\nexport default ProductSlider;\n","import React, { useState, useEffect, useMemo } from 'react';\nimport { translate } from '../Services/translation';\nconst MAX_LEN = 300;\n\nconst ProductListHeaderText = ({ value }: { value?: string }) => {\n const [showMore, setShowMore] = useState(false);\n const wordLength = useMemo(() => value?.length ?? 0, [value]);\n\n const resultSubstr = useMemo(\n () => value?.substring(0, MAX_LEN) ?? '',\n [value]\n );\n const result = useMemo(\n () =>\n resultSubstr.substring(\n 0,\n Math.min(resultSubstr.length, resultSubstr.lastIndexOf(' '))\n ),\n [resultSubstr]\n );\n\n useEffect(() => {\n setShowMore(wordLength >= MAX_LEN);\n }, [wordLength]);\n\n return (\n <>\n {!showMore && (\n <>\n \n
\n );\n};\n\nexport default QuickSearchNoHit;\n","import React from 'react';\nimport { SearchItem } from '../../Types/SearchItem';\nimport clsx from 'clsx';\nimport { translate } from '../../Services/translation';\nimport StockStatus from '../StockStatus/StockStatus';\nimport { ProductStocks } from '../NavisionStock/types/ProductStocks';\nimport { formatIncomingStocksString } from '../NavisionStock/services/NavisionStockService';\n\nconst ProductCardQuickSearch = ({\n product,\n showBothPrices,\n navisionPrice,\n navisionStock,\n}: {\n product: SearchItem;\n showBothPrices: boolean;\n navisionPrice?: ProductPriceResponseItem;\n navisionStock?: ProductStocks;\n}) => {\n return (\n \n
\n {title}
}\n {description && (\n\n {navisionPrice?.formattedPrice ??\n translate('product.placeholder.fetching.price')}\n
\n\n {translate('product.recommended-price')}\n {': '}\n {product.price?.formattedPrice}\n
\n \n ) : product.price.formattedCampaignPrice ? (\n\n {product.price.formattedCampaignPrice}{' '}\n \n {product.price.formattedPrice}\n \n
\n ) : (\n product.price.formattedPrice && (\n{product.price.formattedPrice}
\n )\n )}\n {product.productFee &&\n product.productFee.length > 0 &&\n product.productFee.map((fee) => (\n\n {formatIncomingStocksString(\n navisionStock.totalIncomingQuantity,\n navisionStock.firstShipmentQuantity,\n navisionStock.formattedExpectedArrivalDate\n )}\n
\n )}\n \n ) : (\n // Render default stock status (Litium stock) if Navision is unreachable or disabled\n <>\n \n
\n )}\n {totalNumResults > 0 &&\n items?.map(\n (item, idx) =>\n item.items.length > 0 &&\n item.key == activeTab && (\n - \n {items?.map(\n (item, idx) =>\n item.items.length > 0 && (\n
\n \n {translate('quicksearch.showmore')}\n \n
\n )}\n \n );\n};\n\nexport default QuickSearchResult;\n","import React from 'react';\n\nconst QuickSearchInitialTab = ({ sectionList }) => {\n return (\n \n
\n \n );\n};\n\nexport default QuickSearchInitialTab;\n","import React, { useRef, useEffect, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport * as debounce from 'lodash.debounce';\nimport QuickSearchResult from './QuickSearchResult';\nimport { uniqueId } from 'lodash';\nimport { translate } from '../../Services/translation';\nimport { addOverlay, removeOverlay } from '../../Actions/Overlay.action';\nimport {\n query,\n setSearchQuery,\n handleKeyDown,\n toggleInputActive,\n} from '../../Actions/QuickSearch.action';\nimport QuickSearchInitialTab from './QuickSearch.InitialTab';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { QuickSearchModel } from '../../Types/QuickSearchModel';\nimport Icon from '../Icon';\nimport clsx from 'clsx';\nimport useShowBothPrices from '../../Hooks/useShowBothPrices';\n\nconst debouncedQuery = debounce(\n (dispatch, text) => dispatch(query(text)),\n 200\n);\n\nconst QuickSearch = (props: QuickSearchModel) => {\n const quickSearch = useTypedSelector((state) => state.quickSearch);\n const { query, result, showResult, activeTab, inputActive } =\n quickSearch;\n\n const [id] = useState(uniqueId());\n const searchContainer = useRef(null);\n const searchInput = useRef(null);\n const dispatch = useDispatch();\n const searchUrl =\n global['LitiumQuickSearchUrl'] +\n (query.length > 0 ? `?q=${query}` : '');\n const showBothPrices = useShowBothPrices();\n const { currentType: currentPriceToggleType } = useTypedSelector(\n (state) => state.priceToggle\n );\n\n useEffect(() => {\n if (inputActive) {\n dispatch(\n addOverlay('quick-search__' + id, () =>\n dispatch(toggleInputActive(false))\n )\n );\n } else {\n dispatch(removeOverlay('quick-search__' + id));\n }\n }, [dispatch, inputActive, id]);\n\n return (\n \n {sectionList.map((listItem, index) => (\n \n \n {subListItem.text}\n \n ))}\n
\n ))}\n {listItem.sectionTitle}
\n {listItem.sectionLinkList.map((subListItem, index) => (\n\n \n dispatch(toggleInputActive(!inputActive, inputActive))\n }\n />\n {\n const text = encodeURIComponent(event.target.value);\n dispatch(setSearchQuery(text));\n debouncedQuery(dispatch, text);\n }}\n onClick={() => {\n dispatch(toggleInputActive(true));\n }}\n onKeyDown={(event) =>\n dispatch(handleKeyDown(event, { searchUrl }))\n }\n ref={searchInput}\n />\n
\n {showResult && inputActive && result && (\n \n
\n \n {showLabel && (\n \n )}\n \n );\n};\n\nexport default ProgressBar;\n","import React, { forwardRef, useEffect, useState } from 'react';\nimport ProgressBar from '../ProgressBar/ProgressBar';\nimport { translate } from '../../Services/translation';\nimport clsx from 'clsx';\n\ninterface LoadMoreButtonAttributes\n extends React.HTMLAttributes\n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n );\n};\n\nexport default ProductCardPlaceholder;\n","// NavisionStockStatus.tsx\nimport React from 'react';\nimport StockStatus from '../StockStatus/StockStatus';\nimport { formatIncomingStocksString } from '../NavisionStock/services/NavisionStockService';\nimport { ProductStocks } from '../NavisionStock/types/ProductStocks';\n\ninterface NavisionStockStatusProps {\n navisionStock?: ProductStocks;\n}\n\nconst NavisionStockStatus: React.FC\n \n
\n \n {formatIncomingStocksString(\n navisionStock.totalIncomingQuantity,\n navisionStock.firstShipmentQuantity,\n navisionStock.formattedExpectedArrivalDate\n )}\n
\n )}\n \n );\n};\n\nexport default NavisionStockStatus;","import React, { useMemo, useState } from 'react';\nimport { translate } from '../../Services/translation';\nimport { DropdownOption } from '../Dropdown';\nimport StockStatus from '../StockStatus/StockStatus';\nimport ProductCardProps from './types/ProductCardProps';\nimport ResponsiveImage from '../ResponsiveImage/ResponsiveImage';\nimport ProductTag from '../ProductTags/ProductTag';\nimport ProductCardBuyButton from './ProductCardBuyButton';\nimport clsx from 'clsx';\nimport Icon from '../Icon';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport NavisionStockStatus from '../StockStatus/NavisionStockStatus';\n\nconst ProductCardLandscape = ({\n product,\n isVariantListing = false,\n lazyLoadImage,\n navisionPrice,\n showBothPrices,\n isInBuyableState,\n navisionStock,\n}: ProductCardProps) => {\n const { navisionPrices } = useTypedSelector((state) => state.productListing);\n\n const [selectedOption, setSelectedOption] = useState\n
\n }\n\n {product.navPriceServiceEnabled ? (\n \n {navPrice.formattedPrice}\n
\n\n {translate('product.recommended-price')} {product.price?.formattedPrice}\n
\n )\n :\n (\n\n {translate('product.recommended-price-ex')} {product.price?.formattedPrice}\n
\n )}\n\n {product.productFee &&\n product.productFee.length > 0 &&\n product.productFee.map((fee) => (\n\n {product.tags?.length ? (\n \n {product.name}\n \n {product.id && (\n \n {translate('product.fee')} ({fee.feeTypeName}){': '}\n {fee.priceModel.formattedPrice}\n \n ))}\n \n ) : (\n defaultPriceSection\n )}\n {product.showNavStock ? (\n
\n {isInBuyableState && (\n \n {product.tags.map((tag) => (\n \n {tag.name}\n \n ))}\n
\n ) : null}\n \n {product.brand}\n
\n \n {translate('product.articleno')} {product.id}\n
\n )}\n {isInBuyableState && showBothPrices ? (\n <>\n\n {navisionPrice?.formattedPrice ??\n translate('product.placeholder.fetching.price')}\n
\n\n {translate('product.recommended-price')}\n {': '}\n {product.price?.formattedPrice}\n
\n {product.productFee &&\n product.productFee.length > 0 &&\n product.productFee.map((fee) => (\n\n \n
\n \n \n \n
\n \n
\n \n \n );\n};\n\nexport default LandscapeProductCardPlaceholder;\n","import React, {\n useEffect,\n useMemo,\n useState,\n useCallback,\n HTMLAttributes,\n} from 'react';\nimport LoadMoreButton from '../LoadMoreButton/LoadMoreButton';\nimport {\n AutoSizer,\n CellMeasurer,\n CellMeasurerCache,\n Index,\n InfiniteLoader,\n List,\n WindowScroller,\n} from 'react-virtualized';\nimport {\n addPlaceholderProducts,\n fetchProducts,\n setIsLoadingReverse,\n setIsLoadingMore,\n} from '../../Actions/ProductListing.action';\nimport { useDispatch } from 'react-redux';\nimport ProductListingResizeObserver from './ProductListingResizeObserver';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { ProductListingType } from '../../Reducers/ProductListing.reducer';\nimport ProductCard from '../ProductCards/ProductCard';\nimport ProductCardPlaceholder from '../ProductCards/ProductCardPlaceholder';\nimport ProductCardLandscape from '../ProductCards/ProductCardLandscape';\nimport LandscapeProductCardPlaceholder from '../ProductCards/ProductCardLandscapePlaceholder';\nimport { pushEcommerce } from '../../Services/Gtm.service';\nimport clsx from 'clsx';\nimport useCssVariables from '../../Hooks/useCssVariables';\nimport {\n addPlaceholderPricesLoadMore,\n setNavisionListingPricesWithPlaceholders,\n} from '../../Actions/NavisionPrices.action';\nimport {\n addPlaceholderstocksLoadMore,\n setNavisionListingstocksWithPlaceholders,\n} from '../../Actions/NavisionStock.action';\nimport useShowBothPrices from '../../Hooks/useShowBothPrices';\n\nconst cache = new CellMeasurerCache({\n defaultWidth: 150,\n minWidth: 70,\n defaultHeight: 600, // TODO denna bör ändras beroende på vilken typ av vy som används på listan\n fixedWidth: true,\n fixedHeight: false,\n});\n\nconst oneColRowClass = 'grid grid-cols-1 !gap-x-4 pb-4';\n\nconst ProductListing = () => {\n const dispatch = useDispatch();\n\n const cssVars = useCssVariables();\n\n const {\n products,\n isLoadingMore,\n isLoadingReverse,\n totalProductsCount,\n productsPerRow = 4,\n canLoadMore,\n productListingType = ProductListingType.Grid,\n pageSize,\n location,\n pageNumberForCrawler,\n gtmViewModel,\n navisionPrices = [],\n navisionStocks = [],\n } = useTypedSelector((state) => state.productListing);\n\n const showBothPrices = useShowBothPrices();\n const { currentType: currentPriceToggleType } = useTypedSelector(\n (state) => state.priceToggle\n );\n const { isInBuyableState } = useTypedSelector(\n (state) => state.buyableState\n );\n const [ready, setReady] = useState(false);\n const rowCount = useMemo(\n () => Math.ceil(products.length / productsPerRow),\n [products.length, productsPerRow]\n );\n let listRef: List | null = null;\n\n useEffect(() => {\n if (showBothPrices) {\n dispatch(setNavisionListingPricesWithPlaceholders());\n }\n if (currentPriceToggleType != null) {\n dispatch(setNavisionListingstocksWithPlaceholders());\n }\n }, [showBothPrices, currentPriceToggleType]);\n\n const RowComponent = useCallback(\n ({\n children,\n className,\n ...props\n }: HTMLAttributes\n \n
\n \n \n
\n \n {children}\n
\n )}\n {productListingType == ProductListingType.SingleCard && (\n \n {children}\n
\n )}\n \n ),\n [productListingType]\n );\n\n const [ProductComponent, ProductPlaceholderComponent] = useMemo(() => {\n switch (productListingType) {\n case ProductListingType.Grid:\n case ProductListingType.SingleCard:\n default:\n return [ProductCard, ProductCardPlaceholder];\n case ProductListingType.List:\n return [ProductCardLandscape, LandscapeProductCardPlaceholder];\n }\n }, [productListingType]);\n\n useEffect(() => {\n if (!ready) return;\n cache.clearAll();\n listRef?.recomputeRowHeights(0);\n }, [\n listRef,\n ready,\n productListingType,\n products,\n navisionStocks,\n navisionPrices,\n ]);\n\n useEffect(() => {\n if (!ready) {\n pushEcommerce(gtmViewModel);\n }\n setReady(true);\n }, []);\n\n const loadMoreClick = () => {\n const productsPerLoad = 24;\n const startIndex = rowCount;\n const endIndex =\n rowCount + Math.ceil(productsPerLoad / productsPerRow);\n\n dispatch(addPlaceholderProducts(startIndex, endIndex));\n if (showBothPrices) {\n dispatch(addPlaceholderPricesLoadMore(startIndex, endIndex));\n }\n if (currentPriceToggleType != null) {\n dispatch(addPlaceholderstocksLoadMore(startIndex, endIndex));\n }\n dispatch(setIsLoadingMore(true));\n };\n\n const isRowLoaded = ({ index }: Index) => {\n if (isLoadingReverse) return true;\n\n return index >= rowCount || !!products[index * productsPerRow];\n };\n\n const loadMoreRows = ({ startIndex, stopIndex }): Promise\n \n {productsForRow.length > 0 &&\n productsForRow.map((product, idx) =>\n product ? (\n priceItem?.productId === product?.id\n )}\n navisionStock={navisionStocks?.find(\n (stockItem) => stockItem?.productId === product?.id\n )}\n currentPriceToggleType={currentPriceToggleType}\n showBothPrices={showBothPrices}\n key={key + idx}\n lazyLoadImage={true}\n isVariantListing={\n !product.variantOptions ||\n product.variantOptions?.length <= 1\n }\n isInBuyableState={isInBuyableState}\n />\n ) : (\n \n
\n \n );\n },\n [products, productsPerRow, navisionPrices, navisionStocks]\n );\n\n return (\n <>\n {!ready && (\n \n
\n );\n};\nexport default SearchResultLinkTab;\n","import React from 'react';\nimport FilterBar from '../FilterBar/FilterBar';\nimport ProductFiltering from '../ProductFiltering/ProductFiltering';\nimport ProductListing from '../ProductListing/ProductListing';\nimport SearchResultLinkTab from './SearchResultLinkTab';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\n\nconst SearchResult = (props) => {\n const { activeTab = 'products' } = useTypedSelector\n {items.value.map((item) => {\n return (\n \n {item.name}\n \n );\n })}\n
\n \n \n
\n )}\n {props.brandListing?.total > 0 && activeTab == 'brands' && (\n \n
\n - \n {props.productListing.totalProductsCount > 0 && (\n
\n {!currentLink && (\n <>\n 
\n dispatch(setMobileMenuOpen(false))}\n >\n
\n \n )}\n {currentLink && (\n <>\n \n \n
\n }\n >\n {channelPicker.channelPickerItems.map((item) => (\n - \n {links.map((link) => (\n
\n {socialMediaLinks.map((link, idx) => (\n \n 
\n \n ))}\n
\n )}\n \n );\n const onLinkClick = (link) => {\n link.previousLink = previousLink;\n setPreviousLink(currentLink);\n setCurrentLink(link);\n };\n const onBackClick = () => {\n setPreviousLink(previousLink?.previousLink);\n setCurrentLink(previousLink);\n };\n const links = (currentLink?.links ?? contentLinks)\n .filter((l) => !l.rightAligned)\n .sort((a, b) => (a.name > b.name ? 1 : -1));\n useEffect(() => {\n if (mobileMenuOpen) {\n setCurrentLink(null);\n }\n }, [mobileMenuOpen]);\n return (\n <>\n \n {options.map((opt, idx) => (\n onClick(opt)}\n key={'variant-picker' + opt.value + idx}\n >\n {opt.label}\n \n ))}\n
\n );\n};\n\nexport default VariantPickerButtons;\n","import React, { useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { submitChangePassword } from '../../../Actions/Login.action';\nimport { useTypedSelector } from '../../../Hooks/useTypedSelector';\nimport { translate } from '../../../Services/translation';\nimport Input from '../../Inputs/Input';\nimport clsx from 'clsx';\nimport EditorString from '../../EditorString/EditorString';\n\nconst LoginChangePassword = () => {\n const {\n isLoading,\n username = '',\n password = '',\n changePasswordMessage,\n } = useTypedSelector((state) => state.login);\n const [newPassword, setNewPassword] = useState('');\n const [passwordConfirmation, setPasswordConfirmation] = useState('');\n const dispatch = useDispatch();\n\n const onSubmit = (e?: any) => {\n if (e) {\n e.preventDefault();\n }\n dispatch(\n submitChangePassword(\n username,\n password,\n newPassword,\n passwordConfirmation\n )\n );\n };\n\n return (\n <>\n \n
\n \n \n );\n};\n\nexport default LoginChangePassword;\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport {\n submitForgotPassword,\n setUsername,\n setLoginMode,\n submitMagicLink,\n} from '../../../Actions/Login.action';\nimport { useTypedSelector } from '../../../Hooks/useTypedSelector';\nimport { translate } from '../../../Services/translation';\nimport LoginMode from '../../../Types/LoginMode';\nimport Input from '../../Inputs/Input';\nimport clsx from 'clsx';\nimport EditorString from '../../EditorString/EditorString';\n\nconst LoginForgotPassword = () => {\n const {\n username = '',\n isLoading,\n magicLinkModel,\n forgotPasswordMessage,\n } = useTypedSelector((state) => state.login);\n const [isSuccessful, setIsSuccessful] = useState(false);\n const dispatch = useDispatch();\n\n const onSubmit = (e?: any) => {\n if (e) {\n e.preventDefault();\n }\n dispatch(submitForgotPassword(username)).then((success) =>\n setIsSuccessful(success)\n );\n };\n\n useEffect(() => {\n // Send magic link on first render only, if magic link model is in state\n if (!magicLinkModel?.link) return;\n dispatch(submitMagicLink(magicLinkModel));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <>\n {translate('login.change-password')}
\n {changePasswordMessage?.value && (\n\n
\n {!isSuccessful && !magicLinkModel && (\n <>\n \n \n {!magicLinkModel ? (\n translate('login.forgot-password')\n ) : (\n <>{translate('general.loading')}...\n )}\n
\n {forgotPasswordMessage?.value && (\n\n {translate('login.forgot-password.success')}\n
\n\n dispatch(setLoginMode(LoginMode.Login))}\n >\n {translate('general.back')}\n \n
\n \n )}\n \n );\n};\n\nexport default LoginForgotPassword;\n","import React from 'react';\nimport { useDispatch } from 'react-redux';\nimport {\n performLogin as performLoginAction,\n setLoginMode,\n setPassword,\n setUsername,\n} from '../../../Actions/Login.action';\nimport { useTypedSelector } from '../../../Hooks/useTypedSelector';\nimport { translate } from '../../../Services/translation';\nimport LoginMode from '../../../Types/LoginMode';\nimport Input from '../../Inputs/Input';\nimport clsx from 'clsx';\nimport EditorString from '../../EditorString/EditorString';\n\nconst LoginForm = () => {\n const {\n isLoading,\n username = '',\n password = '',\n loginMessage,\n registerUserLink,\n } = useTypedSelector((state) => state.login);\n const dispatch = useDispatch();\n\n const performLogin = (e?: any) => {\n if (e) {\n e.preventDefault();\n }\n dispatch(performLoginAction(username, password));\n };\n\n return (\n <>\n \n
\n \n {translate('general.login')}
\n {loginMessage?.value && (\n\n dispatch(setLoginMode(LoginMode.ForgotPassword))}\n disabled={isLoading}\n className={clsx(\n 'btn',\n 'btn--clear',\n 'btn--medium',\n 'underline',\n 'w-full',\n 'normal-case',\n 'text-md',\n 'font-normal'\n )}\n >\n {translate('login.forgot-password')}\n \n {registerUserLink && (\n \n \n {translate('login.new-customer')}\n \n \n )}\n
\n \n );\n};\n\nexport default LoginForm;\n","import React, { useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { selectOrganization } from '../../../Actions/Login.action';\nimport { useTypedSelector } from '../../../Hooks/useTypedSelector';\nimport { translate } from '../../../Services/translation';\nimport Dropdown from '../../Dropdown';\nimport clsx from 'clsx';\nimport EditorString from '../../EditorString/EditorString';\n\nconst LoginSelectOrganization = () => {\n const dispatch = useDispatch();\n const { organizations, isLoading, selectOrganizationMessage } =\n useTypedSelector((state) => state.login);\n const [selectedOrganizationId, setSelectedOrganizationId] = useState<\n string | undefined\n >();\n\n return organizations ? (\n <>\n \n
\n \n {translate('login.choose-organization')}\n
\n {selectOrganizationMessage?.value && (\n\n
\n \n {translate('login.create-account')}
\n {createAccountMessage?.value && (\n\n {error}\n
\n )}\n {loginMode == LoginMode.Login && \n
\n \n );\n};\nexport default LoginPage;\n","import Icon from '../Icon';\nimport React from 'react';\nimport { useDispatch } from 'react-redux';\nimport { setLoginModalOpen } from '../../Actions/Login.action';\nimport { translate } from '../../Services/translation';\n\nconst LoginModalTrigger = () => {\n const dispatch = useDispatch();\n return (\n \n
\n \n {translate('general.mypages')}\n \n \n );\n};\nexport default LoginModalTrigger;\n","import React from 'react';\nimport { useMemo } from 'react';\nimport Icon from '../Icon';\nimport { InputProps } from './types/Input.types';\nimport clsx from 'clsx';\n\nconst TextArea: React.FC<\n InputProps &\n React.InputHTMLAttributes\n
\n {helperText && (\n {helperText}\n )}\n {message && (\n \n {showMessageIcon && messageIcon}\n {message}\n \n )}\n \n );\n};\n\nexport default TextArea;\n","import React from 'react';\nimport styled, { useTheme } from 'styled-components';\nimport { breakpoint } from '../styling/mixins/breakpoints';\nimport { getColor } from '../styling/mixins/colors';\nimport Checkbox from './Inputs/Checkbox';\nimport Input from './Inputs/Input';\nimport RadioButton from './Inputs/Radiobutton';\nimport TextArea from './Inputs/TextArea';\nimport FilterRangeSlider from './ProductFiltering/FilterOptions/FilterRangeSlider';\nimport { FilterGroupType } from './ProductFiltering/types/FilterGroupType';\n\nconst Wrapper = styled.div`\n background-color: ${(props) => props.color};\n color: ${(props) => props.theme.colors.primary};\n font-size: 32px;\n padding: 0 120px;\n\n .xD {\n background-color: cyan;\n }\n`;\n\nconst StyledSpan = styled.span`\n background-color: ${getColor('grey', 800)};\n ${breakpoint('large')} {\n background-color: red;\n }\n`;\n\nconst Test = ({ color }: { color: string }) => {\n return (\n \n \n
\n );\n};\n\nexport default PriceHistoryModal;\n","import Icon from '../Icon';\nimport React, { useState } from 'react';\nimport PriceHistoryModal from './PriceHistoryModal';\nimport PriceModal from '../../Types/PriceModal';\n\nconst PriceHistoryModalTrigger = (productPriceHistory: PriceModal) => {\n const [modalOpen, setModalOpen] = useState(false);\n\n const onClick = () => {\n setModalOpen(true);\n };\n\n return (\n <>\n \n {modalOpen && (\n {title}
\n{previouslyLowestPrice}
\n{description}
\n\n
\n );\n};\n\nexport default LinkBlock;\n","import React from 'react';\nimport { translate } from '../../../Services/translation';\n\ninterface DetailCard {\n product: {\n link: {\n href: string;\n };\n imageUrl: string;\n name: string;\n articleNumber: string;\n extraInfo: any;\n quantityString: string;\n priceInfo: {\n formattedPrice: string;\n };\n totalPrice: string;\n itemBIDPromotionCode?: string;\n };\n}\n\nconst ProductCard = ({ product }: DetailCard) => {\n return (\n \n {title &&
\n {title}
}\n \n {link?.text}\n \n- \n {links.map((item, idx) => (\n
- \n {item?.thumbnailUrl && (\n \n \n \n\n \n {translate('general.read-more')}\n \n
{item?.link?.text}
\n \n \n ))}\n
\n \n \n \n
\n );\n};\n\nexport default ProductCard;\n","import React, { useMemo } from 'react';\nimport { translate } from '../../Services/translation';\nimport ProductCard from './ui/ProductCard';\nimport { Order } from '../../Types/Order';\nimport { EditorStringModel } from '../../Types/EditorString';\nimport SalesAddress from '../../Types/OrderDetailAddress';\nimport clsx from 'clsx';\n\ninterface OrderDetailProps {\n order: Order;\n isConfirmation: boolean;\n confirmationTitle?: string;\n confirmationText?: EditorStringModel;\n confirmationExtraText?: EditorStringModel;\n}\n\nconst OrderDetailAddress = ({ address }: { address: SalesAddress }) => {\n\n const countriesInChannelList = globalThis.LitiumConstants.countriesInChannel;\n const country = countriesInChannelList.find(x => x.value == address.country)\n\n return (\n <>\n {address.organizationName && {address.organizationName}}\n \n {address.customData.shipToName && address.customData.shipToName}\n \n §\n {address.customData.shipToName2 && address.customData.shipToName2}\n \n {address.address1}\n {address.address2 && {address.address2}}\n {address.zipCode} {address.city}\n {country.text}\n \n );\n};\n\nconst OrderDetail = ({\n order,\n isConfirmation,\n confirmationTitle,\n confirmationText,\n confirmationExtraText,\n}: OrderDetailProps) => {\n const deliveryAddress = useMemo(\n () => (order.deliveries?.length ? order.deliveries[0].address : null),\n [order.deliveries]\n );\n\n return (\n \n \n {product.name}\n \n \n {translate('product.articleno')} {product.articleNumber}\n \n {product.itemBIDPromotionCode && (\n \n {translate('product.item-bid')}: {product.itemBIDPromotionCode}\n \n )}\n {product.extraInfo &&\n product.extraInfo.items.map((item) => (\n \n {item.key}: {item.value}\n \n ))}\n \n {translate('general.quantity')}: {product.quantityString}\n \n \n {translate('product.unitprice')}:{' '}\n {product.priceInfo?.formattedPrice}\n \n \n {translate('general.total')}: {product.totalPrice}\n \n
\n \n
\n )}\n \n ) : (\n {confirmationTitle}
\n\n \n {translate('general.ordernumber')}:\n {order.externalOrderID}\n \n \n {translate('orderdetail.orderdate')}:\n {order.orderDate}\n \n
\n {confirmationText?.value && (\n \n
\n )}\n \n {translate('general.ordernumber')}: {order.externalOrderID}\n
\n\n \n {translate('orderdetail.orderdate')}:\n {order.orderDate}\n \n \n {translate('orderdetail.orderstatus')}:\n {order.status}\n \n
\n \n {order.orderRows.map((product) => (\n
\n {isConfirmation && confirmationExtraText?.value && (\n \n
\n \n {translate('checkout.order.sum')}\n {order.orderTotal}\n
\n {order.orderTotalDiscountAmount && (\n \n {translate('checkout.order.saved')}\n {order.orderTotalDiscountAmount}\n
\n )}\n {!order.isBusinessCustomer && (\n \n {translate('checkout.order.shipping')}\n {order.orderTotalDeliveryCost}\n
\n )}\n {order.orderTotalFee && (\n \n {translate('checkout.order.fee')}\n {order.orderTotalFee}\n
\n )}\n \n {translate('orderdetail.grandtotal')}\n {order.orderGrandTotal}\n
\n \n {translate('checkout.order.vat')}\n {order.orderTotalVat}\n
\n \n {deliveryAddress && (\n
\n \n );\n};\n\nexport default OrderDetail;\n","import React from 'react';\nimport OrderDetail from '../OrderDetail/OrderDetail';\n\nconst OrderConfirmation = ({ title, text, order, extraText }) => {\n return (\n \n \n {translate('orderdetail.deliveryaddress')}\n \n
\n )}\n {order.billingAddress && (\n \n \n {translate('orderdetail.billingaddress')}\n \n
\n )}\n \n \n {translate('orderdetail.paymentmethod')}\n \n {order.paymentMethod}\n
\n \n \n {translate('orderdetail.deliverymethod')}\n \n \n {order.deliveryMethod}{' '}\n {order.selectedServicePointName.length > 0 &&\n `: ${order.selectedServicePointName}`}\n \n
\n {order.preferredDeliveryDate &&\n order.preferredDeliveryDate.length > 0 && (\n \n \n {translate('orderdetail.preferreddeliverydate')}\n \n {order.preferredDeliveryDate}\n
\n )}\n \n {order && (\n
\n );\n};\n\nexport default OrderConfirmation;\n","import React from 'react';\nimport { LinkModel } from '../Types/LinkModel';\n\ninterface BrandsBlockProps {\n title?: string;\n brands: [{ link: LinkModel; imageUrl?: string }];\n link?: LinkModel;\n linkText?: string;\n}\n\nconst BrandsBlock = ({\n title,\n link,\n linkText,\n brands,\n}: BrandsBlockProps) => {\n return (\n \n
\n );\n};\n\nexport default BrandsBlock;\n","import React from 'react';\nimport { EditorStringModel } from '../Types/EditorString';\nimport EditorString from '../Components/EditorString/EditorString';\nimport clsx from 'clsx';\n\ninterface RichTextBlockProps {\n text: EditorStringModel;\n textMobile?: EditorStringModel;\n additionalPaddingX: boolean;\n additionalPaddingY: boolean;\n}\n\nconst RichTextBlock = ({\n text,\n textMobile,\n additionalPaddingX,\n additionalPaddingY,\n}: RichTextBlockProps) => {\n return (\n \n
\n {title}
\n {link && (\n \n {linkText}\n \n )}\n- \n {brands.map((brand) => (\n
- \n
\n \n {\n setCookie(`top-message-${systemId}-visible`, 'close');\n setIsOpen(false);\n }}\n />\n
\n \n {faqList.map((faq) => (\n \n
\n );\n};\n\nexport default FaqAccordion;\n","import React from 'react';\nimport EditorString from '../Components/EditorString/EditorString';\nimport { EditorStringModel } from '../Types/EditorString';\n\ninterface UspItems {\n items: [\n {\n title: string;\n imageUrl: string;\n text: EditorStringModel;\n }\n ];\n}\n\nconst UspBlock = ({ items }: UspItems) => {\n return (\n \n
\n );\n};\n\nexport default UspBlock;\n","import React, { useEffect } from 'react';\nimport Product from '../../Types/Product';\nimport ProductCardLandscape from '../ProductCards/ProductCardLandscape';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { useDispatch } from 'react-redux';\nimport { setNavisionListingPricesWithPlaceholdersByIds } from '../../Actions/NavisionPrices.action';\nimport { setNavisionListingstocksWithPlaceholders, setNavisionListingstocksFromIds } from '../../Actions/NavisionStock.action';\n\ninterface ProductPageVariantListProps {\n variants: Product[];\n}\n\nconst ProductPageVariantList = ({\n variants,\n}: ProductPageVariantListProps) => {\n const dispatch = useDispatch();\n\n const { isInBuyableState } = useTypedSelector((state) => state.buyableState);\n const { navisionStocks } = useTypedSelector((state) => state.productListing); \n\n useEffect(() => {\n if (isInBuyableState) {\n dispatch(setNavisionListingPricesWithPlaceholdersByIds(variants));\n dispatch(setNavisionListingstocksWithPlaceholders());\n }\n }, [])\n\n useEffect(() => {\n dispatch(setNavisionListingstocksFromIds(variants.map(p => p.id)));\n }, [])\n\n return (\n - \n {items.map((item, index) => (\n
\n
\n \n ))}\n {item.title}
\n\n {variants.map((p) => (\n x.productId == p.id)}\n isVariantListing={true}\n key={'ProductPageVariantList' + p.id}\n isInBuyableState={isInBuyableState}\n />\n ))}\n
\n );\n};\n\nexport default ProductPageVariantList;\n","import React, { useCallback, useMemo } from 'react';\nimport Icon from '../Icon';\n\ninterface ScrollToElementButtonProps {\n btnType: 'default' | 'primary' | 'secondary' | 'outlined';\n btnSize:\n | 'xsmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'xlarge';\n selector: string;\n label: string | JSX.Element;\n fullwidth?: boolean;\n iconBefore?: string | JSX.Element;\n iconAfter?: string | JSX.Element;\n}\n\nconst ScrollToElementButton = ({\n btnType,\n btnSize,\n selector,\n label,\n fullwidth = false,\n iconBefore,\n iconAfter,\n}: ScrollToElementButtonProps) => {\n const onClick = () => {\n const elementTopPosition =\n document\n .querySelector(selector)\n ?.getBoundingClientRect().top ?? 0;\n if (!elementTopPosition) return;\n\n const headerHeight =\n document\n .querySelector('#header')\n ?.getBoundingClientRect().height ?? 0;\n\n window.scrollTo({\n top: elementTopPosition - headerHeight,\n behavior: 'smooth',\n });\n };\n\n const IconElement = useCallback(\n ({ icon }: { icon: string | JSX.Element }) => {\n if (typeof icon == 'string') {\n return TODO
\n // \n {children} \n
\n \n );\n};\n","import React from 'react';\nimport SubNavigationCollapsible from './SubNavigationCollapsible';\nimport { SubNavigationLinkModel } from '../../Types/SubNavigationLinkModel';\nimport clsx from 'clsx';\n\nconst SubNavigation = ({ links, name, url }: SubNavigationLinkModel) => {\n return (\n - \n
- \n
- \n {link.links.map((secondLevelLink, idx) => (\n
\n label]:bold rounded border border-gray-300 !pb-0 [&_.ReactCollapsible--content]:!pb-0 [&_>label]:!pl-4 [&_>label]:!pr-4\"\n label={currentLink}\n >\n
\n \n
\n \n );\n};\n\nexport default SubNavigationContainer;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport ProductCard from '../Components/ProductCards/ProductCard';\nimport BannerBlockItem from './BannerBlock/BannerBlockItem';\nimport { BannerBlockProps } from './BannerBlock/BannerBlock';\nimport { ProductNoSliderProps } from './ProductBlockNoSlider';\nimport { LinkModel } from '../Types/LinkModel';\nimport clsx from 'clsx';\nimport { getListingPricesJson } from '../Components/NavisionPrice/services/NavisionPriceService';\nimport { getListingstocksJson } from '../Components/NavisionStock/services/NavisionStockService';\nimport { useTypedSelector } from '../Hooks/useTypedSelector';\nimport { ProductStocks } from '../Components/NavisionStock/types/ProductStocks';\nimport useShowBothPrices from '../Hooks/useShowBothPrices';\n\ninterface ProductAndBannerProps {\n products: ProductNoSliderProps;\n banners: BannerBlockProps;\n showBannerToTheRight: boolean;\n productQuantity: number;\n title?: string;\n link?: LinkModel;\n}\n\nconst ProductsAndBannerBlock = ({\n products: productsBlock,\n banners: bannersBlock,\n showBannerToTheRight,\n title,\n link,\n}: ProductAndBannerProps) => {\n const bannerBlockItem = useMemo(\n () => (bannersBlock.banners?.length ? bannersBlock.banners[0] : null),\n [bannersBlock.banners]\n );\n\n const firstTwoProducts = useMemo(\n () => productsBlock.products?.slice(0, 2),\n [productsBlock]\n );\n const remainingProducts = useMemo(\n () => productsBlock.products?.slice(3),\n [productsBlock]\n );\n const numbersPerRowStyle = {\n 1: 'lg:grid-cols-1',\n 2: 'lg:grid-cols-2',\n 3: 'lg:grid-cols-3',\n 4: 'lg:grid-cols-4',\n 5: 'lg:grid-cols-5',\n 6: 'lg:grid-cols-6',\n };\n\n const [navisionPrices, setNavisionPrices] = useState<\n ProductPriceResponseItem[]\n >([]);\n const showBothPrices = useShowBothPrices();\n const [navisionStocks, setNavisionStocks] = useState\n
\n )}\n {title}
\n {link?.href && (\n \n {link.text}\n \n )}\n\n \n {firstTwoProducts.map((product, idx) => (\n p?.productId === product.id\n )}\n navisionStock={navisionStocks?.find(\n (p) => p?.productId === product?.id\n )}\n currentPriceToggleType={currentPriceToggleType}\n isInBuyableState={isInBuyableState}\n />\n ))}\n
\n )}\n {showBannerToTheRight && (\n \n
\n {firstTwoProducts && (\n \n
\n )}\n \n {remainingProducts?.length ? (\n \n {remainingProducts.map((product, idx) => (\n p?.productId === product.id\n )}\n navisionStock={navisionStocks?.find(\n (p) => p?.productId === product?.id\n )}\n currentPriceToggleType={currentPriceToggleType}\n isInBuyableState={isInBuyableState}\n />\n ))}\n
\n ) : null}\n \n );\n};\n\nexport default ProductsAndBannerBlock;\n","import { useEffect } from 'react';\nimport 'vanilla-cookieconsent';\nimport 'vanilla-cookieconsent/dist/cookieconsent.css';\nimport { translate } from '../../Services/translation';\nimport {\n CookieConsentBlockItem,\n CookieConsentGroup,\n CookieConsentTableHeader,\n} from './Types';\ninterface CookieConsentProps {\n modalTitle: string;\n modalDescription: string;\n settingsTitle: string;\n tableHeaders?: CookieConsentTableHeader[];\n blockItems?: CookieConsentBlockItem[];\n groups?: CookieConsentGroup[];\n revision?: number;\n}\n\nconst CookieConsent = ({\n modalTitle,\n modalDescription,\n settingsTitle,\n tableHeaders = [],\n blockItems = [],\n groups = [],\n revision = 0,\n}: CookieConsentProps) => {\n const getCookieTableItem = (blockItem) => {\n const item = { is_regex: blockItem.isRegex };\n for (let index in tableHeaders) {\n const header = tableHeaders[index];\n if (!header) continue;\n\n if (!blockItem.columns[index]) {\n item[header.key] = '';\n } else {\n item[header.key] = blockItem.columns[index];\n }\n }\n return item;\n };\n\n useEffect(() => {\n if (groups.length == 0) {\n return;\n }\n\n // obtain plugin\n const cc = initCookieConsent();\n\n // run plugin with config\n cc.run({\n current_lang: 'en',\n autoclear_cookies: true, // default: false\n page_scripts: true, // default: false\n revision: revision, // default: 0\n\n languages: {\n en: {\n consent_modal: {\n title: modalTitle,\n description: modalDescription,\n primary_btn: {\n text: translate('cc.accept-all'),\n role: 'accept_all',\n },\n secondary_btn: {\n text: translate('cc.reject-all'),\n role: 'accept_necessary',\n },\n },\n settings_modal: {\n title: settingsTitle,\n save_settings_btn: translate('cc.settings.save'),\n accept_all_btn: translate('cc.accept-all'),\n reject_all_btn: translate('cc.reject-all'),\n close_btn_label: translate('cc.close-all'),\n cookie_table_headers: tableHeaders.map((header) => ({\n [header.key]: header.label,\n })),\n blocks: groups.map((group) => ({\n title: group.title,\n description: group.description,\n toggle: group.toggle ? group.toggle : undefined,\n cookie_table:\n group.key && blockItems[group.key]\n ? blockItems[group.key].map((item) =>\n getCookieTableItem(item)\n )\n : undefined,\n })),\n },\n },\n },\n });\n }, []);\n\n return null;\n};\n\nexport default CookieConsent;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { translate } from '../../Services/translation';\nimport clsx from 'clsx';\nconst MAX_DESCRIPTION_LENGTH = 240;\n\nconst CategoryDescription = ({\n name,\n description,\n images,\n}: {\n name: string;\n description: string;\n images: string[];\n}) => {\n const [showMore, setShowMore] = useState(true);\n const descriptionLength = useMemo(\n () => description?.length,\n [description]\n );\n\n useEffect(() => {\n setShowMore(descriptionLength >= MAX_DESCRIPTION_LENGTH);\n }, [descriptionLength]);\n return (\n \n setShowMore(!showMore)}\n >\n {!showMore\n ? translate('general.show-less')\n : translate('general.show-more')}\n \n )}\n
\n {images && images.length >= 1 && (\n \n \n {name &&
\n {descriptionLength >= MAX_DESCRIPTION_LENGTH && (\n {name}
}\n {description &&{description}
}\n \n
\n )}\n \n );\n};\n\nexport default CategoryDescription;\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { useCookies } from 'react-cookie';\nimport Icon from '../../Icon';\nimport { RetailerPickerItem } from '../types/RetailerItemsPicker';\n\nconst RetailerTypeHeaderDropdown = ({\n options,\n selectedOption,\n currentRegionUrl,\n}: {\n currentRegionUrl: string;\n selectedOption: RetailerPickerItem;\n options: RetailerPickerItem[];\n}) => {\n const [dropdownOpen, setDropdownOpen] = useState- \n {options?.map((option) => (\n
- \n {options?.map((option) => (\n
\n
\n );\n};\n\nexport default HeaderSelectors;\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport Icon from '../../Icon';\nimport { post } from '../../../Services/http';\nimport { translate } from '../../../Services/translation';\n\nconst HeaderDropdown = ({\n options,\n selectedOption,\n}: {\n selectedOption: string;\n options: string[];\n}) => {\n const [dropdownOpen, setDropdownOpen] = useState- \n {options?.map((option) => (\n
\n
\n );\n}\n\nexport default PriceToggle;","import React, { useState } from 'react';\nimport { CustomerApplicationFormModel } from '../types/CustomerApplicationFormModel';\nimport Input from '../../Inputs/Input';\nimport { translate } from '../../../Services/translation';\nimport Checkbox from '../../Inputs/Checkbox';\nimport { submitCustomerApplicationForm } from '../services/CustomerApplicationFormService';\nimport EditorString from '../../EditorString/EditorString';\n\nconst baseLabel = 'forms.customer.application';\nconst inputSize = 'large';\nconst fieldsClassName = 'flex flex-col gap-2';\n\nconst ApplicationForm = ({\n model,\n}: {\n model: CustomerApplicationFormModel;\n}) => {\n const [organizationInputValues, setOrganizationInputValues] = useState<{\n [x: string]: string;\n }>();\n const [billingAddressInputValues, setBillingAddressInputValues] =\n useState<{ [x: string]: string }>();\n const [deliveryAddressInputValues, setDeliveryAddressInputValues] =\n useState<{ [x: string]: string }>();\n const [contactInputValues, setContactInputValues] = useState<{\n [x: string]: string;\n }>();\n const [economyContactEmail, setEconomyContactEmail] = useState