hey-pharmacist-ecommerce 1.1.28 → 1.1.29

package/src/lib/api-adapter/config.ts

@@ -83,3 +83,56 @@ export function clearAuthToken(): void {
   }
 }
 
+/**
+ * Change user password
+ * Custom implementation to fix the auto-generated API which incorrectly sends passwords as headers
+ */
+export async function changePassword(oldPassword: string, newPassword: string): Promise<void> {
+  if (!currentConfig) {
+    throw new Error('API adapter not initialized.');
+  }
+
+  const token = getAuthToken();
+  if (!token) {
+    throw new Error('User is not authenticated');
+  }
+
+  const url = `${currentConfig.apiBaseUrl}/auth/change-password`;
+
+  console.log('Change Password Request:', {
+    url,
+    storeId: currentConfig.storeId,
+    hasToken: !!token,
+    tokenPrefix: token.substring(0, 20) + '...',
+  });
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Store-Key': currentConfig.storeId,
+      'Authorization': `Bearer ${token}`,
+    },
+    body: JSON.stringify({
+      oldPassword,
+      newPassword,
+    }),
+  });
+
+  console.log('Change Password Response:', {
+    status: response.status,
+    statusText: response.statusText,
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    console.error('Change Password Error:', errorData);
+    throw {
+      response: {
+        data: errorData,
+        status: response.status,
+      },
+    };
+  }
+}
+

package/src/lib/validations/address.ts

@@ -8,7 +8,7 @@ export const addressSchema = z.object({
   state: z.string().min(2, 'State is required'),
   zip: z.string().min(4, 'ZIP code is required'),
   country: z.string().min(2, 'Country is required'),
-  phone: z.string().min(10, 'Phone number is required'),
+  phone: z.string().min(10, 'Phone number must be at least 10 characters').optional().or(z.literal('')),
 });
 
 export type AddressFormData = z.infer<typeof addressSchema>;

package/src/providers/FavoritesProvider.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { ExtendedProductDTO } from '@/lib/Apis';
+import { Product } from '@/lib/Apis';
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 import { useNotification } from './NotificationProvider';
 
 interface FavoritesContextType {
   favorites: string[];
   isFavorite: (productId: string) => boolean;
-  toggleFavorite: (product: ExtendedProductDTO) => void;
-  addToFavorites: (product: ExtendedProductDTO) => void;
+  toggleFavorite: (product: Product) => void;
+  addToFavorites: (product: Product) => void;
   removeFromFavorites: (productId: string) => void;
 }
 
@@ -53,7 +53,7 @@ export function FavoritesProvider({ children }: { children: ReactNode }) {
     return favorites.includes(productId);
   };
 
-  const addToFavorites = (product: ExtendedProductDTO) => {
+  const addToFavorites = (product: Product) => {
     if (!favorites.includes(product.id)) {
       setFavorites(prev => [...prev, product.id]);
       notification.success(
@@ -71,7 +71,7 @@ export function FavoritesProvider({ children }: { children: ReactNode }) {
     );
   };
 
-  const toggleFavorite = (product: ExtendedProductDTO) => {
+  const toggleFavorite = (product: Product) => {
     if (isFavorite(product.id)) {
       removeFromFavorites(product.id);
     } else {

package/src/providers/WishlistProvider.tsx

@@ -5,12 +5,12 @@ import { WishlistApi } from '@/lib/Apis/apis/wishlist-api';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 import { useAuth } from './AuthProvider';
 import { useMemo } from 'react';
-import { ExtendedProductDTO, Wishlist } from '@/lib/Apis';
+import { ProductsApi, Wishlist, Product } from '@/lib/Apis';
 import { useNotification } from './NotificationProvider';
 
 
 interface WishlistContextType extends Wishlist {
-  addToWishlist: (product: ExtendedProductDTO) => Promise<void>;
+  addToWishlist: (product: Product) => Promise<void>;
   removeFromWishlist: (productId: string) => Promise<void>;
   isInWishlist: (productId: string) => boolean;
   getWishlistCount: () => number;
@@ -64,7 +64,7 @@ export function WishlistProvider({ children }: { children: ReactNode }) {
         error: error instanceof Error ? error.message : 'Failed to load wishlist',
       }));
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated]);
 
 
@@ -72,7 +72,7 @@ export function WishlistProvider({ children }: { children: ReactNode }) {
     fetchWishlist();
   }, [fetchWishlist]);
 
-  const addToWishlist = async (product: any) => {
+  const addToWishlist = async (product: Product) => {
     if (!isAuthenticated) {
       notification.error(
         'Sign-in required',

package/src/screens/CartScreen.tsx

@@ -88,7 +88,7 @@ export function CartScreen() {
     );
   }
 
-  const subtotal = cart.total;
+  const subtotal = cart.cartBody.items.reduce((total, item) => total + item.productVariantData.finalPrice * item.quantity, 0);
   const shipping = 0;
   const tax = 0;
   const total = subtotal + shipping + tax;

package/src/screens/ChangePasswordScreen.tsx

@@ -9,8 +9,7 @@ import { useRouter } from 'next/navigation';
 import { Lock, ShieldCheck } from 'lucide-react';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
-import { AuthApi } from '@/lib/Apis/apis/auth-api';
-import { getApiConfiguration } from '@/lib/api-adapter/config';
+import { changePassword } from '@/lib/api-adapter/config';
 import { useAuth } from '@/providers/AuthProvider';
 import { useBasePath } from '@/providers/BasePathProvider';
 
@@ -53,10 +52,7 @@ export function ChangePasswordScreen() {
     setIsSubmitting(true);
     setStatus(null);
     try {
-      await new AuthApi(getApiConfiguration()).changePassword(
-        data.currentPassword,
-        data.newPassword
-      );
+      await changePassword(data.currentPassword, data.newPassword);
       setStatus({ type: 'success', message: 'Password updated successfully' });
       setTimeout(() => router.push(buildPath('/account')), 600);
     } catch (error: any) {

package/src/screens/CheckoutScreen.tsx

@@ -116,13 +116,21 @@ export function CheckoutScreen() {
       sameAsShipping: true,
       shipping: {
         name: user ? `${user.firstname} ${user.lastname}` : '',
-        phone: user?.phoneNumber || undefined,
+        phone: user?.phoneNumber || '',
         country: 'United States',
+        // street1: '',
+        // city: '',
+        // state: '',
+        // zip: '',
       },
       billing: {
         name: user ? `${user.firstname} ${user.lastname}` : '',
-        phone: user?.phoneNumber || undefined,
+        phone: user?.phoneNumber || '',
         country: 'United States',
+        // street1: '',
+        // city: '',
+        // state: '',
+        // zip: '',
       },
     },
   });
@@ -153,7 +161,7 @@ export function CheckoutScreen() {
       setSelectedAddressId(defaultAddress.id);
       // Update form with default address
       setValue('shipping.name', defaultAddress.name);
-      setValue('shipping.phone', defaultAddress.phone || (undefined as unknown as string));
+      setValue('shipping.phone', defaultAddress.phone || '');
       setValue('shipping.street1', defaultAddress.street1);
       setValue('shipping.street2', defaultAddress.street2 || '');
       setValue('shipping.city', defaultAddress.city);
@@ -342,7 +350,6 @@ export function CheckoutScreen() {
         items,
         paymentMethod,
         orderStatus: 'Pending',
-        chargeTax: true,
         orderRemindingDates: [],
         shippingAddress: data.shipping,
         billingAddress: sameAsShipping ? data.shipping : data.billing,
@@ -352,7 +359,7 @@ export function CheckoutScreen() {
       const response = await api.createCheckout(
         orderDTO,
         isDelivery,
-        user?.id,
+        undefined, // dont pass userId
         isDelivery ? (selectedShippingRateId || undefined) : undefined,
         billingAddressId
       );
@@ -425,7 +432,7 @@ export function CheckoutScreen() {
     router.push(buildPath('/cart'));
     return null;
   }
-  const subtotal = cart.total;
+  const subtotal = cart.cartBody.items.reduce((total, item) => total + item.productVariantData.finalPrice * item.quantity, 0);
   const tax = 0;
   const total = subtotal + shippingPrice + tax;
 
@@ -500,7 +507,7 @@ export function CheckoutScreen() {
                               onChange={() => {
                                 setSelectedAddressId(addr.id);
                                 setValue('shipping.name', addr.name);
-                                setValue('shipping.phone', addr.phone || (undefined as unknown as string));
+                                setValue('shipping.phone', addr.phone || '');
                                 setValue('shipping.street1', addr.street1);
                                 setValue('shipping.street2', addr.street2 || '');
                                 setValue('shipping.city', addr.city);
@@ -880,9 +887,9 @@ export function CheckoutScreen() {
               <section className="mt-8 pt-6 border-t border-slate-100">
                 <div className="space-y-4 mb-6">
                   {cart?.cartBody?.items?.map((item: any) => (
-                    <div key={`${item.productId}-${item.color}-${item.size}`} className="flex gap-3">
+                    <div key={item.productVariantId || item.id} className="flex gap-3">
                       <div className="w-16 h-16 rounded-xl overflow-hidden bg-white shrink-0">
-                        <Image src={item.productVariantData.productMedia?.[0]?.file || '/placeholder-product.jpg'} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
+                        <Image src={item.productVariantData?.media?.[0]?.file || '/placeholder-product.jpg'} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className="font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1">
@@ -948,9 +955,31 @@ export function CheckoutScreen() {
                   </div>
                 </div>
               )}
+              {Object.keys(errors).length > 0 && (
+                <div className="mt-4 p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-700 text-sm font-medium">
+                  <div className="flex items-start gap-2">
+                    <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
+                    <div>
+                      <p className="font-semibold mb-1">Please fix the following errors:</p>
+                      <ul className="list-disc list-inside space-y-1">
+                        {errors.shipping?.name && <li>{errors.shipping.name.message}</li>}
+                        {errors.shipping?.phone && <li>{errors.shipping.phone.message}</li>}
+                        {errors.shipping?.street1 && <li>{errors.shipping.street1.message}</li>}
+                        {errors.shipping?.city && <li>{errors.shipping.city.message}</li>}
+                        {errors.shipping?.state && <li>{errors.shipping.state.message}</li>}
+                        {errors.shipping?.zip && <li>{errors.shipping.zip.message}</li>}
+                        {errors.shipping?.country && <li>{errors.shipping.country.message}</li>}
+                        {!sameAsShipping && errors.billing?.name && <li>Billing: {errors.billing.name.message}</li>}
+                        {!sameAsShipping && errors.billing?.street1 && <li>Billing: {errors.billing.street1.message}</li>}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              )}
               <button
                 type="submit"
-                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-[#E67E50] hover:bg-[#2B4B7C] flex items-center justify-center gap-2"
+                disabled={isSubmitting}
+                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-[#E67E50] hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <CreditCard className="h-5 w-5" />
                 {isSubmitting ? 'Placing order...' : 'Place Secure Order'}
@@ -974,7 +1003,7 @@ export function CheckoutScreen() {
           refresh().then(() => {
             setSelectedAddressId(addr.id);
             setValue('shipping.name', addr.name);
-            setValue('shipping.phone', addr.phone || (undefined as unknown as string));
+            setValue('shipping.phone', addr.phone || '');
             setValue('shipping.street1', addr.street1);
             setValue('shipping.street2', addr.street2 || '');
             setValue('shipping.city', addr.city);

package/src/screens/ForgotPasswordScreen.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import Link from 'next/link';
+import { ArrowLeft, Mail, Send } from 'lucide-react';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { AuthApi } from '@/lib/Apis/apis/auth-api';
+import { AXIOS_CONFIG } from '@/lib/Apis/sharedConfig';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+const forgotPasswordSchema = z.object({
+  email: z.string().email('Enter a valid email address'),
+});
+
+type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
+
+export function ForgotPasswordScreen() {
+  const { buildPath } = useBasePath();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [status, setStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(
+    null
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ForgotPasswordFormData>({
+    resolver: zodResolver(forgotPasswordSchema),
+  });
+
+  const onSubmit = async (data: ForgotPasswordFormData) => {
+    setIsSubmitting(true);
+    setStatus(null);
+    try {
+      const authApi = new AuthApi(AXIOS_CONFIG);
+      await authApi.sendForgetPasswordEmail({ email: data.email });
+      setStatus({
+        type: 'success',
+        message: 'Password reset link sent! Check your email inbox.',
+      });
+    } catch (error: any) {
+      setStatus({
+        type: 'error',
+        message: error?.response?.data?.message || 'Unable to send reset email. Please try again.',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
+      <div className="grid min-h-screen overflow-hidden pb-12">
+        <motion.section
+          initial={{ opacity: 0, x: 24 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.4 }}
+          className="flex items-center justify-center px-6 py-12 lg:px-16"
+        >
+          <div className="w-full max-w-lg space-y-10 text-center">
+            <div className="space-y-2">
+              <Mail
+                strokeWidth={2}
+                className="h-16 w-16 mx-auto text-white rounded-full bg-secondary m-2 mb-4 px-4"
+              />
+              <h2 className="text-4xl text-secondary">Forgot Password?</h2>
+              <p className="text-sm text-muted">
+                No worries! Enter your email and we'll send you reset instructions.
+              </p>
+            </div>
+
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="space-y-6 rounded-3xl border bg-white p-8"
+              style={{
+                boxShadow: '0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A',
+              }}
+            >
+              {status && (
+                <div
+                  className={`flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${
+                    status.type === 'success'
+                      ? 'border-green-200 bg-green-50 text-green-800'
+                      : 'border-red-200 bg-red-50 text-red-700'
+                  }`}
+                >
+                  <span className="mt-[2px] text-base">{status.type === 'success' ? '✔' : '!'}</span>
+                  <span>{status.message}</span>
+                </div>
+              )}
+
+              <div className="text-start text-secondary">
+                <h2 className="text-sm text-secondary mb-3">
+                  Email Address <span className="text-primary-500">*</span>
+                </h2>
+                <Input
+                  type="email"
+                  placeholder="you@example.com"
+                  {...register('email')}
+                  error={errors.email?.message}
+                  className="text-secondary"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="w-full bg-secondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                {isSubmitting ? (
+                  'Sending...'
+                ) : (
+                  <>
+                    <Send className="h-4 w-4" />
+                    Send Reset Link
+                  </>
+                )}
+              </button>
+
+              <div className="pt-4 border-t border-slate-200">
+                <Link
+                  href={buildPath('/login')}
+                  className="flex items-center justify-center gap-2 text-sm font-medium text-primary transition hover:opacity-80"
+                >
+                  <ArrowLeft className="h-4 w-4" />
+                  Back to login
+                </Link>
+              </div>
+            </form>
+
+            <div className="mt-4">
+              <p className="text-muted">
+                Don't have an account?{' '}
+                <Link
+                  href={buildPath('/register')}
+                  className="font-medium text-primary transition hover:opacity-90"
+                >
+                  Sign up
+                </Link>
+              </p>
+            </div>
+          </div>
+        </motion.section>
+      </div>
+    </div>
+  );
+}