Merge pull request #414 from SweetBoy-eth/fix/issues-379-382

Author: therealjhay

app/(merchant)/payments/page.tsx

@@ -23,6 +23,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { trimInput } from '@/lib/utils/sanitize';
 import { useNotify } from '@/lib/hooks/useNotify';
 import { usePayments, type ApiPayment } from '@/lib/api/hooks';
+import { apiClient } from '@/lib/api/axios';
 import Link from 'next/link';
 
 type PaymentLink = ApiPayment;
@@ -99,7 +100,7 @@ const PaymentLinkCard = memo(function PaymentLinkCard({ link, onEdit, onDelete,
 
 export default function PaymentsPage() {
   const { data: links, isLoading, error: fetchError, refetch } = usePayments();
-  const { success: notifySuccess, info: notifyInfo } = useNotify();
+  const { success: notifySuccess, info: notifyInfo, error: notifyError } = useNotify();
 
   // Filter & Search states
   const [searchTerm, setSearchTerm] = useState('');
@@ -116,6 +117,7 @@ export default function PaymentsPage() {
   const [deletingLink, setDeletingLink] = useState<PaymentLink | null>(null);
   const [selectedQrLink, setSelectedQrLink] = useState<PaymentLink | null>(null);
   const [linksError, setLinksError] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
 
   // Form states
   const [labelValue, setLabelValue] = useState('');
@@ -156,17 +158,50 @@ export default function PaymentsPage() {
     return filteredLinks.slice(start, start + pageSize);
   }, [filteredLinks, currentPage, pageSize]);
 
-  const handleCreate = (e: React.FormEvent) => {
+  const handleCreate = async (e: React.FormEvent) => {
     e.preventDefault();
     const sanitizedLabel = trimInput(labelValue);
     if (!sanitizedLabel) {
       setLabelError('Label is required');
       return;
     }
     setLabelError('');
-    notifySuccess('Payment link created successfully');
-    setIsCreateOpen(false);
-    resetForm();
+
+    const payload: Record<string, unknown> = {
+      label: sanitizedLabel,
+      currency: currencyValue,
+      mode: currencyMode,
+      reference: referenceValue || undefined,
+      expiry: expiryValue || undefined,
+      redirectUrl: redirectUrlValue || undefined,
+    };
+
+    if (currencyMode === 'single') {
+      payload.amount = amountValue ? parseFloat(amountValue) : undefined;
+    } else {
+      const amounts: Record<string, number> = {};
+      for (const [code, val] of Object.entries(multiCurrencyAmounts)) {
+        if (val) amounts[code] = parseFloat(val);
+      }
+      payload.amounts = Object.keys(amounts).length > 0 ? amounts : undefined;
+      payload.currencies = selectedCurrencies;
+    }
+
+    setIsCreating(true);
+    try {
+      await apiClient.post('/api/payment-links', payload);
+      notifySuccess('Payment link created successfully');
+      setIsCreateOpen(false);
+      resetForm();
+      refetch();
+    } catch (err: unknown) {
+      const message =
+        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
+        'Failed to create payment link';
+      notifyError(message);
+    } finally {
+      setIsCreating(false);
+    }
   };
 
   const { register: registerEdit, handleSubmit: handleEditSubmitForm, reset: resetEditForm, formState: { errors: editErrors } } = useForm<EditPaymentLinkFormValues>({
@@ -375,7 +410,9 @@ export default function PaymentsPage() {
 
                 <DialogFooter className="pt-4">
                   <Button type="button" variant="ghost" onClick={() => setIsCreateOpen(false)}>Cancel</Button>
-                  <Button type="submit">Create Link</Button>
+                  <Button type="submit" disabled={isCreating}>
+                    {isCreating ? 'Creating...' : 'Create Link'}
+                  </Button>
                 </DialogFooter>
               </form>
             </DialogContent>

app/(merchant)/settings/page.tsx

@@ -70,6 +70,64 @@ export default function SettingsPage() {
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [confirmNewPassword, setConfirmNewPassword] = useState('');
+  const [passwordErrors, setPasswordErrors] = useState<{
+    current?: string;
+    newPass?: string;
+    confirm?: string;
+  }>({});
+
+  const validatePassword = useCallback(() => {
+    const errors: typeof passwordErrors = {};
+
+    if (!currentPassword) {
+      errors.current = 'Current password is required';
+    }
+
+    if (newPassword.length < 8) {
+      errors.newPass = 'Password must be at least 8 characters';
+    } else if (!/[0-9]/.test(newPassword)) {
+      errors.newPass = 'Password must contain at least one number';
+    } else if (!/[A-Z]/.test(newPassword)) {
+      errors.newPass = 'Password must contain at least one uppercase letter';
+    }
+
+    if (confirmNewPassword !== newPassword) {
+      errors.confirm = 'Passwords do not match';
+    }
+
+    setPasswordErrors(errors);
+    return Object.keys(errors).length === 0;
+  }, [currentPassword, newPassword, confirmNewPassword]);
+
+  const isPasswordValid = useMemo(() => {
+    return (
+      currentPassword.length > 0 &&
+      newPassword.length >= 8 &&
+      /[0-9]/.test(newPassword) &&
+      /[A-Z]/.test(newPassword) &&
+      confirmNewPassword === newPassword
+    );
+  }, [currentPassword, newPassword, confirmNewPassword]);
+
+  const handlePasswordChange = useCallback(async () => {
+    if (!validatePassword()) return;
+    setIsSubmitting(true);
+    try {
+      await apiClient.post('/api/auth/change-password', {
+        currentPassword,
+        newPassword,
+      });
+      notify.success('Password updated');
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmNewPassword('');
+      setPasswordErrors({});
+    } catch {
+      notify.error('Failed to update password');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [currentPassword, newPassword, validatePassword, notify]);
 
   const [notificationPreferences, setNotificationPreferences] = useState<Record<string, boolean>>({
     paymentReceived: true,
@@ -349,18 +407,22 @@ export default function SettingsPage() {
                 <div className="space-y-1.5">
                   <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Current Password</Label>
                   <Input value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
+                  {passwordErrors.current && <p className="text-xs text-destructive mt-1">{passwordErrors.current}</p>}
                 </div>
                 <div className="space-y-1.5">
                   <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">New Password</Label>
                   <Input value={newPassword} onChange={(e) => setNewPassword(e.target.value)} type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
+                  {passwordErrors.newPass && <p className="text-xs text-destructive mt-1">{passwordErrors.newPass}</p>}
                 </div>
                 <div className="space-y-1.5">
                   <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Confirm New Password</Label>
                   <Input value={confirmNewPassword} onChange={(e) => setConfirmNewPassword(e.target.value)} type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
+                  {passwordErrors.confirm && <p className="text-xs text-destructive mt-1">{passwordErrors.confirm}</p>}
                 </div>
                 <Button
                   className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold rounded-xl h-10 px-6 text-sm"
-                  onClick={() => notify.success('Password updated')}
+                  onClick={handlePasswordChange}
+                  disabled={!isPasswordValid || isSubmitting}
                 >
                   Update Password
                 </Button>

components/i18n/I18nProvider.tsx

@@ -2,20 +2,31 @@
 
 import { ReactNode, useEffect, useState } from "react";
 import { createInstance } from "i18next";
-import { I18nextProvider } from "react-i18next";
+import { initReactI18next } from "react-i18next";
+import HttpBackend from "i18next-http-backend";
 
-import { defaultLocale, detectPreferredLocale, resources } from "@/lib/i18n/config";
+import { defaultLocale, detectPreferredLocale, fallbackResources } from "@/lib/i18n/config";
 
 export function I18nProvider({ children }: { children: ReactNode }) {
   const [i18n] = useState(() => {
     const instance = createInstance();
-    void instance.init({
-      resources,
-      lng: defaultLocale,
-      fallbackLng: defaultLocale,
-      interpolation: { escapeValue: false },
-      initAsync: false,
-    });
+    void instance
+      .use(HttpBackend)
+      .use(initReactI18next)
+      .init({
+        fallbackLng: defaultLocale,
+        supportedLngs: ["en", "fr", "pt", "sw"],
+        ns: ["translation"],
+        defaultNS: "translation",
+        backend: {
+          loadPath: "/locales/{{lng}}/{{ns}}.json",
+          crossOrigin: true,
+        },
+        resources: fallbackResources,
+        interpolation: { escapeValue: false },
+        initAsync: false,
+        react: { useSuspense: false },
+      });
     return instance;
   });