+ {node}
+
+ );
+ continue;
+ }
+ if (mark === 'strike-through' || mark === 'strike') {
+ node = + {children} ++ ); + } + + return ( +
+ {children} +
+ ); +} + +function renderPortableText( + body: any[], + postTitle?: string +): React.ReactNode[] { + const nodes: React.ReactNode[] = []; + let i = 0; + + while (i < body.length) { + const block = body[i]; + + if (block?._type === 'block' && block.listItem) { + const listType = block.listItem === 'number' ? 'ol' : 'ul'; + const level = block.level ?? 1; + const items: React.ReactNode[] = []; + let j = i; + + while ( + j < body.length && + body[j]?._type === 'block' && + body[j].listItem === block.listItem && + (body[j].level ?? 1) === level + ) { + const item = body[j]; + items.push( +- {renderPortableTextSpans(block.children, block.markDefs)} -
- ); - } + {(post.tags?.length || 0) > 0 && null} - if (block?._type === 'image' && block?.url) { - return ( -- {plainTextFromPortableText(item.body)} -
- )} - {(item.author?.name || - itemCategoryDisplay || - item.publishedAt) && ( -+ {plainTextFromPortableText(item.body)} +
)} - {(item.author?.name || itemCategoryDisplay) && - item.publishedAt && ·} - {item.publishedAt && ( - + {(item.author?.name || + itemCategoryDisplay || + item.publishedAt) && ( +| + | {t('table.title')} | -+ | {t('table.slug')} | -+ | {t('table.price')} | -+ | {t('table.category')} | -+ | {t('table.type')} | -+ | {t('table.stock')} | -+ | {t('table.badge')} | -+ | {t('table.active')} | -+ | {t('table.featured')} | -+ | {t('table.created')} | -+ | {t('table.actions')} | - {row.isFeatured ? t('actions.yes') : t('actions.no')} + {row.isFeatured + ? t('actions.yes') + : t('actions.no')} | @@ -388,19 +395,23 @@ export default async function AdminProductsPage({
-
+
{t('actions.view')}
{t('actions.edit')}
diff --git a/frontend/app/[locale]/shop/cart/CartPageClient.tsx b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
new file mode 100644
index 00000000..9fb12085
--- /dev/null
+++ b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
@@ -0,0 +1,462 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { useParams } from 'next/navigation';
+import { useRouter, Link } from '@/i18n/routing';
+import { useTranslations } from 'next-intl';
+import { cn } from '@/lib/utils';
+import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react';
+
+import { useCart } from '@/components/shop/cart-provider';
+import { generateIdempotencyKey } from '@/lib/shop/idempotency';
+import { formatMoney } from '@/lib/shop/currency';
+import {
+ SHOP_FOCUS,
+ SHOP_LINK_BASE,
+ SHOP_LINK_MD,
+ SHOP_LINK_XS,
+ SHOP_DISABLED,
+ SHOP_CHIP_INTERACTIVE,
+ SHOP_CHIP_SHADOW_HOVER,
+ SHOP_CHIP_BORDER_HOVER,
+ SHOP_STEPPER_BUTTON_BASE,
+ SHOP_CTA_BASE,
+ SHOP_CTA_INTERACTIVE,
+ SHOP_CTA_INSET,
+ SHOP_CTA_WAVE,
+ shopCtaGradient,
+} from '@/lib/shop/ui-classes';
+
+const SHOP_PRODUCT_LINK = cn(
+ 'block truncate',
+ SHOP_LINK_BASE,
+ SHOP_LINK_MD,
+ SHOP_FOCUS
+);
+
+const SHOP_STEPPER_BTN = cn(
+ SHOP_STEPPER_BUTTON_BASE,
+ 'h-8 w-8',
+ SHOP_CHIP_INTERACTIVE,
+ SHOP_CHIP_SHADOW_HOVER,
+ SHOP_CHIP_BORDER_HOVER,
+ SHOP_FOCUS,
+ SHOP_DISABLED
+);
+
+const SHOP_HERO_CTA = cn(
+ SHOP_CTA_BASE,
+ SHOP_CTA_INTERACTIVE,
+ SHOP_FOCUS,
+ SHOP_DISABLED,
+ 'w-full justify-center gap-2 px-6 py-3 text-sm text-white',
+ 'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+export default function CartPage() {
+ const { cart, updateQuantity, removeFromCart } = useCart();
+ const router = useRouter();
+ const t = useTranslations('shop.cart');
+ const tColors = useTranslations('shop.catalog.colors');
+ const [isCheckingOut, setIsCheckingOut] = useState(false);
+ const [checkoutError, setCheckoutError] = useState
+
+
+ + {t('empty')} ++{t('emptyDescription')} + +
+
+
+
+
+ {t('startShopping')}
+
+
+ + {t('title')} ++ +
+
+
-
-
- - {t('empty')} --- {t('emptyDescription')} - - - {t('startShopping')} - -- {t('title')} -- -
-
-
-
+
Payments are disabled in this environment. -{uiCurrency} diff --git a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx index a982b1cf..76f1139c 100644 --- a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx +++ b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx @@ -1,6 +1,7 @@ import { Link } from '@/i18n/routing'; import { ClearCartOnMount } from '@/components/shop/clear-cart-on-mount'; import StripePaymentClient from '../StripePaymentClient'; + import { formatMoney } from '@/lib/shop/currency'; import { getOrderSummary } from '@/lib/services/orders'; import { OrderNotFoundError } from '@/lib/services/errors'; @@ -9,6 +10,25 @@ import { getStripeEnv } from '@/lib/env/stripe'; import { logError } from '@/lib/logging'; import { ensureStripePaymentIntentForOrder } from '@/lib/services/orders/payment-attempts'; import { getTranslations } from 'next-intl/server'; +import { cn } from '@/lib/utils'; + +import { + SHOP_FOCUS, + SHOP_DISABLED, + SHOP_CTA_BASE, + SHOP_CTA_INTERACTIVE, + SHOP_CTA_INSET, + SHOP_CTA_WAVE, + shopCtaGradient, + SHOP_OUTLINE_BTN_BASE, + SHOP_OUTLINE_BTN_INTERACTIVE, +} from '@/lib/shop/ui-classes'; +import { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'Checkout | DevLovers', + description: 'Complete payment securely for order', +}; export const dynamic = 'force-dynamic'; export const revalidate = 0; @@ -31,14 +51,8 @@ function resolveClientSecret( async function buildStatusMessage(status: string) { const t = await getTranslations('shop.checkout.payment.statusMessages'); - if (status === 'paid') { - return t('alreadyPaid'); - } - - if (status === 'failed') { - return t('previousFailed'); - } - + if (status === 'paid') return t('alreadyPaid'); + if (status === 'failed') return t('previousFailed'); return t('completePayment'); } @@ -55,6 +69,58 @@ type PaymentPageProps = { searchParams?: Promise{t('payment.title')} +{t('payment.payForOrder', { orderId: order.id.slice(0, 8) })}+{await buildStatusMessage(order.paymentStatus)} @@ -255,17 +313,22 @@ export default async function PaymentPage(props: PaymentPageProps) {{t('payment.paymentDetails')}+{t('payment.completePayment')}
- {t('payment.amountDue')}
+
+ {t('payment.amountDue')}
+
+
{formatMoney(order.totalAmountMinor, order.currency, locale)}
+
{order.currency} @@ -297,12 +360,14 @@ export default async function PaymentPage(props: PaymentPageProps) {
-
{order.id}
+
+ {order.id}
+
@@ -240,25 +258,27 @@ export default async function OrderDetailPage({
-
-
-
{isAdmin && (
-
)}
@@ -267,13 +287,17 @@ export default async function OrderDetailPage({
{isAdmin && (
-
-
-
-
+ {t('items')}
|
|---|