feat(VCST-4084): saved for later list page (#2008)

## Description
A separate page for the "Saved for later" list.

**"Saved for later" list page under the account section (only available
for authorized users):**
<img width="1446" height="469" alt="image"
src="https://github.com/user-attachments/assets/b29dfa99-ef11-4cdf-b9bf-662adf0b545f"
/>
<img width="1542" height="465" alt="image"
src="https://github.com/user-attachments/assets/8cfdbbfd-eeae-42eb-9319-862c9cfc382a"
/>

**"See all" button in "Saved for later" cart block:**
<img width="1113" height="403" alt="image"
src="https://github.com/user-attachments/assets/7188b82f-52ed-4d82-a10d-ed5d35cdf8ad"
/>

## References
### Jira-link:
https://virtocommerce.atlassian.net/browse/VCST-4084
### Artifact URL:

https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.34.0-pr-2008-d832-d8321133.zip

---------

Co-authored-by: Aleksandra-Mitricheva <[email protected]>

Author: yuskithedeveloper

client-app/config/menu.json

@@ -101,6 +101,15 @@
             "icon": "clipboard-list",
             "priority": 50
           },
+          {
+            "id": "saved-for-later",
+            "route": {
+              "name": "SavedForLater"
+            },
+            "title": "shared.layout.header.mobile.account_menu.saved_for_later",
+            "icon": "list-v2",
+            "priority": 55
+          },
           {
             "id": "lists",
             "route": {
@@ -236,6 +245,14 @@
             "icon": "clipboard-list",
             "priority": 40
           },
+          {
+            "route": {
+              "name": "SavedForLater"
+            },
+            "title": "shared.layout.header.mobile.account_menu.saved_for_later",
+            "icon": "list-v2",
+            "priority": 45
+          },
           {
             "route": {
               "name": "Lists"

client-app/pages/account/list-details.vue

@@ -7,12 +7,12 @@
     <div class="flex flex-col">
       <!-- Title block -->
       <div class="contents md:flex md:flex-wrap md:items-center md:justify-between md:gap-3">
-        <VcTypography v-if="list?.name" tag="h1" truncate>
-          {{ list.name }}
+        <VcTypography v-if="actualListName" tag="h1" truncate>
+          {{ actualListName }}
         </VcTypography>
 
         <!-- Title skeleton -->
-        <div v-else class="w-2/3 bg-neutral-200 text-3xl md:w-1/3">&nbsp;</div>
+        <div v-else class="w-2/3 bg-neutral-200 text-3xl md:w-1/3">{{ props.listName ?? "&nbsp;" }}</div>
 
         <div class="order-last mt-8 flex flex-wrap gap-3 md:ms-0 md:mt-0 md:shrink-0 lg:my-0">
           <VcButton
@@ -49,6 +49,7 @@
           </VcButton>
 
           <VcButton
+            v-if="!hideSettings"
             :disabled="loading || !list"
             size="sm"
             variant="outline"
@@ -63,15 +64,7 @@
 
       <div ref="listElement" class="mt-5 w-full">
         <!-- Skeletons -->
-        <template v-if="listLoading">
-          <div v-if="isMobile" class="grid grid-cols-2 gap-x-4 gap-y-6">
-            <ProductSkeletonGrid v-for="i in actualPageRowsCount" :key="i" />
-          </div>
-
-          <div v-else class="flex flex-col rounded border bg-additional-50 shadow-sm">
-            <WishlistProductItemSkeleton v-for="i in actualPageRowsCount" :key="i" class="even:bg-neutral-50" />
-          </div>
-        </template>
+        <WishlistProductsSkeleton v-if="listLoading" :itemsCount="actualPageRowsCount" />
 
         <!-- List details -->
         <template v-else-if="!listLoading && !!list?.items?.length">
@@ -137,7 +130,6 @@ import { prepareLineItem, Logger } from "@/core/utilities";
 import { ROUTES } from "@/router/routes/constants";
 import { dataChangedEvent, useBroadcast } from "@/shared/broadcast";
 import { useShortCart, getItemsForAddBulkItemsToCartResultsModal } from "@/shared/cart";
-import { ProductSkeletonGrid } from "@/shared/catalog";
 import { SaveChangesModal } from "@/shared/common";
 import { BackButtonInHeader } from "@/shared/layout";
 import { useModal } from "@/shared/modal";
@@ -146,7 +138,7 @@ import {
   AddOrUpdateWishlistModal,
   DeleteWishlistProductModal,
   WishlistLineItems,
-  WishlistProductItemSkeleton,
+  WishlistProductsSkeleton,
 } from "@/shared/wishlists";
 import type {
   InputUpdateWishlistItemsType,
@@ -160,9 +152,13 @@ import AddBulkItemsToCartResultsModal from "@/shared/cart/components/add-bulk-it
 
 interface IProps {
   listId: string;
+  hideSettings?: boolean;
+  listName?: string;
 }
 
-const props = defineProps<IProps>();
+const props = withDefaults(defineProps<IProps>(), {
+  listName: undefined,
+});
 
 const Error404 = defineAsyncComponent(() => import("@/pages/404.vue"));
 
@@ -224,6 +220,8 @@ const wishlistListProperties = computed(() => ({
   related_type: "wishlist",
 }));
 
+const actualListName = computed(() => props.listName ?? list.value?.name);
+
 const isMobile = breakpoints.smaller("lg");
 
 function openListSettingsModal(): void {

client-app/pages/account/saved-for-later-details.vue

@@ -0,0 +1,44 @@
+<template>
+  <template v-if="saveForLaterLoading">
+    <div class="contents md:flex md:flex-wrap md:items-center md:justify-between md:gap-3">
+      <VcTypography tag="h1">
+        {{ $t("pages.cart.saved_for_later") }}
+      </VcTypography>
+    </div>
+
+    <div class="mt-5 w-full">
+      <WishlistProductsSkeleton :itemsCount="6" />
+    </div>
+  </template>
+
+  <ListDetails
+    v-else-if="savedForLaterListId && !savedForLaterListIsEmpty"
+    :list-id="savedForLaterListId"
+    :list-name="$t('pages.cart.saved_for_later')"
+    hide-settings
+  />
+
+  <div v-else>
+    <VcTypography tag="h1">
+      {{ $t("pages.cart.saved_for_later") }}
+    </VcTypography>
+
+    <VcEmptyView :text="$t('pages.cart.saved_for_later_not_found')" icon="list-v2" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted } from "vue";
+import { useSavedForLater } from "@/shared/cart/composables/useSaveForLater";
+import { WishlistProductsSkeleton } from "@/shared/wishlists";
+import ListDetails from "./list-details.vue";
+
+const { savedForLaterList, loading: saveForLaterLoading, getSavedForLater } = useSavedForLater();
+
+const savedForLaterListId = computed(() => savedForLaterList.value?.id);
+const savedForLaterListIsEmpty = computed(() => !savedForLaterList.value?.items?.length);
+
+onMounted(() => {
+  void getSavedForLater();
+});
+</script>

client-app/pages/shared-list.vue

@@ -6,19 +6,7 @@
 
     <div ref="listElement" class="shared-list__content">
       <!-- Skeletons -->
-      <template v-if="listLoading">
-        <div v-if="isMobile" class="shared-list__skeleton-mobile">
-          <ProductSkeletonGrid v-for="i in actualPageRowsCount" :key="i" />
-        </div>
-
-        <div v-else class="shared-list__skeleton-desktop">
-          <WishlistProductItemSkeleton
-            v-for="i in actualPageRowsCount"
-            :key="i"
-            class="shared-list__skeleton-desktop-item"
-          />
-        </div>
-      </template>
+      <WishlistProductsSkeleton v-if="listLoading" :itemsCount="actualPageRowsCount" />
 
       <!-- List details -->
       <template v-else-if="!listLoading && !!list?.items?.length">
@@ -74,7 +62,6 @@
 </template>
 
 <script setup lang="ts">
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import cloneDeep from "lodash/cloneDeep";
 import keyBy from "lodash/keyBy";
 import { computed, ref, watchEffect, defineAsyncComponent } from "vue";
@@ -85,11 +72,9 @@ import { PAGE_LIMIT } from "@/core/constants";
 import { MODULE_XAPI_KEYS } from "@/core/constants/modules";
 import { prepareLineItem } from "@/core/utilities";
 import { useShortCart } from "@/shared/cart";
-import { ProductSkeletonGrid } from "@/shared/catalog";
-import { useWishlists, WishlistLineItems, WishlistProductItemSkeleton } from "@/shared/wishlists";
+import { useWishlists, WishlistLineItems, WishlistProductsSkeleton, WishlistSummary } from "@/shared/wishlists";
 import type { LineItemType, Product } from "@/core/api/graphql/types";
 import type { PreparedLineItemType } from "@/core/types";
-import WishlistSummary from "@/shared/wishlists/components/wishlist-summary.vue";
 
 const props = defineProps<IProps>();
 
@@ -108,7 +93,6 @@ const { cart } = useShortCart();
 const { continue_shopping_link } = getModuleSettings({
   [MODULE_XAPI_KEYS.CONTINUE_SHOPPING_LINK]: "continue_shopping_link",
 });
-const breakpoints = useBreakpoints(breakpointsTailwind);
 
 usePageHead({
   title: computed(() => t("pages.account.list_details.meta.title", [list.value?.name])),
@@ -120,7 +104,6 @@ const wishlistListProperties = computed(() => ({
   related_id: list.value?.id,
   related_type: "wishlist",
 }));
-const isMobile = breakpoints.smaller("lg");
 
 const listElement = ref<HTMLElement | undefined>();
 const pendingItems = ref<Record<string, boolean>>({});
@@ -175,18 +158,6 @@ watchEffect(() => {
     @apply mt-5 w-full;
   }
 
-  &__skeleton-mobile {
-    @apply grid grid-cols-2 gap-x-4 gap-y-6;
-  }
-
-  &__skeleton-desktop {
-    @apply flex flex-col rounded border bg-additional-50 shadow-sm;
-  }
-
-  &__skeleton-desktop-item {
-    @apply even:bg-neutral-50;
-  }
-
   &__items {
     @apply flex flex-col gap-6;
   }

client-app/router/routes/account.ts

@@ -1,3 +1,4 @@
+import { ROUTES } from "@/router/routes/constants";
 import { useUser } from "@/shared/account";
 import type { RouteRecordRaw } from "vue-router";
 
@@ -10,6 +11,7 @@ const OrderDetails = () => import("@/pages/account/order-details.vue");
 const OrderPayment = () => import("@/pages/account/order-payment.vue");
 const Lists = () => import("@/pages/account/lists.vue");
 const ListDetails = () => import("@/pages/account/list-details.vue");
+const SavedForLaterDetails = () => import("@/pages/account/saved-for-later-details.vue");
 const SavedCreditCards = () => import("@/pages/account/saved-credit-cards.vue");
 const Impersonate = () => import("@/pages/account/impersonate.vue");
 
@@ -56,6 +58,10 @@ export const accountRoutes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: "saved-for-later",
+    children: [{ path: "", name: ROUTES.SAVED_FOR_LATER.NAME, component: SavedForLaterDetails }],
+  },
   {
     path: "lists",
     children: [

client-app/router/routes/constants.ts

@@ -23,4 +23,7 @@ export const ROUTES = {
     NAME: "ChangePassword",
     PATH: "/change-password",
   },
+  SAVED_FOR_LATER: {
+    NAME: "SavedForLater",
+  },
 } as const;

client-app/shared/cart/components/cart-for-later.vue

@@ -1,5 +1,11 @@
 <template>
   <VcWidget :title="$t('pages.cart.saved_for_later')" prepend-icon="bookmark" size="lg">
+    <template v-slot:append>
+      <VcButton variant="outline" :to="{ name: ROUTES.SAVED_FOR_LATER.NAME }" size="sm">
+        {{ $t("common.buttons.see_all") }}
+      </VcButton>
+    </template>
+
     <VcProductsGrid short>
       <CartItemForLater
         v-for="(item, index) in savedForLaterList?.items"
@@ -19,6 +25,7 @@
 import { computed, toRef } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAnalytics } from "@/core/composables/useAnalytics";
+import { ROUTES } from "@/router/routes/constants";
 import type { SavedForLaterListFragment, Product } from "@/core/api/graphql/types";
 import CartItemForLater from "@/shared/cart/components/cart-item-for-later.vue";
 

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

@@ -77,11 +77,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;
     }
   }
 
@@ -99,7 +103,8 @@ function _useSavedForLater() {
         _moveToSavedForLaterLoading.value ||
         _moveToSavedForLaterBatchedLoading.value ||
         _moveFromSavedForLaterLoading.value ||
-        _moveFromSavedForLaterBatchedLoading.value,
+        _moveFromSavedForLaterBatchedLoading.value ||
+        _getSavedForLaterLoading.value,
     ),
   };
 }

client-app/shared/wishlists/components/index.ts

@@ -8,3 +8,5 @@ export { default as WishlistCard } from "./wishlist-card.vue";
 export { default as WishlistCardSkeleton } from "./wishlist-card-skeleton.vue";
 export { default as WishlistLineItems } from "./wishlist-line-items.vue";
 export { default as WishlistProductItemSkeleton } from "./wishlist-product-item-skeleton.vue";
+export { default as WishlistProductsSkeleton } from "./wishlist-products-skeleton.vue";
+export { default as WishlistSummary } from "./wishlist-summary.vue";

client-app/shared/wishlists/components/wishlist-products-skeleton.vue

@@ -0,0 +1,47 @@
+<template>
+  <div v-if="isMobile" class="wishlist-products-skeleton wishlist-products-skeleton--mobile">
+    <ProductSkeletonGrid v-for="i in itemsCount" :key="i" class="wishlist-products-skeleton__item" />
+  </div>
+
+  <div v-else class="wishlist-products-skeleton wishlist-products-skeleton--desktop">
+    <WishlistProductItemSkeleton v-for="i in itemsCount" :key="i" class="wishlist-products-skeleton__item" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+import { ProductSkeletonGrid } from "@/shared/catalog";
+import { WishlistProductItemSkeleton } from "@/shared/wishlists";
+
+interface IProps {
+  itemsCount: number;
+}
+
+defineProps<IProps>();
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+
+const isMobile = breakpoints.smaller("lg");
+</script>
+
+<style lang="scss">
+.wishlist-products-skeleton {
+  $desktop: "";
+
+  &--mobile {
+    @apply grid grid-cols-2 gap-x-4 gap-y-6;
+  }
+
+  &--desktop {
+    @apply flex flex-col rounded border bg-additional-50 shadow-sm;
+
+    $desktop: &;
+  }
+
+  &__item {
+    #{$desktop} & {
+      @apply even:bg-neutral-50;
+    }
+  }
+}
+</style>