@sonic-equipment/ui 194.0.0 → 196.0.0

package/dist/country-selector/connected-country-selector.js

@@ -2,6 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useMemo, useEffect } from 'react';
 import { logger } from '../logging/logger.js';
+import { useCookiebot } from '../shared/hooks/use-cookiebot.js';
 import { useDisclosure } from '../shared/hooks/use-disclosure.js';
 import { CountrySelectorDialog } from './country-selector-dialog/country-selector-dialog.js';
 import { CountrySelectorTrigger } from './country-selector-trigger/country-selector-trigger.js';
@@ -13,14 +14,24 @@ function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onC
         defaultCountryCode,
         defaultLanguageCode,
     });
+    const { hasResponse: hasCookiebotResponse, isDialogOpen: isCookiebotDialogOpen, } = useCookiebot();
     const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
     const isDismissable = isCountryLanguageSelected;
     useEffect(() => {
-        if (isOpen)
+        if (isOpen && !isCookiebotDialogOpen)
             return;
-        setIsOpen(!isFetching && !isCountryLanguageSelected);
+        setIsOpen(!isFetching &&
+            !isCountryLanguageSelected &&
+            hasCookiebotResponse &&
+            !isCookiebotDialogOpen);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFetching, isCountryLanguageSelected, isOpen]);
+    }, [
+        isFetching,
+        isCountryLanguageSelected,
+        isOpen,
+        hasCookiebotResponse,
+        isCookiebotDialogOpen,
+    ]);
     if (isFetching)
         return null;
     if (error !== undefined) {

package/dist/exports.d.ts

@@ -369,6 +369,7 @@ export * from './shared/ga/types';
 export * from './shared/ga/use-data-layer';
 export * from './shared/hooks/use-breakpoint';
 export * from './shared/hooks/use-cookie';
+export * from './shared/hooks/use-cookiebot';
 export * from './shared/hooks/use-css-link';
 export * from './shared/hooks/use-debounced-callback';
 export * from './shared/hooks/use-disclosure';

package/dist/forms/partials/edit-address-form/edit-address-form.d.ts

@@ -3,6 +3,7 @@ import { Country } from '../../../shared/model/countries-languages';
 export interface EditAddressFormProps {
     address: Address | null | undefined;
     countries: Country[];
+    currentCountry: Country | undefined;
     isLoading: boolean;
 }
-export declare function EditAddressForm({ address, countries, isLoading, }: EditAddressFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditAddressForm({ address, countries, currentCountry: _currentCountry, isLoading, }: EditAddressFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/partials/edit-address-form/edit-address-form.js

@@ -9,17 +9,18 @@ import { Message } from '../../../message/message.js';
 import { validatePhone, validateEmail } from '../../../shared/model/address.js';
 import styles from './edit-address-form.module.css.js';
 
-function EditAddressForm({ address, countries, isLoading, }) {
+function EditAddressForm({ address, countries, currentCountry: _currentCountry, isLoading, }) {
     const t = useFormattedMessage();
     const [companyName, setCompanyName] = useState(address?.companyName || '');
     const [lastName, setLastName] = useState(address?.lastName || '');
-    const currentCountry = countries.find(country => country.id === address?.country?.id);
+    const currentCountry = countries.find(c => c.id === address?.country?.id) || _currentCountry;
     const [selectedCountry, setSelectedCountry] = useState(currentCountry);
-    const currencyHasChanged = selectedCountry?.currencyCode !== currentCountry?.currencyCode;
+    const currencyHasChanged = Boolean(currentCountry) &&
+        selectedCountry?.currencyCode !== currentCountry?.currencyCode;
     if (countries.length === 0) {
         return (jsx(Message, { type: "danger", children: jsx(FormattedMessage, { force: true, id: "No countries available. Unable to change address." }) }));
     }
-    return (jsxs(Fragment, { children: [jsx(TextField, { defaultValue: address?.firstName, isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !address?.companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(address?.companyName)}`), jsx(TextField, { defaultValue: address?.companyName, isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: address?.attention, isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.address1, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address2, isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address3, isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: address?.postalCode, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: address?.city, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsxs("div", { className: styles['span-2'], children: [jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect", onCountryChange: setSelectedCountry, selectedCountry: selectedCountry }), currencyHasChanged && (jsx(Message, { className: styles['currency-warning'], type: "warning", children: jsx(FormattedMessage, { id: "Selecting this country will result in your cart to be converted to the currency {0}", replacementValues: {
+    return (jsxs(Fragment, { children: [jsx(TextField, { defaultValue: address?.firstName, isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { defaultValue: address?.companyName, isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: address?.attention, isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.address1, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address2, isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address3, isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: address?.postalCode, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: address?.city, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsxs("div", { className: styles['span-2'], children: [jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect", onCountryChange: setSelectedCountry, selectedCountry: selectedCountry }), currencyHasChanged && (jsx(Message, { className: styles['currency-warning'], type: "warning", children: jsx(FormattedMessage, { id: "Selecting this country will result in your cart to be converted to the currency {0}", replacementValues: {
                                 '0': selectedCountry?.currencyCode || t('Unknown'),
                             } }) }))] }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.phone, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
                         if (!value)

package/dist/index.js

@@ -360,7 +360,7 @@ export { fetchTranslations } from './shared/api/storefront/services/translation-
 export { fetchCountriesLanguages, fetchCountriesWithLanguages, fetchSettings, updateLocale } from './shared/api/storefront/services/website-service.js';
 export { WishListNameAlreadyExistsError, addWishListItemToWishList, createWishList, deleteWishList, deleteWishListItemFromWishList, getWishList, getWishListItemsByWishListId, getWishLists } from './shared/api/storefront/services/wishlist-service.js';
 export { cart } from './shared/data/cart.data.js';
-export { countries, dutch, english, france, french, german, germany, languages, netherlands, unitedKingdom } from './shared/data/countries-languages.data.js';
+export { countries, dutch, english, france, french, german, germany, languages, netherlands, switzerland, unitedKingdom } from './shared/data/countries-languages.data.js';
 export { navigationData } from './shared/data/navigation.js';
 export { useFeatureFlags } from './shared/feature-flags/use-feature-flags.js';
 export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request } from './shared/fetch/request.js';
@@ -370,6 +370,7 @@ export { isGAEvent } from './shared/ga/types.js';
 export { useDataLayer } from './shared/ga/use-data-layer.js';
 export { useBreakpoint } from './shared/hooks/use-breakpoint.js';
 export { defaultCookieOptions, useCookie } from './shared/hooks/use-cookie.js';
+export { useCookiebot } from './shared/hooks/use-cookiebot.js';
 export { useCSSLink } from './shared/hooks/use-css-link.js';
 export { useDebouncedCallback } from './shared/hooks/use-debounced-callback.js';
 export { useDisclosure } from './shared/hooks/use-disclosure.js';

package/dist/pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.d.ts

@@ -6,9 +6,10 @@ export interface EditAddressesFormData {
     address: ValidAddress;
     notes: string | undefined;
 }
-export declare function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup, onSubmit, }: {
+export declare function EditCheckoutBillToAddressForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }: {
     billTo: BillToModel | undefined | null;
     countries: Country[];
+    currentCountry: Country | undefined;
     isLoading: boolean;
     isPickup: boolean;
     onSubmit: (event: EditAddressesFormData) => void;

package/dist/pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.js

@@ -14,7 +14,7 @@ import { SonicAddress } from './sonic-address.js';
 import styles from './edit-checkout-bill-to-address-form.module.css.js';
 
 const EDIT_ADDRESS_FORM_ID = 'billToForm';
-function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup, onSubmit, }) {
+function EditCheckoutBillToAddressForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }) {
     const t = useFormattedMessage();
     const { data: cart } = useFetchCurrentCart();
     return (jsxs(Fragment, { children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
@@ -43,7 +43,7 @@ function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup,
                                     ? undefined
                                     : formData.get('notes')?.toString() || '',
                             });
-                        }, children: [jsx(EditAddressForm, { address: billTo, countries: countries, isLoading: isLoading }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
+                        }, children: [jsx(EditAddressForm, { address: billTo, countries: countries, currentCountry: currentCountry, isLoading: isLoading }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
 }
 
 export { EDIT_ADDRESS_FORM_ID, EditCheckoutBillToAddressForm };

package/dist/pages/checkout/shipping-page/shipping-page.js

@@ -124,7 +124,7 @@ function ShippingPage() {
     return (jsx(ShippingPageContent, { cart: cart, 
         // TODO: Combine editAddress and readOnlyAddress into one section in order
         // for typescript to correctly infer which properties are set in what case
-        editAddress: jsxs(Fragment, { children: [jsx(EditCheckoutBillToAddressForm, { billTo: cart.billTo, countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+        editAddress: jsxs(Fragment, { children: [jsx(EditCheckoutBillToAddressForm, { billTo: cart.billTo, countries: countries || [], currentCountry: currentCountry, isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
                         if (!cart.billTo)
                             return;
                         formData.current = { address, notes };

package/dist/pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { EditAddressForm } from '../../../../forms/partials/edit-address-form/edit-address-form.js';
 
 function EditBillToAddress() {
-    return (jsx(EditAddressForm, { address: undefined, countries: [], isLoading: false }));
+    return (jsx(EditAddressForm, { address: undefined, countries: [], currentCountry: undefined, isLoading: false }));
 }
 
 export { EditBillToAddress };

package/dist/shared/data/countries-languages.data.d.ts

@@ -6,6 +6,7 @@ export declare const german: Language;
 export declare const netherlands: Country;
 export declare const unitedKingdom: Country;
 export declare const germany: Country;
+export declare const switzerland: Country;
 export declare const france: Country;
 export declare const countries: Country[];
 export declare const languages: Language[];

package/dist/shared/data/countries-languages.data.js

@@ -46,6 +46,14 @@ const germany = {
     name: 'Germany',
     states: null,
 };
+const switzerland = {
+    abbreviation: 'CH',
+    currencyCode: 'CHF',
+    id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f46',
+    languages: [german, french],
+    name: 'Switserland',
+    states: null,
+};
 const france = {
     abbreviation: 'FR',
     currencyCode: 'EUR',
@@ -57,9 +65,10 @@ const france = {
 const countries = [
     netherlands,
     unitedKingdom,
+    switzerland,
     germany,
     france,
 ];
 const languages = [english, dutch, french, german];
 
-export { countries, dutch, english, france, french, german, germany, languages, netherlands, unitedKingdom };
+export { countries, dutch, english, france, french, german, germany, languages, netherlands, switzerland, unitedKingdom };

package/dist/shared/hooks/use-cookiebot.d.ts

@@ -0,0 +1,11 @@
+declare global {
+    interface Window {
+        Cookiebot?: {
+            hasResponse: boolean;
+        };
+    }
+}
+export declare function useCookiebot(): {
+    hasResponse: boolean;
+    isDialogOpen: boolean;
+};

package/dist/shared/hooks/use-cookiebot.js

@@ -0,0 +1,31 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+// https://www.cookiebot.com/en/developer/
+function useCookiebot() {
+    const [hasResponse, setHasResponse] = useState(Boolean(window?.Cookiebot?.hasResponse));
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const handleDialogDisplay = () => {
+        setIsDialogOpen(true);
+    };
+    const handleAcceptDecline = () => {
+        setHasResponse(Boolean(window?.Cookiebot?.hasResponse));
+        setIsDialogOpen(false);
+    };
+    useEffect(() => {
+        window?.addEventListener('CookiebotOnDialogDisplay', handleDialogDisplay);
+        window?.addEventListener('CookiebotOnAccept', handleAcceptDecline);
+        window?.addEventListener('CookiebotOnDecline', handleAcceptDecline);
+        return () => {
+            window?.removeEventListener('CookiebotOnDialogDisplay', handleDialogDisplay);
+            window?.removeEventListener('CookiebotOnAccept', handleAcceptDecline);
+            window?.removeEventListener('CookiebotOnDecline', handleAcceptDecline);
+        };
+    }, []);
+    return {
+        hasResponse,
+        isDialogOpen,
+    };
+}
+
+export { useCookiebot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "194.0.0",
+  "version": "196.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {