@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/products/components/product-actions/mobile-actions.tsx

@@ -0,0 +1,217 @@
+import { Dialog, Transition } from "@headlessui/react"
+import { Button, clx } from "@medusajs/ui"
+import React, { Fragment, useMemo } from "react"
+
+import useToggleState from "@core/hooks/use-toggle-state"
+import ChevronDown from "@modules/common/icons/chevron-down"
+import X from "@modules/common/icons/x"
+
+import { getProductPrice } from "@core/util/get-product-price"
+import OptionSelect from "./option-select"
+import { HttpTypes } from "@medusajs/types"
+import { isSimpleProduct } from "@core/util/product"
+
+type MobileActionsProps = {
+  product: HttpTypes.StoreProduct
+  variant?: HttpTypes.StoreProductVariant
+  options: Record<string, string | undefined>
+  updateOptions: (title: string, value: string) => void
+  inStock?: boolean
+  handleAddToCart: () => void
+  isAdding?: boolean
+  show: boolean
+  optionsDisabled: boolean
+  quantityInCart?: number
+}
+
+const MobileActions: React.FC<MobileActionsProps> = ({
+  product,
+  variant,
+  options,
+  updateOptions,
+  inStock,
+  handleAddToCart,
+  isAdding,
+  show,
+  optionsDisabled,
+  quantityInCart = 0,
+}) => {
+  const { state, open, close } = useToggleState()
+
+  const price = getProductPrice({
+    product: product,
+    variantId: variant?.id,
+  })
+
+  const selectedPrice = useMemo(() => {
+    if (!price) {
+      return null
+    }
+    const { variantPrice, cheapestPrice } = price
+
+    return variantPrice || cheapestPrice || null
+  }, [price])
+
+  const isSimple = isSimpleProduct(product)
+
+  return (
+    <>
+      <div
+        className={clx("lg:hidden inset-x-0 bottom-0 fixed z-50", {
+          "pointer-events-none": !show,
+        })}
+      >
+        <Transition
+          as={Fragment}
+          show={show}
+          enter="ease-in-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-300"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div
+            className="bg-white flex flex-col gap-y-3 justify-center items-center text-large-regular p-4 h-full w-full border-t border-gray-200"
+            data-testid="mobile-actions"
+          >
+            <div className="flex items-center gap-x-2">
+              <span data-testid="mobile-title">{product.title}</span>
+              <span>—</span>
+              {selectedPrice ? (
+                <div className="flex items-end gap-x-2 text-ui-fg-base">
+                  {selectedPrice.price_type === "sale" && (
+                    <p>
+                      <span className="line-through text-small-regular">
+                        {selectedPrice.original_price}
+                      </span>
+                    </p>
+                  )}
+                  <span
+                    className={clx({
+                      "text-ui-fg-interactive":
+                        selectedPrice.price_type === "sale",
+                    })}
+                  >
+                    {selectedPrice.calculated_price}
+                  </span>
+                </div>
+              ) : (
+                <div></div>
+              )}
+            </div>
+            <div className={clx("grid grid-cols-2 w-full gap-x-4", {
+              "!grid-cols-1": isSimple
+            })}>
+              {!isSimple && <Button
+                onClick={open}
+                variant="secondary"
+                className="w-full"
+                data-testid="mobile-actions-button"
+                data-ga-event="select_options_mobile_click"
+                data-ga-label={product.title || "Product"}
+              >
+                <div className="flex items-center justify-between w-full">
+                  <span>
+                    {variant
+                      ? Object.values(options).join(" / ")
+                      : "Select Options"}
+                  </span>
+                  <ChevronDown />
+                </div>
+              </Button>}
+              <Button
+                onClick={handleAddToCart}
+                disabled={!inStock || !variant}
+                className="w-full"
+                isLoading={isAdding}
+                data-testid="mobile-cart-button"
+                data-ga-event="add_to_bag_click"
+                data-ga-label={product.title || "Product"}
+              >
+                {!variant
+                  ? "Select variant"
+                  : !inStock
+                    ? "Out of stock"
+                    : "Add to bag"}
+              </Button>
+            </div>
+          </div>
+        </Transition>
+      </div>
+      <Transition appear show={state} as={Fragment}>
+        <Dialog as="div" className="relative z-[75]" onClose={close}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-700 bg-opacity-75 backdrop-blur-sm" />
+          </Transition.Child>
+
+          <div className="fixed bottom-0 inset-x-0">
+            <div className="flex min-h-full h-full items-center justify-center text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Dialog.Panel
+                  className="w-full h-full transform overflow-hidden text-left flex flex-col gap-y-3"
+                  data-testid="mobile-actions-modal"
+                >
+                  <div className="w-full flex justify-end pr-6">
+                    <button
+                      onClick={close}
+                      className="bg-white w-12 h-12 rounded-full text-ui-fg-base flex justify-center items-center"
+                      data-testid="close-modal-button"
+                    >
+                      <X />
+                    </button>
+                  </div>
+                  <div className="bg-white px-6 py-12">
+                    {(product.variants?.length ?? 0) > 1 && (
+                      <div className="flex flex-col gap-y-6">
+                        {(product.options || []).slice().sort((a, b) => {
+                          const getOrder = (title: string) => {
+                            const t = title.toLowerCase()
+                            if (t.includes('color') || t.includes('colour')) return 1
+                            if (t.includes('size')) return 2
+                            return 3
+                          }
+                          return getOrder(a.title || "") - getOrder(b.title || "")
+                        }).map((option) => {
+                          return (
+                            <div key={option.id}>
+                              <OptionSelect
+                                option={option}
+                                current={options[option.id]}
+                                updateOption={updateOptions}
+                                title={option.title ?? ""}
+                                disabled={optionsDisabled}
+                              />
+                            </div>
+                          )
+                        })}
+                      </div>
+                    )}
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  )
+}
+
+export default MobileActions

package/templates/storefront/src/modules/products/components/product-actions/option-select.tsx

@@ -0,0 +1,62 @@
+import { HttpTypes } from "@medusajs/types"
+import { clx } from "@medusajs/ui"
+import React from "react"
+
+type OptionSelectProps = {
+  option: HttpTypes.StoreProductOption
+  current: string | undefined
+  updateOption: (title: string, value: string) => void
+  title: string
+  disabled: boolean
+  error?: boolean
+  "data-testid"?: string
+}
+
+const OptionSelect: React.FC<OptionSelectProps> = ({
+  option,
+  current,
+  updateOption,
+  title,
+  "data-testid": dataTestId,
+  disabled,
+  error,
+}) => {
+  const filteredOptions = (option.values ?? []).map((v) => v.value)
+
+  const isSize = title.toLowerCase().includes('size')
+
+  return (
+    <div className="flex flex-col gap-y-3">
+      <div
+        className={clx("flex flex-wrap gap-2 transition-all duration-300", {
+          "grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6": isSize,
+        })}
+        data-testid={dataTestId}
+      >
+        {filteredOptions.map((v) => {
+          return (
+            <button
+              onClick={() => updateOption(option.id, v)}
+              key={v}
+              className={clx(
+                "border text-sm font-medium h-10 transition-all",
+                {
+                  "border-purple-600 bg-purple-100 text-purple-900 font-bold rounded-[30px] shadow-sm": v === current && isSize,
+                  "border-gray-400 bg-white text-gray-900 font-bold hover:border-purple-600 rounded-[30px] hover:bg-purple-50 transition-all": v !== current && isSize,
+                  "border-gray-400 bg-white text-gray-900 font-bold rounded-[30px] p-2 flex-1 hover:border-purple-600 hover:bg-purple-50 transition-all": !isSize,
+                  "border-purple-600 bg-purple-100 text-purple-900 font-bold rounded-[30px] p-2 flex-1 shadow-sm": v === current && !isSize,
+                }
+              )}
+              disabled={disabled}
+              data-testid="option-button"
+            >
+              {v}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default OptionSelect

package/templates/storefront/src/modules/products/components/product-onboarding-cta/index.tsx

@@ -0,0 +1,30 @@
+import { Button, Container, Text } from "@medusajs/ui"
+import { cookies as nextCookies } from "next/headers"
+
+async function ProductOnboardingCta() {
+  const cookies = await nextCookies()
+
+  const isOnboarding = cookies.get("_medusa_onboarding")?.value === "true"
+
+  if (!isOnboarding) {
+    return null
+  }
+
+  return (
+    <Container className="max-w-4xl h-full bg-ui-bg-subtle w-full p-8">
+      <div className="flex flex-col gap-y-4 center">
+        <Text className="text-ui-fg-base text-xl">
+          Your demo product was successfully created! 🎉
+        </Text>
+        <Text className="text-ui-fg-subtle text-small-regular">
+          You can now continue setting up your store in the admin.
+        </Text>
+        <a href="http://localhost:7001/a/orders?onboarding_step=create_order_nextjs">
+          <Button className="w-full">Continue setup in admin</Button>
+        </a>
+      </div>
+    </Container>
+  )
+}
+
+export default ProductOnboardingCta

package/templates/storefront/src/modules/products/components/product-preview/index.tsx

@@ -0,0 +1,5 @@
+/**
+ * @deprecated Import from `@registry/components/product-card` instead.
+ * Kept as a legacy shim during migration.
+ */
+export { default } from "@registry/components/product-card"

package/templates/storefront/src/modules/products/components/product-preview/price.tsx

@@ -0,0 +1,29 @@
+import { Text, clx } from "@medusajs/ui"
+import { VariantPrice } from "types/global"
+
+export default async function PreviewPrice({ price }: { price: VariantPrice }) {
+  if (!price) {
+    return null
+  }
+
+  return (
+    <>
+      {price.price_type === "sale" && (
+        <Text
+          className="line-through text-ui-fg-muted"
+          data-testid="original-price"
+        >
+          {price.original_price}
+        </Text>
+      )}
+      <Text
+        className={clx("text-ui-fg-muted", {
+          "text-ui-fg-interactive": price.price_type === "sale",
+        })}
+        data-testid="price"
+      >
+        {price.calculated_price}
+      </Text>
+    </>
+  )
+}

package/templates/storefront/src/modules/products/components/product-price/index.tsx

@@ -0,0 +1,58 @@
+import { clx } from "@medusajs/ui"
+
+import { getProductPrice } from "@core/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+
+export default function ProductPrice({
+  product,
+  variant,
+}: {
+  product: HttpTypes.StoreProduct
+  variant?: HttpTypes.StoreProductVariant
+}) {
+  const { cheapestPrice, variantPrice } = getProductPrice({
+    product,
+    variantId: variant?.id,
+  })
+
+  const selectedPrice = variant ? variantPrice : cheapestPrice
+
+  if (!selectedPrice) {
+    return <div className="block w-32 h-9 bg-gray-100 animate-pulse" />
+  }
+
+  return (
+    <div className="flex flex-col text-ui-fg-base">
+      <span
+        className={clx("text-xl-semi", {
+          "text-ui-fg-interactive": selectedPrice.price_type === "sale",
+        })}
+      >
+        {!variant && "From "}
+        <span
+          data-testid="product-price"
+          data-value={selectedPrice.calculated_price_number}
+        >
+          {selectedPrice.calculated_price}
+        </span>
+      </span>
+      {selectedPrice.price_type === "sale" && (
+        <>
+          <p>
+            <span className="text-ui-fg-subtle">Original: </span>
+            <span
+              className="line-through"
+              data-testid="original-product-price"
+              data-value={selectedPrice.original_price_number}
+            >
+              {selectedPrice.original_price}
+            </span>
+          </p>
+          <span className="text-ui-fg-interactive">
+            -{selectedPrice.percentage_diff}%
+          </span>
+        </>
+      )}
+    </div>
+  )
+}

package/templates/storefront/src/modules/products/components/product-rating/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/common/components/product/product-rating"

package/templates/storefront/src/modules/products/components/product-tabs/accordion.tsx

@@ -0,0 +1,100 @@
+import { Text, clx } from "@medusajs/ui"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import React from "react"
+
+type AccordionItemProps = AccordionPrimitive.AccordionItemProps & {
+  title: string
+  subtitle?: string
+  description?: string
+  required?: boolean
+  tooltip?: string
+  forceMountContent?: true
+  headingSize?: "small" | "medium" | "large"
+  customTrigger?: React.ReactNode
+  complete?: boolean
+  active?: boolean
+  triggerable?: boolean
+  children: React.ReactNode
+}
+
+type AccordionProps =
+  | (AccordionPrimitive.AccordionSingleProps &
+      React.RefAttributes<HTMLDivElement>)
+  | (AccordionPrimitive.AccordionMultipleProps &
+      React.RefAttributes<HTMLDivElement>)
+
+const Accordion: React.FC<AccordionProps> & {
+  Item: React.FC<AccordionItemProps>
+} = ({ children, ...props }) => {
+  return (
+    <AccordionPrimitive.Root {...props}>{children}</AccordionPrimitive.Root>
+  )
+}
+
+const Item: React.FC<AccordionItemProps> = ({
+  title,
+  subtitle,
+  description,
+  children,
+  className,
+  headingSize = "large",
+  customTrigger = undefined,
+  forceMountContent = undefined,
+  triggerable,
+  ...props
+}) => {
+  return (
+    <AccordionPrimitive.Item
+      {...props}
+      className={clx(
+        "border-grey-20 group border-t last:mb-0 last:border-b",
+        "py-3",
+        className
+      )}
+    >
+      <AccordionPrimitive.Header className="px-1">
+        <div className="flex flex-col">
+          <div className="flex w-full items-center justify-between">
+            <div className="flex items-center gap-4">
+              <Text className="text-ui-fg-subtle text-sm">{title}</Text>
+            </div>
+            <AccordionPrimitive.Trigger>
+              {customTrigger || <MorphingTrigger />}
+            </AccordionPrimitive.Trigger>
+          </div>
+          {subtitle && (
+            <Text as="span" size="small" className="mt-1">
+              {subtitle}
+            </Text>
+          )}
+        </div>
+      </AccordionPrimitive.Header>
+      <AccordionPrimitive.Content
+        forceMount={forceMountContent}
+        className={clx(
+          "radix-state-closed:animate-accordion-close radix-state-open:animate-accordion-open radix-state-closed:pointer-events-none px-1"
+        )}
+      >
+        <div className="inter-base-regular group-radix-state-closed:animate-accordion-close">
+          {description && <Text>{description}</Text>}
+          <div className="w-full">{children}</div>
+        </div>
+      </AccordionPrimitive.Content>
+    </AccordionPrimitive.Item>
+  )
+}
+
+Accordion.Item = Item
+
+const MorphingTrigger = () => {
+  return (
+    <div className="text-grey-90 hover:bg-grey-5 active:bg-grey-5 active:text-violet-60 focus:border-violet-60 disabled:text-grey-30 bg-transparent disabled:bg-transparent rounded-rounded group relative p-[6px]">
+      <div className="h-5 w-5">
+        <span className="bg-grey-50 rounded-circle group-radix-state-open:rotate-90 absolute inset-y-[31.75%] left-[48%] right-1/2 w-[1.5px] duration-300" />
+        <span className="bg-grey-50 rounded-circle group-radix-state-open:rotate-90 group-radix-state-open:left-1/2 group-radix-state-open:right-1/2 absolute inset-x-[31.75%] top-[48%] bottom-1/2 h-[1.5px] duration-300" />
+      </div>
+    </div>
+  )
+}
+
+export default Accordion

package/templates/storefront/src/modules/products/components/product-tabs/index.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import Back from "@modules/common/icons/back"
+import FastDelivery from "@modules/common/icons/fast-delivery"
+import Refresh from "@modules/common/icons/refresh"
+
+import Accordion from "./accordion"
+import { HttpTypes } from "@medusajs/types"
+
+type ProductTabsProps = {
+  product: HttpTypes.StoreProduct
+}
+
+import RatingsTab from "./ratings-tab"
+
+const ProductTabs = ({ product }: ProductTabsProps) => {
+  const tabs = [
+    {
+      label: "Product Information",
+      component: <ProductInfoTab product={product} />,
+    },
+    {
+      label: "Shipping & Returns",
+      component: <ShippingInfoTab />,
+    },
+    {
+      label: "Ratings",
+      component: <RatingsTab product={product} />,
+    },
+  ]
+
+  return (
+    <div className="w-full">
+      <Accordion type="multiple">
+        {tabs.map((tab, i) => (
+          <Accordion.Item
+            key={i}
+            title={tab.label}
+            headingSize="medium"
+            value={tab.label}
+          >
+            {tab.component}
+          </Accordion.Item>
+        ))}
+      </Accordion>
+    </div>
+  )
+}
+
+const ProductInfoTab = ({ product }: ProductTabsProps) => {
+  return (
+    <div className="text-sm text-gray-900 py-8 font-medium">
+      <div className="grid grid-cols-2 gap-x-8">
+        <div className="flex flex-col gap-y-4">
+          <div>
+            <span className="font-bold text-gray-900 uppercase text-[10px] tracking-widest">Material</span>
+            <p className="text-gray-800">{product.material ? product.material : "-"}</p>
+          </div>
+          <div>
+            <span className="font-bold text-gray-900 uppercase text-[10px] tracking-widest">Country of origin</span>
+            <p className="text-gray-800">{product.origin_country ? product.origin_country : "-"}</p>
+          </div>
+          <div>
+            <span className="font-bold text-gray-900 uppercase text-[10px] tracking-widest">Type</span>
+            <p className="text-gray-800">{product.type ? product.type.value : "-"}</p>
+          </div>
+        </div>
+        <div className="flex flex-col gap-y-4">
+          <div>
+            <span className="font-bold text-gray-900 uppercase text-[10px] tracking-widest">Weight</span>
+            <p className="text-gray-800">{product.weight ? `${product.weight} g` : "-"}</p>
+          </div>
+          <div>
+            <span className="font-bold text-gray-900 uppercase text-[10px] tracking-widest">Dimensions</span>
+            <p className="text-gray-800">
+              {product.length && product.width && product.height
+                ? `${product.length}L x ${product.width}W x ${product.height}H`
+                : "-"}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ShippingInfoTab = () => {
+  return (
+    <div className="text-sm text-gray-900 py-8 font-medium">
+      <div className="grid grid-cols-1 gap-y-8">
+        <div className="flex items-start gap-x-2">
+          <FastDelivery />
+          <div>
+            <span className="font-semibold">Fast delivery</span>
+            <p className="max-w-sm">
+              Your package will arrive in 3-5 business days at your pick up
+              location or in the comfort of your home.
+            </p>
+          </div>
+        </div>
+        <div className="flex items-start gap-x-2">
+          <Refresh />
+          <div>
+            <span className="font-semibold">Simple exchanges</span>
+            <p className="max-w-sm">
+              Is the fit not quite right? No worries - we&apos;ll exchange your
+              product for a new one.
+            </p>
+          </div>
+        </div>
+        <div className="flex items-start gap-x-2">
+          <Back />
+          <div>
+            <span className="font-semibold">Easy returns</span>
+            <p className="max-w-sm">
+              Just return your product and we&apos;ll refund your money. No
+              questions asked – we&apos;ll do our best to make sure your return
+              is hassle-free.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProductTabs