hey-pharmacist-ecommerce 1.1.11 → 1.1.12

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 (18) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +548 -396
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +549 -397
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/CartItem.tsx +63 -42
  9. package/src/components/ProductCard.tsx +131 -55
  10. package/src/lib/types/index.ts +1 -0
  11. package/src/providers/CartProvider.tsx +47 -3
  12. package/src/screens/CartScreen.tsx +146 -231
  13. package/src/screens/CheckoutScreen.tsx +30 -61
  14. package/src/screens/LoginScreen.tsx +1 -1
  15. package/src/screens/ProductDetailScreen.tsx +355 -362
  16. package/src/screens/RegisterScreen.tsx +1 -1
  17. package/src/screens/ShopScreen.tsx +439 -268
  18. package/src/screens/WishlistScreen.tsx +80 -76
package/src/screens/WishlistScreen.tsx CHANGED
@@ -143,63 +143,57 @@ export default function WishlistScreen() {
143
143
  const emptyAfterFiltering = !isLoading && wishlistProducts.length > 0 && processedProducts.length === 0;
144
144
 
145
145
  return (
146
- <div className="min-h-screen bg-slate-50 pb-16">
147
- <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] pb-32 pt-16 text-white">
148
- <div className="absolute inset-0 opacity-40 mix-blend-soft-light" aria-hidden="true">
149
- <div className="absolute -top-1/2 right-1/2 h-[40rem] w-[40rem] rounded-full bg-white/10 blur-3xl" />
150
- <div className="absolute left-1/4 top-1/4 h-48 w-48 rounded-full bg-white/20 blur-2xl" />
151
- </div>
152
- <div className="relative container mx-auto px-4">
153
- <div className="max-w-3xl space-y-6">
154
- <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
155
- <Heart className="h-4 w-4" />
156
- Wishlist
157
- </span>
158
- <h1 className="text-4xl font-bold leading-tight md:text-5xl">
159
- Curate your pharmacy must-haves in one calming space
160
- </h1>
161
- <p className="max-w-2xl text-white/80 md:text-lg">
162
- We keep your favourite products ready for reorder, refill reminders, and quick checkout—exactly when you need them.
163
- </p>
164
- </div>
165
- </div>
166
- </section>
167
-
168
- <div className="relative -mt-20">
169
- <div className="container mx-auto px-4">
146
+ <div className="bg-white">
147
+ <div className="min-h-screen bg-white max-w-6xl mx-auto">
148
+ <div className="container mx-auto px-4 py-8">
170
149
  <motion.div
171
150
  initial={{ opacity: 0, y: 24 }}
172
151
  animate={{ opacity: 1, y: 0 }}
173
- className="rounded-3xl border border-slate-100 bg-white p-6 shadow-xl shadow-primary-50"
152
+ className="space-y-6"
174
153
  >
175
- <div className="flex flex-col gap-6">
176
- {!isAuthenticated && (
177
- <div className="flex min-h-[40vh] items-center justify-center">
178
- <div className="max-w-lg rounded-3xl border border-slate-100 bg-white p-10 text-center shadow-lg shadow-primary-50">
179
- <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-primary-600">
180
- <Heart className="h-8 w-8" />
154
+ {!isAuthenticated && (
155
+ <div className="flex min-h-[40vh] items-center justify-center">
156
+ <div className="max-w-lg text-center space-y-6">
157
+ <div className="flex justify-center">
158
+ <div className="rounded-full bg-gray-100 p-6">
159
+ <Heart className="h-12 w-12 text-gray-400" />
181
160
  </div>
182
- <h2 className="mt-6 text-3xl font-bold text-slate-900">Sign in to see your favourites</h2>
183
- <p className="mt-3 text-slate-500">
161
+ </div>
162
+ <div className="space-y-2">
163
+ <h2 className="text-2xl font-bold text-slate-900">Sign in to see your favourites</h2>
164
+ <p className="text-gray-500">
184
165
  Create your curated shelf of products and we&apos;ll keep them ready whenever you return.
185
166
  </p>
186
- <Button className="mt-6" onClick={() => router.push(buildPath('/login'))}>
187
- Sign In
188
- </Button>
189
167
  </div>
168
+ <button
169
+ type="button"
170
+ onClick={() => router.push(buildPath('/login'))}
171
+ className="rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 text-sm font-medium transition-colors"
172
+ >
173
+ Sign In
174
+ </button>
190
175
  </div>
191
- )}
176
+ </div>
177
+ )}
192
178
 
193
- {isAuthenticated && (
194
- <>
195
- <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
196
- <div className="space-y-1">
197
- <h2 className="text-2xl font-semibold text-slate-900">Your saved collection</h2>
198
- <p className="text-sm text-slate-500">
199
- Total value: <span className="font-semibold text-primary-600">{formatPrice(totalValue)}</span>
200
- {onlyInStock && ' • Showing items ready to ship'}
179
+ {isAuthenticated && (
180
+ <>
181
+ <div className="mb-6">
182
+ <h1 className="text-2xl font-bold text-slate-900">Wishlist</h1>
183
+ <p className="text-sm text-gray-500 mt-1">
184
+ {wishlistCount} {wishlistCount === 1 ? 'item' : 'items'} saved
185
+ {wishlistCount > 0 && ` • Total value: ${formatPrice(totalValue)}`}
186
+ </p>
187
+ </div>
188
+
189
+ <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6">
190
+ <div className="space-y-1">
191
+ {onlyInStock && (
192
+ <p className="text-sm text-gray-500">
193
+ Showing items ready to ship
201
194
  </p>
202
- </div>
195
+ )}
196
+ </div>
203
197
 
204
198
  <div className="flex flex-wrap items-center gap-3">
205
199
  <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-primary-200 hover:text-primary-600">
@@ -278,19 +272,26 @@ export default function WishlistScreen() {
278
272
 
279
273
  {!isLoading && wishlistCount === 0 && (
280
274
  <div className="flex min-h-[30vh] items-center justify-center">
281
- <div className="max-w-2xl rounded-3xl border border-slate-100 bg-white p-12 text-center shadow-xl shadow-primary-50">
282
- <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary-100 text-primary-600">
283
- <Sparkles className="h-10 w-10" />
275
+ <div className="text-center space-y-6 max-w-md">
276
+ <div className="flex justify-center">
277
+ <div className="rounded-full bg-gray-100 p-6">
278
+ <Heart className="h-12 w-12 text-gray-400" />
279
+ </div>
284
280
  </div>
285
- <h2 className="mt-6 text-4xl font-bold text-slate-900">Start your wellness wishlist</h2>
286
- <p className="mt-4 text-lg text-slate-500">
287
- Bookmark pharmacy essentials, supplements, or skincare picks and we&apos;ll keep them safe until you&apos;re ready to checkout.
288
- </p>
289
- <div className="mt-8 flex flex-wrap justify-center gap-3">
290
- <Button onClick={() => router.push(buildPath('/shop'))}>Discover products</Button>
291
- <Button variant="outline" onClick={() => router.push(buildPath('/categories'))}>
292
- Browse categories
293
- </Button>
281
+ <div className="space-y-2">
282
+ <h2 className="text-2xl font-bold text-slate-900">Your wishlist is empty</h2>
283
+ <p className="text-gray-500">
284
+ Start adding products to your wishlist to see them here.
285
+ </p>
286
+ </div>
287
+ <div className="flex flex-wrap justify-center gap-3">
288
+ <button
289
+ type="button"
290
+ onClick={() => router.push(buildPath('/shop'))}
291
+ className="rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
292
+ >
293
+ Discover products
294
+ </button>
294
295
  </div>
295
296
  </div>
296
297
  </div>
@@ -403,25 +404,28 @@ export default function WishlistScreen() {
403
404
  </>
404
405
  )}
405
406
 
406
- {isAuthenticated && emptyAfterFiltering && (
407
- <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50 p-12 text-center">
408
- <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-200 text-slate-500">
409
- <Package className="h-8 w-8" />
410
- </div>
411
- <h3 className="mt-6 text-2xl font-semibold text-slate-900">
412
- Nothing matches those filters
413
- </h3>
414
- <p className="mt-2 max-w-md text-sm text-slate-500">
415
- Try showing out-of-stock items or adjust your sort order to revisit everything you’ve saved.
416
- </p>
417
- <Button className="mt-6" variant="outline" onClick={() => setOnlyInStock(false)}>
418
- Show all saved products
419
- </Button>
407
+ {isAuthenticated && emptyAfterFiltering && (
408
+ <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 p-12 text-center">
409
+ <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500">
410
+ <Package className="h-8 w-8" />
420
411
  </div>
421
- )}
422
- </>
423
- )}
424
- </div>
412
+ <h3 className="mt-6 text-xl font-semibold text-slate-900">
413
+ Nothing matches those filters
414
+ </h3>
415
+ <p className="mt-2 max-w-md text-sm text-gray-500">
416
+ Try showing out-of-stock items or adjust your sort order to revisit everything you&apos;ve saved.
417
+ </p>
418
+ <button
419
+ type="button"
420
+ className="mt-6 rounded-full border-2 border-primary-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors"
421
+ onClick={() => setOnlyInStock(false)}
422
+ >
423
+ Show all saved products
424
+ </button>
425
+ </div>
426
+ )}
427
+ </>
428
+ )}
425
429
  </motion.div>
426
430
  </div>
427
431
  </div>