@pradip1995/segment-login-template 0.4.2 → 0.5.2
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 +10 -7
- package/src/account-guest-orders.tsx +41 -12
- package/src/account-payment-methods.tsx +7 -0
- package/src/account-theme.ts +64 -1
- package/src/auth-server.ts +23 -7
- package/src/forgot-password-form.tsx +44 -26
- package/src/google-auth-section.tsx +8 -10
- package/src/guest-order-modal.tsx +224 -0
- package/src/login-brand-panel.tsx +158 -0
- package/src/login-form.tsx +211 -147
- package/src/otp-unified-form.tsx +340 -0
- package/src/payment-methods-actions.ts +16 -4
- package/src/register-form.tsx +77 -57
- package/src/segment.tsx +181 -48
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import Image from "next/image"
|
|
4
|
+
import type { BrandPanelConfig } from "./account-theme"
|
|
5
|
+
|
|
6
|
+
type LoginBrandPanelProps = {
|
|
7
|
+
panel?: BrandPanelConfig | null
|
|
8
|
+
variant?: "desktop" | "mobile"
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const PLACEHOLDER =
|
|
12
|
+
"data:image/svg+xml," +
|
|
13
|
+
encodeURIComponent(
|
|
14
|
+
`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200" viewBox="0 0 800 1200">
|
|
15
|
+
<defs>
|
|
16
|
+
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
|
17
|
+
<stop offset="0%" stop-color="#1a1a1a"/>
|
|
18
|
+
<stop offset="100%" stop-color="#3d3d3d"/>
|
|
19
|
+
</linearGradient>
|
|
20
|
+
</defs>
|
|
21
|
+
<rect width="800" height="1200" fill="url(#g)"/>
|
|
22
|
+
<circle cx="400" cy="520" r="80" fill="none" stroke="#c9a46c" stroke-width="1.5" opacity="0.5"/>
|
|
23
|
+
<circle cx="400" cy="520" r="40" fill="#c9a46c" opacity="0.25"/>
|
|
24
|
+
</svg>`
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
export default function LoginBrandPanel({
|
|
28
|
+
panel,
|
|
29
|
+
variant = "desktop",
|
|
30
|
+
}: LoginBrandPanelProps) {
|
|
31
|
+
const image = panel?.image || PLACEHOLDER
|
|
32
|
+
const headline = panel?.headline || panel?.title
|
|
33
|
+
const features = panel?.featureCards?.filter((c) => c.title && c.text) || []
|
|
34
|
+
|
|
35
|
+
if (variant === "mobile") {
|
|
36
|
+
return (
|
|
37
|
+
<div className="relative w-full h-[26vh] min-h-[160px] max-h-[220px] shrink-0 overflow-hidden bg-page-bg lg:hidden">
|
|
38
|
+
<Image
|
|
39
|
+
src={image}
|
|
40
|
+
alt=""
|
|
41
|
+
fill
|
|
42
|
+
className="object-cover object-center"
|
|
43
|
+
sizes="100vw"
|
|
44
|
+
priority
|
|
45
|
+
unoptimized={image.startsWith("data:")}
|
|
46
|
+
/>
|
|
47
|
+
<div className="absolute inset-0 bg-gradient-to-b from-black/25 via-transparent to-page-bg" />
|
|
48
|
+
{(panel?.eyebrow || headline) && (
|
|
49
|
+
<div className="absolute inset-x-0 bottom-0 p-5 z-[1]">
|
|
50
|
+
{panel?.logo && (
|
|
51
|
+
<Image
|
|
52
|
+
src={panel.logo}
|
|
53
|
+
alt=""
|
|
54
|
+
width={140}
|
|
55
|
+
height={40}
|
|
56
|
+
className="h-8 w-auto object-contain mb-2"
|
|
57
|
+
unoptimized
|
|
58
|
+
/>
|
|
59
|
+
)}
|
|
60
|
+
{panel?.eyebrow && (
|
|
61
|
+
<p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/80 mb-1">
|
|
62
|
+
{panel.eyebrow}
|
|
63
|
+
</p>
|
|
64
|
+
)}
|
|
65
|
+
{headline && (
|
|
66
|
+
<p className="font-heading text-lg text-inverse font-bold tracking-wide">
|
|
67
|
+
{headline}
|
|
68
|
+
</p>
|
|
69
|
+
)}
|
|
70
|
+
</div>
|
|
71
|
+
)}
|
|
72
|
+
</div>
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<div className="relative hidden lg:flex lg:w-1/2 h-full shrink-0 overflow-hidden bg-heading flex-col">
|
|
78
|
+
<Image
|
|
79
|
+
src={image}
|
|
80
|
+
alt=""
|
|
81
|
+
fill
|
|
82
|
+
className="object-cover object-center"
|
|
83
|
+
sizes="50vw"
|
|
84
|
+
priority
|
|
85
|
+
unoptimized={image.startsWith("data:")}
|
|
86
|
+
/>
|
|
87
|
+
<div
|
|
88
|
+
className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/45 to-black/25"
|
|
89
|
+
aria-hidden
|
|
90
|
+
/>
|
|
91
|
+
|
|
92
|
+
<div className="relative z-[1] flex flex-1 flex-col justify-between p-10 xl:p-14 text-inverse">
|
|
93
|
+
<div>
|
|
94
|
+
{panel?.logo ? (
|
|
95
|
+
<Image
|
|
96
|
+
src={panel.logo}
|
|
97
|
+
alt=""
|
|
98
|
+
width={180}
|
|
99
|
+
height={48}
|
|
100
|
+
className="h-12 w-auto object-contain mb-6"
|
|
101
|
+
unoptimized
|
|
102
|
+
/>
|
|
103
|
+
) : panel?.eyebrow ? (
|
|
104
|
+
<p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/70 mb-3">
|
|
105
|
+
{panel.eyebrow}
|
|
106
|
+
</p>
|
|
107
|
+
) : null}
|
|
108
|
+
|
|
109
|
+
{headline && (
|
|
110
|
+
<h2 className="font-heading text-3xl xl:text-4xl font-bold tracking-wide leading-snug">
|
|
111
|
+
{headline}
|
|
112
|
+
</h2>
|
|
113
|
+
)}
|
|
114
|
+
{panel?.description && (
|
|
115
|
+
<p className="mt-3 text-sm text-inverse/80 leading-relaxed max-w-md">
|
|
116
|
+
{panel.description}
|
|
117
|
+
</p>
|
|
118
|
+
)}
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
{features.length > 0 && (
|
|
122
|
+
<div className="mt-8">
|
|
123
|
+
{panel?.featuresLabel && (
|
|
124
|
+
<p className="text-[10px] font-semibold uppercase tracking-[0.24em] text-inverse/60 mb-4">
|
|
125
|
+
{panel.featuresLabel}
|
|
126
|
+
</p>
|
|
127
|
+
)}
|
|
128
|
+
<ul className="space-y-3">
|
|
129
|
+
{features.map((card, index) => (
|
|
130
|
+
<li key={`${card.title}-${index}`} className="flex gap-3 items-start">
|
|
131
|
+
{card.imageSrc ? (
|
|
132
|
+
<Image
|
|
133
|
+
src={card.imageSrc}
|
|
134
|
+
alt=""
|
|
135
|
+
width={28}
|
|
136
|
+
height={28}
|
|
137
|
+
className="mt-0.5 shrink-0"
|
|
138
|
+
unoptimized
|
|
139
|
+
/>
|
|
140
|
+
) : (
|
|
141
|
+
<span
|
|
142
|
+
className="mt-1.5 h-2 w-2 rounded-full bg-brand-accent shrink-0"
|
|
143
|
+
aria-hidden
|
|
144
|
+
/>
|
|
145
|
+
)}
|
|
146
|
+
<div>
|
|
147
|
+
<p className="text-sm font-semibold text-inverse">{card.title}</p>
|
|
148
|
+
<p className="text-xs text-inverse/70 mt-0.5">{card.text}</p>
|
|
149
|
+
</div>
|
|
150
|
+
</li>
|
|
151
|
+
))}
|
|
152
|
+
</ul>
|
|
153
|
+
</div>
|
|
154
|
+
)}
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
)
|
|
158
|
+
}
|