feat(VCST-3928): save for later optimistic response

client-app/pages/cart.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-if="!cart?.items?.length && !recentlyBrowsedProducts?.length">
+  <template v-if="!cart?.items?.length && !savedForLaterList?.items?.length && !recentlyBrowsedProducts?.length">
     <VcLoaderOverlay v-if="loading" no-bg />
 
     <VcEmptyPage
@@ -62,15 +62,14 @@
       </VcWidget>
 
       <CartForLater
-        v-if="savedForLaterList?.items?.length && !shouldHide('cart-for-later')"
+        v-if="!shouldHideSavedForLater && savedForLaterList?.items?.length"
         :saved-for-later-list="savedForLaterList"
-        :loading="moveFromSavedForLaterOverflowed"
         class="mt-5"
         @add-to-cart="(lineItemId) => handleMoveToCart([lineItemId])"
       />
 
       <RecentlyBrowsedProducts
-        v-if="recentlyBrowsedProducts.length && !shouldHide('recently-browsed-products')"
+        v-if="recentlyBrowsedProducts.length && !shouldHideRecentlyBrowsed"
         :products="recentlyBrowsedProducts"
         class="mt-5"
       />
@@ -84,7 +83,7 @@
           :items-grouped-by-vendor="lineItemsGroupedByVendor"
           :selected-item-ids="selectedItemIds"
           :validation-errors="cart.validationErrors"
-          :disabled="changeItemQuantityBatchedOverflowed || moveToSavedForLaterOverflowed || selectionOverflowed"
+          :disabled="changeItemQuantityBatchedOverflowed || selectionOverflowed"
           data-test-id="cart.products-section"
           :hide-controls="hideControls"
           @change:item-quantity="changeItemQuantityBatched($event.itemId, $event.quantity)"
@@ -112,15 +111,14 @@
         </template>
 
         <CartForLater
-          v-if="savedForLaterList?.items?.length && !shouldHide('cart-for-later')"
+          v-if="!shouldHideSavedForLater && savedForLaterList?.items?.length"
           :saved-for-later-list="savedForLaterList"
-          :loading="moveFromSavedForLaterOverflowed"
           class="mt-5"
           @add-to-cart="(lineItemId) => handleMoveToCart([lineItemId])"
         />
 
         <RecentlyBrowsedProducts
-          v-if="recentlyBrowsedProducts.length && !shouldHide('recently-browsed-products')"
+          v-if="recentlyBrowsedProducts.length && !shouldHideRecentlyBrowsed"
           :products="recentlyBrowsedProducts"
           class="mt-5"
         />
@@ -292,9 +290,7 @@ const { couponCode, couponIsApplied, couponValidationError, applyCoupon, removeC
 const {
   savedForLaterList,
   moveToSavedForLater,
-  moveToSavedForLaterOverflowed,
   moveFromSavedForLater,
-  moveFromSavedForLaterOverflowed,
   getSavedForLater,
   loading: saveForLaterLoading,
 } = useSavedForLater();
@@ -344,19 +340,19 @@ function handleSelectItems(value: { itemIds: string[]; selected: boolean }) {
 }
 
 async function handleSaveForLater(itemIds: string[]) {
-  if (!itemIds?.length || !cart.value?.id) {
+  if (!itemIds?.length) {
     return;
   }
 
-  await moveToSavedForLater(cart.value.id, itemIds);
+  await moveToSavedForLater(itemIds);
 }
 
 async function handleMoveToCart(itemIds: string[]) {
-  if (!itemIds?.length || !cart.value?.id) {
+  if (!itemIds?.length) {
     return;
   }
 
-  await moveFromSavedForLater(cart.value.id, itemIds);
+  await moveFromSavedForLater(itemIds);
 }
 
 function selectItemEvent(item: LineItemType | undefined): void {
@@ -370,6 +366,10 @@ function selectItemEvent(item: LineItemType | undefined): void {
   });
 }
 
+const shouldHideSavedForLater = computed(() => !isAuthenticated.value || shouldHide("cart-for-later"));
+
+const shouldHideRecentlyBrowsed = computed(() => shouldHide("recently-browsed-products"));
+
 function shouldHide(id: string) {
   return props.blocksToHide?.includes(id);
 }
@@ -431,10 +431,10 @@ void (async () => {
   }
 
   const isXRecommendModuleEnabled = isEnabledXRecommend(XRECOMMEND_ENABLED_KEY);
-  if (isAuthenticated.value && isXRecommendModuleEnabled && !shouldHide("recently-browsed-products")) {
+  if (isAuthenticated.value && isXRecommendModuleEnabled && !shouldHideRecentlyBrowsed.value) {
     recentlyBrowsedProducts.value = (await recentlyBrowsed())?.products || [];
   }
-  if (isAuthenticated.value && !shouldHide("cart-for-later")) {
+  if (!shouldHideSavedForLater.value) {
     await getSavedForLater();
   }
 })();

client-app/shared/cart/composables/useSaveForLater.ts

@@ -1,43 +1,81 @@
 import { ApolloError } from "@apollo/client/core";
-import { useMutation } from "@vue/apollo-composable";
+import { useMutation, useLazyQuery } from "@vue/apollo-composable";
 import { createSharedComposable } from "@vueuse/core";
-import { ref, computed } from "vue";
+import { computed } from "vue";
 import { AbortReason } from "@/core/api/common/enums";
-import { getSavedForLater as getSavedForLaterQuery } from "@/core/api/graphql/cart/queries/getSavedForLater";
-import { MoveToSavedForLaterDocument, MoveFromSavedForLaterDocument } from "@/core/api/graphql/types";
-import { useMutationBatcher } from "@/core/composables/useMutationBatcher";
+import {
+  MoveToSavedForLaterDocument,
+  MoveFromSavedForLaterDocument,
+  GetSavedForLaterDocument,
+} from "@/core/api/graphql/types";
 import { globals } from "@/core/globals";
 import { Logger } from "@/core/utilities";
-import type { SavedForLaterListFragment } from "@/core/api/graphql/types";
+import { useFullCart } from "@/shared/cart";
 
 function _useSavedForLater() {
   const { storeId, currencyCode, cultureName, userId } = globals;
 
-  const savedForLaterList = ref<SavedForLaterListFragment>();
+  const { cart } = useFullCart();
 
-  const { mutate: _moveToSavedForLater, loading: _moveToSavedForLaterLoading } =
-    useMutation(MoveToSavedForLaterDocument);
+  const savedForLaterList = computed(() => _savedForLaterQueryResult.value?.getSavedForLater);
 
   const {
-    add: _moveToSavedForLaterBatched,
-    overflowed: moveToSavedForLaterOverflowed,
-    loading: _moveToSavedForLaterBatchedLoading,
-  } = useMutationBatcher(_moveToSavedForLater);
+    load: getSavedForLater,
+    loading: _getSavedForLaterLoading,
+    result: _savedForLaterQueryResult,
+  } = useLazyQuery(
+    GetSavedForLaterDocument,
+    {
+      storeId,
+      userId,
+      cultureName,
+      currencyCode,
+    },
+    {
+      notifyOnNetworkStatusChange: true,
+      fetchPolicy: "cache-first",
+    },
+  );
+
+  const { mutate: _moveToSavedForLater, loading: _moveToSavedForLaterLoading } = useMutation(
+    MoveToSavedForLaterDocument,
+    {
+      optimisticResponse(vars, { IGNORE }) {
+        const movedItemIds = vars.command?.lineItemIds;
+
+        if (!movedItemIds?.length || !cart.value || !savedForLaterList.value) {
+          return IGNORE;
+        }
+
+        return {
+          moveToSavedForLater: {
+            cart: {
+              ...cart.value,
+              items: cart.value.items.filter((item) => !movedItemIds.includes(item.id)),
+            },
+            list: savedForLaterList.value,
+          },
+        };
+      },
+    },
+  );
+
+  async function moveToSavedForLater(itemIds: string[]) {
+    if (!cart.value) {
+      return;
+    }
 
-  async function moveToSavedForLater(cartId: string, itemIds: string[]) {
     try {
-      const moveResult = await _moveToSavedForLaterBatched({
+      await _moveToSavedForLater({
         command: {
           storeId,
           userId,
           cultureName,
           currencyCode,
-          cartId,
+          cartId: cart.value.id,
           lineItemIds: itemIds,
         },
       });
-
-      savedForLaterList.value = moveResult?.data?.moveToSavedForLater?.list;
     } catch (err) {
       if (err instanceof ApolloError && err.networkError?.toString() === (AbortReason.Explicit as string)) {
         return;
@@ -46,29 +84,45 @@ function _useSavedForLater() {
     }
   }
 
-  const { mutate: _moveFromSavedForLater, loading: _moveFromSavedForLaterLoading } =
-    useMutation(MoveFromSavedForLaterDocument);
+  const { mutate: _moveFromSavedForLater, loading: _moveFromSavedForLaterLoading } = useMutation(
+    MoveFromSavedForLaterDocument,
+    {
+      optimisticResponse(vars, { IGNORE }) {
+        const movedItemIds = vars.command?.lineItemIds;
 
-  const {
-    add: _moveFromSavedForLaterBatched,
-    overflowed: moveFromSavedForLaterOverflowed,
-    loading: _moveFromSavedForLaterBatchedLoading,
-  } = useMutationBatcher(_moveFromSavedForLater);
+        if (!movedItemIds?.length || !cart.value || !savedForLaterList.value) {
+          return IGNORE;
+        }
+
+        return {
+          moveFromSavedForLater: {
+            cart: cart.value,
+            list: {
+              ...savedForLaterList.value,
+              items: savedForLaterList.value.items.filter((item) => !movedItemIds.includes(item.id)),
+            },
+          },
+        };
+      },
+    },
+  );
+
+  async function moveFromSavedForLater(itemIds: string[]) {
+    if (!cart.value) {
+      return;
+    }
 
-  async function moveFromSavedForLater(cartId: string, itemIds: string[]) {
     try {
-      const moveResult = await _moveFromSavedForLaterBatched({
+      await _moveFromSavedForLater({
         command: {
           storeId,
           userId,
           cultureName,
           currencyCode,
-          cartId,
+          cartId: cart.value.id,
           lineItemIds: itemIds,
         },
       });
-
-      savedForLaterList.value = moveResult?.data?.moveFromSavedForLater?.list;
     } catch (err) {
       if (err instanceof ApolloError && err.networkError?.toString() === (AbortReason.Explicit as string)) {
         return;
@@ -77,34 +131,15 @@ function _useSavedForLater() {
     }
   }
 
-  const _getSavedForLaterLoading = ref(false);
-  async function getSavedForLater() {
-    try {
-      _getSavedForLaterLoading.value = true;
-      savedForLaterList.value = await getSavedForLaterQuery();
-    } catch (err) {
-      Logger.error(`useSavedForLater.${getSavedForLater.name}`, err);
-    } finally {
-      _getSavedForLaterLoading.value = false;
-    }
-  }
-
   return {
     savedForLaterList,
 
     moveToSavedForLater,
-    moveToSavedForLaterOverflowed,
     moveFromSavedForLater,
-    moveFromSavedForLaterOverflowed,
     getSavedForLater,
 
     loading: computed(
-      () =>
-        _moveToSavedForLaterLoading.value ||
-        _moveToSavedForLaterBatchedLoading.value ||
-        _moveFromSavedForLaterLoading.value ||
-        _moveFromSavedForLaterBatchedLoading.value ||
-        _getSavedForLaterLoading.value,
+      () => _getSavedForLaterLoading.value || _moveToSavedForLaterLoading.value || _moveFromSavedForLaterLoading.value,
     ),
   };
 }