canina/frontend/implementation_plan.md

Application Backend Integration & Refactoring Plan

This plan details the migration of the CaninaIran frontend application from using mock data to communicating entirely with the backend APIs, adding email/password authentication, and resolving issues with the pet profile forms.

User Review Required

Important

• Authentication: The User model in the database currently does not have a password field. A new database migration will be required to add password to users.
• OTP Fallback: For mobile login, since the SMS panel is not connected yet, we will return the generated OTP in the API response so it can be typed in manually. We will leave a TODO for the SMS panel integration.

Open Questions

Warning

• For the new Email/Password registration, do we need email verification (e.g., sending a link) or is the account activated immediately upon registration?
• Should we require the user to provide their mobile number even if they register via email?

Proposed Changes

---

1. Database & Backend Auth [Backend]

Adds email/password authentication capabilities and standardizes the auth endpoints.

[MODIFY] schema.prisma

• Add password String? @db.VarChar(255) to the User model.
• Run npx prisma migrate dev --name add_user_password.

[MODIFY] auth.controller.ts

• Add @Post('register-email') endpoint to accept email, password, firstName, and lastName.
• Add @Post('login-email') endpoint to accept email and password.

[MODIFY] auth.service.ts

• Implement bcrypt hashing for registerEmail and password verification for loginEmail.
• Update sendOtp to return the generated code in the response body (as a fallback before SMS panel is implemented) and add a // TODO: Connect to SMS provider comment.

---

2. Frontend Auth (Storefront) [Frontend]

Refactors the storefront authentication modal to remove mock tests and integrate real email/password + mobile/OTP login.

[MODIFY] AuthModal.tsx

• Remove the "ورود سریع تستی" (mock login) button entirely.
• Implement two tabs: "ایمیل و رمز عبور" (Email/Password) and "شماره موبایل" (Mobile OTP).
• Wire up the Email tab to /auth/register-email and /auth/login-email.
• Wire up the Mobile tab to /auth/send-otp (showing the OTP in a toast or console for now) and /auth/verify-otp.
• Integrate the returned JWT with the userStore.

---

3. Pet Profile Update Form [Frontend]

Resolves the issue where updating the pet profile in the multi-step form sends an incomplete payload to the backend.

[MODIFY] PetProfileWizard.tsx

• Update the handleComplete or onSubmit function to ensure it merges the state of all wizard steps (Name, Breed, Age, Weight, Activity Level, Medical Conditions).
• Ensure the payload strictly matches what the backend PUT /api/pets/:id expects.

[MODIFY] usePetStore.ts

• Verify updatePet action properly merges changes and reflects the server response.

---

4. Home Page De-mocking [Frontend]

Currently, several sections in the Home page (page.tsx) rely on mock data or hardcoded content.

Note

List of Mocked/Hardcoded Items in Home Page:

1. SmartAdvisor: Symptoms and rules are hardcoded in the frontend. It doesn't fetch rules from the backend.
2. FeaturedProducts: May need to be verified if it uses real api.get('/products') or mock fallback.
3. VetGallery: Vet images and testimonials are hardcoded.
4. Categories/Links: Links to /shop and /wiki are static HTML.
5. Hero Section: Banners and text are static.

[MODIFY] page.tsx

• No immediate file changes if we just wanted the list, but we will wrap components to fetch data dynamically where applicable.
• For SmartAdvisor, we will ensure it uses the real database.

---

5. Blogs/Wiki Integration [Frontend & Backend]

Connects the Wiki page to the real backend database instead of hardcoded articles.

[MODIFY] wiki/page.tsx

• Replace static blog cards with api.get('/blogs') or Server-Side Rendering (SSR) fetching from the database.
• Create dynamic routing /wiki/[slug]/page.tsx for individual blog articles.

Verification Plan

Automated Tests

• Run npm run build in both backend and frontend to ensure no type errors.

Manual Verification

• Auth: Open the application, register a new account via Email and Password, log out, and log back in. Try mobile OTP login and confirm the OTP is in the network response.
• Pets: Go to the pet profile dashboard, edit a pet's attributes across multiple steps, save, and refresh the page to verify persistence.
• Blogs: Create a blog post in the Admin Panel, navigate to /wiki in the storefront, and verify it appears.