feat: keep cart items on currency change

client-app/core/api/graphql/cart/index.ts

@@ -7,6 +7,7 @@ export * from "./mutations/addOrUpdateCartPayment";
 export * from "./mutations/addOrUpdateCartShipment";
 export * from "./mutations/changeCartComment";
 export * from "./mutations/changeCartConfiguredItem";
+export * from "./mutations/changeCartCurrency";
 export * from "./mutations/changeCartItemQuantity";
 export * from "./mutations/changeFullCartItemQuantity";
 export * from "./mutations/changeFullCartItemsQuantity";

client-app/core/api/graphql/cart/mutations/changeCartCurrency/changeCartCurrencyMutation.graphql

@@ -0,0 +1,7 @@
+#import "../../fragments/fullCart.graphql"
+
+mutation ChangeCartCurrency($command: InputChangeCartCurrencyType!) {
+  changeCartCurrency(command: $command) {
+    ...fullCart
+  }
+}

client-app/core/api/graphql/cart/mutations/changeCartCurrency/index.ts

@@ -0,0 +1,16 @@
+import { useMutation } from "@/core/api/graphql/composables";
+import { ChangeCartCurrencyDocument } from "@/core/api/graphql/types";
+import { globals } from "@/core/globals";
+
+export function useChangeCartCurrencyMutation() {
+  const { storeId, currencyCode, cultureName } = globals;
+  return useMutation(ChangeCartCurrencyDocument, {
+    variables: {
+      command: {
+        storeId,
+        cultureName,
+        currencyCode,
+      },
+    },
+  });
+}

client-app/core/api/graphql/cart/mutations/clearCart/index.ts

@@ -2,6 +2,7 @@ import { useApolloClient } from "@vue/apollo-composable";
 import { useCartMutationVariables } from "@/core/api/graphql/cart/composables";
 import { useMutation } from "@/core/api/graphql/composables";
 import { ClearCartDocument } from "@/core/api/graphql/types";
+import { globals } from "@/core/globals";
 import type { CartIdFragment, CartType } from "@/core/api/graphql/types";
 import type { MaybeRef } from "vue";
 
@@ -12,6 +13,18 @@ export function useClearCartMutation(cart?: MaybeRef<CartIdFragment | undefined>
   return result;
 }
 
+export function useClearCurrencyCartMutation() {
+  const { storeId, cultureName } = globals;
+  return useMutation(ClearCartDocument, {
+    variables: {
+      command: {
+        storeId,
+        cultureName,
+      },
+    },
+  });
+}
+
 /** @deprecated Use {@link useClearCartMutation} instead. */
 export async function clearCart(cartId: string): Promise<CartType> {
   const { mutate } = useClearCartMutation({ id: cartId });

client-app/pages/account/profile.vue

@@ -86,9 +86,11 @@ import { useForm } from "vee-validate";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import * as yup from "yup";
+import { useChangeCartCurrencyMutation } from "@/core/api/graphql";
 import { useCurrency, usePageHead, useThemeContext } from "@/core/composables";
 import { useLanguages } from "@/core/composables/useLanguages";
 import { ProfileUpdateSuccessModal, useUser } from "@/shared/account";
+import { dataChangedEvent, useBroadcast } from "@/shared/broadcast";
 import { useModal } from "@/shared/modal";
 
 const MAX_NAME_LENGTH = 64;
@@ -99,6 +101,8 @@ const { themeContext } = useThemeContext();
 const { openModal } = useModal();
 const { removeLocaleFromUrl, unpinLocale } = useLanguages();
 const { supportedCurrencies, saveCurrencyCode } = useCurrency();
+const { mutate: changeCartCurrency } = useChangeCartCurrencyMutation();
+const broadcast = useBroadcast();
 
 usePageHead({
   title: computed(() => t("pages.account.profile.meta.title")),
@@ -137,8 +141,15 @@ function applyLanguage(): void {
   removeLocaleFromUrl();
 }
 
-function applyCurrency(): void {
+async function applyCurrency(): Promise<void> {
   if (user.value?.contact?.currencyCode) {
+    await changeCartCurrency({
+      command: {
+        userId: user.value.id,
+        newCurrencyCode: user.value.contact.currencyCode,
+      },
+    });
+
     const contactCurrency = supportedCurrencies.value.find((item) => item.code === user.value!.contact!.currencyCode);
 
     if (contactCurrency) {
@@ -154,9 +165,11 @@ const onSubmit = handleSubmit(async (data) => {
   openModal({
     component: ProfileUpdateSuccessModal,
     props: {
-      onClose() {
+      async onClose() {
         applyLanguage();
-        applyCurrency();
+        await applyCurrency();
+
+        void broadcast.emit(dataChangedEvent);
 
         location.reload();
       },

client-app/shared/account/composables/useSignMeIn.ts

@@ -1,10 +1,16 @@
 import { syncRefs, useAsyncState } from "@vueuse/core";
 import { ref } from "vue";
-import { useGetMeQuery, useMergeCartMutation } from "@/core/api/graphql";
+import {
+  useChangeCartCurrencyMutation,
+  useClearCurrencyCartMutation,
+  useGetMeQuery,
+  useMergeCartMutation,
+} from "@/core/api/graphql";
 import { useAuth } from "@/core/composables/useAuth";
 import { useCurrency } from "@/core/composables/useCurrency";
 import { useLanguages } from "@/core/composables/useLanguages";
 import { USER_ID_LOCAL_STORAGE } from "@/core/constants";
+import { globals } from "@/core/globals";
 import { TabsType, openReturnUrl, useBroadcast } from "@/shared/broadcast";
 import { useShortCart } from "@/shared/cart/composables";
 import type { IdentityErrorType } from "@/core/api/graphql/types";
@@ -17,6 +23,9 @@ export function useSignMeIn() {
   const { mutate: mergeCart } = useMergeCartMutation();
   const { unpinLocale, removeLocaleFromUrl } = useLanguages();
   const { supportedCurrencies, saveCurrencyCode } = useCurrency();
+  const { mutate: changeCartCurrency } = useChangeCartCurrencyMutation();
+  const { currencyCode: currentCurencyCode } = globals;
+  const { mutate: clearCurrencyCart } = useClearCurrencyCartMutation();
 
   const { isLoading: loading, execute: signIn } = useAsyncState(
     async () => {
@@ -28,19 +37,31 @@ export function useSignMeIn() {
       // get user that will be applied after reload.
       await getMe();
 
-      if (me.value?.me) {
+      const currencyCode = me.value?.me?.contact?.currencyCode;
+
+      if (me.value?.me && currencyCode) {
         if (cart.value?.id) {
-          await mergeCart({ command: { userId: me.value.me.id, secondCartId: cart.value.id } });
-        }
+          await clearCurrencyCart({
+            command: { userId: me.value.me.id, currencyCode: currentCurencyCode },
+            skipQuery: false,
+          });
 
-        const currencyCode = me.value.me.contact?.currencyCode;
+          await mergeCart({ command: { userId: me.value.me.id, secondCartId: cart.value.id } });
 
-        if (currencyCode) {
-          const contactCurrency = supportedCurrencies.value.find((item) => item.code === currencyCode);
-          if (contactCurrency) {
-            saveCurrencyCode(contactCurrency.code, false);
+          if (currencyCode !== currentCurencyCode) {
+            await changeCartCurrency({
+              command: {
+                userId: me.value.me.id,
+                newCurrencyCode: currencyCode,
+              },
+            });
           }
         }
+
+        const contactCurrency = supportedCurrencies.value.find((item) => item.code === currencyCode);
+        if (contactCurrency) {
+          saveCurrencyCode(contactCurrency.code, false);
+        }
       }
 
       void broadcast.emit(openReturnUrl, undefined, TabsType.ALL);

client-app/shared/layout/components/currency-selector/currency-selector.vue

@@ -38,12 +38,34 @@
 </template>
 
 <script setup lang="ts">
+import { useChangeCartCurrencyMutation } from "@/core/api/graphql";
 import { useCurrency } from "@/core/composables";
+import { globals } from "@/core/globals";
+import { dataChangedEvent, useBroadcast } from "@/shared/broadcast";
+import { useFullCart } from "@/shared/cart";
 
 const { currentCurrency, supportedCurrencies, saveCurrencyCode } = useCurrency();
+const { cart } = useFullCart();
+const { mutate: changeCartCurrency } = useChangeCartCurrencyMutation();
+const broadcast = useBroadcast();
+const { userId } = globals;
 
-function select(code: string) {
+async function select(code: string): Promise<void> {
   if (currentCurrency.value?.code !== code) {
+    if (cart.value) {
+      await changeCartCurrency({
+        command: {
+          userId,
+          cartId: cart.value.id,
+          cartName: cart.value.name,
+          cartType: cart.value.type,
+          newCurrencyCode: code,
+        },
+      });
+    }
+
+    void broadcast.emit(dataChangedEvent);
+
     saveCurrencyCode(code);
   }
 }

client-app/shared/layout/components/language-selector/language-selector.vue

@@ -50,15 +50,20 @@
 <script setup lang="ts">
 import { useLanguages } from "@/core/composables/useLanguages";
 import { languageToCountryMap } from "@/core/constants";
+import { dataChangedEvent, useBroadcast } from "@/shared/broadcast";
 import type { ILanguage } from "@/core/types";
 
 const { pinedLocale, supportedLanguages, pinLocale, removeLocaleFromUrl, currentLanguage } = useLanguages();
+const broadcast = useBroadcast();
 
 function select(locale: string) {
   if (locale !== pinedLocale.value) {
     pinLocale(locale);
     removeLocaleFromUrl();
-    location.reload();
+
+    void broadcast.emit(dataChangedEvent);
+
+    void location.reload();
   }
 }