@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/cart/components/empty-cart-message/index.tsx

@@ -0,0 +1,38 @@
+import { Heading, Text } from "@medusajs/ui"
+import { ShoppingCart } from "@medusajs/icons"
+import Link from "next/link"
+
+const EmptyCartMessage = () => {
+  return (
+    <div className="py-24 px-4 flex flex-col items-center justify-center text-center w-full max-w-lg mx-auto animate-in fade-in duration-700" data-testid="empty-cart-message">
+      {/* Small Cart Icon */}
+      <div className="relative mb-8">
+        <div className="relative w-20 h-20 bg-[#8B5AB1]/5 rounded-full flex items-center justify-center">
+          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-[#8B5AB1]">
+            <path d="M3 3H5L5.4 5M5.4 5H21L19 13H7L5.4 5ZM7 13L4.707 15.293C4.077 15.293 4.523 17 5.414 17H19M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 17C7.89543 17 7 17.8954 7 19C7 20.1046 7.89543 21 9 21C10.1046 21 11 20.1046 11 19C11 17.8954 10.1046 17 9 17Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </div>
+      </div>
+
+      <Heading
+        level="h1"
+        className="text-3xl sm:text-4xl font-extrabold text-neutral-900 mb-3 tracking-tight"
+      >
+        Your bag is empty
+      </Heading>
+
+      <Text className="text-neutral-500 text-base sm:text-lg mb-10 max-w-[320px] leading-relaxed">
+        Let&apos;s find something amazing to fill your bag today!
+      </Text>
+
+      <Link
+        href="/store"
+        className="inline-flex items-center justify-center px-10 h-14 bg-[#8B5AB1] hover:bg-[#7a4f9b] text-white font-bold text-lg rounded-2xl shadow-[0_10px_25px_rgba(139,90,177,0.2)] hover:shadow-[0_15px_30px_rgba(139,90,177,0.3)] hover:-translate-y-0.5 transition-all duration-300 active:scale-[0.98]"
+      >
+        Start Shopping
+      </Link>
+    </div>
+  )
+}
+
+export default EmptyCartMessage

package/templates/storefront/src/modules/cart/components/item/index.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { Table, Text, clx } from "@medusajs/ui"
+import { updateLineItem } from "@core/data/cart"
+import { HttpTypes } from "@medusajs/types"
+import CartItemSelect from "@modules/cart/components/cart-item-select"
+import ErrorMessage from "@modules/checkout/components/error-message"
+import DeleteButton from "@modules/common/components/delete-button"
+import LineItemOptions from "@modules/common/components/line-item-options"
+import LineItemPrice from "@modules/common/components/line-item-price"
+import LineItemUnitPrice from "@modules/common/components/line-item-unit-price"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import Spinner from "@modules/common/icons/spinner"
+import Thumbnail from "@modules/products/components/thumbnail"
+import { useState } from "react"
+
+type ItemProps = {
+  item: HttpTypes.StoreCartLineItem
+  type?: "full" | "preview"
+  currencyCode: string
+}
+
+const Item = ({ item, type = "full", currencyCode }: ItemProps) => {
+  const [updating, setUpdating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const changeQuantity = async (quantity: number) => {
+    setError(null)
+    setUpdating(true)
+
+    await updateLineItem({
+      lineId: item.id,
+      quantity,
+    })
+      .catch((err) => {
+        setError(err.message)
+      })
+      .finally(() => {
+        setUpdating(false)
+      })
+  }
+
+  // TODO: Update this to grab the actual max inventory
+  const maxQtyFromInventory = 10
+  const maxQuantity = item.variant?.manage_inventory ? 10 : maxQtyFromInventory
+
+  return (
+    <Table.Row className="w-full" data-testid="product-row">
+      <Table.Cell className="!pl-0 p-4 w-24">
+        <LocalizedClientLink
+          href={`/products/${item.product_handle}`}
+          className={clx("flex", {
+            "w-16": type === "preview",
+            "small:w-24 w-12": type === "full",
+          })}
+        >
+          <Thumbnail
+            thumbnail={item.thumbnail}
+            images={item.variant?.product?.images}
+            variantImages={item.variant?.images}
+            size="square"
+          />
+        </LocalizedClientLink>
+      </Table.Cell>
+
+      <Table.Cell className="text-left">
+        <Text
+          className="txt-medium-plus text-ui-fg-base"
+          data-testid="product-title"
+        >
+          {item.product_title}
+        </Text>
+        <LineItemOptions variant={item.variant} data-testid="product-variant" />
+      </Table.Cell>
+
+      {type === "full" && (
+        <Table.Cell>
+          <div className="flex gap-2 items-center w-28">
+            <DeleteButton 
+              id={item.id} 
+              productId={item.product_id || ""}
+              thumbnail={item.thumbnail}
+              data-testid="product-delete-button" 
+            />
+            <CartItemSelect
+              value={item.quantity}
+              onChange={(value) => changeQuantity(parseInt(value.target.value))}
+              className="w-14 h-10 p-4"
+              data-testid="product-select-button"
+            >
+              {/* TODO: Update this with the v2 way of managing inventory */}
+              {Array.from(
+                {
+                  length: Math.min(maxQuantity, 10),
+                },
+                (_, i) => (
+                  <option value={i + 1} key={i}>
+                    {i + 1}
+                  </option>
+                )
+              )}
+
+              <option value={1} key={1}>
+                1
+              </option>
+            </CartItemSelect>
+            {updating && <Spinner />}
+          </div>
+          <ErrorMessage error={error} data-testid="product-error-message" />
+        </Table.Cell>
+      )}
+
+      {type === "full" && (
+        <Table.Cell className="hidden small:table-cell">
+          <LineItemUnitPrice
+            item={item}
+            style="tight"
+            currencyCode={currencyCode}
+          />
+        </Table.Cell>
+      )}
+
+      <Table.Cell className="!pr-0">
+        <span
+          className={clx("!pr-0", {
+            "flex flex-col items-end h-full justify-center": type === "preview",
+          })}
+        >
+          {type === "preview" && (
+            <span className="flex gap-x-1 ">
+              <Text className="text-ui-fg-muted">{item.quantity}x </Text>
+              <LineItemUnitPrice
+                item={item}
+                style="tight"
+                currencyCode={currencyCode}
+              />
+            </span>
+          )}
+          <LineItemPrice
+            item={item}
+            style="tight"
+            currencyCode={currencyCode}
+          />
+        </span>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default Item

package/templates/storefront/src/modules/cart/components/pincode-checker/index.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import { Button, Heading, Text, Input, clx } from "@medusajs/ui"
+import { useState } from "react"
+import { getShiprocketServiceability } from "@core/data/fulfillment"
+import { MapPin, Truck, CheckCircle2, AlertCircle, X } from "lucide-react"
+
+const PincodeChecker = ({ variantId }: { variantId?: string }) => {
+    const [pincode, setPincode] = useState("")
+    const [isChecking, setIsChecking] = useState(false)
+    const [result, setResult] = useState<any>(null)
+    const [error, setError] = useState<string | null>(null)
+    const [showInput, setShowInput] = useState(false)
+
+    const handleCheck = async () => {
+        if (!variantId) {
+            setError("Please select a variant (size/color) first")
+            return
+        }
+
+        if (pincode.length !== 6) {
+            setError("Please enter a valid 6-digit pincode")
+            return
+        }
+
+        setIsChecking(true)
+        setError(null)
+        setResult(null)
+
+        try {
+            const data = await getShiprocketServiceability(pincode, variantId)
+            // Handle both wrapped list response and direct response format
+            if (data && (data.etd || data.data?.etd || (data.data?.available_courier_companies?.length > 0))) {
+                setResult(data)
+            } else {
+                setError("Delivery not available for this pincode")
+            }
+        } catch (err: any) {
+            setError(err.message || "Failed to check serviceability. Please try again.")
+        } finally {
+            setIsChecking(false)
+        }
+    }
+
+    const getDeliveryInfo = () => {
+        if (!result) return null
+
+        // If result is the courier object directly (new format)
+        if (result.etd) return { etd: result.etd, days: result.estimated_delivery_days }
+
+        // If it's wrapped in data (old format or variations)
+        if (result.data) {
+            if (result.data.etd) return { etd: result.data.etd, days: result.data.estimated_delivery_days }
+            
+            if (result.data.available_courier_companies?.length > 0) {
+                const best = result.data.available_courier_companies[0]
+                return { etd: best.etd, days: best.estimated_delivery_days }
+            }
+        }
+
+        return null
+    }
+
+    const deliveryInfo = getDeliveryInfo()
+
+    const handleReset = () => {
+        setPincode("")
+        setResult(null)
+        setError(null)
+        setShowInput(false)
+        setIsChecking(false)
+    }
+
+    return (
+        <div className="w-full bg-white border border-gray-200 rounded-xl p-4 min-[550px]:p-5 mb-0 shadow-sm overflow-hidden min-h-[80px] flex flex-col justify-center">
+            {/* Initial State */}
+            {!showInput && (
+                <div className="flex items-center justify-between gap-4">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center flex-shrink-0">
+                            <Truck className="w-5 h-5 text-[#8B5AB1]" />
+                        </div>
+                        <Text className="text-sm min-[550px]:text-base font-medium text-gray-700">
+                            Check delivery time & services
+                        </Text>
+                    </div>
+                    <button
+                        onClick={() => setShowInput(true)}
+                        className="bg-[#8B5AB1] text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-[#764999] transition-colors shadow-sm whitespace-nowrap"
+                    >
+                        Enter Pincode
+                    </button>
+                </div>
+            )}
+
+            {/* Input & Error State */}
+            {showInput && !result && (
+                <div className="flex flex-col gap-3">
+                    <div className="flex items-center justify-between">
+                        <Text className="text-sm font-bold text-gray-900">Enter Delivery Pincode</Text>
+                        <button onClick={handleReset} className="text-gray-400 hover:text-gray-600">
+                            <X className="w-4 h-4" />
+                        </button>
+                    </div>
+                    <div className="flex gap-2">
+                        <Input
+                            type="text"
+                            maxLength={6}
+                            placeholder="Ex: 380001"
+                            value={pincode}
+                            onChange={(e) => setPincode(e.target.value.replace(/\D/g, ""))}
+                            className="flex-1"
+                        />
+                        <Button
+                            variant="primary"
+                            onClick={handleCheck}
+                            isLoading={isChecking}
+                            className="bg-[#8B5AB1] hover:bg-[#764999]"
+                        >
+                            Check
+                        </Button>
+                    </div>
+                    {error && !isChecking && (
+                        <div className="flex items-center gap-3 bg-red-50 p-3 rounded-lg border border-red-100 mt-1">
+                            <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
+                            <Text className="text-sm font-bold text-red-800">
+                                {error}
+                            </Text>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Success Result State */}
+            {showInput && result && !isChecking && (
+                <div className="flex flex-col gap-3">
+                    <div className="flex items-center justify-between border-b border-gray-100 pb-2">
+                        <div className="flex items-center gap-2">
+                            <MapPin className="w-4 h-4 text-[#8B5AB1]" />
+                            <Text className="text-sm font-bold text-gray-900">Results for {pincode}</Text>
+                        </div>
+                        <button
+                            onClick={() => {
+                                setResult(null)
+                                setError(null)
+                                setPincode("")
+                                setShowInput(true)
+                            }}
+                            className="text-[#8B5AB1] text-xs font-bold hover:underline"
+                        >
+                            Change
+                        </button>
+                    </div>
+
+                    <div className="flex items-center gap-3 bg-green-50 p-3 rounded-lg border border-green-100">
+                        <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
+                        <div>
+                            <Text className="text-sm font-bold text-green-800">
+                                Delivery available
+                            </Text>
+                            {deliveryInfo?.etd && (
+                                <Text className="text-xs text-green-700">
+                                    Estimated delivery by <span className="font-bold">{new Date(deliveryInfo.etd).toDateString()}</span>
+                                </Text>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default PincodeChecker

package/templates/storefront/src/modules/cart/components/sign-in-prompt/index.tsx

@@ -0,0 +1,26 @@
+import { Button, Heading, Text } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+const SignInPrompt = () => {
+  return (
+    <div className="bg-white flex items-center justify-between">
+      <div>
+        <Heading level="h2" className="txt-xlarge">
+          Already have an account?
+        </Heading>
+        <Text className="txt-medium text-ui-fg-subtle mt-2">
+          Sign in for a better experience.
+        </Text>
+      </div>
+      <div>
+        <LocalizedClientLink href="/account">
+          <Button variant="secondary" className="h-10" data-testid="sign-in-button">
+            Sign in
+          </Button>
+        </LocalizedClientLink>
+      </div>
+    </div>
+  )
+}
+
+export default SignInPrompt

package/templates/storefront/src/modules/cart/components/you-may-also-like/index.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import React, { useState, useEffect } from "react"
+import { listProducts } from "@core/data/products"
+import { getRegion } from "@core/data/regions"
+import { HttpTypes } from "@medusajs/types"
+import ProductCard from "@registry/components/product-card"
+
+type YouMayAlsoLikeProps = {
+  cart: HttpTypes.StoreCart | null
+  countryCode: string
+}
+
+export default function YouMayAlsoLike({
+  cart,
+  countryCode,
+}: YouMayAlsoLikeProps) {
+  const [region, setRegion] = useState<HttpTypes.StoreRegion | null>(null)
+  const [allProducts, setAllProducts] = useState<HttpTypes.StoreProduct[]>([])
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const cartProductIds = cart?.items?.map((item) => item.product_id) || []
+
+  useEffect(() => {
+    async function fetchData() {
+      const fetchedRegion = await getRegion(countryCode)
+      if (!fetchedRegion) {
+        return
+      }
+      setRegion(fetchedRegion)
+
+      const queryParams: HttpTypes.StoreProductListParams = {
+        limit: 20,
+        is_giftcard: false,
+        region_id: fetchedRegion.id,
+        fields:
+          "*variants.calculated_price,*images,+variants.inventory_quantity,+metadata,+tags",
+      }
+
+      const fetchedProducts = await listProducts({
+        queryParams,
+        countryCode,
+      }).then(({ response }) =>
+        response.products.filter(
+          (product) => !cartProductIds.includes(product.id)
+        )
+      )
+
+      setAllProducts(fetchedProducts)
+    }
+    fetchData()
+  }, [cart, countryCode, cartProductIds.join(",")])
+
+  const currentProducts = allProducts.slice(currentIndex, currentIndex + 4)
+  const maxIndex = Math.max(0, allProducts.length - 4)
+
+  const handlePrevious = () => {
+    setCurrentIndex((prev) => Math.max(0, prev - 4))
+  }
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => Math.min(maxIndex, prev + 4))
+  }
+
+  if (!region || !allProducts.length) {
+    return null
+  }
+
+  const canGoPrevious = currentIndex > 0
+  const canGoNext = currentIndex < maxIndex
+
+  return (
+    <section
+      className="mt-12 pt-10 border-t border-[var(--color-header-border)]"
+      aria-labelledby="cart-you-may-also-like"
+    >
+      <div className="flex items-center justify-between mb-8">
+        <h2
+          id="cart-you-may-also-like"
+          className="font-display text-2xl md:text-3xl text-heading"
+        >
+          You may also like
+        </h2>
+        {allProducts.length > 4 && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handlePrevious}
+              disabled={!canGoPrevious}
+              className="w-10 h-10 border border-[var(--color-header-border)] flex items-center justify-center transition-colors hover:bg-surface-muted disabled:opacity-40 disabled:cursor-not-allowed"
+              aria-label="Previous products"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="15 18 9 12 15 6" />
+              </svg>
+            </button>
+            <button
+              onClick={handleNext}
+              disabled={!canGoNext}
+              className="w-10 h-10 bg-brand-accent text-inverse flex items-center justify-center transition-colors hover:bg-brand-accent-hover disabled:opacity-40 disabled:cursor-not-allowed"
+              aria-label="Next products"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
+            </button>
+          </div>
+        )}
+      </div>
+
+      <ul className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
+        {currentProducts.map((product) => (
+          <li key={product.id} className="w-full min-w-0">
+            <ProductCard region={region} product={product} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

package/templates/storefront/src/modules/cart/templates/index.tsx

@@ -0,0 +1,88 @@
+import ItemsTemplate from "./items"
+import Summary from "./summary"
+import EmptyCartMessage from "../components/empty-cart-message"
+import SignInPrompt from "../components/sign-in-prompt"
+import Divider from "@modules/common/components/divider"
+import YouMayAlsoLike from "../components/you-may-also-like"
+import CartViewTracker from "../components/cart-view-tracker"
+import AbandonedCarts from "../components/abandoned-carts"
+import ScrollToPendingOrdersButton from "../components/abandoned-carts/ScrollToPendingOrdersButton"
+import { HttpTypes } from "@medusajs/types"
+
+const CartTemplate = ({
+  cart,
+  customer,
+  countryCode,
+  abandonedCarts,
+}: {
+  cart: HttpTypes.StoreCart | null
+  customer: HttpTypes.StoreCustomer | null
+  countryCode: string
+  abandonedCarts?: {
+    buyNowCarts: HttpTypes.StoreCart[]
+    reorderCarts: HttpTypes.StoreCart[]
+  }
+}) => {
+  return (
+    <div className="bg-page-bg min-h-screen">
+      <div className="w-full max-w-[1360px] mx-auto px-3 min-[550px]:px-4 sm:px-6 md:px-8 min-[1023px]:px-4 min-[1150px]:px-6 min-[1360px]:px-8 pt-3 pb-4 min-[550px]:pt-4 min-[550px]:pb-6 sm:pt-5 sm:pb-8 md:pt-6 md:pb-12 min-[1023px]:pt-6 min-[1023px]:pb-10 min-[1150px]:pt-6 min-[1150px]:pb-12 min-[1360px]:pt-8 min-[1360px]:pb-12" data-testid="cart-container">
+        
+        {cart?.items?.length ? (
+          <>
+            <CartViewTracker cart={cart} />
+            
+            <div className="grid grid-cols-1 min-[1024px]:grid-cols-[1fr_380px] min-[1150px]:grid-cols-[1fr_420px] gap-4 min-[550px]:gap-5 sm:gap-6 md:gap-8 min-[768px]:gap-6 min-[1023px]:gap-4 min-[1150px]:gap-6 min-[1200px]:gap-10 min-[1360px]:gap-12 w-full">
+              <div className="flex flex-col gap-y-3 min-[550px]:gap-y-4 sm:gap-y-6 order-1 min-[768px]:order-1 min-[1024px]:order-1 w-full min-w-0">
+                <div className="w-full min-[1024px]:pr-2">
+
+
+                  {!customer && (
+                    <div className="mb-4">
+                      <SignInPrompt />
+                      <Divider />
+                    </div>
+                  )}
+
+                  <ItemsTemplate cart={cart} />
+                  
+                  <div className="mt-4 min-[1024px]:mt-6">
+                    <AbandonedCarts abandonedCarts={abandonedCarts} countryCode={countryCode} />
+                  </div>
+                </div>
+              </div>
+              <div className="relative order-2 min-[768px]:order-2 min-[1024px]:order-2 w-full min-[1024px]:w-auto h-full">
+                <div className="flex flex-col gap-y-4 min-[550px]:gap-y-5 sm:gap-y-6 min-[768px]:gap-y-6 min-[1024px]:sticky min-[1024px]:top-20 w-full">
+                  {cart && cart.region && (
+                    <Summary cart={cart as any} customer={customer} />
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <YouMayAlsoLike cart={cart} countryCode={countryCode} />
+          </>
+        ) : (
+          <div className="flex flex-col items-center justify-center w-full min-h-[50vh] pt-8 pb-16">
+            {abandonedCarts && (abandonedCarts.buyNowCarts.length > 0 || abandonedCarts.reorderCarts.length > 0) ? (
+              <div className="w-full max-w-4xl px-4 animate-in fade-in duration-500">
+                <div className="text-center mb-10">
+                  <h1 className="text-3xl sm:text-4xl font-extrabold text-neutral-900 mb-3 tracking-tight">
+                    You have pending orders
+                  </h1>
+                  <p className="text-neutral-500 text-base sm:text-lg max-w-md mx-auto">
+                    Your main cart is empty, but you left some items behind. Complete your purchase below!
+                  </p>
+                </div>
+                <AbandonedCarts abandonedCarts={abandonedCarts} countryCode={countryCode} />
+              </div>
+            ) : (
+              <EmptyCartMessage />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default CartTemplate

package/templates/storefront/src/modules/cart/templates/items.tsx

@@ -0,0 +1,49 @@
+import repeat from "@core/util/repeat"
+import { HttpTypes } from "@medusajs/types"
+import { Heading } from "@medusajs/ui"
+
+import CartItemCard from "@modules/cart/components/cart-item-card"
+import AppliedPromotions from "@modules/cart/components/applied-promotions"
+import SkeletonLineItem from "@modules/skeletons/components/skeleton-line-item"
+
+type ItemsTemplateProps = {
+  cart?: HttpTypes.StoreCart
+}
+
+const ItemsTemplate = ({ cart }: ItemsTemplateProps) => {
+  const items = cart?.items
+  return (
+    <div className="flex flex-col gap-y-4 min-[550px]:gap-y-6">
+      <div className="bg-white border border-gray-200 rounded-lg p-3 min-[550px]:p-4 sm:p-5 md:p-6 min-[1023px]:p-4 min-[1150px]:p-5 min-[1360px]:p-6 w-full overflow-hidden">
+        <div className="pb-2.5 min-[550px]:pb-3 sm:pb-4 min-[1023px]:pb-3 min-[1150px]:pb-4 min-[1360px]:pb-4 flex items-center justify-between border-b border-gray-200 mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
+          <Heading className="text-lg min-[550px]:text-xl sm:text-2xl min-[1023px]:text-xl min-[1150px]:text-2xl min-[1360px]:text-2xl font-bold text-heading">Your Bag</Heading>
+          {items && items.length > 0 && (
+            <span className="text-xs min-[550px]:text-xs sm:text-sm min-[1023px]:text-xs min-[1150px]:text-sm min-[1360px]:text-sm text-gray-600">{items.length} {items.length === 1 ? 'item' : 'items'}</span>
+          )}
+        </div>
+        <div className="w-full">
+          {items
+            ? items
+                .sort((a, b) => {
+                  return (a.created_at ?? "") > (b.created_at ?? "") ? -1 : 1
+                })
+                .map((item) => {
+                  return (
+                    <CartItemCard
+                      key={item.id}
+                      item={item}
+                      currencyCode={cart?.currency_code || "INR"}
+                    />
+                  )
+                })
+            : repeat(5).map((i) => {
+                return <SkeletonLineItem key={i} />
+              })}
+        </div>
+      </div>
+      <AppliedPromotions cart={cart as any} />
+    </div>
+  )
+}
+
+export default ItemsTemplate