@ecomiq/storefront 2.0.22 → 2.1.3
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/package.json +4 -2
- package/src/cart-session.ts +13 -15
- package/src/client.ts +1 -1
- package/src/cloud-runtime-client.ts +165 -5
- package/src/codegen.mjs +0 -1
- package/src/components/checkout/checkout-session-view.tsx +4 -4
- package/src/components/checkout/format.ts +2 -2
- package/src/components/checkout/use-checkout-customer-prefill.ts +4 -4
- package/src/components/checkout/use-checkout-session.ts +37 -38
- package/src/config.mjs +1 -0
- package/src/hooks/recently-viewed.ts +2 -2
- package/src/index.ts +2 -4
- package/src/pages/checkout.$checkoutId.tsx +1 -1
- package/src/pages/pages.$pageSlug.tsx +68 -31
- package/src/pages/thank-you.tsx +1 -1
- package/src/providers/cart.tsx +17 -17
- package/src/server-config-store.ts +1 -0
- package/src/server.ts +16 -7
- package/src/storefront-definition/data.ts +188 -0
- package/src/storefront-definition/renderer.tsx +610 -34
- package/src/storefront-layout.ts +33 -11
- package/src/storefront-runtime.ts +83 -187
- package/src/styles.css +9 -1
|
@@ -13,7 +13,6 @@ import type {
|
|
|
13
13
|
StorefrontCart,
|
|
14
14
|
StorefrontOrderBump,
|
|
15
15
|
} from '@ecomiq/core'
|
|
16
|
-
import { cartVariantIdFromProduct } from '@ecomiq/core'
|
|
17
16
|
import { useCart } from '../../providers'
|
|
18
17
|
import { serverApi } from '../../server'
|
|
19
18
|
import {
|
|
@@ -33,7 +32,7 @@ type ShippingFlat = {
|
|
|
33
32
|
rate: ShippingRate
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
export function useCheckoutSession(
|
|
35
|
+
export function useCheckoutSession(cartToken: string) {
|
|
37
36
|
const { cart: providerCart, clearCart, reload: reloadProviderCart } = useCart()
|
|
38
37
|
|
|
39
38
|
const [checkoutCart, setCheckoutCart] = useState<StorefrontCart | null>(null)
|
|
@@ -90,7 +89,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
90
89
|
setLoadStatus('loading')
|
|
91
90
|
setLoadError(undefined)
|
|
92
91
|
try {
|
|
93
|
-
const data = await serverApi.getCartCheckout({
|
|
92
|
+
const data = await serverApi.getCartCheckout({ cartToken })
|
|
94
93
|
if (isCheckoutCartAlreadyPurchased(data.cart)) {
|
|
95
94
|
setCheckoutAlreadyPurchased(true)
|
|
96
95
|
clearCart()
|
|
@@ -109,7 +108,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
109
108
|
)
|
|
110
109
|
setLoadStatus('error')
|
|
111
110
|
}
|
|
112
|
-
}, [
|
|
111
|
+
}, [cartToken, clearCart])
|
|
113
112
|
|
|
114
113
|
useEffect(() => {
|
|
115
114
|
hydratedRef.current = false
|
|
@@ -124,7 +123,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
124
123
|
setCheckoutPaymentMethodCode(null)
|
|
125
124
|
setDeliveryPersisted(false)
|
|
126
125
|
void loadCheckout()
|
|
127
|
-
}, [
|
|
126
|
+
}, [cartToken, loadCheckout])
|
|
128
127
|
|
|
129
128
|
useEffect(() => {
|
|
130
129
|
if (!checkoutCart || hydratedRef.current) return
|
|
@@ -150,7 +149,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
150
149
|
// Cross-tab: sesión de carrito o ítems del provider cambian tras baseline.
|
|
151
150
|
useEffect(() => {
|
|
152
151
|
if (loadStatus !== 'ready' || isReconciling || checkoutAlreadyPurchased) return
|
|
153
|
-
const sig = cartSessionSignature(
|
|
152
|
+
const sig = cartSessionSignature(cartToken, localItems)
|
|
154
153
|
if (baselineSigRef.current === null) {
|
|
155
154
|
baselineSigRef.current = sig
|
|
156
155
|
return
|
|
@@ -158,7 +157,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
158
157
|
if (sig !== baselineSigRef.current) {
|
|
159
158
|
setCartChangedExternally(true)
|
|
160
159
|
}
|
|
161
|
-
}, [
|
|
160
|
+
}, [cartToken, checkoutAlreadyPurchased, isReconciling, loadStatus, localItems])
|
|
162
161
|
|
|
163
162
|
useEffect(() => {
|
|
164
163
|
const key = `ecomiq:cart:v1:`
|
|
@@ -174,14 +173,14 @@ export function useCheckoutSession(cartId: string) {
|
|
|
174
173
|
useEffect(() => {
|
|
175
174
|
if (loadStatus !== 'ready' || !checkoutCart || checkoutAlreadyPurchased) return
|
|
176
175
|
if (isReconcilingRef.current) return
|
|
177
|
-
if (providerCart && providerCart.
|
|
176
|
+
if (providerCart && providerCart.token !== cartToken) return
|
|
178
177
|
if (localItems.length === 0 && apiItems.length === 0) return
|
|
179
178
|
if (areCartSignaturesEqual(localItems, apiItems)) return
|
|
180
179
|
|
|
181
180
|
const actions = findCartReconciliationActions(localItems, apiItems)
|
|
182
181
|
if (actions.length === 0) return
|
|
183
182
|
|
|
184
|
-
const attemptKey = `${
|
|
183
|
+
const attemptKey = `${cartToken}::${cartItemsSignature(localItems)}::${cartItemsSignature(apiItems)}`
|
|
185
184
|
if (reconcileAttemptRef.current === attemptKey) return
|
|
186
185
|
|
|
187
186
|
reconcileAttemptRef.current = attemptKey
|
|
@@ -194,7 +193,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
194
193
|
if (action.action === 'remove') {
|
|
195
194
|
try {
|
|
196
195
|
const next = await serverApi.removeCartItem({
|
|
197
|
-
|
|
196
|
+
cartToken,
|
|
198
197
|
cartItemId: action.itemId,
|
|
199
198
|
})
|
|
200
199
|
if (next.ok) setCheckoutCart(next.value)
|
|
@@ -204,7 +203,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
204
203
|
} else if (action.action === 'update') {
|
|
205
204
|
try {
|
|
206
205
|
const next = await serverApi.setCartItemQuantity({
|
|
207
|
-
|
|
206
|
+
cartToken,
|
|
208
207
|
cartItemId: action.itemId,
|
|
209
208
|
quantity: action.quantity,
|
|
210
209
|
})
|
|
@@ -218,8 +217,8 @@ export function useCheckoutSession(cartId: string) {
|
|
|
218
217
|
if (action.action !== 'add') continue
|
|
219
218
|
try {
|
|
220
219
|
const next = await serverApi.addCartItem({
|
|
221
|
-
|
|
222
|
-
variantId:
|
|
220
|
+
cartToken,
|
|
221
|
+
variantId: action.variantId,
|
|
223
222
|
quantity: action.quantity,
|
|
224
223
|
})
|
|
225
224
|
setCheckoutCart(next)
|
|
@@ -237,7 +236,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
237
236
|
})()
|
|
238
237
|
}, [
|
|
239
238
|
apiItems,
|
|
240
|
-
|
|
239
|
+
cartToken,
|
|
241
240
|
checkoutAlreadyPurchased,
|
|
242
241
|
checkoutCart,
|
|
243
242
|
loadCheckout,
|
|
@@ -257,7 +256,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
257
256
|
setShippingLoading(true)
|
|
258
257
|
setShippingError(null)
|
|
259
258
|
void serverApi
|
|
260
|
-
.getShippingOptions({
|
|
259
|
+
.getShippingOptions({ cartToken, postalCode })
|
|
261
260
|
.then((res) => {
|
|
262
261
|
if (!cancelled) setShippingGroups(res.groups)
|
|
263
262
|
})
|
|
@@ -275,7 +274,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
275
274
|
return () => {
|
|
276
275
|
cancelled = true
|
|
277
276
|
}
|
|
278
|
-
}, [
|
|
277
|
+
}, [cartToken, checkoutAlreadyPurchased, postalCode])
|
|
279
278
|
|
|
280
279
|
const shippingFlat = useMemo(() => {
|
|
281
280
|
const out: ShippingFlat[] = []
|
|
@@ -296,14 +295,14 @@ export function useCheckoutSession(cartId: string) {
|
|
|
296
295
|
setSelectedShippingKey(shippingFlat[0]!.key)
|
|
297
296
|
}, [shippingFlat, selectedShippingKey])
|
|
298
297
|
|
|
299
|
-
const externalRef = `checkout-${
|
|
298
|
+
const externalRef = `checkout-${cartToken}`
|
|
300
299
|
|
|
301
300
|
const initProviderCheckout = useCallback(
|
|
302
301
|
(paymentMethodCode: string) => {
|
|
303
302
|
const method = paymentMethods.find((m) => m.code === paymentMethodCode)
|
|
304
303
|
if (!method || !methodUsesProviderCheckoutUi(method)) return
|
|
305
304
|
|
|
306
|
-
const dedupeKey = `${
|
|
305
|
+
const dedupeKey = `${cartToken}:${paymentMethodCode}`
|
|
307
306
|
if (checkoutPaymentInitKeyRef.current === dedupeKey) return
|
|
308
307
|
checkoutPaymentInitKeyRef.current = dedupeKey
|
|
309
308
|
|
|
@@ -311,7 +310,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
311
310
|
setCheckoutPaymentError(null)
|
|
312
311
|
setCheckoutPaymentMethodCode(paymentMethodCode)
|
|
313
312
|
void serverApi
|
|
314
|
-
.checkoutCart({
|
|
313
|
+
.checkoutCart({ cartToken, paymentMethodCode, externalRef })
|
|
315
314
|
.then((result) => {
|
|
316
315
|
setCheckoutPaymentResponse(result)
|
|
317
316
|
})
|
|
@@ -323,7 +322,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
323
322
|
})
|
|
324
323
|
.finally(() => setCheckoutPaymentLoading(false))
|
|
325
324
|
},
|
|
326
|
-
[
|
|
325
|
+
[cartToken, externalRef, paymentMethods],
|
|
327
326
|
)
|
|
328
327
|
|
|
329
328
|
const selectPaymentMethod = useCallback(
|
|
@@ -353,7 +352,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
353
352
|
|
|
354
353
|
const saveBuyer = useCallback(async () => {
|
|
355
354
|
const buyerCart = await serverApi.patchCartBuyer({
|
|
356
|
-
|
|
355
|
+
cartToken,
|
|
357
356
|
email: contact.email.trim(),
|
|
358
357
|
firstName: contact.firstName.trim(),
|
|
359
358
|
lastName: contact.lastName.trim(),
|
|
@@ -361,7 +360,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
361
360
|
})
|
|
362
361
|
setCheckoutCart(buyerCart)
|
|
363
362
|
return buyerCart
|
|
364
|
-
}, [
|
|
363
|
+
}, [cartToken, contact.email, contact.firstName, contact.lastName, contact.phone])
|
|
365
364
|
|
|
366
365
|
const saveAddresses = useCallback(async () => {
|
|
367
366
|
const countryCode = (contact.countryCode || 'PE').toUpperCase()
|
|
@@ -388,13 +387,13 @@ export function useCheckoutSession(cartId: string) {
|
|
|
388
387
|
}
|
|
389
388
|
|
|
390
389
|
const updated = await serverApi.patchCartAddresses({
|
|
391
|
-
|
|
390
|
+
cartToken,
|
|
392
391
|
shippingAddress: baseAddress,
|
|
393
392
|
billingAddress: baseAddress,
|
|
394
393
|
})
|
|
395
394
|
setCheckoutCart(updated)
|
|
396
395
|
return updated
|
|
397
|
-
}, [
|
|
396
|
+
}, [cartToken, contact])
|
|
398
397
|
|
|
399
398
|
const saveContactAndDelivery = useCallback(async () => {
|
|
400
399
|
await saveBuyer()
|
|
@@ -404,7 +403,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
404
403
|
const confirmShipping = useCallback(
|
|
405
404
|
async (picked: ShippingFlat) => {
|
|
406
405
|
const updated = await serverApi.putCartShippingMethod({
|
|
407
|
-
|
|
406
|
+
cartToken,
|
|
408
407
|
rateId: picked.rate.rateId,
|
|
409
408
|
shippingMethodId: picked.rate.shippingMethodId,
|
|
410
409
|
serviceCode: picked.rate.serviceCode ?? null,
|
|
@@ -418,7 +417,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
418
417
|
setCheckoutCart(updated)
|
|
419
418
|
return updated
|
|
420
419
|
},
|
|
421
|
-
[
|
|
420
|
+
[cartToken],
|
|
422
421
|
)
|
|
423
422
|
|
|
424
423
|
/** Persiste buyer + dirección + envío al completar el paso Dirección. */
|
|
@@ -459,46 +458,46 @@ export function useCheckoutSession(cartId: string) {
|
|
|
459
458
|
if (!code) return
|
|
460
459
|
setCouponError(null)
|
|
461
460
|
try {
|
|
462
|
-
const next = await serverApi.addCartPromotionCode({
|
|
461
|
+
const next = await serverApi.addCartPromotionCode({ cartToken, code })
|
|
463
462
|
setCheckoutCart(next)
|
|
464
463
|
setCouponCode('')
|
|
465
464
|
} catch (error) {
|
|
466
465
|
setCouponError(error instanceof Error ? error.message : 'No se pudo aplicar el cupón.')
|
|
467
466
|
}
|
|
468
|
-
}, [
|
|
467
|
+
}, [cartToken, couponCode])
|
|
469
468
|
|
|
470
469
|
const handleRemoveCoupon = useCallback(
|
|
471
470
|
async (code: string) => {
|
|
472
471
|
setCouponError(null)
|
|
473
472
|
try {
|
|
474
|
-
const next = await serverApi.removeCartPromotionCode({
|
|
473
|
+
const next = await serverApi.removeCartPromotionCode({ cartToken, code })
|
|
475
474
|
setCheckoutCart(next)
|
|
476
475
|
} catch (error) {
|
|
477
476
|
setCouponError(error instanceof Error ? error.message : 'No se pudo remover el cupón.')
|
|
478
477
|
}
|
|
479
478
|
},
|
|
480
|
-
[
|
|
479
|
+
[cartToken],
|
|
481
480
|
)
|
|
482
481
|
|
|
483
482
|
const handleAddOrderBump = useCallback(
|
|
484
483
|
async (orderBump: StorefrontOrderBump) => {
|
|
485
484
|
const next = await serverApi.addCartItem({
|
|
486
|
-
|
|
487
|
-
variantId:
|
|
485
|
+
cartToken,
|
|
486
|
+
variantId: orderBump.variantId,
|
|
488
487
|
quantity: 1,
|
|
489
488
|
})
|
|
490
489
|
setCheckoutCart(next)
|
|
491
490
|
await loadCheckout()
|
|
492
491
|
await reloadProviderCart()
|
|
493
492
|
},
|
|
494
|
-
[
|
|
493
|
+
[cartToken, loadCheckout, reloadProviderCart],
|
|
495
494
|
)
|
|
496
495
|
|
|
497
496
|
const uploadPaymentReceipt = useCallback(
|
|
498
497
|
async (file: File) => {
|
|
499
|
-
return serverApi.uploadPaymentReceipt({
|
|
498
|
+
return serverApi.uploadPaymentReceipt({ cartToken, file, fileName: file.name })
|
|
500
499
|
},
|
|
501
|
-
[
|
|
500
|
+
[cartToken],
|
|
502
501
|
)
|
|
503
502
|
|
|
504
503
|
const payNow = useCallback(
|
|
@@ -539,7 +538,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
539
538
|
}
|
|
540
539
|
|
|
541
540
|
const result = await serverApi.checkoutCart({
|
|
542
|
-
|
|
541
|
+
cartToken,
|
|
543
542
|
paymentMethodCode: code,
|
|
544
543
|
externalRef,
|
|
545
544
|
...(options?.receiptUrl ? { receiptUrl: options.receiptUrl } : {}),
|
|
@@ -557,7 +556,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
557
556
|
}
|
|
558
557
|
},
|
|
559
558
|
[
|
|
560
|
-
|
|
559
|
+
cartToken,
|
|
561
560
|
checkoutPaymentMethodCode,
|
|
562
561
|
checkoutPaymentResponse,
|
|
563
562
|
confirmShipping,
|
|
@@ -589,7 +588,7 @@ export function useCheckoutSession(cartId: string) {
|
|
|
589
588
|
: subtotal
|
|
590
589
|
|
|
591
590
|
return {
|
|
592
|
-
|
|
591
|
+
cartToken,
|
|
593
592
|
loadStatus,
|
|
594
593
|
loadError,
|
|
595
594
|
cartData: checkoutCart,
|
package/src/config.mjs
CHANGED
|
@@ -61,7 +61,7 @@ export function trackRecentlyViewed(
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
export type TrackableProduct = {
|
|
64
|
-
id: string
|
|
64
|
+
id: string
|
|
65
65
|
name: string
|
|
66
66
|
slug: string
|
|
67
67
|
imageUrl?: string | null
|
|
@@ -72,7 +72,7 @@ export type TrackableProduct = {
|
|
|
72
72
|
|
|
73
73
|
export function toRecentlyViewedItem(product: TrackableProduct): RecentlyViewedItem {
|
|
74
74
|
return {
|
|
75
|
-
id:
|
|
75
|
+
id: product.id,
|
|
76
76
|
name: product.name,
|
|
77
77
|
slug: product.slug,
|
|
78
78
|
imageUrl: product.imageUrl || product.images?.[0]?.url || '',
|
package/src/index.ts
CHANGED
|
@@ -31,6 +31,7 @@ export {
|
|
|
31
31
|
DepartmentsSchema,
|
|
32
32
|
DistrictSchema,
|
|
33
33
|
DistrictsSchema,
|
|
34
|
+
CartTokenSchema,
|
|
34
35
|
EntityIdSchema,
|
|
35
36
|
NullableEntityIdSchema,
|
|
36
37
|
OptionalEntityIdSchema,
|
|
@@ -46,7 +47,7 @@ export {
|
|
|
46
47
|
StorefrontMenuItemSchema,
|
|
47
48
|
getMenuItems,
|
|
48
49
|
} from '@ecomiq/core'
|
|
49
|
-
export type { EntityId } from '@ecomiq/core'
|
|
50
|
+
export type { CartToken, EntityId } from '@ecomiq/core'
|
|
50
51
|
export { getCountries, getDepartments, getDistricts, getProvinces } from '@ecomiq/core'
|
|
51
52
|
export {
|
|
52
53
|
AddCartItemParamsSchema,
|
|
@@ -75,7 +76,6 @@ export {
|
|
|
75
76
|
CartAddressesParamsSchema,
|
|
76
77
|
CartPromotionCodeParamsSchema,
|
|
77
78
|
UpdateCartItemQuantityParamsSchema,
|
|
78
|
-
cartVariantIdFromProduct,
|
|
79
79
|
sanitizeHtml,
|
|
80
80
|
stripHtml,
|
|
81
81
|
} from '@ecomiq/core'
|
|
@@ -147,9 +147,7 @@ export type {
|
|
|
147
147
|
CustomerProfile,
|
|
148
148
|
CustomerProfilePatch,
|
|
149
149
|
CustomerOrderDetail,
|
|
150
|
-
CustomerOrderDetailDto,
|
|
151
150
|
CustomerOrderListItem,
|
|
152
|
-
CustomerOrderListItemDto,
|
|
153
151
|
} from '@ecomiq/core'
|
|
154
152
|
export {
|
|
155
153
|
CustomerAddressSchema,
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Página
|
|
3
|
-
*
|
|
2
|
+
* Página de contenido (`/pages/$pageSlug`).
|
|
3
|
+
* La Definition es la dueña de estas rutas; el CMS queda solo como fallback
|
|
4
|
+
* de lectura para tiendas que aún no migraron sus páginas.
|
|
4
5
|
*/
|
|
5
6
|
import type { CmsPageDetailsDto } from '@ecomiq/core'
|
|
7
|
+
import type { ActiveStorefrontPage } from '../storefront-runtime'
|
|
6
8
|
import {
|
|
9
|
+
DefinitionSections,
|
|
7
10
|
definePage,
|
|
8
11
|
sanitizeHtml,
|
|
9
12
|
serverApi,
|
|
@@ -21,30 +24,51 @@ const ContentPageSettingsSchema = z.object({
|
|
|
21
24
|
}).optional(),
|
|
22
25
|
}).passthrough()
|
|
23
26
|
|
|
24
|
-
type ContentPageData =
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
type ContentPageData =
|
|
28
|
+
| Extract<ActiveStorefrontPage, { kind: 'definition' }>
|
|
29
|
+
| {
|
|
30
|
+
kind: 'cms'
|
|
31
|
+
page: CmsPageDetailsDto
|
|
32
|
+
content: z.infer<typeof ContentPageSettingsSchema>
|
|
33
|
+
}
|
|
28
34
|
|
|
29
35
|
export default definePage<ContentPageData, { pageSlug: string }>({
|
|
30
36
|
loader: async ({ params }) => {
|
|
37
|
+
const resolved = await serverApi.getActiveStorefrontPage(
|
|
38
|
+
`/pages/${params.pageSlug}`,
|
|
39
|
+
)
|
|
40
|
+
if (resolved.kind === 'definition') return resolved
|
|
41
|
+
|
|
31
42
|
const page = await serverApi.getPageBySlug(params.pageSlug)
|
|
32
43
|
if (page.status !== 'published') throw new Error('Página no publicada')
|
|
33
44
|
|
|
34
45
|
return {
|
|
46
|
+
kind: 'cms' as const,
|
|
35
47
|
page,
|
|
36
48
|
content: ContentPageSettingsSchema.parse(page.settings ?? {}),
|
|
37
49
|
}
|
|
38
50
|
},
|
|
39
51
|
|
|
40
|
-
meta: ({ data }) =>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
52
|
+
meta: ({ data, settings }) => {
|
|
53
|
+
if (data.kind === 'definition') {
|
|
54
|
+
const { page } = data
|
|
55
|
+
return {
|
|
56
|
+
title: page.seo.title ?? page.title ?? settings?.store.name ?? '',
|
|
57
|
+
...(page.seo.description === undefined
|
|
58
|
+
? {}
|
|
59
|
+
: { description: page.seo.description }),
|
|
60
|
+
...(page.seo.noindex ? { noIndex: true } : {}),
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return {
|
|
64
|
+
title: data.content.seo?.title ?? data.content.title ?? data.page.name,
|
|
65
|
+
description: data.content.seo?.description ?? (
|
|
66
|
+
data.content.html
|
|
67
|
+
? stripHtml(data.content.html).slice(0, 155)
|
|
68
|
+
: undefined
|
|
69
|
+
),
|
|
70
|
+
}
|
|
71
|
+
},
|
|
48
72
|
|
|
49
73
|
error: () => (
|
|
50
74
|
<StorefrontError
|
|
@@ -53,22 +77,35 @@ export default definePage<ContentPageData, { pageSlug: string }>({
|
|
|
53
77
|
/>
|
|
54
78
|
),
|
|
55
79
|
|
|
56
|
-
component: ({ data }) =>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<
|
|
60
|
-
{data.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<div
|
|
66
|
-
className="prose prose-neutral max-w-none text-foreground prose-headings:font-semibold prose-a:text-primary"
|
|
67
|
-
dangerouslySetInnerHTML={{ __html: sanitizeHtml(data.content.html) }}
|
|
80
|
+
component: ({ data, settings }) => {
|
|
81
|
+
if (data.kind === 'definition') {
|
|
82
|
+
return (
|
|
83
|
+
<DefinitionSections
|
|
84
|
+
definition={data.definition}
|
|
85
|
+
pageId={data.page.id}
|
|
86
|
+
data={data.data}
|
|
87
|
+
locale={settings.store.language}
|
|
88
|
+
currency={settings.store.currency}
|
|
68
89
|
/>
|
|
69
|
-
)
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
90
|
+
)
|
|
91
|
+
}
|
|
92
|
+
return (
|
|
93
|
+
<article className="mx-auto w-full max-w-4xl px-4 py-10 sm:py-14">
|
|
94
|
+
<header className="mb-8 border-b pb-8">
|
|
95
|
+
<h1 className="text-balance text-3xl font-semibold tracking-[-0.02em] md:text-4xl">
|
|
96
|
+
{data.content.title ?? data.page.name}
|
|
97
|
+
</h1>
|
|
98
|
+
</header>
|
|
99
|
+
|
|
100
|
+
{data.content.html ? (
|
|
101
|
+
<div
|
|
102
|
+
className="prose prose-neutral max-w-none text-foreground prose-headings:font-semibold prose-a:text-primary"
|
|
103
|
+
dangerouslySetInnerHTML={{ __html: sanitizeHtml(data.content.html) }}
|
|
104
|
+
/>
|
|
105
|
+
) : (
|
|
106
|
+
<p className="text-muted-foreground">Contenido no disponible.</p>
|
|
107
|
+
)}
|
|
108
|
+
</article>
|
|
109
|
+
)
|
|
110
|
+
},
|
|
74
111
|
})
|
package/src/pages/thank-you.tsx
CHANGED
package/src/providers/cart.tsx
CHANGED
|
@@ -17,14 +17,14 @@ import {
|
|
|
17
17
|
useState,
|
|
18
18
|
type ReactNode,
|
|
19
19
|
} from 'react'
|
|
20
|
-
import { type StorefrontCart
|
|
20
|
+
import { CartTokenSchema, type StorefrontCart } from '@ecomiq/core'
|
|
21
21
|
import { z } from 'zod'
|
|
22
22
|
import { serverApi } from '../server'
|
|
23
23
|
|
|
24
24
|
const CartSessionSchema = z.object({
|
|
25
25
|
version: z.literal(1),
|
|
26
26
|
storeId: z.string().min(1),
|
|
27
|
-
|
|
27
|
+
cartToken: CartTokenSchema,
|
|
28
28
|
})
|
|
29
29
|
|
|
30
30
|
export type CartLoadStatus = 'loading' | 'ready' | 'error'
|
|
@@ -36,7 +36,7 @@ export type CartMutation = {
|
|
|
36
36
|
|
|
37
37
|
export interface CartContextValue {
|
|
38
38
|
cart: StorefrontCart | null
|
|
39
|
-
|
|
39
|
+
cartToken: string | undefined
|
|
40
40
|
itemCount: number
|
|
41
41
|
loadStatus: CartLoadStatus
|
|
42
42
|
mutation: CartMutation | null
|
|
@@ -77,20 +77,20 @@ export function CartProvider({
|
|
|
77
77
|
}) {
|
|
78
78
|
const key = sessionKey(storeId)
|
|
79
79
|
const [cart, setCart] = useState<StorefrontCart | null>(null)
|
|
80
|
-
const [
|
|
80
|
+
const [cartToken, setCartToken] = useState<string>()
|
|
81
81
|
const [loadStatus, setLoadStatus] = useState<CartLoadStatus>('loading')
|
|
82
82
|
const [mutation, setMutation] = useState<CartMutation | null>(null)
|
|
83
83
|
const [error, setError] = useState<string>()
|
|
84
84
|
const mutationInFlight = useRef(false)
|
|
85
85
|
|
|
86
|
-
const persist = (
|
|
87
|
-
|
|
88
|
-
localStorage.setItem(key, JSON.stringify({ version: 1, storeId,
|
|
86
|
+
const persist = (nextCartToken: string) => {
|
|
87
|
+
setCartToken(nextCartToken)
|
|
88
|
+
localStorage.setItem(key, JSON.stringify({ version: 1, storeId, cartToken: nextCartToken }))
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
const clear = () => {
|
|
92
92
|
setCart(null)
|
|
93
|
-
|
|
93
|
+
setCartToken(undefined)
|
|
94
94
|
localStorage.removeItem(key)
|
|
95
95
|
}
|
|
96
96
|
|
|
@@ -104,9 +104,9 @@ export function CartProvider({
|
|
|
104
104
|
return
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
|
|
107
|
+
setCartToken(stored.cartToken)
|
|
108
108
|
try {
|
|
109
|
-
const result = await serverApi.loadCart({
|
|
109
|
+
const result = await serverApi.loadCart({ cartToken: stored.cartToken })
|
|
110
110
|
if (!result.ok) {
|
|
111
111
|
setError(result.error.message)
|
|
112
112
|
setLoadStatus('error')
|
|
@@ -147,7 +147,7 @@ export function CartProvider({
|
|
|
147
147
|
let result
|
|
148
148
|
try {
|
|
149
149
|
result = await serverApi.addProductToCart({
|
|
150
|
-
|
|
150
|
+
cartToken,
|
|
151
151
|
currencyCode,
|
|
152
152
|
variantId: input.variantId,
|
|
153
153
|
quantity: input.quantity,
|
|
@@ -164,7 +164,7 @@ export function CartProvider({
|
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
setError(undefined)
|
|
167
|
-
persist(result.value.
|
|
167
|
+
persist(result.value.cartToken)
|
|
168
168
|
setCart(result.value.cart)
|
|
169
169
|
return result.value.cart
|
|
170
170
|
} finally {
|
|
@@ -174,7 +174,7 @@ export function CartProvider({
|
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
const setItemQuantity = async (itemId: string, quantity: number) => {
|
|
177
|
-
if (!
|
|
177
|
+
if (!cartToken) {
|
|
178
178
|
setError('No hay un carrito activo.')
|
|
179
179
|
return
|
|
180
180
|
}
|
|
@@ -190,7 +190,7 @@ export function CartProvider({
|
|
|
190
190
|
let result
|
|
191
191
|
try {
|
|
192
192
|
result = await serverApi.setCartItemQuantity({
|
|
193
|
-
|
|
193
|
+
cartToken,
|
|
194
194
|
cartItemId: itemId,
|
|
195
195
|
quantity,
|
|
196
196
|
})
|
|
@@ -213,7 +213,7 @@ export function CartProvider({
|
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
const removeItem = async (itemId: string) => {
|
|
216
|
-
if (!
|
|
216
|
+
if (!cartToken) {
|
|
217
217
|
setError('No hay un carrito activo.')
|
|
218
218
|
return
|
|
219
219
|
}
|
|
@@ -229,7 +229,7 @@ export function CartProvider({
|
|
|
229
229
|
let result
|
|
230
230
|
try {
|
|
231
231
|
result = await serverApi.removeCartItem({
|
|
232
|
-
|
|
232
|
+
cartToken,
|
|
233
233
|
cartItemId: itemId,
|
|
234
234
|
})
|
|
235
235
|
} catch {
|
|
@@ -252,7 +252,7 @@ export function CartProvider({
|
|
|
252
252
|
|
|
253
253
|
const value: CartContextValue = {
|
|
254
254
|
cart,
|
|
255
|
-
|
|
255
|
+
cartToken,
|
|
256
256
|
itemCount: cart?.items.reduce((sum, item) => sum + item.quantity, 0) ?? 0,
|
|
257
257
|
loadStatus,
|
|
258
258
|
mutation,
|