@burdenoff/microfe-coolandlovely 2026.1101.7 → 2026.1102.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/coolandlovely/components/WardrobeItemCard.d.ts +2 -1
- package/dist/coolandlovely/components/WardrobeItemCard.d.ts.map +1 -1
- package/dist/coolandlovely/components/WardrobeItemCard.js +4 -3
- package/dist/coolandlovely/components/WardrobeItemCard.js.map +1 -1
- package/dist/coolandlovely/components/prices/BestPriceBadge.d.ts +7 -0
- package/dist/coolandlovely/components/prices/BestPriceBadge.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/BestPriceBadge.js +22 -0
- package/dist/coolandlovely/components/prices/BestPriceBadge.js.map +1 -0
- package/dist/coolandlovely/components/prices/LookbookPriceBoard.d.ts +10 -0
- package/dist/coolandlovely/components/prices/LookbookPriceBoard.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/LookbookPriceBoard.js +120 -0
- package/dist/coolandlovely/components/prices/LookbookPriceBoard.js.map +1 -0
- package/dist/coolandlovely/components/prices/PriceComparison.d.ts +5 -0
- package/dist/coolandlovely/components/prices/PriceComparison.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/PriceComparison.js +95 -0
- package/dist/coolandlovely/components/prices/PriceComparison.js.map +1 -0
- package/dist/coolandlovely/components/prices/PriceCurrencySelect.d.ts +6 -0
- package/dist/coolandlovely/components/prices/PriceCurrencySelect.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/PriceCurrencySelect.js +38 -0
- package/dist/coolandlovely/components/prices/PriceCurrencySelect.js.map +1 -0
- package/dist/coolandlovely/components/prices/PricePanel.d.ts +6 -0
- package/dist/coolandlovely/components/prices/PricePanel.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/PricePanel.js +105 -0
- package/dist/coolandlovely/components/prices/PricePanel.js.map +1 -0
- package/dist/coolandlovely/components/prices/PriceWatchDisclosure.d.ts +2 -0
- package/dist/coolandlovely/components/prices/PriceWatchDisclosure.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/PriceWatchDisclosure.js +28 -0
- package/dist/coolandlovely/components/prices/PriceWatchDisclosure.js.map +1 -0
- package/dist/coolandlovely/components/prices/PriceWatchForm.d.ts +5 -0
- package/dist/coolandlovely/components/prices/PriceWatchForm.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/PriceWatchForm.js +89 -0
- package/dist/coolandlovely/components/prices/PriceWatchForm.js.map +1 -0
- package/dist/coolandlovely/components/prices/PriceWatches.d.ts +3 -0
- package/dist/coolandlovely/components/prices/PriceWatches.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/PriceWatches.js +189 -0
- package/dist/coolandlovely/components/prices/PriceWatches.js.map +1 -0
- package/dist/coolandlovely/components/prices/RetailerOfferLink.d.ts +6 -0
- package/dist/coolandlovely/components/prices/RetailerOfferLink.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/RetailerOfferLink.js +28 -0
- package/dist/coolandlovely/components/prices/RetailerOfferLink.js.map +1 -0
- package/dist/coolandlovely/components/prices/money.d.ts +6 -0
- package/dist/coolandlovely/components/prices/money.d.ts.map +1 -0
- package/dist/coolandlovely/components/prices/money.js +42 -0
- package/dist/coolandlovely/components/prices/money.js.map +1 -0
- package/dist/coolandlovely/hooks/usePriceApi.d.ts +57 -0
- package/dist/coolandlovely/hooks/usePriceApi.d.ts.map +1 -0
- package/dist/coolandlovely/hooks/usePriceApi.js +111 -0
- package/dist/coolandlovely/hooks/usePriceApi.js.map +1 -0
- package/dist/coolandlovely/pages/items/StoreListedPieceView.d.ts.map +1 -1
- package/dist/coolandlovely/pages/items/StoreListedPieceView.js +130 -123
- package/dist/coolandlovely/pages/items/StoreListedPieceView.js.map +1 -1
- package/dist/coolandlovely/pages/items/StyleItemDetailPage.d.ts.map +1 -1
- package/dist/coolandlovely/pages/items/StyleItemDetailPage.js +241 -230
- package/dist/coolandlovely/pages/items/StyleItemDetailPage.js.map +1 -1
- package/dist/coolandlovely/pages/lookbooks/LookbookDetailPage.d.ts.map +1 -1
- package/dist/coolandlovely/pages/lookbooks/LookbookDetailPage.js +64 -119
- package/dist/coolandlovely/pages/lookbooks/LookbookDetailPage.js.map +1 -1
- package/dist/coolandlovely/pages/profile/StyleProfilePage.d.ts.map +1 -1
- package/dist/coolandlovely/pages/profile/StyleProfilePage.js +214 -209
- package/dist/coolandlovely/pages/profile/StyleProfilePage.js.map +1 -1
- package/dist/coolandlovely/pages/wardrobe/WardrobeListPage.d.ts.map +1 -1
- package/dist/coolandlovely/pages/wardrobe/WardrobeListPage.js +83 -49
- package/dist/coolandlovely/pages/wardrobe/WardrobeListPage.js.map +1 -1
- package/dist/generated/wspace-operations.d.ts +282 -2
- package/dist/generated/wspace-operations.d.ts.map +1 -1
- package/dist/generated/wspace-operations.js +87 -1
- package/dist/generated/wspace-operations.js.map +1 -1
- package/dist/generated/wspace-types.d.ts +224 -0
- package/dist/generated/wspace-types.d.ts.map +1 -1
- package/dist/generated/wspace-types.js +8 -0
- package/dist/generated/wspace-types.js.map +1 -0
- package/package.json +4 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StoreListedPieceView.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StoreListedPieceView.tsx"],"sourcesContent":["/**\n * Store-listed piece view (BOFF-10017)\n * @module coolandlovely/pages/items\n *\n * What a shopper sees when they follow a Burdenoff store listing (\"View on CoolAndLovely\") to a\n * piece that belongs to a brand outside their workspace. The workspace catalogue has no such\n * piece, so the page falls back to `cooStoreListedPiece` (product facts only, readable from any\n * workspace) and lets the shopper buy it directly with `cooBuyStoreListedPiece`. The order is\n * held by the brand, paid through the provider global-billing chose, and settled only once the\n * backend re-reads billing's record; the shopper follows it from My Orders.\n */\n\nimport { type FC, useState } from 'react';\nimport { ArrowLeft, Loader2, ShoppingBag, Store } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { TextAreaField, TextField } from '../../components/Field';\nimport { PageLayout } from '../../components/PageLayout';\nimport { PayForOrder } from '../../components/PayForOrder';\nimport { ErrorView, LoadingView } from '../../components/StateViews';\nimport { TagList } from '../../components/TagList';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useTr } from '../../hooks';\nimport {\n useBuyStoreListedPiece,\n useStoreListedPiece,\n useSyncOrderPayment,\n} from '../../hooks/useCommerceApi';\nimport type { CooOrderCheckout, CooStoreListedPiece } from '../../types';\nimport { cn } from '../../utils/cn';\nimport { formatPrice, titleCase } from '../../utils/formatters';\nimport { categoryIcon } from '../../utils/icons';\n\nconst MAX_QUANTITY = 10;\n/** Stock at or below this is shown to the shopper as \"Only N left\". */\nconst LOW_STOCK = 5;\n\nconst chip = (selected: boolean) =>\n cn(\n 'inline-flex min-w-9 items-center justify-center rounded-full border px-3 py-1 text-sm font-medium transition-colors disabled:opacity-40 disabled:line-through',\n selected\n ? 'border-action-primary-bg bg-action-primary-bg text-action-primary-text'\n : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n );\n\nconst primaryButton =\n 'inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50';\n\n/**\n * Units left of a (possibly partial) size/colour choice while the piece tracks stock; null when\n * it does not. The service checks the stock again when the order is placed.\n */\nfunction unitsLeft(\n piece: CooStoreListedPiece,\n size: string | null,\n colour: string | null\n): number | null {\n if (!piece.trackInventory) return null;\n return piece.variants\n .filter(\n (variant) =>\n (size === null || (variant.size ?? '') === size) &&\n (colour === null || (variant.colour ?? '') === colour)\n )\n .reduce((sum, variant) => sum + variant.available, 0);\n}\n\n/** Size/colour/quantity, shipping details and \"Buy now\" for a store-listed piece. */\nconst BuyListedPiecePanel: FC<{\n piece: CooStoreListedPiece;\n onCheckout: (checkout: CooOrderCheckout) => void;\n}> = ({ piece, onCheckout }) => {\n const tr = useTr();\n const buy = useBuyStoreListedPiece();\n const [size, setSize] = useState<string | null>(\n piece.sizes.length === 1 ? (piece.sizes[0] ?? null) : null\n );\n const [colour, setColour] = useState<string | null>(\n piece.colours.length === 1 ? (piece.colours[0] ?? null) : null\n );\n const [quantity, setQuantity] = useState(1);\n const [shippingName, setShippingName] = useState('');\n const [shippingAddress, setShippingAddress] = useState('');\n const [buyerNote, setBuyerNote] = useState('');\n\n if (!piece.inStock) {\n return (\n <p className=\"rounded-lg border border-border-seam bg-bg-sunken p-3 text-sm text-text-secondary\">\n {tr('coolandlovely.storePiece.soldOut', 'This piece is sold out right now.')}\n </p>\n );\n }\n\n const needsSize = piece.sizes.length > 0 && !size;\n const needsColour = piece.colours.length > 0 && !colour;\n const left = needsSize || needsColour ? null : unitsLeft(piece, size ?? '', colour ?? '');\n const soldOut = left !== null && left <= 0;\n const maxQuantity = left === null ? MAX_QUANTITY : Math.max(1, Math.min(MAX_QUANTITY, left));\n const canSubmit =\n !needsSize &&\n !needsColour &&\n !soldOut &&\n shippingName.trim() !== '' &&\n shippingAddress.trim() !== '';\n\n const submit = () => {\n buy.mutate(\n {\n styleItemId: piece.id,\n quantity,\n size,\n colour,\n shippingName: shippingName.trim(),\n shippingAddress: shippingAddress.trim(),\n buyerNote: buyerNote.trim() || null,\n },\n { onSuccess: onCheckout }\n );\n };\n\n return (\n <div className=\"space-y-4\" data-testid=\"store-buy-panel\">\n {piece.sizes.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n {tr('coolandlovely.cart.chooseSize', 'Choose a size')}\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {piece.sizes.map((option) => (\n <button\n key={option}\n type=\"button\"\n aria-pressed={size === option}\n disabled={unitsLeft(piece, option, colour) === 0}\n onClick={() => {\n setSize(option);\n setQuantity(1);\n }}\n className={chip(size === option)}\n >\n {option}\n </button>\n ))}\n </div>\n </div>\n )}\n {piece.colours.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n {tr('coolandlovely.cart.chooseColour', 'Choose a colour')}\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {piece.colours.map((option) => (\n <button\n key={option}\n type=\"button\"\n aria-pressed={colour === option}\n disabled={unitsLeft(piece, size, option) === 0}\n onClick={() => {\n setColour(option);\n setQuantity(1);\n }}\n className={chip(colour === option)}\n >\n {option}\n </button>\n ))}\n </div>\n </div>\n )}\n <div className=\"flex items-center gap-3\">\n <label htmlFor=\"coo-store-quantity\" className=\"text-sm text-text-secondary\">\n {tr('coolandlovely.cart.quantity', 'Quantity')}\n </label>\n <select\n id=\"coo-store-quantity\"\n value={quantity}\n onChange={(event) => setQuantity(Number(event.target.value))}\n className=\"rounded-lg border border-border-seam bg-bg-surface px-2 py-1.5 text-sm text-text-primary\"\n >\n {Array.from({ length: maxQuantity }, (_, index) => index + 1).map((value) => (\n <option key={value} value={value}>\n {value}\n </option>\n ))}\n </select>\n </div>\n {left !== null && (\n <p\n data-testid=\"store-stock-left\"\n className={cn(\n 'text-sm font-medium',\n soldOut || left <= LOW_STOCK ? 'text-status-warning-text' : 'text-text-secondary'\n )}\n >\n {soldOut\n ? tr('coolandlovely.cart.soldOut', 'Sold out in this size and colour')\n : left <= LOW_STOCK\n ? tr('coolandlovely.cart.onlyLeft', 'Only {{count}} left', { count: left })\n : tr('coolandlovely.cart.inStock', 'In stock')}\n </p>\n )}\n <div className=\"space-y-3 border-t border-border-seam pt-4\">\n <TextField\n id=\"coo-store-shipping-name\"\n label={tr('coolandlovely.checkout.shippingName', 'Full name')}\n value={shippingName}\n onChange={setShippingName}\n required\n />\n <TextAreaField\n id=\"coo-store-shipping-address\"\n label={tr('coolandlovely.checkout.shippingAddress', 'Shipping address')}\n value={shippingAddress}\n onChange={setShippingAddress}\n rows={3}\n required\n />\n <TextField\n id=\"coo-store-buyer-note\"\n label={tr('coolandlovely.checkout.note', 'Note for the brand (optional)')}\n value={buyerNote}\n onChange={setBuyerNote}\n />\n </div>\n <p className=\"text-xs text-text-secondary\">\n {tr('coolandlovely.cart.taxNote', 'Tax is calculated when you place the order.')}\n </p>\n {buy.error && <p className=\"text-sm text-status-error-text\">{buy.error.message}</p>}\n <button\n type=\"button\"\n disabled={!canSubmit || buy.isPending}\n onClick={submit}\n className={primaryButton}\n >\n {buy.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <ShoppingBag className=\"h-4 w-4\" />\n )}\n {tr('coolandlovely.storePiece.buyNow', 'Buy now · {{amount}}', {\n amount: formatPrice(piece.price * quantity, piece.currency),\n })}\n </button>\n </div>\n );\n};\n\n/** Pay for the order the store purchase created. */\nconst PayForStorePurchase: FC<{ session: CooOrderCheckout }> = ({ session }) => {\n const tr = useTr();\n const { navigateTo } = useCoolAndLovely();\n const sync = useSyncOrderPayment();\n const settle = async () => {\n await sync.mutateAsync(session.order.id).catch(() => undefined);\n navigateTo(`/orders/${session.order.id}`);\n };\n return (\n <PageLayout\n title={tr('coolandlovely.checkout.payTitle', 'Pay for your order')}\n description={session.order.orderNumber}\n >\n <div className=\"mx-auto max-w-lg space-y-4\">\n <GlassCard treatment=\"glass\" className=\"space-y-4 p-6\">\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between\">\n <dt className=\"text-text-secondary\">\n {tr('coolandlovely.checkout.subtotal', 'Subtotal')}\n </dt>\n <dd className=\"tabular-nums text-text-primary\">\n {formatPrice(session.subtotal, session.currency)}\n </dd>\n </div>\n <div className=\"flex justify-between\">\n <dt className=\"text-text-secondary\">{tr('coolandlovely.checkout.tax', 'Tax')}</dt>\n <dd className=\"tabular-nums text-text-primary\">\n {formatPrice(session.taxAmount, session.currency)}\n </dd>\n </div>\n <div className=\"flex justify-between border-t border-border-seam pt-2 text-base font-semibold\">\n <dt className=\"text-text-primary\">{tr('coolandlovely.checkout.total', 'Total')}</dt>\n <dd className=\"tabular-nums text-text-primary\" data-testid=\"store-checkout-total\">\n {formatPrice(session.total, session.currency)}\n </dd>\n </div>\n </dl>\n <PayForOrder checkout={session} onSettle={settle} />\n <button\n type=\"button\"\n onClick={() => navigateTo(`/orders/${session.order.id}`)}\n className=\"w-full text-center text-sm font-medium text-text-secondary hover:underline\"\n >\n {tr('coolandlovely.checkout.payLater', 'Pay later from My Orders')}\n </button>\n </GlassCard>\n </div>\n </PageLayout>\n );\n};\n\n/**\n * The fallback piece page for a store shopper. Renders \"Item not found\" when the store does not\n * list the piece either (drafts, retired pieces, pieces of unpublished brands).\n */\nexport const StoreListedPieceView: FC<{ itemId: string | undefined; onRetry: () => void }> = ({\n itemId,\n onRetry,\n}) => {\n const tr = useTr();\n const { navigateTo } = useCoolAndLovely();\n const query = useStoreListedPiece(itemId, true);\n const [session, setSession] = useState<CooOrderCheckout | null>(null);\n const pageTitle = tr('coolandlovely.storePiece.pageTitle', 'Style item');\n\n if (session) return <PayForStorePurchase session={session} />;\n\n if (query.isLoading) {\n return (\n <PageLayout title={pageTitle}>\n <LoadingView label={tr('coolandlovely.storePiece.loading', 'Loading item…')} />\n </PageLayout>\n );\n }\n\n const piece = query.data;\n if (query.isError || !piece) {\n return (\n <PageLayout title={pageTitle}>\n <ErrorView\n title={tr('coolandlovely.storePiece.notFound', 'Item not found')}\n onRetry={() => {\n onRetry();\n void query.refetch();\n }}\n />\n </PageLayout>\n );\n }\n\n return (\n <PageLayout\n title={piece.name}\n description={piece.brandName}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/discover')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> {tr('coolandlovely.storePiece.back', 'Discover')}\n </button>\n }\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\" data-testid=\"store-listed-piece\">\n <div className=\"lg:col-span-2\">\n <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n <Thumbnail\n icon={categoryIcon(piece.category, 48)}\n seed={piece.id}\n alt={piece.name}\n className=\"aspect-[4/5] w-full\"\n />\n {piece.description && (\n <div className=\"p-6\">\n <p className=\"text-sm leading-relaxed text-text-secondary\">{piece.description}</p>\n </div>\n )}\n </GlassCard>\n </div>\n\n <div className=\"space-y-4\">\n <GlassCard treatment=\"glass\" className=\"space-y-5 p-6\">\n <div>\n <p className=\"inline-flex items-center gap-1.5 text-xs font-medium text-accent-primary\">\n <Store className=\"h-3.5 w-3.5\" />\n {tr('coolandlovely.storePiece.fromStore', 'Listed in the Burdenoff store')}\n </p>\n <h2 className=\"mt-2 text-2xl font-semibold leading-tight text-text-primary\">\n {piece.name}\n </h2>\n <p className=\"mt-1 text-sm font-medium text-text-secondary\">\n {piece.brandName}\n <span className=\"ml-1 text-text-tertiary\">@{piece.brandHandle}</span>\n </p>\n <p className=\"mt-3 text-3xl font-bold text-text-primary tabular-nums\">\n {formatPrice(piece.price, piece.currency)}\n <span className=\"ml-2 text-base font-medium text-text-secondary\">\n {piece.currency}\n </span>\n </p>\n </div>\n {piece.colours.length > 0 && <ColourSwatchRow colours={piece.colours} max={12} />}\n <div className=\"border-t border-border-seam pt-5\">\n <BuyListedPiecePanel piece={piece} onCheckout={setSession} />\n </div>\n {piece.materials.length > 0 && (\n <div>\n <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n {tr('coolandlovely.storePiece.materials', 'Materials')}\n </p>\n <p className=\"text-sm text-text-primary\">{piece.materials.join(', ')}</p>\n </div>\n )}\n {piece.tags.length > 0 && <TagList tags={piece.tags} max={12} tone=\"accent\" />}\n </GlassCard>\n\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">\n {tr('coolandlovely.storePiece.details', 'Details')}\n </h3>\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">\n {tr('coolandlovely.storePiece.category', 'Category')}\n </dt>\n <dd className=\"text-text-primary\">{titleCase(piece.category)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">SKU</dt>\n <dd className=\"text-text-primary\">{piece.sku ?? '—'}</dd>\n </div>\n </dl>\n <p className=\"mt-3 text-xs text-text-secondary\">\n {tr(\n 'coolandlovely.storePiece.soldBy',\n 'Sold and shipped by {{brand}}. Your order appears in My Orders.',\n { brand: piece.brandName }\n )}\n </p>\n </GlassCard>\n </div>\n </div>\n </PageLayout>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StoreListedPieceView.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StoreListedPieceView.tsx"],"sourcesContent":["/**\n * Store-listed piece view (BOFF-10017)\n * @module coolandlovely/pages/items\n *\n * What a shopper sees when they follow a Burdenoff store listing (\"View on CoolAndLovely\") to a\n * piece that belongs to a brand outside their workspace. The workspace catalogue has no such\n * piece, so the page falls back to `cooStoreListedPiece` (product facts only, readable from any\n * workspace) and lets the shopper buy it directly with `cooBuyStoreListedPiece`. The order is\n * held by the brand, paid through the provider global-billing chose, and settled only once the\n * backend re-reads billing's record; the shopper follows it from My Orders.\n */\n\nimport { PricePanel } from '../../components/prices/PricePanel';\nimport { type FC, useState } from 'react';\nimport { ArrowLeft, Loader2, ShoppingBag, Store } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { TextAreaField, TextField } from '../../components/Field';\nimport { PageLayout } from '../../components/PageLayout';\nimport { PayForOrder } from '../../components/PayForOrder';\nimport { ErrorView, LoadingView } from '../../components/StateViews';\nimport { TagList } from '../../components/TagList';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useTr } from '../../hooks';\nimport {\n useBuyStoreListedPiece,\n useStoreListedPiece,\n useSyncOrderPayment,\n} from '../../hooks/useCommerceApi';\nimport type { CooOrderCheckout, CooStoreListedPiece } from '../../types';\nimport { cn } from '../../utils/cn';\nimport { formatPrice, titleCase } from '../../utils/formatters';\nimport { categoryIcon } from '../../utils/icons';\n\nconst MAX_QUANTITY = 10;\n/** Stock at or below this is shown to the shopper as \"Only N left\". */\nconst LOW_STOCK = 5;\n\nconst chip = (selected: boolean) =>\n cn(\n 'inline-flex min-w-9 items-center justify-center rounded-full border px-3 py-1 text-sm font-medium transition-colors disabled:opacity-40 disabled:line-through',\n selected\n ? 'border-action-primary-bg bg-action-primary-bg text-action-primary-text'\n : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n );\n\nconst primaryButton =\n 'inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50';\n\n/**\n * Units left of a (possibly partial) size/colour choice while the piece tracks stock; null when\n * it does not. The service checks the stock again when the order is placed.\n */\nfunction unitsLeft(\n piece: CooStoreListedPiece,\n size: string | null,\n colour: string | null\n): number | null {\n if (!piece.trackInventory) return null;\n return piece.variants\n .filter(\n (variant) =>\n (size === null || (variant.size ?? '') === size) &&\n (colour === null || (variant.colour ?? '') === colour)\n )\n .reduce((sum, variant) => sum + variant.available, 0);\n}\n\n/** Size/colour/quantity, shipping details and \"Buy now\" for a store-listed piece. */\nconst BuyListedPiecePanel: FC<{\n piece: CooStoreListedPiece;\n onCheckout: (checkout: CooOrderCheckout) => void;\n}> = ({ piece, onCheckout }) => {\n const tr = useTr();\n const buy = useBuyStoreListedPiece();\n const [size, setSize] = useState<string | null>(\n piece.sizes.length === 1 ? (piece.sizes[0] ?? null) : null\n );\n const [colour, setColour] = useState<string | null>(\n piece.colours.length === 1 ? (piece.colours[0] ?? null) : null\n );\n const [quantity, setQuantity] = useState(1);\n const [shippingName, setShippingName] = useState('');\n const [shippingAddress, setShippingAddress] = useState('');\n const [buyerNote, setBuyerNote] = useState('');\n\n if (!piece.inStock) {\n return (\n <p className=\"rounded-lg border border-border-seam bg-bg-sunken p-3 text-sm text-text-secondary\">\n {tr('coolandlovely.storePiece.soldOut', 'This piece is sold out right now.')}\n </p>\n );\n }\n\n const needsSize = piece.sizes.length > 0 && !size;\n const needsColour = piece.colours.length > 0 && !colour;\n const left = needsSize || needsColour ? null : unitsLeft(piece, size ?? '', colour ?? '');\n const soldOut = left !== null && left <= 0;\n const maxQuantity = left === null ? MAX_QUANTITY : Math.max(1, Math.min(MAX_QUANTITY, left));\n const canSubmit =\n !needsSize &&\n !needsColour &&\n !soldOut &&\n shippingName.trim() !== '' &&\n shippingAddress.trim() !== '';\n\n const submit = () => {\n buy.mutate(\n {\n styleItemId: piece.id,\n quantity,\n size,\n colour,\n shippingName: shippingName.trim(),\n shippingAddress: shippingAddress.trim(),\n buyerNote: buyerNote.trim() || null,\n },\n { onSuccess: onCheckout }\n );\n };\n\n return (\n <div className=\"space-y-4\" data-testid=\"store-buy-panel\">\n {piece.sizes.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n {tr('coolandlovely.cart.chooseSize', 'Choose a size')}\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {piece.sizes.map((option) => (\n <button\n key={option}\n type=\"button\"\n aria-pressed={size === option}\n disabled={unitsLeft(piece, option, colour) === 0}\n onClick={() => {\n setSize(option);\n setQuantity(1);\n }}\n className={chip(size === option)}\n >\n {option}\n </button>\n ))}\n </div>\n </div>\n )}\n {piece.colours.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n {tr('coolandlovely.cart.chooseColour', 'Choose a colour')}\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {piece.colours.map((option) => (\n <button\n key={option}\n type=\"button\"\n aria-pressed={colour === option}\n disabled={unitsLeft(piece, size, option) === 0}\n onClick={() => {\n setColour(option);\n setQuantity(1);\n }}\n className={chip(colour === option)}\n >\n {option}\n </button>\n ))}\n </div>\n </div>\n )}\n <div className=\"flex items-center gap-3\">\n <label htmlFor=\"coo-store-quantity\" className=\"text-sm text-text-secondary\">\n {tr('coolandlovely.cart.quantity', 'Quantity')}\n </label>\n <select\n id=\"coo-store-quantity\"\n value={quantity}\n onChange={(event) => setQuantity(Number(event.target.value))}\n className=\"rounded-lg border border-border-seam bg-bg-surface px-2 py-1.5 text-sm text-text-primary\"\n >\n {Array.from({ length: maxQuantity }, (_, index) => index + 1).map((value) => (\n <option key={value} value={value}>\n {value}\n </option>\n ))}\n </select>\n </div>\n {left !== null && (\n <p\n data-testid=\"store-stock-left\"\n className={cn(\n 'text-sm font-medium',\n soldOut || left <= LOW_STOCK ? 'text-status-warning-text' : 'text-text-secondary'\n )}\n >\n {soldOut\n ? tr('coolandlovely.cart.soldOut', 'Sold out in this size and colour')\n : left <= LOW_STOCK\n ? tr('coolandlovely.cart.onlyLeft', 'Only {{count}} left', { count: left })\n : tr('coolandlovely.cart.inStock', 'In stock')}\n </p>\n )}\n <div className=\"space-y-3 border-t border-border-seam pt-4\">\n <TextField\n id=\"coo-store-shipping-name\"\n label={tr('coolandlovely.checkout.shippingName', 'Full name')}\n value={shippingName}\n onChange={setShippingName}\n required\n />\n <TextAreaField\n id=\"coo-store-shipping-address\"\n label={tr('coolandlovely.checkout.shippingAddress', 'Shipping address')}\n value={shippingAddress}\n onChange={setShippingAddress}\n rows={3}\n required\n />\n <TextField\n id=\"coo-store-buyer-note\"\n label={tr('coolandlovely.checkout.note', 'Note for the brand (optional)')}\n value={buyerNote}\n onChange={setBuyerNote}\n />\n </div>\n <p className=\"text-xs text-text-secondary\">\n {tr('coolandlovely.cart.taxNote', 'Tax is calculated when you place the order.')}\n </p>\n {buy.error && <p className=\"text-sm text-status-error-text\">{buy.error.message}</p>}\n <button\n type=\"button\"\n disabled={!canSubmit || buy.isPending}\n onClick={submit}\n className={primaryButton}\n >\n {buy.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <ShoppingBag className=\"h-4 w-4\" />\n )}\n {tr('coolandlovely.storePiece.buyNow', 'Buy now · {{amount}}', {\n amount: formatPrice(piece.price * quantity, piece.currency),\n })}\n </button>\n </div>\n );\n};\n\n/** Pay for the order the store purchase created. */\nconst PayForStorePurchase: FC<{ session: CooOrderCheckout }> = ({ session }) => {\n const tr = useTr();\n const { navigateTo } = useCoolAndLovely();\n const sync = useSyncOrderPayment();\n const settle = async () => {\n await sync.mutateAsync(session.order.id).catch(() => undefined);\n navigateTo(`/orders/${session.order.id}`);\n };\n return (\n <PageLayout\n title={tr('coolandlovely.checkout.payTitle', 'Pay for your order')}\n description={session.order.orderNumber}\n >\n <div className=\"mx-auto max-w-lg space-y-4\">\n <GlassCard treatment=\"glass\" className=\"space-y-4 p-6\">\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between\">\n <dt className=\"text-text-secondary\">\n {tr('coolandlovely.checkout.subtotal', 'Subtotal')}\n </dt>\n <dd className=\"tabular-nums text-text-primary\">\n {formatPrice(session.subtotal, session.currency)}\n </dd>\n </div>\n <div className=\"flex justify-between\">\n <dt className=\"text-text-secondary\">{tr('coolandlovely.checkout.tax', 'Tax')}</dt>\n <dd className=\"tabular-nums text-text-primary\">\n {formatPrice(session.taxAmount, session.currency)}\n </dd>\n </div>\n <div className=\"flex justify-between border-t border-border-seam pt-2 text-base font-semibold\">\n <dt className=\"text-text-primary\">{tr('coolandlovely.checkout.total', 'Total')}</dt>\n <dd className=\"tabular-nums text-text-primary\" data-testid=\"store-checkout-total\">\n {formatPrice(session.total, session.currency)}\n </dd>\n </div>\n </dl>\n <PayForOrder checkout={session} onSettle={settle} />\n <button\n type=\"button\"\n onClick={() => navigateTo(`/orders/${session.order.id}`)}\n className=\"w-full text-center text-sm font-medium text-text-secondary hover:underline\"\n >\n {tr('coolandlovely.checkout.payLater', 'Pay later from My Orders')}\n </button>\n </GlassCard>\n </div>\n </PageLayout>\n );\n};\n\n/**\n * The fallback piece page for a store shopper. Renders \"Item not found\" when the store does not\n * list the piece either (drafts, retired pieces, pieces of unpublished brands).\n */\nexport const StoreListedPieceView: FC<{ itemId: string | undefined; onRetry: () => void }> = ({\n itemId,\n onRetry,\n}) => {\n const tr = useTr();\n const { navigateTo } = useCoolAndLovely();\n const query = useStoreListedPiece(itemId, true);\n const [session, setSession] = useState<CooOrderCheckout | null>(null);\n const pageTitle = tr('coolandlovely.storePiece.pageTitle', 'Style item');\n\n if (session) return <PayForStorePurchase session={session} />;\n\n if (query.isLoading) {\n return (\n <PageLayout title={pageTitle}>\n <LoadingView label={tr('coolandlovely.storePiece.loading', 'Loading item…')} />\n </PageLayout>\n );\n }\n\n const piece = query.data;\n if (query.isError || !piece) {\n return (\n <PageLayout title={pageTitle}>\n <ErrorView\n title={tr('coolandlovely.storePiece.notFound', 'Item not found')}\n onRetry={() => {\n onRetry();\n void query.refetch();\n }}\n />\n </PageLayout>\n );\n }\n\n return (\n <PageLayout\n title={piece.name}\n description={piece.brandName}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/discover')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> {tr('coolandlovely.storePiece.back', 'Discover')}\n </button>\n }\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\" data-testid=\"store-listed-piece\">\n <div className=\"lg:col-span-2\">\n <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n <Thumbnail\n icon={categoryIcon(piece.category, 48)}\n seed={piece.id}\n alt={piece.name}\n className=\"aspect-[4/5] w-full\"\n />\n {piece.description && (\n <div className=\"p-6\">\n <p className=\"text-sm leading-relaxed text-text-secondary\">{piece.description}</p>\n </div>\n )}\n </GlassCard>\n </div>\n\n <div className=\"space-y-4\">\n <GlassCard treatment=\"glass\" className=\"space-y-5 p-6\">\n <div>\n <p className=\"inline-flex items-center gap-1.5 text-xs font-medium text-accent-primary\">\n <Store className=\"h-3.5 w-3.5\" />\n {tr('coolandlovely.storePiece.fromStore', 'Listed in the Burdenoff store')}\n </p>\n <h2 className=\"mt-2 text-2xl font-semibold leading-tight text-text-primary\">\n {piece.name}\n </h2>\n <p className=\"mt-1 text-sm font-medium text-text-secondary\">\n {piece.brandName}\n <span className=\"ml-1 text-text-tertiary\">@{piece.brandHandle}</span>\n </p>\n <p className=\"mt-3 text-3xl font-bold text-text-primary tabular-nums\">\n {formatPrice(piece.price, piece.currency)}\n <span className=\"ml-2 text-base font-medium text-text-secondary\">\n {piece.currency}\n </span>\n </p>\n </div>\n {piece.colours.length > 0 && <ColourSwatchRow colours={piece.colours} max={12} />}\n <div className=\"border-t border-border-seam pt-5\">\n <BuyListedPiecePanel piece={piece} onCheckout={setSession} />\n </div>\n {piece.materials.length > 0 && (\n <div>\n <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n {tr('coolandlovely.storePiece.materials', 'Materials')}\n </p>\n <p className=\"text-sm text-text-primary\">{piece.materials.join(', ')}</p>\n </div>\n )}\n {piece.tags.length > 0 && <TagList tags={piece.tags} max={12} tone=\"accent\" />}\n </GlassCard>\n\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">\n {tr('coolandlovely.storePiece.details', 'Details')}\n </h3>\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">\n {tr('coolandlovely.storePiece.category', 'Category')}\n </dt>\n <dd className=\"text-text-primary\">{titleCase(piece.category)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">SKU</dt>\n <dd className=\"text-text-primary\">{piece.sku ?? '—'}</dd>\n </div>\n </dl>\n <p className=\"mt-3 text-xs text-text-secondary\">\n {tr(\n 'coolandlovely.storePiece.soldBy',\n 'Sold and shipped by {{brand}}. Your order appears in My Orders.',\n { brand: piece.brandName }\n )}\n </p>\n </GlassCard>\n </div>\n </div>\n <div className=\"mt-6\">\n <PricePanel key={piece.id} styleItemId={piece.id} currency={piece.currency} />\n </div>\n </PageLayout>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyleItemDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;
|
|
1
|
+
{"version":3,"file":"StyleItemDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AA2BH,wBAAgB,mBAAmB,gCAkRlC"}
|