feat(VCST-3728): show more button in saved for later cart section

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

@@ -1,8 +1,8 @@
 <template>
-  <VcWidget :title="$t('pages.cart.saved_for_later')" prepend-icon="bookmark" size="lg">
-    <VcProductsGrid short>
+  <VcWidget :title="$t('pages.cart.saved_for_later')" prepend-icon="bookmark" size="lg" class="cart-for-later">
+    <VcProductsGrid>
       <CartItemForLater
-        v-for="(item, index) in savedForLaterList?.items"
+        v-for="(item, index) in visibleItems"
         :key="index"
         :item="item"
         :saved-for-later-list="savedForLaterList"
@@ -12,11 +12,17 @@
         @add-to-cart="(lineItemId) => $emit('addToCart', lineItemId)"
       />
     </VcProductsGrid>
+
+    <div v-if="maxVisibleItems < (savedForLaterList?.items.length ?? 0)" class="cart-for-later__show-more">
+      <VcButton variant="no-border" append-icon="chevron-down" @click="maxVisibleItems += VISIBLE_ITEMS_STEP">
+        {{ $t("common.buttons.show_more") }}
+      </VcButton>
+    </div>
   </VcWidget>
 </template>
 
 <script setup lang="ts">
-import { computed, toRef } from "vue";
+import { computed, toRef, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAnalytics } from "@/core/composables/useAnalytics";
 import type { SavedForLaterListFragment, Product } from "@/core/api/graphql/types";
@@ -38,6 +44,10 @@ interface IProps {
 
 const savedForLaterList = toRef(props, "savedForLaterList");
 
+const VISIBLE_ITEMS_STEP = 6;
+const maxVisibleItems = ref(6);
+const visibleItems = computed(() => savedForLaterList.value?.items.slice(0, maxVisibleItems.value));
+
 const listProperties = computed(() => ({
   item_list_id: "recently_browsed_products",
   item_list_name: t("pages.cart.recently_browsed_products"),
@@ -54,3 +64,11 @@ function selectItemEvent(item?: SavedForLaterListFragment["items"][number]["prod
   analytics("selectItem", item as Product, listProperties.value);
 }
 </script>
+
+<style lang="scss">
+.cart-for-later {
+  &__show-more {
+    @apply border-t pt-5 text-center;
+  }
+}
+</style>