fix(composables): proper currency and price context on SSR (#179)

shopware · Apr 27, 2023 · bb64070 · bb64070 · vercel · Apr 27, 2023
1 parent 4369d4a
commit bb64070
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/.changeset/polite-squids-flow.md b/.changeset/polite-squids-flow.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+Currency and price context are properly set during the hydration. `usePrice` is not a shared composable.
diff --git a/packages/composables/src/usePrice.ts b/packages/composables/src/usePrice.ts
@@ -1,10 +1,5 @@
 import { ref } from "vue";
-
-const currencyLocale = ref<string>("");
-const currencyCode = ref<string>("");
-
-// @ToDo make sure why there is no decimal precision in api response
-const decimalPrecision = 2;
+import { createSharedComposable } from "@vueuse/core";
 
 export type UsePriceReturn = {
   /**
@@ -22,7 +17,12 @@ export type UsePriceReturn = {
  * @public
  * @category Product
  */
-export function usePrice(): UsePriceReturn {
+function _usePrice(): UsePriceReturn {
+  const currencyLocale = ref<string>("");
+  const currencyCode = ref<string>("");
+
+  // TODO: make sure why there is no decimal precision in api response
+  const decimalPrecision = 2;
   /**
    * Set init data from backend response
    *
@@ -72,3 +72,5 @@ export function usePrice(): UsePriceReturn {
     getFormattedPrice,
   };
 }
+
+export const usePrice = createSharedComposable(_usePrice);
diff --git a/packages/composables/src/useSessionContext.ts b/packages/composables/src/useSessionContext.ts
@@ -102,6 +102,13 @@ export function useSessionContext(
   const { apiInstance } = useShopwareContext();
   const { init } = usePrice();
 
+  if (newContext) {
+    init({
+      currencyCode: newContext.currency?.isoCode,
+      localeCode: newContext.salesChannel?.language?.locale?.code,
+    });
+  }
+
   const _sessionContext = _useContext("swSessionContext", {
     replace: newContext,
   });