@pradip1995/segment-jewelry-checkout-summary 0.1.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/package.json +41 -0
- package/src/index.ts +2 -0
- package/src/jewelry-checkout-summary.css +13 -0
- package/src/manifest.ts +11 -0
- package/src/segment.tsx +118 -0
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@pradip1995/segment-jewelry-checkout-summary",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"access": "public"
|
|
7
|
+
},
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"./src/jewelry-checkout-summary.css"
|
|
10
|
+
],
|
|
11
|
+
"files": [
|
|
12
|
+
"src"
|
|
13
|
+
],
|
|
14
|
+
"exports": {
|
|
15
|
+
".": "./src/index.ts",
|
|
16
|
+
"./manifest": "./src/manifest.ts"
|
|
17
|
+
},
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"@pradip1995/commerce-core": "^4.0.0",
|
|
20
|
+
"@pradip1995/plugin-sdk": "^0.2.0",
|
|
21
|
+
"react": ">=19",
|
|
22
|
+
"react-dom": ">=19",
|
|
23
|
+
"next": ">=15"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"@pradip1995/segment-jewelry-checkout-form": "^0.1.1",
|
|
27
|
+
"@pradip1995/segment-primitives": "^0.4.0",
|
|
28
|
+
"@pradip1995/segment-tokens": "^0.3.7",
|
|
29
|
+
"@medusajs/types": "^2.8.0"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@pradip1995/plugin-sdk": "^0.2.0",
|
|
33
|
+
"@types/react": "^19",
|
|
34
|
+
"react": "19.0.3",
|
|
35
|
+
"typescript": "^5.7.2"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"typecheck": "tsc --noEmit",
|
|
39
|
+
"lint": "tsc --noEmit"
|
|
40
|
+
}
|
|
41
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.jewelry-checkout-summary {
|
|
2
|
+
height: 100%;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.jewelry-checkout-summary__delivery {
|
|
6
|
+
border-radius: 0.75rem;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.jewelry-checkout-summary__payment {
|
|
10
|
+
margin-top: 1.5rem;
|
|
11
|
+
padding-top: 1.25rem;
|
|
12
|
+
border-top: 1px solid var(--color-border-subtle, rgba(59, 31, 78, 0.12));
|
|
13
|
+
}
|
package/src/manifest.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { SegmentManifest } from "@pradip1995/plugin-sdk"
|
|
2
|
+
|
|
3
|
+
const manifest: SegmentManifest = {
|
|
4
|
+
id: "jewelry-checkout-summary",
|
|
5
|
+
type: "segment",
|
|
6
|
+
version: "0.1.0",
|
|
7
|
+
compatibleFramework: ["^1.0.0"],
|
|
8
|
+
dataKey: "checkout",
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default manifest
|
package/src/segment.tsx
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { formatPrice } from "@pradip1995/segment-primitives/format-price"
|
|
4
|
+
import CouponApply from "@pradip1995/segment-primitives/coupon-apply"
|
|
5
|
+
import { useShiprocketDeliveryEstimate } from "@pradip1995/commerce-core/hooks/use-shiprocket-delivery-estimate"
|
|
6
|
+
import { resolveDeliveryEstimateView } from "@pradip1995/commerce-core/util/shiprocket"
|
|
7
|
+
import PaymentBlock from "@pradip1995/segment-jewelry-checkout-form/payment-block"
|
|
8
|
+
import type { HttpTypes } from "@medusajs/types"
|
|
9
|
+
import "./jewelry-checkout-summary.css"
|
|
10
|
+
|
|
11
|
+
export default function JewelryCheckoutSummary({
|
|
12
|
+
cart,
|
|
13
|
+
summaryTitle = "Order summary",
|
|
14
|
+
paymentProviders,
|
|
15
|
+
shopName,
|
|
16
|
+
}: {
|
|
17
|
+
cart?: HttpTypes.StoreCart
|
|
18
|
+
customer?: HttpTypes.StoreCustomer | null
|
|
19
|
+
summaryTitle?: string
|
|
20
|
+
paymentProviders?: Array<{ id: string }>
|
|
21
|
+
shopName?: string
|
|
22
|
+
}) {
|
|
23
|
+
const currency = cart?.currency_code || "inr"
|
|
24
|
+
const items = cart?.items || []
|
|
25
|
+
const postalCode = cart?.shipping_address?.postal_code
|
|
26
|
+
const firstItem = cart?.items?.[0]
|
|
27
|
+
|
|
28
|
+
const { deliveryEstimate, formatDeliveryDate, fallbackDeliveryDate } =
|
|
29
|
+
useShiprocketDeliveryEstimate({
|
|
30
|
+
postalCode,
|
|
31
|
+
variantId: firstItem?.variant_id ?? null,
|
|
32
|
+
cartMetadata: cart?.metadata,
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
const deliveryView = resolveDeliveryEstimateView(
|
|
36
|
+
postalCode,
|
|
37
|
+
deliveryEstimate,
|
|
38
|
+
formatDeliveryDate,
|
|
39
|
+
fallbackDeliveryDate
|
|
40
|
+
)
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<aside className="jewelry-checkout-summary checkout-page__sidebar card-surface rounded-lg p-6 h-fit">
|
|
44
|
+
<h2 className="checkout-page__panel-title section-heading text-lg mb-4">{summaryTitle}</h2>
|
|
45
|
+
|
|
46
|
+
{postalCode && postalCode.length === 6 ? (
|
|
47
|
+
<div className="jewelry-checkout-summary__delivery checkout-page__delivery-panel mb-6">
|
|
48
|
+
<p className="checkout-page__delivery-msg text-sm text-body">
|
|
49
|
+
{deliveryView.kind === "loading" ? (
|
|
50
|
+
<span className="checkout-page__delivery-msg--loading">Calculating delivery…</span>
|
|
51
|
+
) : deliveryView.kind === "date" ? (
|
|
52
|
+
<>
|
|
53
|
+
Estimated delivery by <strong>{deliveryView.label}</strong>
|
|
54
|
+
</>
|
|
55
|
+
) : (
|
|
56
|
+
<>Delivery estimate available after pincode verification</>
|
|
57
|
+
)}
|
|
58
|
+
</p>
|
|
59
|
+
</div>
|
|
60
|
+
) : null}
|
|
61
|
+
|
|
62
|
+
{cart?.items?.length ? <CouponApply cart={cart} className="mb-6" /> : null}
|
|
63
|
+
|
|
64
|
+
{items.length > 0 ? (
|
|
65
|
+
<>
|
|
66
|
+
<ul className="space-y-3 mb-6 max-h-64 overflow-y-auto">
|
|
67
|
+
{items.map((item) => (
|
|
68
|
+
<li key={item.id} className="flex justify-between gap-3 text-sm">
|
|
69
|
+
<span className="text-body truncate">
|
|
70
|
+
{item.title} × {item.quantity}
|
|
71
|
+
</span>
|
|
72
|
+
<span className="text-heading shrink-0 font-medium">
|
|
73
|
+
{formatPrice(item.total, currency)}
|
|
74
|
+
</span>
|
|
75
|
+
</li>
|
|
76
|
+
))}
|
|
77
|
+
</ul>
|
|
78
|
+
<dl className="space-y-2 text-sm border-t border-cart-border pt-4">
|
|
79
|
+
<div className="flex justify-between">
|
|
80
|
+
<dt className="text-muted">Subtotal</dt>
|
|
81
|
+
<dd>{formatPrice(cart?.subtotal, currency)}</dd>
|
|
82
|
+
</div>
|
|
83
|
+
{cart?.shipping_total != null && (
|
|
84
|
+
<div className="flex justify-between">
|
|
85
|
+
<dt className="text-muted">Shipping</dt>
|
|
86
|
+
<dd>
|
|
87
|
+
{cart.shipping_total > 0
|
|
88
|
+
? formatPrice(cart.shipping_total, currency)
|
|
89
|
+
: cart.shipping_address?.postal_code
|
|
90
|
+
? "Free"
|
|
91
|
+
: "—"}
|
|
92
|
+
</dd>
|
|
93
|
+
</div>
|
|
94
|
+
)}
|
|
95
|
+
{(cart?.discount_total ?? 0) > 0 && (
|
|
96
|
+
<div className="flex justify-between text-green-700">
|
|
97
|
+
<dt>Discount</dt>
|
|
98
|
+
<dd>-{formatPrice(cart?.discount_total, currency)}</dd>
|
|
99
|
+
</div>
|
|
100
|
+
)}
|
|
101
|
+
<div className="flex justify-between font-semibold pt-2">
|
|
102
|
+
<dt>Total</dt>
|
|
103
|
+
<dd className="text-brand-accent text-lg">{formatPrice(cart?.total, currency)}</dd>
|
|
104
|
+
</div>
|
|
105
|
+
</dl>
|
|
106
|
+
</>
|
|
107
|
+
) : (
|
|
108
|
+
<p className="text-muted text-sm">No cart data available.</p>
|
|
109
|
+
)}
|
|
110
|
+
|
|
111
|
+
{items.length > 0 ? (
|
|
112
|
+
<div className="jewelry-checkout-summary__payment">
|
|
113
|
+
<PaymentBlock cart={cart!} paymentProviders={paymentProviders} shopName={shopName} />
|
|
114
|
+
</div>
|
|
115
|
+
) : null}
|
|
116
|
+
</aside>
|
|
117
|
+
)
|
|
118
|
+
}
|