cloudcommerce 0.8.7 → 0.9.0

package/packages/storefront/src/lib/components/globals/Fade.vue

@@ -95,10 +95,10 @@ const onEnter = (el: HTMLElement) => {
     el.style.visibility = 'hidden';
     // eslint-disable-next-line no-shadow
     const { width, height } = getComputedStyle(el);
-    el.style.width = isSlideY.value ? null : '0';
-    el.style.height = isSlideY.value ? '0' : null;
-    el.style.position = null;
-    el.style.visibility = null;
+    el.style.width = isSlideY.value ? '' : '0';
+    el.style.height = isSlideY.value ? '0' : '';
+    el.style.position = '';
+    el.style.visibility = '';
     // Force repaint to make sure the animation is triggered correctly
     // eslint-disable-next-line no-unused-expressions
     getComputedStyle(el)[isSlideY.value ? 'height' : 'width'];
@@ -113,7 +113,7 @@ const onEnter = (el: HTMLElement) => {
 };
 const onAfterEnter = (el: HTMLElement) => {
   if (props.slide && !props.isFloating && props.isEnterFrom) {
-    el.style[isSlideY.value ? 'height' : 'width'] = null;
+    el.style[isSlideY.value ? 'height' : 'width'] = '';
   }
 };
 const onLeave = (el: HTMLElement) => {

package/packages/storefront/src/lib/composables/use-hero-slider.ts

@@ -0,0 +1,38 @@
+import { computed } from 'vue';
+import { parseShippingPhrase } from '@@sf/state/modules-info';
+
+export interface Props {
+  autoplay?: number;
+  slides: Array<{
+    img?: string;
+    alt?: string;
+    mobileImg?: string;
+    href?: string;
+    title?: string;
+    subtitle?: string;
+    buttonLink?: string;
+    buttonText?: string;
+  }>;
+}
+
+const useHeroSlider = (props: Props) => {
+  const parsedSlides = computed(() => {
+    return props.slides.map((slide) => {
+      const title = slide.title
+        ? parseShippingPhrase(slide.title).value : '';
+      const subtitle = slide.subtitle
+        ? parseShippingPhrase(slide.subtitle).value : '';
+      const buttonText = slide.buttonText
+        ? parseShippingPhrase(slide.buttonText).value : '';
+      return {
+        ...slide,
+        hasHeader: Boolean(title || subtitle || buttonText),
+      };
+    });
+  });
+  return {
+    parsedSlides,
+  };
+};
+
+export default useHeroSlider;

package/packages/storefront/src/lib/composables/use-prices.ts

@@ -10,10 +10,13 @@ export interface Props {
   isAmountTotal?: boolean;
   installmentsOption?: ListPaymentsResponse['installments_option'];
   discountOption?: ListPaymentsResponse['discount_option'];
-  loyaltyPointsProgram?: ListPaymentsResponse['loyalty_points_programs']['k'];
+  loyaltyPointsProgram?: Exclude<ListPaymentsResponse['loyalty_points_programs'], undefined>['k'];
 }
 
-const getPriceWithDiscount = (price: number, discount: Props['discountOption']) => {
+const getPriceWithDiscount = (
+  price: number,
+  discount: Exclude<Props['discountOption'], undefined>,
+) => {
   const { type, value } = discount;
   let priceWithDiscount: number;
   if (value) {
@@ -134,7 +137,7 @@ const usePrices = (props: Props) => {
       const programIds = Object.keys(pointsPrograms);
       for (let i = 0; i < programIds.length; i++) {
         const program = pointsPrograms[programIds[i]];
-        if (program && program.earn_percentage > 0) {
+        if (program?.earn_percentage && program.earn_percentage > 0) {
           return program;
         }
       }

package/packages/storefront/src/lib/composables/use-shop-header.ts

@@ -1,27 +1,44 @@
 import type { Ref } from 'vue';
-import type { CategoriesList } from '@cloudcommerce/api/types';
+import type { ResourceId, Categories, CategoriesList } from '@cloudcommerce/api/types';
 import { computed } from 'vue';
 import useStickyHeader from '@@sf/composables/use-sticky-header';
 
 export interface Props {
-  header: Ref<HTMLElement>;
+  header: Ref<HTMLElement | null>;
   categories: CategoriesList;
   menuCategorySlugs?: string[];
   menuRandomCategories?: number;
   isAlphabeticalSortSubmenu?: boolean;
 }
 
-type CategoryTree = CategoriesList[0] & {
-  subcategories: Array<CategoryTree>,
+type MainCategory = Partial<Categories> & {
+  _id: ResourceId,
+  name: string,
+  slug: string,
+  parent: undefined,
+};
+type Subcategory = Partial<Categories> & {
+  _id: ResourceId,
+  name: string,
+  slug: string,
+  parent: Exclude<Categories['parent'], undefined>,
+};
+
+export type SubcategoryTree = Subcategory & {
+  subcategories: Array<SubcategoryTree>,
+};
+
+export type CategoryTree = MainCategory & {
+  subcategories: Array<SubcategoryTree>,
 };
 
 const filterMainCategories = (
   categories: CategoriesList,
   featuredSlugs?: string[],
 ) => {
-  const mainCategories = categories.filter(({ slug, parent }) => {
-    return slug && !parent;
-  });
+  const mainCategories = categories.filter(({ name, slug, parent }) => {
+    return name && slug && !parent;
+  }) as Array<MainCategory>;
   if (featuredSlugs?.length) {
     mainCategories.sort((a, b) => {
       const indexA = featuredSlugs.indexOf(a.slug);
@@ -42,13 +59,13 @@ const filterSubcategories = (
   parentCategory: CategoriesList[0],
   isAlphabeticalSort = false,
 ) => {
-  const subcategories = categories.filter(({ slug, parent }) => {
-    if (slug && parent) {
+  const subcategories = categories.filter(({ name, slug, parent }) => {
+    if (name && slug && parent) {
       return parent._id === parentCategory._id
         || (parent.slug && parent.slug === parentCategory.slug);
     }
     return false;
-  });
+  }) as Array<Subcategory>;
   if (isAlphabeticalSort) {
     subcategories.sort((a, b) => {
       if (a.name < b.name) return -1;
@@ -71,7 +88,7 @@ const useShopHeader = ({
     staticY,
   } = useStickyHeader({ header });
   const positionY = computed(() => {
-    return isSticky.value ? header.value.offsetHeight : staticY.value;
+    return isSticky.value ? header.value?.offsetHeight : staticY.value;
   });
   const mainCategories = filterMainCategories(categories, menuCategorySlugs);
   const getSubcategories = (parentCategory: CategoriesList[0]) => {
@@ -81,7 +98,8 @@ const useShopHeader = ({
       !!isAlphabeticalSortSubmenu,
     );
   };
-  const getCategoryTree = (parentCategory: CategoriesList[0]): CategoryTree => {
+  const getCategoryTree = <T extends CategoriesList[0]>(parentCategory: T):
+  T & { subcategories: SubcategoryTree[] } => {
     return {
       ...parentCategory,
       subcategories: getSubcategories(parentCategory).map((subcategory) => {
@@ -121,5 +139,3 @@ export {
   filterMainCategories,
   filterSubcategories,
 };
-
-export type { CategoryTree };

package/packages/storefront/src/lib/composables/use-sticky-header.ts

@@ -13,7 +13,7 @@ import {
 } from '@vueuse/core';
 
 export interface Props {
-  header: Ref<HTMLElement>;
+  header: Ref<HTMLElement | null>;
   canSetStyles?: boolean;
   canCreateHeightDiv?: boolean;
   isShownOnScrollDown?: boolean;
@@ -38,11 +38,11 @@ const useStickyHeader = (props: Props) => {
   const isSticky = computed(() => ready.value && y.value > staticY.value * 1.2);
   const transition = ref('none');
   watch(isSticky, async (_isSticky) => {
-    if (canSetStyles) {
-      header.value.style.position = _isSticky ? 'sticky' : null;
+    if (canSetStyles && header.value) {
+      header.value.style.position = _isSticky ? 'sticky' : '';
     }
     if (heightDiv) {
-      heightDiv.style.height = _isSticky ? `${staticHeight.value}px` : null;
+      heightDiv.style.height = _isSticky ? `${staticHeight.value}px` : '';
     }
     if (!_isSticky) {
       start();
@@ -58,10 +58,12 @@ const useStickyHeader = (props: Props) => {
   });
   if (!import.meta.env.SSR) {
     onMounted(() => {
+      if (!header.value) throw new Error('<header> (props.header) not set');
       const fixHeight = () => {
-        staticHeight.value = header.value.offsetHeight;
+        const headerElm = header.value as HTMLElement;
+        staticHeight.value = headerElm.offsetHeight;
         staticY.value = staticHeight.value
-          + window.pageYOffset + header.value.getBoundingClientRect().top;
+          + window.pageYOffset + headerElm.getBoundingClientRect().top;
         start();
       };
       const imgs = header.value.getElementsByTagName('IMG');
@@ -80,22 +82,23 @@ const useStickyHeader = (props: Props) => {
       if (canSetStyles) {
         header.value.style.willChange = 'transform';
         watch([isSticky, isScrollUp], ([_isSticky, _isScrollUp]) => {
-          let opacity: string | null = null;
-          let transform: string | null = null;
+          let opacity: string = '';
+          let transform: string = '';
           if (_isSticky && (!_isScrollUp || isShownOnScrollDown)) {
             opacity = '0';
             transform = 'translateY(-100%)';
           }
-          header.value.style.opacity = opacity;
-          header.value.style.transform = transform;
+          const headerElm = header.value as HTMLElement;
+          headerElm.style.opacity = opacity;
+          headerElm.style.transform = transform;
         });
         watch(transition, (_transition) => {
-          header.value.style.transition = _transition;
+          (header.value as HTMLElement).style.transition = _transition;
         });
       }
       if (canCreateHeightDiv) {
         heightDiv = document.createElement('div');
-        header.value.parentElement.insertBefore(heightDiv, header.value);
+        header.value.parentElement?.insertBefore(heightDiv, header.value);
       }
     });
   }

package/packages/storefront/src/lib/layouts/Base.astro

@@ -11,7 +11,7 @@ export interface Props {
 
 const { pageContext, title } = Astro.props as Props;
 const { cms } = pageContext;
-const cmsCustomCode = await cms('code');
+const { custom_code: cmsCustomCode } = await cms('layout');
 ---
 
 <head>

package/packages/storefront/src/lib/layouts/BaseBody.astro

@@ -16,10 +16,10 @@ const { settings } = Astro.props.pageContext;
 
 <body>
   <div id="teleported-overlap" class="relative z-50"></div>
-  <div id="teleported-top" class="relative z-0"></div>
+  <div id="teleported-top" class="relative z-10"></div>
   <slot />
   <slot name="before-body-end" />
-  <div id="teleported-bottom" class="relative z-0"></div>
+  <div id="teleported-bottom" class="relative z-10"></div>
   {settings.icon &&
     <Picture
       src={settings.icon}

package/packages/storefront/src/lib/layouts/BaseHead.astro

@@ -31,11 +31,11 @@ const description = state.meta_description || state.short_description || setting
 const favicon = settings.icon ? getIconUrl(32) : '/favicon.ico';
 const shortcutIcon = settings.icon ? getIconUrl(192) : null;
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site || `https://${domain}`);
-const cmsMetatags = await cms('metatags');
+const { metatags: cmsMetatags } = await cms('layout');
 const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
 let ogImage: string | undefined;
 if (apiDoc) {
-  const picture = getImg(state, null, 'zoom');
+  const picture = getImg(state, undefined, 'zoom');
   ogImage = picture && picture.url;
 }
 if (!ogImage) {

package/packages/storefront/src/lib/layouts/sections/use-hero-section.ts

@@ -0,0 +1,48 @@
+import type { PageContext } from '@@sf/ssr-context';
+import type { CmsHome } from '@@sf/cms';
+import type { Props as UseHeroSliderProps } from '@@sf/composables/use-hero-slider';
+
+export type HeroSliderProps = Omit<UseHeroSliderProps, 'slides'> & {
+  slides: Array<Omit<UseHeroSliderProps['slides'][0], 'img'> & { img: string }>,
+};
+
+export interface Props {
+  pageContext: PageContext;
+}
+
+const useHeroSection = async ({ pageContext }: Props) => {
+  const { cmsContent } = pageContext;
+  const heroSlider: HeroSliderProps = { slides: [] };
+  const cmsHero: CmsHome['hero'] | undefined = cmsContent?.hero;
+  if (cmsHero) {
+    heroSlider.autoplay = cmsHero.autoplay;
+    const now = Date.now();
+    cmsHero.slides?.forEach(({
+      img,
+      start,
+      end,
+      mobile_img: mobileImg,
+      button_link: buttonLink,
+      button_text: buttonText,
+      ...rest
+    }) => {
+      if (!img) return;
+      if (start && new Date(start).getTime() < now) return;
+      if (end && new Date(end).getTime() > now) return;
+      heroSlider.slides.push({
+        ...rest,
+        img,
+        mobileImg,
+        buttonLink,
+        buttonText,
+      });
+    });
+  }
+  return {
+    heroSlider,
+  };
+};
+
+export default useHeroSection;
+
+export { useHeroSection };

package/packages/storefront/src/lib/layouts/use-home-main.ts

@@ -0,0 +1,16 @@
+import type { PageContext } from '@@sf/ssr-context';
+import useHeroSection from '@@sf/layouts/sections/use-hero-section';
+
+export interface Props {
+  pageContext: PageContext;
+}
+
+const useHomeMain = async ({ pageContext }: Props) => {
+  return {
+    ...(await useHeroSection({ pageContext })),
+  };
+};
+
+export default useHomeMain;
+
+export { useHomeMain };

package/packages/storefront/src/lib/layouts/use-page-layout.ts

@@ -0,0 +1,41 @@
+import type { PageContext } from '@@sf/ssr-context';
+import type { CmsLayout } from '@@sf/cms';
+import type { Props as PitchBarProps } from '@@sf/composables/use-pitch-bar';
+import type { Props as UseShopHeaderProps } from '@@sf/composables/use-shop-header';
+
+type ShopHeaderProps = Omit<UseShopHeaderProps, 'header'> & {
+  serviceLinks?: CmsLayout['service_links'],
+};
+
+export interface Props {
+  pageContext: PageContext;
+}
+
+const usePageLayout = async ({ pageContext }: Props) => {
+  const { apiState, cms } = pageContext;
+  const {
+    header: cmsHeader,
+    service_links: cmsServiceLinks,
+  } = await cms('layout');
+  const pitchBar: PitchBarProps = { slides: [] };
+  if (cmsHeader?.pitch_bar) {
+    pitchBar.slides = cmsHeader.pitch_bar;
+  }
+  const shopHeader: ShopHeaderProps = {
+    categories: apiState.categories || [],
+    menuCategorySlugs: cmsHeader.inline_menu_categories?.featured,
+    menuRandomCategories: cmsHeader.inline_menu_categories?.random,
+    isAlphabeticalSortSubmenu: cmsHeader.alphabetical_sort_submenu,
+    serviceLinks: cmsServiceLinks,
+  };
+  return {
+    pitchBar,
+    shopHeader,
+  };
+};
+
+export default usePageLayout;
+
+export { usePageLayout };
+
+export type { PitchBarProps, ShopHeaderProps };

package/packages/storefront/src/lib/pages/_vue.ts

@@ -11,7 +11,7 @@ const formatPercentage = (value: number, digits = 1) => {
 const createApp = (app: App) => {
   app.use({
     // eslint-disable-next-line no-shadow
-    install: (app: App, options: Record<string, any>) => {
+    install: (app: App, options?: Record<string, any>) => {
       // @ts-ignore
       app.config.globalProperties.$t = (dict, lang) => {
         // @ts-ignore

package/packages/storefront/src/lib/scripts/modules-info-preset.ts

@@ -37,8 +37,11 @@ const getModulesInfoPreset = (settingsModules = globalThis.storefront.settings.m
     }
 
     const settingsShipping = settingsModules.calculate_shipping;
-    if (settingsShipping && settingsShipping.free_shipping_from_value) {
-      modulesInfoPreset.calculate_shipping = settingsShipping;
+    const freeShippingFromValue = settingsShipping?.free_shipping_from_value;
+    if (typeof freeShippingFromValue === 'number') {
+      modulesInfoPreset.calculate_shipping = {
+        free_shipping_from_value: freeShippingFromValue,
+      };
     }
   }
   return modulesInfoPreset;

package/packages/storefront/src/lib/scripts/session-utm.ts

@@ -3,7 +3,12 @@ let utm: { [k: string]: string } = {};
 
 if (!import.meta.env.SSR) {
   const storageKey = 'ecomUtm';
-  utm = JSON.parse(sessionStorage.getItem(storageKey)) || {};
+  const storedValue = sessionStorage.getItem(storageKey);
+  try {
+    utm = (storedValue && JSON.parse(storedValue)) || {};
+  } catch {
+    utm = {};
+  }
 
   let isCurrentUrl;
   const urlParams = new URLSearchParams(window.location.search);

package/packages/storefront/src/lib/ssr-context.ts

@@ -2,9 +2,10 @@ import type { AstroGlobal } from 'astro';
 import type { BaseConfig } from '@cloudcommerce/config';
 import type { ApiError, ApiEndpoint } from '@cloudcommerce/api';
 import type { CategoriesList, BrandsList } from '@cloudcommerce/api/types';
-import type { CMS, CmsSettings } from './cms';
+import type { CMS, CmsSettings, CmsHome } from './cms';
 import { EventEmitter } from 'node:events';
 import api from '@cloudcommerce/api';
+// @ts-ignore
 import _getConfig from '../../storefront.config.mjs';
 
 type StorefrontConfig = {
@@ -17,8 +18,6 @@ type StorefrontConfig = {
   primaryColor: CmsSettings['primary_color'],
   secondaryColor: CmsSettings['secondary_color'],
   settings: CmsSettings,
-  dirContent: string,
-  // eslint-disable-next-line no-unused-vars
   cms: CMS,
 };
 
@@ -60,16 +59,15 @@ const loadPageContext = async (Astro: Readonly<AstroGlobal>, {
   const startedAt = Date.now();
   const urlPath = Astro.url.pathname;
   const isHomepage = urlPath === '/';
-  const { slug } = Astro.params;
   const config = getConfig();
   globalThis.storefront.settings = config.settings;
-  let cmsContent: Record<string, any> | undefined;
+  let cmsContent: CmsHome | Record<string, any> | null | undefined;
   let apiResource: 'products' | 'categories' | 'brands' | 'collections' | undefined;
   let apiDoc: Record<string, any> | undefined;
   const apiState: {
     categories?: CategoriesList,
     brands?: BrandsList,
-    [k: string]: Record<string, any>,
+    [k: string]: Record<string, any> | undefined,
   } = {};
   const apiOptions = {
     fetch,
@@ -79,11 +77,16 @@ const loadPageContext = async (Astro: Readonly<AstroGlobal>, {
     null, // fetch by slug
     ...apiPrefetchEndpoints.map((endpoint) => api.get(endpoint, apiOptions)),
   ];
-  if (slug) {
-    if (cmsCollection) {
-      cmsContent = await config.cms(`${cmsCollection}/${slug}`);
-    } else {
-      apiFetchings[0] = api.get(`slugs/${slug}`, apiOptions);
+  if (isHomepage) {
+    cmsContent = await config.cms('home');
+  } else {
+    const { slug } = Astro.params;
+    if (slug) {
+      if (cmsCollection) {
+        cmsContent = await config.cms(`${cmsCollection}/${slug}`);
+      } else {
+        apiFetchings[0] = api.get(`slugs/${slug}`, apiOptions);
+      }
     }
   }
   try {
@@ -91,10 +94,15 @@ const loadPageContext = async (Astro: Readonly<AstroGlobal>, {
     if (slugResponse) {
       apiResource = slugResponse.data.resource;
       apiDoc = slugResponse.data.doc;
-      apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
+      if (apiDoc) {
+        apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
+      }
     }
-    prefetchResponses.forEach(({ config: { endpoint }, data }) => {
-      apiState[endpoint.replace(/\?.*$/, '')] = data.result || data;
+    prefetchResponses.forEach((response) => {
+      if (response) {
+        const { config: { endpoint }, data } = response;
+        apiState[endpoint.replace(/\?.*$/, '')] = data.result || data;
+      }
     });
   } catch (err: any) {
     const error: ApiError = err;
@@ -129,7 +137,7 @@ const loadPageContext = async (Astro: Readonly<AstroGlobal>, {
   }
   if (apiDoc) {
     globalThis.storefront.context = {
-      resource: apiResource,
+      resource: apiResource as Exclude<typeof apiResource, undefined>,
       doc: apiDoc as any,
       timestamp: Date.now(),
     };
@@ -141,6 +149,7 @@ const loadPageContext = async (Astro: Readonly<AstroGlobal>, {
     apiResource,
     apiDoc,
     apiState,
+    getContent: config.cms,
   };
   emitter.emit('load', pageContext);
   return pageContext;

package/packages/storefront/src/lib/state/customer-session.ts

@@ -49,8 +49,18 @@ const logout = () => {
   firebaseAuth.signOut();
 };
 
+const throwNoAuth = (msg = 'Not authenticated') => {
+  const err: any = new Error(msg);
+  err.isNoAuth = true;
+  throw err;
+};
+
 const authenticate = async () => {
-  const authToken = await firebaseAuth.currentUser.getIdToken();
+  const authToken = await firebaseAuth.currentUser?.getIdToken();
+  if (!authToken) {
+    throwNoAuth('Can\'t get Firebase user ID token');
+    return;
+  }
   const { domain } = window.storefront.settings;
   try {
     const resAuth = await fetch(`https://${domain}/api/passport/token`, {
@@ -70,12 +80,14 @@ const getAccessToken = async () => {
   if (!isAuthenticated.value) {
     await authenticate();
   }
+  if (!session.auth) return throwNoAuth();
   return session.auth.access_token;
 };
 
 const fetchCustomer = async () => {
   const accessToken = await getAccessToken();
-  const { data } = await api.get(`customers/${session.auth.customer_id}`, {
+  const auth = session.auth as Exclude<typeof session.auth, null>;
+  const { data } = await api.get(`customers/${auth.customer_id}`, {
     accessToken,
   });
   session.customer = data;

package/packages/storefront/src/lib/state/shopping-cart/add-cart-item.ts

@@ -3,18 +3,14 @@ import { randomObjectId } from '@ecomplus/utils';
 
 type CartItem = CartSet['items'][0];
 
-const matchItemsFlags = (item: CartItem, newItem: CartItem) => {
-  if (!item.flags && !newItem.flags) {
+const matchItemsFlags = (item: CartItem, { flags: newItemFlags }: CartItem) => {
+  if (!item.flags && !newItemFlags) {
     return true;
   }
-  if (
-    !item.flags
-    || !newItem.flags
-    || item.flags.length !== newItem.flags.length
-  ) {
+  if (!item.flags || !newItemFlags || item.flags.length !== newItemFlags.length) {
     return false;
   }
-  return item.flags.every((flag) => newItem.flags.includes(flag));
+  return item.flags.every((flag) => newItemFlags.includes(flag));
 };
 
 const addCartItem = (cart: CartSet, newItem: CartItem): null | CartItem => {
@@ -47,7 +43,7 @@ const addCartItem = (cart: CartSet, newItem: CartItem): null | CartItem => {
       }
     }
   }
-  const itemCopy = { ...newItem };
+  const itemCopy: CartItem = { ...newItem };
   if (
     !newItem._id
     || newItem._id === newItem.variation_id
@@ -56,9 +52,11 @@ const addCartItem = (cart: CartSet, newItem: CartItem): null | CartItem => {
     itemCopy._id = randomObjectId();
   }
   if (newItem.customizations) {
+    const customizationsCopy: Exclude<CartItem['customizations'], undefined> = [];
     newItem.customizations.forEach((customization, i) => {
-      itemCopy.customizations[i] = { ...customization };
+      customizationsCopy[i] = { ...customization };
     });
+    itemCopy.customizations = customizationsCopy;
   }
   items.push(itemCopy);
   return itemCopy;

package/packages/storefront/src/lib/state/shopping-cart.ts

@@ -12,19 +12,20 @@ const cart = useStorage<CartSet>(storageKey, emptyCart);
 
 const cartItems = computed(() => {
   return cart.items.map((item) => {
-    item.final_price = item.kit_product?.price && item.kit_product.pack_quantity
+    let finalPrice = item.kit_product?.price && item.kit_product.pack_quantity
       ? item.kit_product.price / item.kit_product.pack_quantity
       : item.price;
     if (Array.isArray(item.customizations)) {
       item.customizations.forEach((customization) => {
         if (customization.add_to_price) {
           const { type, addition } = customization.add_to_price;
-          item.final_price += type === 'fixed'
+          finalPrice += type === 'fixed'
             ? addition
             : item.price * (addition / 100);
         }
       });
     }
+    item.final_price = finalPrice;
     const min = item.min_quantity || 1;
     const max = item.max_quantity;
     if (
@@ -41,7 +42,7 @@ const cartItems = computed(() => {
 });
 const subtotal = computed(() => {
   return cartItems.value.reduce((acc, item) => {
-    return acc + (item.quantity * item.final_price);
+    return acc + (item.quantity * (item.final_price || item.price));
   }, 0);
 });
 const shoppingCart = computed({

package/packages/storefront/src/vue-globals.d.ts

@@ -2,6 +2,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@vue/runtime-core';
 import type { FormatPercentage } from '@@sf/pages/_vue';
+import type { CmsSettings } from '@@sf/cms';
 
 type Dictionary = Omit<typeof import('@@i18n'),
   'i19StoreApiResources' | 'i19ApiActions' | 'i19TransactionsType' | 'i19StateRegister' |
@@ -18,8 +19,8 @@ declare module '@vue/runtime-core' {
     };
     $money: typeof import('@ecomplus/utils')['formatMoney'];
     $percentage: FormatPercentage;
-    $settings: typeof globalThis.storefront.settings;
-    $context: typeof globalThis.storefront.context;
+    $settings: Partial<CmsSettings>;
+    $context: typeof window.storefront.context;
   }
 
   export interface GlobalComponents {