jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-1/render.jsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { ArrowRight, Info } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { CartLineRow } from "./cart-line";
+import { getSelectedSubtotal, useCartStore } from "./store";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+function formatMoney(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(value);
+}
+
+export default function ShoppingCartBlock() {
+  const lines = useCartStore((s) => s.lines);
+  const promoInput = useCartStore((s) => s.promoInput);
+  const appliedPromo = useCartStore((s) => s.appliedPromo);
+  const promoError = useCartStore((s) => s.promoError);
+  const toggleSelectAll = useCartStore((s) => s.toggleSelectAll);
+  const setPromoInput = useCartStore((s) => s.setPromoInput);
+  const applyPromo = useCartStore((s) => s.applyPromo);
+  const removePromo = useCartStore((s) => s.removePromo);
+
+  const allSelected = lines.length > 0 && lines.every((l) => l.selected);
+  const someSelected = lines.some((l) => l.selected);
+  const selectAllState: boolean | "indeterminate" = allSelected
+    ? true
+    : someSelected
+      ? "indeterminate"
+      : false;
+
+  const selectedSubtotal = getSelectedSubtotal(lines);
+  const discountAmount = appliedPromo
+    ? selectedSubtotal * (appliedPromo.percentOff / 100)
+    : 0;
+  const afterDiscount = Math.max(0, selectedSubtotal - discountAmount);
+  const shipping = someSelected ? 5.99 : 0;
+  const taxable = afterDiscount + shipping;
+  const tax = someSelected ? Math.round(taxable * 0.045 * 100) / 100 : 0;
+  const orderTotal = afterDiscount + shipping + tax;
+
+  return (
+    <div className="px-4 max-w-5xl py-14 sm:px-6 mx-auto sm:py-20 lg:px-8">
+      <h1 className="text-3xl font-semibold lg:mb-10">Shopping Cart</h1>
+
+      <div className="mt-6 grid items-start gap-8 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          {lines.length === 0 ? (
+            <p className="text-muted-foreground py-12 text-center text-sm">
+              Your cart is empty.
+            </p>
+          ) : (
+            <>
+              <div className="text-muted-foreground mb-2 flex items-center gap-3 text-sm">
+                <Checkbox
+                  id="select-all"
+                  checked={selectAllState}
+                  onCheckedChange={() => toggleSelectAll()}
+                />
+                <Label htmlFor="select-all" className="cursor-pointer">
+                  Select all ({lines.length} items)
+                </Label>
+              </div>
+              <Separator />
+              {lines.map((line) => (
+                <CartLineRow key={line.id} line={line} />
+              ))}
+            </>
+          )}
+        </div>
+
+        <Card className="shadow-none">
+          <CardHeader>
+            <CardTitle>Order Summary</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {!appliedPromo ? (
+              <div className="space-y-2">
+                <div className="flex gap-2">
+                  <Input
+                    id="promo-code"
+                    placeholder="Discount code"
+                    aria-invalid={!!promoError}
+                    value={promoInput}
+                    onChange={(e) => setPromoInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        applyPromo();
+                      }
+                    }}
+                    disabled={!!appliedPromo}
+                  />
+                  <Button type="button" onClick={applyPromo}>
+                    Apply
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <Button
+                type="button"
+                variant="link"
+                onClick={removePromo}
+                size="sm"
+                className="text-destructive h-auto p-0"
+              >
+                Remove discount
+              </Button>
+            )}
+
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Subtotal</span>
+                <span className="font-medium tabular-nums">
+                  {formatMoney(selectedSubtotal)}
+                </span>
+              </div>
+
+              {appliedPromo && discountAmount > 0 ? (
+                <div className="flex justify-between text-green-600">
+                  <span>Discount ({appliedPromo.percentOff}% off)</span>
+                  <span className="font-medium tabular-nums">
+                    −{formatMoney(discountAmount)}
+                  </span>
+                </div>
+              ) : null}
+
+              <div className="flex items-center justify-between">
+                <div className="text-muted-foreground flex items-center gap-1">
+                  Shipping
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <Info className="size-3" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Flat rate for orders with at least one selected item.
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <span className="font-medium tabular-nums">
+                  {formatMoney(shipping)}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="text-muted-foreground flex items-center gap-1">
+                  Tax estimate
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <Info className="size-3" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Estimated tax on discounted subtotal plus shipping.
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <span className="font-medium tabular-nums">
+                  {formatMoney(tax)}
+                </span>
+              </div>
+
+              <Separator />
+
+              <div className="flex justify-between font-medium">
+                <span>Order total</span>
+                <span className="tabular-nums">{formatMoney(orderTotal)}</span>
+              </div>
+            </div>
+
+            <Button className="w-full justify-between" size="lg">
+              Checkout
+              <ArrowRight />
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-2/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-2/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-2/render.jsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+import { CartLineRow } from "./cart-line";
+import {
+  getSelectedItemCount,
+  getSelectedSubtotal,
+  useCartStore,
+} from "./store";
+import { Separator } from "@/components/ui/separator";
+
+function formatMoney(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(value);
+}
+
+export default function ShoppingCartBlock2() {
+  const lines = useCartStore((s) => s.lines);
+  const appliedPromo = useCartStore((s) => s.appliedPromo);
+  const promoInput = useCartStore((s) => s.promoInput);
+  const promoError = useCartStore((s) => s.promoError);
+  const setPromoInput = useCartStore((s) => s.setPromoInput);
+  const applyPromo = useCartStore((s) => s.applyPromo);
+  const removePromo = useCartStore((s) => s.removePromo);
+
+  const rawSelectedSubtotal = getSelectedSubtotal(lines);
+  const selectedCount = getSelectedItemCount(lines);
+
+  const discountAmount = appliedPromo
+    ? rawSelectedSubtotal * (appliedPromo.percentOff / 100)
+    : 0;
+  const afterDiscountSubtotal = Math.max(
+    0,
+    rawSelectedSubtotal - discountAmount,
+  );
+
+  return (
+    <section className="mx-auto max-w-5xl px-4 py-20">
+      <header className="mb-4 flex items-center justify-between">
+        <div className="space-y-2">
+          <h1 className="text-3xl font-semibold">Shopping Cart</h1>
+          <p className="text-muted-foreground text-sm">
+            You have 3 products in your cart
+          </p>
+        </div>
+
+        {!appliedPromo ? (
+          <div className="space-y-2">
+            <div className="flex gap-2">
+              <Input
+                id="promo-code"
+                placeholder="Discount code"
+                aria-invalid={!!promoError}
+                value={promoInput}
+                onChange={(e) => setPromoInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    applyPromo();
+                  }
+                }}
+                disabled={!!appliedPromo}
+              />
+              <Button type="button" onClick={applyPromo}>
+                Apply
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Button
+            type="button"
+            variant="link"
+            onClick={removePromo}
+            size="sm"
+            className="text-destructive h-auto p-0"
+          >
+            Remove discount
+          </Button>
+        )}
+      </header>
+
+      <div>
+        <div className="text-muted-foreground bg-muted hidden items-center gap-4 rounded-lg px-4 py-4 text-xs font-medium md:grid md:grid-cols-[1.6fr_0.5fr_0.7fr_0.5fr]">
+          <div>Product</div>
+          <div>Price</div>
+          <div className="text-center">Quantity</div>
+          <div className="text-right">Total</div>
+        </div>
+
+        <div className="divide-y">
+          {lines.map((line) => (
+            <CartLineRow key={line.id} line={line} />
+          ))}
+        </div>
+
+        <Separator className="mb-6" />
+
+        <div className="bg-background/40 mt-4 rounded-lg">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div className="space-y-1">
+              <div className="text-foreground text-sm font-medium">
+                Sub Total: {formatMoney(afterDiscountSubtotal)}{" "}
+                {appliedPromo && (
+                  <span className="text-destructive">
+                    ({appliedPromo?.percentOff}% off)
+                  </span>
+                )}
+              </div>
+              <div className="text-muted-foreground text-xs">
+                Excl. Tax and Delivery charge
+              </div>
+            </div>
+
+            <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full sm:w-auto"
+                disabled={selectedCount === 0}
+              >
+                Continue Shipping
+              </Button>
+              <Button
+                type="button"
+                className="w-full sm:w-auto"
+                disabled={selectedCount === 0}
+              >
+                Go to Checkout
+                <ArrowRight />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-3/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-3/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-3/render.jsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+import { CartItemRow } from "./cart-item-row";
+import { getSubtotal, useCartStore } from "./store";
+
+function formatMoney(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 1,
+    minimumFractionDigits: 0,
+  }).format(value);
+}
+
+export default function ShoppingCartBlock3() {
+  const lines = useCartStore((s) => s.lines);
+  const promoInput = useCartStore((s) => s.promoInput);
+  const appliedPromo = useCartStore((s) => s.appliedPromo);
+  const promoError = useCartStore((s) => s.promoError);
+  const setPromoInput = useCartStore((s) => s.setPromoInput);
+  const applyPromo = useCartStore((s) => s.applyPromo);
+  const removePromo = useCartStore((s) => s.removePromo);
+  const giftWrapEnabled = useCartStore((s) => s.giftWrapEnabled);
+  const toggleGiftWrap = useCartStore((s) => s.toggleGiftWrap);
+  const giftWrapPrice = useCartStore((s) => s.giftWrapPrice);
+
+  const subtotal = getSubtotal(lines);
+  const discountAmount = appliedPromo
+    ? subtotal * (appliedPromo.percentOff / 100)
+    : 0;
+  const total =
+    Math.max(0, subtotal - discountAmount) +
+    (giftWrapEnabled ? giftWrapPrice : 0);
+
+  const totalQuantity = lines.reduce((sum, l) => sum + l.quantity, 0);
+
+  return (
+    <section className="mx-auto max-w-5xl px-4 py-10 sm:py-20">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="#">Cart</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink href="#">Address</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Payment</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="grid gap-6 lg:grid-cols-[1.35fr_0.65fr]">
+        {lines.length === 0 ? (
+          <div className="text-muted-foreground px-6 pb-10 text-sm">
+            Your cart is empty.
+          </div>
+        ) : (
+          <div>
+            <Separator className="mt-4" />
+            {lines.map((line) => (
+              <CartItemRow key={line.id} line={line} />
+            ))}
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <Card className="shadow-none">
+            <CardHeader>
+              <CardTitle>Coupons</CardTitle>
+              {appliedPromo && (
+                <CardAction>
+                  <Badge variant="secondary" className="gap-1">
+                    20% OFF
+                  </Badge>
+                </CardAction>
+              )}
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {appliedPromo ? (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="flex items-center gap-3">
+                      <div className="text-muted-foreground text-sm font-medium">
+                        Coupon Code:
+                      </div>
+                      <div className="text-sm">{appliedPromo.code}</div>
+                    </div>
+
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      onClick={removePromo}
+                      aria-label="Remove coupon"
+                    >
+                      <X />
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2">
+                    <Input
+                      value={promoInput}
+                      onChange={(e) => setPromoInput(e.target.value)}
+                      placeholder="Coupon code"
+                      aria-invalid={!!promoError}
+                    />
+                    <Button type="button" onClick={applyPromo}>
+                      Apply
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card className="shadow-none">
+            <CardHeader>
+              <CardTitle>Buying for love of your life?</CardTitle>
+              <CardDescription>
+                We'll wrap it beautifully to make it extra special!
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Button
+                type="button"
+                variant="default"
+                onClick={toggleGiftWrap}
+                className="w-full"
+              >
+                Add Gift Wrap
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="shadow-none">
+            <CardHeader>
+              <CardTitle>Price Details</CardTitle>
+              <CardAction>
+                <span className="text-muted-foreground text-xs">
+                  {totalQuantity} items
+                </span>
+              </CardAction>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {lines.length > 0 ? (
+                  <>
+                    {lines.map((line) => (
+                      <div
+                        key={line.id}
+                        className="flex items-center justify-between text-sm"
+                      >
+                        <span className="text-muted-foreground">
+                          <Badge variant="outline" className="mr-2">
+                            {line.quantity}x
+                          </Badge>
+                          {line.title}
+                        </span>
+                        <span className="tabular-nums">
+                          {formatMoney(line.price)}
+                        </span>
+                      </div>
+                    ))}
+                  </>
+                ) : null}
+
+                {discountAmount > 0 ? (
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Discount</span>
+                    <span className="text-destructive tabular-nums">
+                      -{formatMoney(discountAmount)}
+                    </span>
+                  </div>
+                ) : null}
+
+                <Separator />
+
+                <div className="flex items-center justify-between text-sm font-semibold">
+                  <span>Total Amount</span>
+                  <span className="tabular-nums">{formatMoney(total)}</span>
+                </div>
+
+                <Button
+                  type="button"
+                  disabled={lines.length === 0}
+                  className="mt-3 w-full"
+                >
+                  Confirm Order
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-4/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-4/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-4/render.jsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { ShoppingBag } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+import { CartItem } from "./cart-item";
+import { getSubtotal, useBagStore } from "./store";
+import { Badge } from "@/components/ui/badge";
+
+function formatMoney(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+export default function ShoppingCartBlock4() {
+  const [open, setOpen] = useState(true);
+  const items = useBagStore((s) => s.items);
+  const subtotal = getSubtotal(items);
+
+  const itemCount = useMemo(
+    () => items.reduce((sum, item) => sum + item.quantity, 0),
+    [items],
+  );
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Drawer open={open} onOpenChange={setOpen} direction="right">
+        <DrawerTrigger asChild>
+          <Button>Go to Cart</Button>
+        </DrawerTrigger>
+
+        <DrawerContent>
+          <DrawerHeader className="flex-row items-center justify-between border-b px-6 py-5">
+            <DrawerTitle className="flex grow items-center gap-2">
+              <ShoppingBag className="size-4" />
+              Shopping Bag
+              <Badge variant="outline" className="ml-auto">
+                {itemCount} item{itemCount > 1 ? "s" : ""}
+              </Badge>
+            </DrawerTitle>
+          </DrawerHeader>
+
+          <div className="no-scrollbar flex h-full flex-col overflow-y-auto px-6 pb-6">
+            <div className="flex-1 overflow-y-auto">
+              {items.length === 0 ? (
+                <div className="text-muted-foreground flex h-full flex-col items-center justify-center gap-4 py-12 text-center text-sm">
+                  Your bag is empty.
+                  <Button size="sm" variant="outline" onClick={() => setOpen(false)}>
+                    Continue Shopping
+                  </Button>
+                </div>
+              ) : (
+                <div>
+                  {items.map((item) => (
+                    <CartItem key={item.id} item={item} />
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <DrawerFooter>
+            <div className="text-primary text-2xl tabular-nums">
+              {formatMoney(subtotal)}
+            </div>
+            <Button
+              type="button"
+              size="lg"
+              disabled={items.length === 0}
+              className="w-full"
+            >
+              Proceed To Checkout
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/store-navigation-1/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/ecommerce/store-navigation-1/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }