hey-pharmacist-ecommerce 1.1.41 → 1.1.42
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/dist/index.js +370 -370
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +370 -370
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/AccountAddressesTab.tsx +9 -9
- package/src/components/AccountOrdersTab.tsx +11 -11
- package/src/components/AccountOverviewTab.tsx +21 -21
- package/src/components/AccountPaymentTab.tsx +2 -2
- package/src/components/AccountReviewsTab.tsx +1 -1
- package/src/components/AccountSettingsTab.tsx +6 -6
- package/src/components/AddressFormModal.tsx +2 -2
- package/src/components/CartItem.tsx +2 -2
- package/src/components/FilterChips.tsx +7 -7
- package/src/components/Footer.tsx +9 -9
- package/src/components/Header.tsx +7 -7
- package/src/components/NotificationBell.tsx +3 -3
- package/src/components/NotificationDrawer.tsx +1 -1
- package/src/components/NotificationModal.tsx +1 -1
- package/src/components/OrderCard.tsx +2 -2
- package/src/components/ProductCard.tsx +6 -6
- package/src/components/QuickViewModal.tsx +23 -23
- package/src/components/ReviewCard.tsx +4 -4
- package/src/components/TabNavigation.tsx +2 -2
- package/src/components/ui/Badge.tsx +2 -2
- package/src/components/ui/Button.tsx +3 -3
- package/src/components/ui/ConfirmModal.tsx +3 -3
- package/src/components/ui/Input.tsx +1 -1
- package/src/providers/ThemeProvider.tsx +2 -2
- package/src/screens/AddressesScreen.tsx +6 -6
- package/src/screens/CartScreen.tsx +19 -19
- package/src/screens/ChangePasswordScreen.tsx +2 -2
- package/src/screens/CheckoutScreen.tsx +21 -21
- package/src/screens/CurrentOrdersScreen.tsx +4 -4
- package/src/screens/EditProfileScreen.tsx +1 -1
- package/src/screens/ForgotPasswordScreen.tsx +11 -11
- package/src/screens/LoginScreen.tsx +12 -12
- package/src/screens/OrderDetailScreen.tsx +30 -30
- package/src/screens/OrdersScreen.tsx +3 -3
- package/src/screens/ProductDetailScreen.tsx +48 -48
- package/src/screens/ProfileScreen.tsx +2 -2
- package/src/screens/RegisterScreen.tsx +15 -15
- package/src/screens/ResetPasswordScreen.tsx +14 -14
- package/src/screens/SearchResultsScreen.tsx +7 -7
- package/src/screens/ShopScreen.tsx +50 -50
- package/src/screens/WishlistScreen.tsx +22 -22
- package/src/styles/globals.css +43 -43
|
@@ -664,22 +664,22 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
664
664
|
|
|
665
665
|
<div className={`lg:w-72 ${showFilters ? 'block rounded-full' : 'hidden lg:block'}`}>
|
|
666
666
|
<div className="bg-white rounded-[24px] p-6 border-2 border-gray-100 sticky top-24">
|
|
667
|
-
<h3 className="font-['Poppins',sans-serif] font-semibold text-
|
|
667
|
+
<h3 className="font-['Poppins',sans-serif] font-semibold text-hsecondary">
|
|
668
668
|
Filters
|
|
669
669
|
</h3>
|
|
670
670
|
{/* Search */}
|
|
671
671
|
<div className="mb-6">
|
|
672
|
-
<label className="font-['Poppins',sans-serif] text-[12px] text-
|
|
672
|
+
<label className="font-['Poppins',sans-serif] text-[12px] text-hmuted mb-2 block font-medium">
|
|
673
673
|
Search Products
|
|
674
674
|
</label>
|
|
675
675
|
<div className="relative">
|
|
676
|
-
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-
|
|
676
|
+
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-hmuted" />
|
|
677
677
|
<input
|
|
678
678
|
type="text"
|
|
679
679
|
placeholder="Search..."
|
|
680
680
|
value={searchQuery}
|
|
681
681
|
onChange={handleInputChange}
|
|
682
|
-
className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-
|
|
682
|
+
className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
|
|
683
683
|
/>
|
|
684
684
|
</div>
|
|
685
685
|
</div>
|
|
@@ -690,13 +690,13 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
690
690
|
onClick={() => toggleFilterSection('category')}
|
|
691
691
|
className="w-full flex items-center justify-between mb-3"
|
|
692
692
|
>
|
|
693
|
-
<label className="font-['Poppins',sans-serif] text-[12px] text-
|
|
693
|
+
<label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
|
|
694
694
|
Category
|
|
695
695
|
</label>
|
|
696
696
|
{expandedFilterSections.category ? (
|
|
697
|
-
<ChevronDown className={`size-4 text-
|
|
697
|
+
<ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.category ? 'rotate-180' : ''}`} />
|
|
698
698
|
) : (
|
|
699
|
-
<ChevronDown className={`size-4 text-
|
|
699
|
+
<ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.category ? 'rotate-180' : ''}`} />
|
|
700
700
|
)}
|
|
701
701
|
</button>
|
|
702
702
|
{expandedFilterSections.category && (
|
|
@@ -714,8 +714,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
714
714
|
handleCategoryChange(categoryId);
|
|
715
715
|
}}
|
|
716
716
|
className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all flex items-center gap-3 ${isCategoryActive
|
|
717
|
-
? 'bg-
|
|
718
|
-
: 'text-
|
|
717
|
+
? 'bg-hprimary text-white shadow-lg'
|
|
718
|
+
: 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
|
|
719
719
|
}`}
|
|
720
720
|
>
|
|
721
721
|
<Icon className="size-4" />
|
|
@@ -733,10 +733,10 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
733
733
|
onClick={() => toggleFilterSection('brand')}
|
|
734
734
|
className="w-full flex items-center justify-between mb-3"
|
|
735
735
|
>
|
|
736
|
-
<label className="font-['Poppins',sans-serif] text-[12px] text-
|
|
736
|
+
<label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
|
|
737
737
|
Brand
|
|
738
738
|
</label>
|
|
739
|
-
<ChevronDown className={`size-4 text-
|
|
739
|
+
<ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.brand ? 'rotate-180' : ''}`} />
|
|
740
740
|
</button>
|
|
741
741
|
{expandedFilterSections.brand && (
|
|
742
742
|
<div className="space-y-2">
|
|
@@ -749,8 +749,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
749
749
|
key={brand}
|
|
750
750
|
onClick={() => handleBrandChange(brand)}
|
|
751
751
|
className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all ${isSelected
|
|
752
|
-
? 'bg-
|
|
753
|
-
: 'text-
|
|
752
|
+
? 'bg-hprimary text-white shadow-lg'
|
|
753
|
+
: 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
|
|
754
754
|
}`}
|
|
755
755
|
>
|
|
756
756
|
{brand}
|
|
@@ -769,18 +769,18 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
769
769
|
onClick={() => toggleFilterSection('availability')}
|
|
770
770
|
className="w-full flex items-center justify-between mb-3"
|
|
771
771
|
>
|
|
772
|
-
<label className="font-['Poppins',sans-serif] text-[12px] text-
|
|
772
|
+
<label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
|
|
773
773
|
Availability
|
|
774
774
|
</label>
|
|
775
|
-
<ChevronDown className={`size-4 text-
|
|
775
|
+
<ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.availability ? 'rotate-180' : ''}`} />
|
|
776
776
|
</button>
|
|
777
777
|
{expandedFilterSections.availability && (
|
|
778
778
|
<div className="space-y-2">
|
|
779
779
|
<button
|
|
780
780
|
onClick={handleToggleStock}
|
|
781
781
|
className={`w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${inStockOnly
|
|
782
|
-
? 'bg-
|
|
783
|
-
: 'text-
|
|
782
|
+
? 'bg-hprimary text-white shadow-lg'
|
|
783
|
+
: 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
|
|
784
784
|
}`}
|
|
785
785
|
>
|
|
786
786
|
In Stock Only
|
|
@@ -794,10 +794,10 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
794
794
|
onClick={() => toggleFilterSection('price')}
|
|
795
795
|
className="w-full flex items-center justify-between mb-3"
|
|
796
796
|
>
|
|
797
|
-
<label className="font-['Poppins',sans-serif] text-[12px] text-
|
|
797
|
+
<label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
|
|
798
798
|
Price Range
|
|
799
799
|
</label>
|
|
800
|
-
<ChevronDown className={`size-4 text-
|
|
800
|
+
<ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.price ? 'rotate-180' : ''}`} />
|
|
801
801
|
</button>
|
|
802
802
|
{expandedFilterSections.price && (
|
|
803
803
|
<div className="space-y-2">
|
|
@@ -810,8 +810,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
810
810
|
key={range.value}
|
|
811
811
|
onClick={() => handlePriceRangeSelect(range.value)}
|
|
812
812
|
className={`w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${isActive
|
|
813
|
-
? 'bg-
|
|
814
|
-
: 'text-
|
|
813
|
+
? 'bg-hprimary text-white shadow-lg'
|
|
814
|
+
: 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
|
|
815
815
|
}`}
|
|
816
816
|
>
|
|
817
817
|
{range.label}
|
|
@@ -828,7 +828,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
828
828
|
onChange={(event) =>
|
|
829
829
|
setCustomPrice((current) => ({ ...current, min: event.target.value }))
|
|
830
830
|
}
|
|
831
|
-
className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-
|
|
831
|
+
className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
|
|
832
832
|
/>
|
|
833
833
|
<Input
|
|
834
834
|
type="number"
|
|
@@ -838,14 +838,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
838
838
|
onChange={(event) =>
|
|
839
839
|
setCustomPrice((current) => ({ ...current, max: event.target.value }))
|
|
840
840
|
}
|
|
841
|
-
className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-
|
|
841
|
+
className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
|
|
842
842
|
/>
|
|
843
843
|
</div>
|
|
844
844
|
<button
|
|
845
845
|
type="button"
|
|
846
846
|
onClick={applyCustomPrice}
|
|
847
847
|
disabled={!isCustomPriceDirty}
|
|
848
|
-
className="w-full rounded-lg border border-
|
|
848
|
+
className="w-full rounded-lg border border-hprimary bg-hprimary-10 px-4 py-2 text-sm font-medium text-hprimary transition hover:bg-hprimary-20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
|
|
849
849
|
>
|
|
850
850
|
Apply
|
|
851
851
|
</button>
|
|
@@ -878,7 +878,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
878
878
|
return (
|
|
879
879
|
<div className="min-h-screen bg-[#F9FAFB]">
|
|
880
880
|
{/* Header Section */}
|
|
881
|
-
<section className="relative overflow-hidden bg-
|
|
881
|
+
<section className="relative overflow-hidden bg-hprimary-bg py-16 md:py-24">
|
|
882
882
|
<div className="container mx-auto px-4">
|
|
883
883
|
<motion.div
|
|
884
884
|
initial={{ opacity: 0, y: 24 }}
|
|
@@ -887,8 +887,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
887
887
|
>
|
|
888
888
|
{/* Orange icon and badge */}
|
|
889
889
|
<div className="flex items-center justify-center gap-2 mb-4">
|
|
890
|
-
<Star className="h-5 w-5 text-
|
|
891
|
-
<span className="text-sm font-semibold uppercase tracking-wider text-
|
|
890
|
+
<Star className="h-5 w-5 text-hprimary fill-primary" />
|
|
891
|
+
<span className="text-sm font-semibold uppercase tracking-wider text-hprimary">
|
|
892
892
|
COMPLETE PHARMACY SHOP
|
|
893
893
|
</span>
|
|
894
894
|
</div>
|
|
@@ -916,7 +916,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
916
916
|
value={searchQuery}
|
|
917
917
|
onChange={handleInputChange}
|
|
918
918
|
onKeyDown={handleKeyDown}
|
|
919
|
-
className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-hidden focus:ring-2 focus:ring-
|
|
919
|
+
className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-hidden focus:ring-2 focus:ring-hprimary-500/30 disabled:opacity-50"
|
|
920
920
|
disabled={isSearching}
|
|
921
921
|
/>
|
|
922
922
|
</div>
|
|
@@ -928,7 +928,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
928
928
|
{/* Shop by Category Section */}
|
|
929
929
|
<section className="py-8 bg-white">
|
|
930
930
|
<div className="container mx-auto px-4">
|
|
931
|
-
<h2 className="text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-
|
|
931
|
+
<h2 className="text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-hsecondary mb-6">
|
|
932
932
|
Shop by Category
|
|
933
933
|
</h2>
|
|
934
934
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
|
@@ -936,23 +936,23 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
936
936
|
onClick={handleClearCategory}
|
|
937
937
|
initial={{ opacity: 0, y: 20 }}
|
|
938
938
|
animate={{ opacity: 1, y: 0 }}
|
|
939
|
-
className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${!categoryFilter ? 'bg-linear-to-br from-
|
|
940
|
-
: 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-
|
|
939
|
+
className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${!categoryFilter ? 'bg-linear-to-br from-hprimary to-hsecondary text-white shadow-xl scale-105'
|
|
940
|
+
: 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-hprimary'
|
|
941
941
|
}`}
|
|
942
942
|
>
|
|
943
943
|
<div className="relative">
|
|
944
944
|
<div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter
|
|
945
945
|
? 'bg-white/20'
|
|
946
|
-
: 'bg-linear-to-br from-
|
|
946
|
+
: 'bg-linear-to-br from-hprimary-10 to-hsecondary-10 group-hover:scale-110'
|
|
947
947
|
}`}>
|
|
948
|
-
<Package className={`size-6 ${!categoryFilter ? 'text-white' : 'text-
|
|
948
|
+
<Package className={`size-6 ${!categoryFilter ? 'text-white' : 'text-hprimary'
|
|
949
949
|
}`} />
|
|
950
950
|
</div>
|
|
951
|
-
<h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-
|
|
951
|
+
<h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-hsecondary'
|
|
952
952
|
}`}>
|
|
953
953
|
All Products
|
|
954
954
|
</h3>
|
|
955
|
-
<p className={`font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-
|
|
955
|
+
<p className={`font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-hmuted'
|
|
956
956
|
}`}>
|
|
957
957
|
Browse Everything
|
|
958
958
|
</p>
|
|
@@ -971,23 +971,23 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
971
971
|
animate={{ opacity: 1, y: 0 }}
|
|
972
972
|
transition={{ delay: index * 0.1 }}
|
|
973
973
|
onClick={() => handleCategoryChange(categoryId)}
|
|
974
|
-
className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${isSelected ? 'bg-linear-to-br from-
|
|
975
|
-
: 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-
|
|
974
|
+
className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${isSelected ? 'bg-linear-to-br from-hprimary to-hsecondary text-white shadow-xl scale-105'
|
|
975
|
+
: 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-hprimary'
|
|
976
976
|
}`}
|
|
977
977
|
>
|
|
978
978
|
<div className="relative">
|
|
979
979
|
<div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected
|
|
980
980
|
? 'bg-white/20'
|
|
981
|
-
: 'bg-linear-to-br from-
|
|
981
|
+
: 'bg-linear-to-br from-hprimary-10 to-hsecondary-10 group-hover:scale-110'
|
|
982
982
|
}`}>
|
|
983
|
-
<Icon className={`size-6 ${isSelected ? 'text-white' : 'text-
|
|
983
|
+
<Icon className={`size-6 ${isSelected ? 'text-white' : 'text-hprimary'
|
|
984
984
|
}`} />
|
|
985
985
|
</div>
|
|
986
|
-
<h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-
|
|
986
|
+
<h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-hsecondary'
|
|
987
987
|
}`}>
|
|
988
988
|
{category.name}
|
|
989
989
|
</h3>
|
|
990
|
-
<p className={`font-['Poppins',sans-serif] text-[11px] ${isSelected ? 'text-white/80' : 'text-
|
|
990
|
+
<p className={`font-['Poppins',sans-serif] text-[11px] ${isSelected ? 'text-white/80' : 'text-hmuted'
|
|
991
991
|
}`}>
|
|
992
992
|
{category.description}
|
|
993
993
|
</p>
|
|
@@ -1027,7 +1027,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
1027
1027
|
onChange={(event) => {
|
|
1028
1028
|
setSortOption(event.target.value as SortOption);
|
|
1029
1029
|
}}
|
|
1030
|
-
className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-xs transition focus:outline-hidden focus:ring-1 focus:ring-
|
|
1030
|
+
className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-xs transition focus:outline-hidden focus:ring-1 focus:ring-hsecondary focus:border-hprimary"
|
|
1031
1031
|
>
|
|
1032
1032
|
<option value="featured">Featured products</option>
|
|
1033
1033
|
<option value="price-low-high">Price: low to high</option>
|
|
@@ -1041,7 +1041,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
1041
1041
|
type="button"
|
|
1042
1042
|
onClick={() => setViewMode('grid')}
|
|
1043
1043
|
className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition ${viewMode === 'grid'
|
|
1044
|
-
? 'bg-white text-
|
|
1044
|
+
? 'bg-white text-hprimary shadow-md'
|
|
1045
1045
|
: 'text-gray-500 hover:text-gray-700'
|
|
1046
1046
|
}`}
|
|
1047
1047
|
aria-pressed={viewMode === 'grid'}
|
|
@@ -1052,7 +1052,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
1052
1052
|
type="button"
|
|
1053
1053
|
onClick={() => setViewMode('list')}
|
|
1054
1054
|
className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition ${viewMode === 'list'
|
|
1055
|
-
? 'bg-white text-
|
|
1055
|
+
? 'bg-white text-hprimary shadow-md'
|
|
1056
1056
|
: 'text-gray-500 hover:text-gray-700'
|
|
1057
1057
|
}`}
|
|
1058
1058
|
aria-pressed={viewMode === 'list'}
|
|
@@ -1070,10 +1070,10 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
1070
1070
|
key={chip.key}
|
|
1071
1071
|
type="button"
|
|
1072
1072
|
onClick={chip.onRemove}
|
|
1073
|
-
className="group flex items-center gap-2 rounded-full bg-
|
|
1073
|
+
className="group flex items-center gap-2 rounded-full bg-hprimary-50 px-3 py-1.5 text-sm font-medium text-hprimary-700 transition hover:bg-hprimary-100"
|
|
1074
1074
|
>
|
|
1075
1075
|
{chip.label}
|
|
1076
|
-
<X className="h-4 w-4 text-
|
|
1076
|
+
<X className="h-4 w-4 text-hprimary-500 group-hover:text-hprimary-700" />
|
|
1077
1077
|
</button>
|
|
1078
1078
|
))}
|
|
1079
1079
|
<button
|
|
@@ -1136,7 +1136,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
1136
1136
|
</div>
|
|
1137
1137
|
|
|
1138
1138
|
<div className="flex-1 space-y-3">
|
|
1139
|
-
<div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-
|
|
1139
|
+
<div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-hprimary-600">
|
|
1140
1140
|
{product.tags?.slice(0, 3).map((tag: string) => (
|
|
1141
1141
|
<span
|
|
1142
1142
|
key={tag}
|
|
@@ -1150,12 +1150,12 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
1150
1150
|
{product.name}
|
|
1151
1151
|
</h3>
|
|
1152
1152
|
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
|
1153
|
-
<span className="inline-flex items-center gap-2 font-medium text-
|
|
1153
|
+
<span className="inline-flex items-center gap-2 font-medium text-hprimary-600">
|
|
1154
1154
|
<ShieldCheck className="h-4 w-4" />
|
|
1155
1155
|
{displayInventoryCount > 0 ? 'In stock & ready to ship' : 'Restocking soon'}
|
|
1156
1156
|
</span>
|
|
1157
1157
|
<span className="inline-flex items-center gap-2">
|
|
1158
|
-
<Clock className="h-4 w-4 text-
|
|
1158
|
+
<Clock className="h-4 w-4 text-hprimary-500" />
|
|
1159
1159
|
Added {new Date(product.createdAt).toLocaleDateString()}
|
|
1160
1160
|
</span>
|
|
1161
1161
|
</div>
|
|
@@ -1177,7 +1177,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
|
|
|
1177
1177
|
event.stopPropagation();
|
|
1178
1178
|
router.push(buildPath(`/products/${product._id}`));
|
|
1179
1179
|
}}
|
|
1180
|
-
className="w-full font-['Poppins',sans-serif] font-medium text-sm px-3 py-2 rounded-xl bg-
|
|
1180
|
+
className="w-full font-['Poppins',sans-serif] font-medium text-sm px-3 py-2 rounded-xl bg-hsecondary text-white hover:opacity-80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
1181
1181
|
>
|
|
1182
1182
|
View product
|
|
1183
1183
|
</button>
|
|
@@ -166,19 +166,19 @@ export default function WishlistScreen() {
|
|
|
166
166
|
<div className="max-w-lg text-center space-y-6">
|
|
167
167
|
<div className="flex justify-center">
|
|
168
168
|
<div className="rounded-full bg-gray-100 p-6">
|
|
169
|
-
<Heart className="h-12 w-12 text-
|
|
169
|
+
<Heart className="h-12 w-12 text-hsecondary" />
|
|
170
170
|
</div>
|
|
171
171
|
</div>
|
|
172
172
|
<div className="space-y-2">
|
|
173
|
-
<h2 className="text-2xl font-bold text-
|
|
174
|
-
<p className="text-
|
|
173
|
+
<h2 className="text-2xl font-bold text-hsecondary">Sign in to see your favourites</h2>
|
|
174
|
+
<p className="text-hmuted">
|
|
175
175
|
Create your curated shelf of products and we'll keep them ready whenever you return.
|
|
176
176
|
</p>
|
|
177
177
|
</div>
|
|
178
178
|
<button
|
|
179
179
|
type="button"
|
|
180
180
|
onClick={() => router.push(buildPath('/login'))}
|
|
181
|
-
className="rounded-xl border-2 border-
|
|
181
|
+
className="rounded-xl border-2 border-hprimary bg-hprimary text-white px-6 py-3 text-sm font-medium transition-colors hover:opacity-80"
|
|
182
182
|
>
|
|
183
183
|
Sign In
|
|
184
184
|
</button>
|
|
@@ -189,8 +189,8 @@ export default function WishlistScreen() {
|
|
|
189
189
|
{isAuthenticated && (
|
|
190
190
|
<>
|
|
191
191
|
<div className="mb-6">
|
|
192
|
-
<h1 className="text-2xl font-bold text-
|
|
193
|
-
<p className="text-sm text-
|
|
192
|
+
<h1 className="text-2xl font-bold text-hsecondary">Wishlist</h1>
|
|
193
|
+
<p className="text-sm text-hmuted mt-1">
|
|
194
194
|
{wishlistCount} {wishlistCount === 1 ? 'item' : 'items'} saved
|
|
195
195
|
{wishlistCount > 0 && ` • Total value: ${formatPrice(totalValue)}`}
|
|
196
196
|
</p>
|
|
@@ -199,19 +199,19 @@ export default function WishlistScreen() {
|
|
|
199
199
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6">
|
|
200
200
|
<div className="space-y-1">
|
|
201
201
|
{onlyInStock && (
|
|
202
|
-
<p className="text-sm text-
|
|
202
|
+
<p className="text-sm text-hmuted">
|
|
203
203
|
Showing items ready to ship
|
|
204
204
|
</p>
|
|
205
205
|
)}
|
|
206
206
|
</div>
|
|
207
207
|
|
|
208
208
|
<div className="flex flex-wrap items-center gap-3">
|
|
209
|
-
<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-
|
|
209
|
+
<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-hprimary hover:text-hsecondary">
|
|
210
210
|
<input
|
|
211
211
|
type="checkbox"
|
|
212
212
|
checked={onlyInStock}
|
|
213
213
|
onChange={(event) => setOnlyInStock(event.target.checked)}
|
|
214
|
-
className="h-4 w-4 rounded-sm border-slate-300 text-
|
|
214
|
+
className="h-4 w-4 rounded-sm border-slate-300 text-hsecondary focus:ring-hsecondary"
|
|
215
215
|
/>
|
|
216
216
|
Only show in-stock
|
|
217
217
|
</label>
|
|
@@ -236,7 +236,7 @@ export default function WishlistScreen() {
|
|
|
236
236
|
type="button"
|
|
237
237
|
onClick={() => setViewMode('grid')}
|
|
238
238
|
className={`flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition rounded-full ${viewMode === 'grid'
|
|
239
|
-
? 'bg-white text-
|
|
239
|
+
? 'bg-white text-hprimary shadow-md'
|
|
240
240
|
: 'text-slate-600 hover:bg-white'
|
|
241
241
|
}`}
|
|
242
242
|
>
|
|
@@ -246,7 +246,7 @@ export default function WishlistScreen() {
|
|
|
246
246
|
type="button"
|
|
247
247
|
onClick={() => setViewMode('list')}
|
|
248
248
|
className={`flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition rounded-full ${viewMode === 'list'
|
|
249
|
-
? 'bg-white text-
|
|
249
|
+
? 'bg-white text-hprimary shadow-md'
|
|
250
250
|
: 'text-slate-600 hover:bg-white'
|
|
251
251
|
}`}
|
|
252
252
|
>
|
|
@@ -283,12 +283,12 @@ export default function WishlistScreen() {
|
|
|
283
283
|
<div className="text-center space-y-6 max-w-md">
|
|
284
284
|
<div className="flex justify-center">
|
|
285
285
|
<div className="rounded-full bg-gray-100 p-6">
|
|
286
|
-
<Heart className="h-12 w-12 text-
|
|
286
|
+
<Heart className="h-12 w-12 text-hsecondary" />
|
|
287
287
|
</div>
|
|
288
288
|
</div>
|
|
289
289
|
<div className="space-y-2">
|
|
290
|
-
<h2 className="text-2xl font-bold text-
|
|
291
|
-
<p className="text-
|
|
290
|
+
<h2 className="text-2xl font-bold text-hsecondary">Your wishlist is empty</h2>
|
|
291
|
+
<p className="text-hmuted">
|
|
292
292
|
Start adding products to your wishlist to see them here.
|
|
293
293
|
</p>
|
|
294
294
|
</div>
|
|
@@ -296,7 +296,7 @@ export default function WishlistScreen() {
|
|
|
296
296
|
<button
|
|
297
297
|
type="button"
|
|
298
298
|
onClick={() => router.push(buildPath('/shop'))}
|
|
299
|
-
className="rounded-xl border-2 border-
|
|
299
|
+
className="rounded-xl border-2 border-hsecondary bg-hsecondary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
|
|
300
300
|
>
|
|
301
301
|
Discover products
|
|
302
302
|
</button>
|
|
@@ -357,15 +357,15 @@ export default function WishlistScreen() {
|
|
|
357
357
|
<div className="flex flex-1 flex-col gap-2">
|
|
358
358
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
359
359
|
<div>
|
|
360
|
-
<h3 className="text-lg font-semibold text-
|
|
360
|
+
<h3 className="text-lg font-semibold text-hsecondary">
|
|
361
361
|
{product.name}
|
|
362
362
|
</h3>
|
|
363
|
-
<p className="text-sm text-
|
|
363
|
+
<p className="text-sm text-hmuted">
|
|
364
364
|
General wellness
|
|
365
365
|
</p>
|
|
366
366
|
</div>
|
|
367
367
|
<div className="text-right">
|
|
368
|
-
<p className="text-lg font-bold text-
|
|
368
|
+
<p className="text-lg font-bold text-hprimary">
|
|
369
369
|
{formatPrice(product.summary?.minPrice ?? 0)}
|
|
370
370
|
</p>
|
|
371
371
|
{product.summary?.hasDiscount && (
|
|
@@ -391,7 +391,7 @@ export default function WishlistScreen() {
|
|
|
391
391
|
<Button
|
|
392
392
|
size="sm"
|
|
393
393
|
onClick={() => router.push(buildPath(`/products/${product._id}`))}
|
|
394
|
-
className='bg-
|
|
394
|
+
className='bg-hprimary-90 text-white hover:bg-hprimary-70'
|
|
395
395
|
>
|
|
396
396
|
View details
|
|
397
397
|
</Button>
|
|
@@ -417,15 +417,15 @@ export default function WishlistScreen() {
|
|
|
417
417
|
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500">
|
|
418
418
|
<Package className="h-8 w-8" />
|
|
419
419
|
</div>
|
|
420
|
-
<h3 className="mt-6 text-xl font-semibold text-
|
|
420
|
+
<h3 className="mt-6 text-xl font-semibold text-hsecondary">
|
|
421
421
|
Nothing matches those filters
|
|
422
422
|
</h3>
|
|
423
|
-
<p className="mt-2 max-w-md text-sm text-
|
|
423
|
+
<p className="mt-2 max-w-md text-sm text-hmuted">
|
|
424
424
|
Try showing out-of-stock items or adjust your sort order to revisit everything you've saved.
|
|
425
425
|
</p>
|
|
426
426
|
<button
|
|
427
427
|
type="button"
|
|
428
|
-
className="mt-6 rounded-xl border-2 border-
|
|
428
|
+
className="mt-6 rounded-xl border-2 border-hprimary bg-white px-6 py-3 text-sm font-medium text-hsecondary hover:opacity-80 transition-colors"
|
|
429
429
|
onClick={() => setOnlyInStock(false)}
|
|
430
430
|
>
|
|
431
431
|
Show all saved products
|
package/src/styles/globals.css
CHANGED
|
@@ -4,49 +4,49 @@
|
|
|
4
4
|
@source "../**/*.{js,jsx,ts,tsx,mdx}";
|
|
5
5
|
|
|
6
6
|
@theme {
|
|
7
|
-
--color-
|
|
8
|
-
--color-
|
|
9
|
-
--color-
|
|
10
|
-
--color-
|
|
11
|
-
--color-
|
|
12
|
-
--color-
|
|
13
|
-
--color-
|
|
14
|
-
--color-
|
|
15
|
-
--color-
|
|
16
|
-
--color-
|
|
17
|
-
--color-
|
|
18
|
-
--color-
|
|
19
|
-
--color-
|
|
20
|
-
--color-
|
|
21
|
-
|
|
22
|
-
--color-
|
|
23
|
-
--color-
|
|
24
|
-
--color-
|
|
25
|
-
--color-
|
|
26
|
-
--color-
|
|
27
|
-
--color-
|
|
28
|
-
--color-
|
|
29
|
-
--color-
|
|
30
|
-
--color-
|
|
31
|
-
--color-
|
|
32
|
-
--color-
|
|
33
|
-
--color-
|
|
34
|
-
|
|
35
|
-
--color-
|
|
36
|
-
--color-
|
|
37
|
-
--color-
|
|
38
|
-
--color-
|
|
39
|
-
--color-
|
|
40
|
-
--color-
|
|
41
|
-
--color-
|
|
42
|
-
--color-
|
|
43
|
-
--color-
|
|
44
|
-
--color-
|
|
45
|
-
--color-
|
|
46
|
-
--color-
|
|
47
|
-
--color-
|
|
48
|
-
|
|
49
|
-
--color-
|
|
7
|
+
--color-hprimary-50: rgb(var(--hp-primary-50));
|
|
8
|
+
--color-hprimary-100: rgb(var(--hp-primary-100));
|
|
9
|
+
--color-hprimary-200: rgb(var(--hp-primary-200));
|
|
10
|
+
--color-hprimary-300: rgb(var(--hp-primary-300));
|
|
11
|
+
--color-hprimary-400: rgb(var(--hp-primary-400));
|
|
12
|
+
--color-hprimary-500: rgb(var(--hp-primary-500));
|
|
13
|
+
--color-hprimary-600: var(--hp-primary-600, #E67E50);
|
|
14
|
+
--color-hprimary-700: rgb(var(--hp-primary-700));
|
|
15
|
+
--color-hprimary-800: rgb(var(--hp-primary-800));
|
|
16
|
+
--color-hprimary-900: rgb(var(--hp-primary-900));
|
|
17
|
+
--color-hprimary-950: rgb(var(--hp-primary-950));
|
|
18
|
+
--color-hprimary: var(--hp-primary, #5b9bd5);
|
|
19
|
+
--color-hprimary-dark: var(--hp-primary-dark, #4a8ac4);
|
|
20
|
+
--color-hprimary-bg: var(--hp-primary-bg, #e6ebf0);
|
|
21
|
+
|
|
22
|
+
--color-hsecondary-50: rgb(var(--hp-secondary-50));
|
|
23
|
+
--color-hsecondary-100: rgb(var(--hp-secondary-100));
|
|
24
|
+
--color-hsecondary-200: rgb(var(--hp-secondary-200));
|
|
25
|
+
--color-hsecondary-300: rgb(var(--hp-secondary-300));
|
|
26
|
+
--color-hsecondary-400: rgb(var(--hp-secondary-400));
|
|
27
|
+
--color-hsecondary-500: rgb(var(--hp-secondary-500));
|
|
28
|
+
--color-hsecondary-600: rgb(var(--hp-secondary-600));
|
|
29
|
+
--color-hsecondary-700: rgb(var(--hp-secondary-700));
|
|
30
|
+
--color-hsecondary-800: rgb(var(--hp-secondary-800));
|
|
31
|
+
--color-hsecondary-900: rgb(var(--hp-secondary-900));
|
|
32
|
+
--color-hsecondary-950: rgb(var(--hp-secondary-950));
|
|
33
|
+
--color-hsecondary: var(--hp-secondary, #2b4b7c);
|
|
34
|
+
|
|
35
|
+
--color-haccent-50: rgb(var(--hp-accent-50));
|
|
36
|
+
--color-haccent-100: rgb(var(--hp-accent-100));
|
|
37
|
+
--color-haccent-200: rgb(var(--hp-accent-200));
|
|
38
|
+
--color-haccent-300: rgb(var(--hp-accent-300));
|
|
39
|
+
--color-haccent-400: rgb(var(--hp-accent-400));
|
|
40
|
+
--color-haccent-500: rgb(var(--hp-accent-500));
|
|
41
|
+
--color-haccent-600: rgb(var(--hp-accent-600));
|
|
42
|
+
--color-haccent-700: rgb(var(--hp-accent-700));
|
|
43
|
+
--color-haccent-800: rgb(var(--hp-accent-800));
|
|
44
|
+
--color-haccent-900: rgb(var(--hp-accent-900));
|
|
45
|
+
--color-haccent-950: rgb(var(--hp-accent-950));
|
|
46
|
+
--color-haccent: var(--hp-accent, #e67e50);
|
|
47
|
+
--color-haccent-dark: var(--hp-accent-dark, #d66f45);
|
|
48
|
+
|
|
49
|
+
--color-hmuted: var(--hp-text-muted, #676c80);
|
|
50
50
|
|
|
51
51
|
--animate-fade-in: fadeIn 0.3s ease-in-out;
|
|
52
52
|
--animate-slide-up: slideUp 0.3s ease-out;
|