hey-pharmacist-ecommerce 1.0.4 → 1.0.6

package/src/screens/AddressesScreen.tsx

@@ -0,0 +1,484 @@
+'use client';
+
+import React, { useEffect, useMemo, 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 {
+  Crown,
+  Edit3,
+  Globe,
+  Home,
+  MapPin,
+  Phone,
+  Plus,
+  Sparkles,
+  Star,
+  Trash2,
+  User,
+} from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { EmptyState } from '@/components/EmptyState';
+import { useAddresses } from '@/hooks/useAddresses';
+import { toast } from 'sonner';
+import { Address, AddressAddressTypeEnum, CreateAddressDtoAddressTypeEnum, UpdateAddressDto, UpdateAddressDtoAddressTypeEnum } from '@/lib/Apis';
+
+const addressFormSchema = z.object({
+  fullName: z.string().min(2, 'Please enter a full name'),
+  phone: z.string().min(7, 'Please enter a valid phone number'),
+  addressLine1: z.string().min(4, 'Address line 1 is required'),
+  addressLine2: z.string().optional(),
+  city: z.string().min(2, 'City is required'),
+  state: z.string().min(2, 'State / Region is required'),
+  zipCode: z.string().min(3, 'Postal code is required'),
+  country: z.string().min(2, 'Country is required'),
+  addressType: z.enum(['Billing', 'Shipping', 'Both']).default('Shipping'),
+  isDefault: z.boolean().optional(),
+});
+
+type AddressFormValues = z.infer<typeof addressFormSchema>;
+
+const FORM_DEFAULTS: AddressFormValues = {
+  fullName: '',
+  phone: '',
+  addressLine1: '',
+  addressLine2: '',
+  city: '',
+  state: '',
+  zipCode: '',
+  country: 'United States',
+  addressType: 'Shipping',
+  isDefault: false,
+};
+
+function formatAddressSnippet(address: Address) {
+  return [address.street1, address.street2, `${address.city}, ${address.state} ${address.zip}`, address.country]
+    .filter(Boolean)
+    .join(' • ');
+}
+
+function getAddressTypeCopy(type?: AddressAddressTypeEnum) {
+  switch (type) {
+    case 'Billing':
+      return { label: 'Billing', icon: <Home className="h-4 w-4" /> };
+    case 'Both':
+      return { label: 'Billing & Shipping', icon: <Globe className="h-4 w-4" /> };
+    case 'Shipping':
+    default:
+      return { label: 'Shipping', icon: <MapPin className="h-4 w-4" /> };
+  }
+}
+
+export function AddressesScreen() {
+  const {
+    addresses,
+    defaultAddress,
+    isLoading,
+    error,
+    addAddress,
+    updateAddress,
+    removeAddress,
+    markAsDefault,
+  } = useAddresses();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingAddress, setEditingAddress] = useState<Address | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<AddressFormValues>({
+    resolver: zodResolver(addressFormSchema),
+    defaultValues: FORM_DEFAULTS,
+  });
+
+  useEffect(() => {
+    if (editingAddress) {
+      reset({
+        fullName: editingAddress.name,
+        phone: editingAddress.phone,
+        addressLine1: editingAddress.street1,
+        addressLine2: editingAddress.street2,
+        city: editingAddress.city,
+        state: editingAddress.state,
+        zipCode: editingAddress.zip,
+        country: editingAddress.country,
+        addressType: editingAddress.addressType as AddressAddressTypeEnum,
+        isDefault: editingAddress.isDefault ?? false,
+      });
+    } else {
+      reset(FORM_DEFAULTS);
+    }
+  }, [editingAddress, reset]);
+
+  const openCreateModal = () => {
+    setEditingAddress(null);
+    setIsModalOpen(true);
+  };
+
+  const openEditModal = (address: Address) => {
+    setEditingAddress(address);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const onSubmit = async (values: AddressFormValues) => {
+    const payload: UpdateAddressDto = {
+      name: values.fullName,
+      phone: values.phone,
+      street1: values.addressLine1,
+      street2: values.addressLine2 || '',
+      city: values.city,
+      state: values.state,
+      zip: values.zipCode,
+      country: values.country,
+      isDefault: values.isDefault ?? false,
+      addressType: values.addressType as UpdateAddressDtoAddressTypeEnum,
+    };
+
+    if (editingAddress) {
+      const response = await updateAddress(editingAddress.id, payload);
+      if (response) {
+        toast.success('Address updated');
+        closeModal();
+      } else {
+        toast.error('Unable to update address');
+      }
+    } else {
+      const response = await addAddress({
+        name: values.fullName,
+        phone: values.phone,
+        street1: values.addressLine1,
+        street2: values.addressLine2 || '',
+        city: values.city,
+        state: values.state,
+        zip: values.zipCode,
+        country: values.country,
+        addressType: values.addressType as CreateAddressDtoAddressTypeEnum,
+      });
+      if (response) {
+        toast.success('Address added successfu  lly');
+        closeModal();
+      } else {
+        toast.error('Failed to add address');
+      }
+    }
+  };
+
+  const handleDelete = async (address: Address) => {
+    const confirmDelete = window.confirm(
+      `Remove ${address.name}'s address?\nYou can add it back at any time.`
+    );
+    if (!confirmDelete) return;
+
+    try {
+      await removeAddress(address.id);
+      toast.success('Address removed successfully');
+    } catch (error) {
+      toast.error('Failed to remove address', {
+        description: error instanceof Error ? error.message : 'An unexpected error occurred',
+      });
+    }
+  };
+
+  const handleSetDefault = async (address: Address) => {
+    try {
+      await markAsDefault(address.id);
+      toast.success(`${address.name} is now your default address`);
+    } catch (error) {
+      toast.error('Failed to set default address', {
+        description: error instanceof Error ? error.message : 'An unexpected error occurred',
+      });
+    }
+  };
+
+  const stats = useMemo(() => {
+    const shippingCount = addresses.filter((address) => address.addressType !== 'Billing').length;
+    const billingCount = addresses.filter((address) => address.addressType !== 'Shipping').length;
+    return [
+      {
+        id: 'total',
+        label: 'Saved addresses',
+        value: addresses.length,
+        helper: 'All delivery and billing locations',
+      },
+      {
+        id: 'shipping',
+        label: 'Shipping ready',
+        value: shippingCount,
+        helper: 'Optimized for fast dispatch',
+      },
+      {
+        id: 'billing',
+        label: 'Billing profiles',
+        value: billingCount,
+        helper: 'Simplifies checkout',
+      },
+    ];
+  }, [addresses]);
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.3),_transparent_60%)]" />
+        <div className="relative container mx-auto px-4 py-16">
+          <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="space-y-5"
+            >
+              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
+                <MapPin className="h-4 w-4" />
+                Address book
+              </span>
+              <h1 className="text-4xl font-bold md:text-5xl">
+                Manage where your care arrives
+              </h1>
+              <p className="max-w-2xl text-white/80 md:text-lg">
+                Add home, office, or loved ones&apos; addresses and toggle a default for lightning-fast
+                checkout and delivery.
+              </p>
+              <div className="flex flex-wrap items-center gap-3 text-sm text-white/75">
+                <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1">
+                  <Sparkles className="h-4 w-4 text-white" />
+                  Default address: {defaultAddress ? defaultAddress.name : 'Not set'}
+                </span>
+                <Button variant="ghost" className="text-white hover:bg-white/10" onClick={openCreateModal}>
+                  <Plus className="h-5 w-5" />
+                  Add address
+                </Button>
+              </div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              className="grid gap-4 rounded-3xl bg-white/15 p-6 text-sm text-white/80 backdrop-blur"
+            >
+              {stats.map((stat) => (
+                <div key={stat.id} className="flex items-center justify-between">
+                  <div>
+                    <p className="text-xs font-semibold uppercase tracking-[0.3em] text-white/70">
+                      {stat.label}
+                    </p>
+                    <p className="text-white">{stat.helper}</p>
+                  </div>
+                  <span className="text-3xl font-semibold text-white">{stat.value}</span>
+                </div>
+              ))}
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      <div className="relative -mt-16 pb-20">
+        <div className="container mx-auto px-4">
+
+
+          {isLoading ? (
+            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+              {Array.from({ length: 3 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="h-56 animate-pulse rounded-3xl border border-slate-100 bg-white"
+                />
+              ))}
+            </div>
+          ) : error ? (
+            <div className="rounded-3xl border border-red-100 bg-red-50 p-6 text-sm text-red-700">
+              {error.message}
+            </div>
+          ) : addresses.length === 0 ? (
+            <div className="rounded-3xl border border-slate-100 bg-white p-12 shadow-sm">
+              <EmptyState
+                icon={MapPin}
+                title="No addresses yet"
+                description="Save a shipping or billing address to speed through checkout the next time you order."
+                actionLabel="Add your first address"
+                onAction={openCreateModal}
+              />
+            </div>
+          ) : (
+            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+              {addresses.map((address) => {
+                const typeCopy = getAddressTypeCopy(address.addressType);
+                return (
+                  <motion.div
+                    key={address.id}
+                    initial={{ opacity: 0, y: 24 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="group relative flex h-full flex-col rounded-3xl border border-slate-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
+                  >
+                    {address.isDefault && (
+                      <span className="absolute right-6 top-6 inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">
+                        <Crown className="h-4 w-4" />
+                        Default
+                      </span>
+                    )}
+                    <div className="flex items-center gap-3">
+                      <span className="rounded-full bg-primary-50 p-3 text-primary-600">
+                        <User className="h-5 w-5" />
+                      </span>
+                      <div>
+                        <p className="text-base font-semibold text-slate-900">
+                          {address.name}
+                        </p>
+                        <p className="text-xs uppercase tracking-[0.3em] text-slate-400">
+                          {typeCopy.label}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="mt-6 flex flex-1 flex-col gap-3 text-sm text-slate-600">
+                      <p>{formatAddressSnippet(address)}</p>
+                      <p className="inline-flex items-center gap-2 text-slate-500">
+                        <Phone className="h-4 w-4 text-slate-400" />
+                        {address.phone || 'Not provided'}
+                      </p>
+                    </div>
+
+                    <div className="mt-6 flex items-center justify-between gap-3">
+                      <button
+                        type="button"
+                        onClick={() => openEditModal(address)}
+                        className="inline-flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1 text-sm font-medium text-slate-600 transition hover:border-primary-300 hover:text-primary-600"
+                      >
+                        <Edit3 className="h-4 w-4" />
+                        Edit
+                      </button>
+                      <div className="flex items-center gap-2">
+                        {!address.isDefault && (
+                          <button
+                            type="button"
+                            onClick={() => handleSetDefault(address)}
+                            className="inline-flex items-center gap-2 rounded-full border border-amber-200 px-3 py-1 text-sm font-semibold text-amber-600 transition hover:border-amber-300 hover:text-amber-700"
+                          >
+                            <Star className="h-4 w-4" />
+                            Make default
+                          </button>
+                        )}
+                        <button
+                          type="button"
+                          onClick={() => handleDelete(address)}
+                          className="inline-flex items-center gap-2 rounded-full border border-red-200 px-3 py-1 text-sm font-semibold text-red-600 transition hover:border-red-300 hover:text-red-700"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        title={editingAddress ? 'Edit address' : 'Add new address'}
+        size="lg"
+      >
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <div className="grid gap-4 md:grid-cols-2">
+            <Input
+              label="Full name"
+              placeholder="Taylor Pharmacist"
+              {...register('fullName')}
+              error={errors.fullName?.message}
+            />
+            <Input
+              label="Phone number"
+              placeholder="+1 (555) 123-4567"
+              {...register('phone')}
+              error={errors.phone?.message}
+            />
+          </div>
+          <Input
+            label="Address line 1"
+            placeholder="123 Wellness Avenue"
+            {...register('addressLine1')}
+            error={errors.addressLine1?.message}
+          />
+          <Input
+            label="Address line 2 (optional)"
+            placeholder="Suite, apartment, etc."
+            {...register('addressLine2')}
+            error={errors.addressLine2?.message}
+          />
+          <div className="grid gap-4 md:grid-cols-2">
+            <Input
+              label="City"
+              placeholder="Seattle"
+              {...register('city')}
+              error={errors.city?.message}
+            />
+            <Input
+              label="State / Region"
+              placeholder="Washington"
+              {...register('state')}
+              error={errors.state?.message}
+            />
+          </div>
+          <div className="grid gap-4 md:grid-cols-2">
+            <Input
+              label="Postal code"
+              placeholder="98101"
+              {...register('zipCode')}
+              error={errors.zipCode?.message}
+            />
+            <Input
+              label="Country"
+              placeholder="United States"
+              {...register('country')}
+              error={errors.country?.message}
+            />
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="flex flex-col gap-2 rounded-2xl border border-slate-200 p-4">
+              <span className="text-sm font-semibold text-slate-700">Address type</span>
+              <select
+                {...register('addressType')}
+                className="rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+              >
+                <option value="Shipping">Shipping</option>
+                <option value="Billing">Billing</option>
+                <option value="Both">Billing & Shipping</option>
+              </select>
+            </label>
+            <label className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-700">
+              <span>Set as default address</span>
+              <input
+                type="checkbox"
+                {...register('isDefault')}
+                className="h-4 w-4 rounded border-primary-300 text-primary-600 focus:ring-primary-500"
+              />
+            </label>
+          </div>
+
+          <div className="flex items-center justify-end gap-3">
+            <Button type="button" variant="outline" onClick={closeModal}>
+              Cancel
+            </Button>
+            <Button type="submit" isLoading={isSubmitting}>
+              {editingAddress ? 'Save changes' : 'Save address'}
+            </Button>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  );
+}