create-brainerce-store 1.5.4 → 1.5.6

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.
Files changed (5) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +45 -45
  3. package/templates/nextjs/base/src/app/checkout/page.tsx +24 -9
  4. package/templates/nextjs/base/src/components/account/order-history.tsx +276 -198
  5. package/templates/nextjs/base/src/components/cart/cart-summary.tsx +43 -5
package/dist/index.js CHANGED
@@ -31,7 +31,7 @@ var require_package = __commonJS({
31
31
  "package.json"(exports2, module2) {
32
32
  module2.exports = {
33
33
  name: "create-brainerce-store",
34
- version: "1.5.4",
34
+ version: "1.5.6",
35
35
  description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
36
36
  bin: {
37
37
  "create-brainerce-store": "dist/index.js"
package/package.json CHANGED
@@ -1,45 +1,45 @@
1
- {
2
- "name": "create-brainerce-store",
3
- "version": "1.5.4",
4
- "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
5
- "bin": {
6
- "create-brainerce-store": "dist/index.js"
7
- },
8
- "files": [
9
- "dist",
10
- "templates",
11
- "messages"
12
- ],
13
- "scripts": {
14
- "build": "tsup src/index.ts --format cjs --dts --clean",
15
- "dev": "tsup src/index.ts --format cjs --dts --watch",
16
- "clean": "rimraf dist"
17
- },
18
- "dependencies": {
19
- "chalk": "^4.1.2",
20
- "commander": "^12.1.0",
21
- "ejs": "^3.1.10",
22
- "fs-extra": "^11.2.0",
23
- "ora": "^5.4.1",
24
- "prompts": "^2.4.2"
25
- },
26
- "devDependencies": {
27
- "@types/ejs": "^3.1.5",
28
- "@types/fs-extra": "^11.0.4",
29
- "@types/prompts": "^2.4.9",
30
- "tsup": "^8.0.0",
31
- "typescript": "^5.4.0"
32
- },
33
- "engines": {
34
- "node": ">=18"
35
- },
36
- "keywords": [
37
- "brainerce",
38
- "ecommerce",
39
- "storefront",
40
- "scaffold",
41
- "create",
42
- "nextjs"
43
- ],
44
- "license": "MIT"
45
- }
1
+ {
2
+ "name": "create-brainerce-store",
3
+ "version": "1.5.6",
4
+ "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
5
+ "bin": {
6
+ "create-brainerce-store": "dist/index.js"
7
+ },
8
+ "files": [
9
+ "dist",
10
+ "templates",
11
+ "messages"
12
+ ],
13
+ "scripts": {
14
+ "build": "tsup src/index.ts --format cjs --dts --clean",
15
+ "dev": "tsup src/index.ts --format cjs --dts --watch",
16
+ "clean": "rimraf dist"
17
+ },
18
+ "dependencies": {
19
+ "chalk": "^4.1.2",
20
+ "commander": "^12.1.0",
21
+ "ejs": "^3.1.10",
22
+ "fs-extra": "^11.2.0",
23
+ "ora": "^5.4.1",
24
+ "prompts": "^2.4.2"
25
+ },
26
+ "devDependencies": {
27
+ "@types/ejs": "^3.1.5",
28
+ "@types/fs-extra": "^11.0.4",
29
+ "@types/prompts": "^2.4.9",
30
+ "tsup": "^8.0.0",
31
+ "typescript": "^5.4.0"
32
+ },
33
+ "engines": {
34
+ "node": ">=18"
35
+ },
36
+ "keywords": [
37
+ "brainerce",
38
+ "ecommerce",
39
+ "storefront",
40
+ "scaffold",
41
+ "create",
42
+ "nextjs"
43
+ ],
44
+ "license": "MIT"
45
+ }
package/templates/nextjs/base/src/app/checkout/page.tsx CHANGED
@@ -577,17 +577,32 @@ function CheckoutContent() {
577
577
  const totalDiscount = parseFloat(checkout.discountAmount);
578
578
  const ruleAmt = parseFloat(checkout.ruleDiscountAmount || '0');
579
579
  const couponAmt = totalDiscount - ruleAmt;
580
+ const rules = cart?.appliedDiscounts;
580
581
  if (totalDiscount <= 0) return null;
581
582
  return (
582
583
  <>
583
- {ruleAmt > 0 && (
584
- <div className="flex items-center justify-between">
585
- <span className="text-muted-foreground">{tc('generalDiscount')}</span>
586
- <span className="text-destructive">
587
- -{formatPrice(ruleAmt, { currency }) as string}
588
- </span>
589
- </div>
590
- )}
584
+ {rules && rules.length > 0
585
+ ? rules.map((rule) => (
586
+ <div key={rule.ruleId} className="flex items-center justify-between">
587
+ <span className="text-muted-foreground">{rule.ruleName}</span>
588
+ <span className="text-destructive">
589
+ -
590
+ {
591
+ formatPrice(parseFloat(rule.discountAmount), {
592
+ currency,
593
+ }) as string
594
+ }
595
+ </span>
596
+ </div>
597
+ ))
598
+ : ruleAmt > 0 && (
599
+ <div className="flex items-center justify-between">
600
+ <span className="text-muted-foreground">{tc('generalDiscount')}</span>
601
+ <span className="text-destructive">
602
+ -{formatPrice(ruleAmt, { currency }) as string}
603
+ </span>
604
+ </div>
605
+ )}
591
606
  {checkout.couponCode && couponAmt > 0 && (
592
607
  <div className="flex items-center justify-between">
593
608
  <span className="text-muted-foreground">
@@ -598,7 +613,7 @@ function CheckoutContent() {
598
613
  </span>
599
614
  </div>
600
615
  )}
601
- {!checkout.couponCode && ruleAmt <= 0 && (
616
+ {!checkout.couponCode && ruleAmt <= 0 && (!rules || rules.length === 0) && (
602
617
  <div className="flex items-center justify-between">
603
618
  <span className="text-muted-foreground">{tc('discount')}</span>
604
619
  <span className="text-destructive">
package/templates/nextjs/base/src/components/account/order-history.tsx CHANGED
@@ -1,198 +1,276 @@
1
- 'use client';
2
-
3
- import { useState } from 'react';
4
- import Image from 'next/image';
5
- import type { Order, OrderStatus } from 'brainerce';
6
- import { formatPrice } from 'brainerce';
7
- import { useTranslations } from '@/lib/translations';
8
- import { cn } from '@/lib/utils';
9
-
10
- const STATUS_CONFIG: Record<OrderStatus, { labelKey: string; className: string }> = {
11
- pending: {
12
- labelKey: 'statusPending',
13
- className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-950/30 dark:text-yellow-400',
14
- },
15
- processing: {
16
- labelKey: 'statusProcessing',
17
- className: 'bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-400',
18
- },
19
- shipped: {
20
- labelKey: 'statusShipped',
21
- className: 'bg-purple-100 text-purple-800 dark:bg-purple-950/30 dark:text-purple-400',
22
- },
23
- delivered: {
24
- labelKey: 'statusDelivered',
25
- className: 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-400',
26
- },
27
- cancelled: {
28
- labelKey: 'statusCancelled',
29
- className: 'bg-red-100 text-red-800 dark:bg-red-950/30 dark:text-red-400',
30
- },
31
- refunded: {
32
- labelKey: 'statusRefunded',
33
- className: 'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-400',
34
- },
35
- };
36
-
37
- interface OrderHistoryProps {
38
- orders: Order[];
39
- className?: string;
40
- }
41
-
42
- export function OrderHistory({ orders, className }: OrderHistoryProps) {
43
- const t = useTranslations('account');
44
- if (orders.length === 0) {
45
- return (
46
- <div className={cn('py-12 text-center', className)}>
47
- <svg
48
- className="text-muted-foreground mx-auto mb-3 h-12 w-12"
49
- fill="none"
50
- viewBox="0 0 24 24"
51
- stroke="currentColor"
52
- >
53
- <path
54
- strokeLinecap="round"
55
- strokeLinejoin="round"
56
- strokeWidth={1.5}
57
- d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
58
- />
59
- </svg>
60
- <h3 className="text-foreground text-lg font-semibold">{t('noOrders')}</h3>
61
- <p className="text-muted-foreground mt-1 text-sm">{t('noOrdersDesc')}</p>
62
- </div>
63
- );
64
- }
65
-
66
- return (
67
- <div className={cn('space-y-4', className)}>
68
- {orders.map((order) => (
69
- <OrderCard key={order.id} order={order} />
70
- ))}
71
- </div>
72
- );
73
- }
74
-
75
- function OrderCard({ order }: { order: Order }) {
76
- const t = useTranslations('account');
77
- const tc = useTranslations('common');
78
- const [expanded, setExpanded] = useState(false);
79
- const statusConfig = STATUS_CONFIG[order.status] || STATUS_CONFIG.pending;
80
- const currency = order.currency || 'USD';
81
- const totalAmount = order.totalAmount || order.total || '0';
82
-
83
- return (
84
- <div className="border-border overflow-hidden rounded-lg border">
85
- {/* Order header */}
86
- <button
87
- type="button"
88
- onClick={() => setExpanded(!expanded)}
89
- className="hover:bg-muted/50 flex w-full items-center justify-between p-4 text-start transition-colors"
90
- >
91
- <div className="min-w-0 flex-1">
92
- <div className="flex flex-wrap items-center gap-3">
93
- <span className="text-foreground text-sm font-semibold">
94
- {order.orderNumber || `${t('orderPrefix')} ${order.id.slice(0, 8)}`}
95
- </span>
96
- <span
97
- className={cn(
98
- 'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
99
- statusConfig.className
100
- )}
101
- >
102
- {t(
103
- statusConfig.labelKey as
104
- | 'statusPending'
105
- | 'statusProcessing'
106
- | 'statusShipped'
107
- | 'statusDelivered'
108
- | 'statusCancelled'
109
- | 'statusRefunded'
110
- )}
111
- </span>
112
- </div>
113
- <div className="text-muted-foreground mt-1 flex items-center gap-4 text-xs">
114
- <span>
115
- {new Date(order.createdAt).toLocaleDateString(undefined, {
116
- year: 'numeric',
117
- month: 'short',
118
- day: 'numeric',
119
- })}
120
- </span>
121
- <span>
122
- {order.items.length} {order.items.length === 1 ? tc('item') : tc('items')}
123
- </span>
124
- </div>
125
- </div>
126
-
127
- <div className="flex flex-shrink-0 items-center gap-3">
128
- <span className="text-foreground text-sm font-semibold">
129
- {formatPrice(parseFloat(totalAmount), { currency }) as string}
130
- </span>
131
- <svg
132
- className={cn(
133
- 'text-muted-foreground h-4 w-4 transition-transform',
134
- expanded && 'rotate-180'
135
- )}
136
- fill="none"
137
- viewBox="0 0 24 24"
138
- stroke="currentColor"
139
- >
140
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
141
- </svg>
142
- </div>
143
- </button>
144
-
145
- {/* Expanded order items */}
146
- {expanded && (
147
- <div className="border-border bg-muted/30 space-y-3 border-t px-4 py-3">
148
- {order.items.map((item, index) => (
149
- <div key={`${item.productId}-${index}`} className="flex items-center gap-3">
150
- <div className="bg-muted relative h-10 w-10 flex-shrink-0 overflow-hidden rounded">
151
- {item.image ? (
152
- <Image
153
- src={item.image}
154
- alt={item.name || t('productFallback')}
155
- fill
156
- sizes="40px"
157
- className="object-cover"
158
- />
159
- ) : (
160
- <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
161
- <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
162
- <path
163
- strokeLinecap="round"
164
- strokeLinejoin="round"
165
- strokeWidth={1.5}
166
- d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
167
- />
168
- </svg>
169
- </div>
170
- )}
171
- </div>
172
-
173
- <div className="min-w-0 flex-1">
174
- <p className="text-foreground truncate text-sm">
175
- {item.name || t('productFallback')}
176
- </p>
177
- <p className="text-muted-foreground text-xs">
178
- {tc('qty')} {item.quantity}
179
- </p>
180
- </div>
181
-
182
- <span className="text-foreground flex-shrink-0 text-sm">
183
- {formatPrice(parseFloat(item.price), { currency }) as string}
184
- </span>
185
- </div>
186
- ))}
187
-
188
- <div className="border-border flex items-center justify-between border-t pt-2">
189
- <span className="text-muted-foreground text-sm font-medium">{tc('total')}</span>
190
- <span className="text-foreground text-sm font-semibold">
191
- {formatPrice(parseFloat(totalAmount), { currency }) as string}
192
- </span>
193
- </div>
194
- </div>
195
- )}
196
- </div>
197
- );
198
- }
1
+ 'use client';
2
+
3
+ import { useState } from 'react';
4
+ import Image from 'next/image';
5
+ import type { Order, OrderStatus } from 'brainerce';
6
+ import { formatPrice } from 'brainerce';
7
+ import { useTranslations } from '@/lib/translations';
8
+ import { cn } from '@/lib/utils';
9
+
10
+ const STATUS_CONFIG: Record<OrderStatus, { labelKey: string; className: string }> = {
11
+ pending: {
12
+ labelKey: 'statusPending',
13
+ className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-950/30 dark:text-yellow-400',
14
+ },
15
+ processing: {
16
+ labelKey: 'statusProcessing',
17
+ className: 'bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-400',
18
+ },
19
+ shipped: {
20
+ labelKey: 'statusShipped',
21
+ className: 'bg-purple-100 text-purple-800 dark:bg-purple-950/30 dark:text-purple-400',
22
+ },
23
+ delivered: {
24
+ labelKey: 'statusDelivered',
25
+ className: 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-400',
26
+ },
27
+ cancelled: {
28
+ labelKey: 'statusCancelled',
29
+ className: 'bg-red-100 text-red-800 dark:bg-red-950/30 dark:text-red-400',
30
+ },
31
+ refunded: {
32
+ labelKey: 'statusRefunded',
33
+ className: 'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-400',
34
+ },
35
+ };
36
+
37
+ interface OrderHistoryProps {
38
+ orders: Order[];
39
+ className?: string;
40
+ }
41
+
42
+ export function OrderHistory({ orders, className }: OrderHistoryProps) {
43
+ const t = useTranslations('account');
44
+ if (orders.length === 0) {
45
+ return (
46
+ <div className={cn('py-12 text-center', className)}>
47
+ <svg
48
+ className="text-muted-foreground mx-auto mb-3 h-12 w-12"
49
+ fill="none"
50
+ viewBox="0 0 24 24"
51
+ stroke="currentColor"
52
+ >
53
+ <path
54
+ strokeLinecap="round"
55
+ strokeLinejoin="round"
56
+ strokeWidth={1.5}
57
+ d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
58
+ />
59
+ </svg>
60
+ <h3 className="text-foreground text-lg font-semibold">{t('noOrders')}</h3>
61
+ <p className="text-muted-foreground mt-1 text-sm">{t('noOrdersDesc')}</p>
62
+ </div>
63
+ );
64
+ }
65
+
66
+ return (
67
+ <div className={cn('space-y-4', className)}>
68
+ {orders.map((order) => (
69
+ <OrderCard key={order.id} order={order} />
70
+ ))}
71
+ </div>
72
+ );
73
+ }
74
+
75
+ function OrderCard({ order }: { order: Order }) {
76
+ const t = useTranslations('account');
77
+ const tc = useTranslations('common');
78
+ const [expanded, setExpanded] = useState(false);
79
+ const statusConfig = STATUS_CONFIG[order.status] || STATUS_CONFIG.pending;
80
+ const currency = order.currency || 'USD';
81
+ const totalAmount = order.totalAmount || order.total || '0';
82
+
83
+ return (
84
+ <div className="border-border overflow-hidden rounded-lg border">
85
+ {/* Order header */}
86
+ <button
87
+ type="button"
88
+ onClick={() => setExpanded(!expanded)}
89
+ className="hover:bg-muted/50 flex w-full items-center justify-between p-4 text-start transition-colors"
90
+ >
91
+ <div className="min-w-0 flex-1">
92
+ <div className="flex flex-wrap items-center gap-3">
93
+ <span className="text-foreground text-sm font-semibold">
94
+ {order.orderNumber || `${t('orderPrefix')} ${order.id.slice(0, 8)}`}
95
+ </span>
96
+ <span
97
+ className={cn(
98
+ 'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
99
+ statusConfig.className
100
+ )}
101
+ >
102
+ {t(
103
+ statusConfig.labelKey as
104
+ | 'statusPending'
105
+ | 'statusProcessing'
106
+ | 'statusShipped'
107
+ | 'statusDelivered'
108
+ | 'statusCancelled'
109
+ | 'statusRefunded'
110
+ )}
111
+ </span>
112
+ </div>
113
+ <div className="text-muted-foreground mt-1 flex items-center gap-4 text-xs">
114
+ <span>
115
+ {new Date(order.createdAt).toLocaleDateString(undefined, {
116
+ year: 'numeric',
117
+ month: 'short',
118
+ day: 'numeric',
119
+ })}
120
+ </span>
121
+ <span>
122
+ {order.items.length} {order.items.length === 1 ? tc('item') : tc('items')}
123
+ </span>
124
+ </div>
125
+ </div>
126
+
127
+ <div className="flex flex-shrink-0 items-center gap-3">
128
+ <span className="text-foreground text-sm font-semibold">
129
+ {formatPrice(parseFloat(totalAmount), { currency }) as string}
130
+ </span>
131
+ <svg
132
+ className={cn(
133
+ 'text-muted-foreground h-4 w-4 transition-transform',
134
+ expanded && 'rotate-180'
135
+ )}
136
+ fill="none"
137
+ viewBox="0 0 24 24"
138
+ stroke="currentColor"
139
+ >
140
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
141
+ </svg>
142
+ </div>
143
+ </button>
144
+
145
+ {/* Expanded order items */}
146
+ {expanded && (
147
+ <div className="border-border bg-muted/30 space-y-3 border-t px-4 py-3">
148
+ {order.items.map((item, index) => (
149
+ <div key={`${item.productId}-${index}`} className="flex items-center gap-3">
150
+ <div className="bg-muted relative h-10 w-10 flex-shrink-0 overflow-hidden rounded">
151
+ {item.image ? (
152
+ <Image
153
+ src={item.image}
154
+ alt={item.name || t('productFallback')}
155
+ fill
156
+ sizes="40px"
157
+ className="object-cover"
158
+ />
159
+ ) : (
160
+ <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
161
+ <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
162
+ <path
163
+ strokeLinecap="round"
164
+ strokeLinejoin="round"
165
+ strokeWidth={1.5}
166
+ d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
167
+ />
168
+ </svg>
169
+ </div>
170
+ )}
171
+ </div>
172
+
173
+ <div className="min-w-0 flex-1">
174
+ <p className="text-foreground truncate text-sm">
175
+ {item.name || t('productFallback')}
176
+ </p>
177
+ <p className="text-muted-foreground text-xs">
178
+ {tc('qty')} {item.quantity}
179
+ </p>
180
+ </div>
181
+
182
+ <span className="text-foreground flex-shrink-0 text-sm">
183
+ {formatPrice(parseFloat(item.price), { currency }) as string}
184
+ </span>
185
+ </div>
186
+ ))}
187
+
188
+ <OrderFinancialSummary order={order} currency={currency} />
189
+ </div>
190
+ )}
191
+ </div>
192
+ );
193
+ }
194
+
195
+ function OrderFinancialSummary({ order, currency }: { order: Order; currency: string }) {
196
+ const tc = useTranslations('common');
197
+ const totalAmount = order.totalAmount || order.total || '0';
198
+ const subtotal = order.subtotal ? parseFloat(order.subtotal) : null;
199
+ const ruleAmt = order.ruleDiscountAmount ? parseFloat(order.ruleDiscountAmount) : 0;
200
+ const couponAmt = order.couponDiscount ? parseFloat(order.couponDiscount) : 0;
201
+ const shipping = order.shippingAmount ? parseFloat(order.shippingAmount) : 0;
202
+ const tax = order.taxAmount ? parseFloat(order.taxAmount) : 0;
203
+ const rules = order.appliedDiscounts;
204
+
205
+ const hasBreakdown = subtotal !== null && subtotal > 0;
206
+
207
+ if (!hasBreakdown) {
208
+ return (
209
+ <div className="border-border flex items-center justify-between border-t pt-2">
210
+ <span className="text-muted-foreground text-sm font-medium">{tc('total')}</span>
211
+ <span className="text-foreground text-sm font-semibold">
212
+ {formatPrice(parseFloat(totalAmount), { currency }) as string}
213
+ </span>
214
+ </div>
215
+ );
216
+ }
217
+
218
+ return (
219
+ <div className="border-border space-y-1 border-t pt-2 text-sm">
220
+ <div className="flex items-center justify-between">
221
+ <span className="text-muted-foreground">{tc('subtotal')}</span>
222
+ <span className="text-foreground">{formatPrice(subtotal, { currency }) as string}</span>
223
+ </div>
224
+
225
+ {rules && rules.length > 0
226
+ ? rules.map((rule) => (
227
+ <div key={rule.ruleId} className="flex items-center justify-between">
228
+ <span className="text-muted-foreground">{rule.ruleName}</span>
229
+ <span className="text-destructive">
230
+ -{formatPrice(parseFloat(rule.discountAmount || '0'), { currency }) as string}
231
+ </span>
232
+ </div>
233
+ ))
234
+ : ruleAmt > 0 && (
235
+ <div className="flex items-center justify-between">
236
+ <span className="text-muted-foreground">{tc('generalDiscount')}</span>
237
+ <span className="text-destructive">
238
+ -{formatPrice(ruleAmt, { currency }) as string}
239
+ </span>
240
+ </div>
241
+ )}
242
+
243
+ {order.couponCode && couponAmt > 0 && (
244
+ <div className="flex items-center justify-between">
245
+ <span className="text-muted-foreground">
246
+ {tc('couponDiscount')} ({order.couponCode})
247
+ </span>
248
+ <span className="text-destructive">
249
+ -{formatPrice(couponAmt, { currency }) as string}
250
+ </span>
251
+ </div>
252
+ )}
253
+
254
+ {shipping > 0 && (
255
+ <div className="flex items-center justify-between">
256
+ <span className="text-muted-foreground">{tc('shipping')}</span>
257
+ <span className="text-foreground">{formatPrice(shipping, { currency }) as string}</span>
258
+ </div>
259
+ )}
260
+
261
+ {tax > 0 && (
262
+ <div className="flex items-center justify-between">
263
+ <span className="text-muted-foreground">{tc('tax')}</span>
264
+ <span className="text-foreground">{formatPrice(tax, { currency }) as string}</span>
265
+ </div>
266
+ )}
267
+
268
+ <div className="border-border flex items-center justify-between border-t pt-1">
269
+ <span className="text-foreground font-medium">{tc('total')}</span>
270
+ <span className="text-foreground font-semibold">
271
+ {formatPrice(parseFloat(totalAmount), { currency }) as string}
272
+ </span>
273
+ </div>
274
+ </div>
275
+ );
276
+ }
package/templates/nextjs/base/src/components/cart/cart-summary.tsx CHANGED
@@ -13,9 +13,13 @@ export function CartSummary({ className }: CartSummaryProps) {
13
13
  const t = useTranslations('cart');
14
14
  const tc = useTranslations('common');
15
15
  const { storeInfo } = useStoreInfo();
16
- const { totals } = useCart();
16
+ const { totals, cart } = useCart();
17
17
  const currency = storeInfo?.currency || 'USD';
18
18
 
19
+ const rules = cart?.appliedDiscounts;
20
+ const ruleAmt = cart?.ruleDiscountAmount ? parseFloat(cart.ruleDiscountAmount) : 0;
21
+ const couponAmt = totals.discount - ruleAmt;
22
+
19
23
  return (
20
24
  <div className={cn('space-y-3', className)}>
21
25
  <h3 className="text-foreground text-lg font-semibold">{t('orderSummary')}</h3>
@@ -29,16 +33,50 @@ export function CartSummary({ className }: CartSummaryProps) {
29
33
  </span>
30
34
  </div>
31
35
 
32
- {/* Discount */}
33
- {totals.discount > 0 && (
36
+ {/* Rule discounts - show each rule by name */}
37
+ {rules && rules.length > 0
38
+ ? rules.map((rule) => (
39
+ <div key={rule.ruleId} className="flex items-center justify-between">
40
+ <span className="text-muted-foreground">{rule.ruleName}</span>
41
+ <span className="text-destructive font-medium">
42
+ -{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}
43
+ </span>
44
+ </div>
45
+ ))
46
+ : ruleAmt > 0 && (
47
+ <div className="flex items-center justify-between">
48
+ <span className="text-muted-foreground">{tc('generalDiscount')}</span>
49
+ <span className="text-destructive font-medium">
50
+ -{formatPrice(ruleAmt, { currency }) as string}
51
+ </span>
52
+ </div>
53
+ )}
54
+
55
+ {/* Coupon discount */}
56
+ {cart?.couponCode && couponAmt > 0 && (
34
57
  <div className="flex items-center justify-between">
35
- <span className="text-muted-foreground">{tc('discount')}</span>
58
+ <span className="text-muted-foreground">
59
+ {tc('couponDiscount')} ({cart.couponCode})
60
+ </span>
36
61
  <span className="text-destructive font-medium">
37
- -{formatPrice(totals.discount, { currency }) as string}
62
+ -{formatPrice(couponAmt, { currency }) as string}
38
63
  </span>
39
64
  </div>
40
65
  )}
41
66
 
67
+ {/* Fallback: generic discount when no breakdown available */}
68
+ {totals.discount > 0 &&
69
+ ruleAmt <= 0 &&
70
+ !cart?.couponCode &&
71
+ (!rules || rules.length === 0) && (
72
+ <div className="flex items-center justify-between">
73
+ <span className="text-muted-foreground">{tc('discount')}</span>
74
+ <span className="text-destructive font-medium">
75
+ -{formatPrice(totals.discount, { currency }) as string}
76
+ </span>
77
+ </div>
78
+ )}
79
+
42
80
  {/* Shipping */}
43
81
  {totals.shipping > 0 && (
44
82
  <div className="flex items-center justify-between">