@djangocfg/layouts 2.1.264 → 2.1.267

package/src/layouts/ProfileLayout/components/DeleteAccountSection.tsx

@@ -1,128 +1,44 @@
 'use client';
 
-import { AlertTriangle, ChevronLeft, Loader2, Trash2 } from 'lucide-react';
-import React, { useMemo, useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import React from 'react';
 
 import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
-import { Alert, AlertDescription, Button, Input } from '@djangocfg/ui-core/components';
 
-import { useProfileContext } from '../context';
 import { ActionButton } from './ActionButton';
 
-// ─── Entry point: single action row on main screen ───────────────────────────
-
 export const DeleteAccountSection: React.FC = () => {
-  const { setStep } = useProfileContext();
-  const t = useAppT();
-
-  return (
-    <ActionButton
-      icon={<Trash2 className="w-4 h-4 text-destructive" />}
-      label={<span className="text-destructive">{t('layouts.profilePage.deleteAccount')}</span>}
-      onClick={() => setStep('delete-account')}
-    />
-  );
-};
-
-// ─── Full delete screen ───────────────────────────────────────────────────────
-
-export const DeleteAccountScreen: React.FC = () => {
-  const { back } = useProfileContext();
   const { logout } = useAuth();
-  const [confirmationInput, setConfirmationInput] = useState('');
+  const { deleteAccount } = useDeleteAccount();
   const t = useAppT();
 
-  const { isLoading, error, deleteAccount, clearError } = useDeleteAccount();
-
   const confirmationWord = t('layouts.profilePage.confirmationWord');
-  const isValid = confirmationInput.toUpperCase() === confirmationWord.toUpperCase();
 
-  const labels = useMemo(() => ({
-    back: t('layouts.navigation.back'),
-    title: t('layouts.profilePage.deleteAccountTitle'),
-    desc: t('layouts.profilePage.deleteAccountDesc'),
-    typeToConfirm: t('layouts.profilePage.typeToConfirm').replace('{word}', confirmationWord),
-    deleting: t('layouts.profilePage.deleting'),
-    deleteAccount: t('layouts.profilePage.deleteAccount'),
-    cancel: t('layouts.profilePage.cancel'),
-  }), [t, confirmationWord]);
+  const handleClick = async () => {
+    const value = await window.dialog.prompt({
+      title: t('layouts.profilePage.deleteAccountTitle'),
+      message: t('layouts.profilePage.deleteAccountDesc'),
+      placeholder: confirmationWord,
+      confirmText: t('layouts.profilePage.deleteAccount'),
+      cancelText: t('layouts.profilePage.cancel'),
+      variant: 'destructive',
+    });
+
+    if (value?.toUpperCase() !== confirmationWord.toUpperCase()) return;
 
-  const handleDelete = async () => {
-    clearError();
     const result = await deleteAccount();
     if (result.success) logout();
   };
 
-  const handleBack = () => {
-    clearError();
-    setConfirmationInput('');
-    back();
-  };
-
   return (
-    <div className="container mx-auto px-4 py-12 max-w-md">
-      {/* Back */}
-      <button
-        type="button"
-        onClick={handleBack}
-        className="flex items-center gap-1 text-sm text-muted-foreground mb-8 hover:text-foreground transition-colors"
-      >
-        <ChevronLeft className="w-4 h-4" />
-        {labels.back}
-      </button>
-
-      {/* Header */}
-      <div className="flex items-center gap-3 mb-2">
-        <div className="w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center">
-          <AlertTriangle className="w-5 h-5 text-destructive" />
-        </div>
-        <h1 className="text-xl font-semibold">{labels.title}</h1>
-      </div>
-      <p className="text-sm text-muted-foreground mb-8">{labels.desc}</p>
-
-      {/* Confirmation */}
-      <div className="space-y-3">
-        {error && (
-          <Alert variant="destructive">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-
-        <p className="text-sm text-muted-foreground">{labels.typeToConfirm}</p>
-
-        <Input
-          value={confirmationInput}
-          onChange={(e) => setConfirmationInput(e.target.value)}
-          placeholder={confirmationWord}
-          disabled={isLoading}
-          autoFocus
-          autoComplete="off"
-          className="font-mono"
-        />
-
-        <Button
-          variant="destructive"
-          className="w-full"
-          onClick={handleDelete}
-          disabled={isLoading || !isValid}
-        >
-          {isLoading ? (
-            <><Loader2 className="mr-2 h-4 w-4 animate-spin" />{labels.deleting}</>
-          ) : (
-            labels.deleteAccount
-          )}
-        </Button>
-
-        <Button
-          variant="ghost"
-          className="w-full"
-          onClick={handleBack}
-          disabled={isLoading}
-        >
-          {labels.cancel}
-        </Button>
-      </div>
-    </div>
+    <ActionButton
+      icon={<Trash2 className="w-4 h-4 text-destructive" />}
+      label={<span className="text-destructive">{t('layouts.profilePage.deleteAccount')}</span>}
+      onClick={handleClick}
+    />
   );
 };
+
+// Keep export so nothing breaks — no longer used but exported for backwards compat
+export const DeleteAccountScreen: React.FC = () => null;

package/src/layouts/ProfileLayout/components/EditableField.tsx

@@ -1,11 +1,22 @@
 'use client';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
-import { useAppT } from '@djangocfg/i18n';
 import { Button, Input, PhoneInput } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { useProfileContext } from '../context';
+
+function formatPhone(raw: string): string {
+  if (!raw) return '';
+  try {
+    return parsePhoneNumberFromString(raw)?.formatInternational() ?? raw;
+  } catch {
+    return raw;
+  }
+}
+
 interface EditableFieldProps {
   label: string;
   value: string;
@@ -23,17 +34,11 @@ export const EditableField = ({
   disabled,
   type = 'text',
 }: EditableFieldProps) => {
-  const t = useAppT();
+  const { labels } = useProfileContext();
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState(value);
   const [isSaving, setIsSaving] = useState(false);
 
-  const labels = useMemo(() => ({
-    save: t('layouts.profilePage.save'),
-    saving: t('layouts.profilePage.saving'),
-    cancel: t('layouts.profilePage.cancel'),
-  }), [t]);
-
   useEffect(() => {
     setEditValue(value);
   }, [value]);
@@ -112,7 +117,7 @@ export const EditableField = ({
     >
       <div className="text-[13px] text-muted-foreground mb-0.5">{label}</div>
       <div className={cn('text-[15px]', value ? 'text-foreground' : 'text-muted-foreground/60')}>
-        {value || placeholder}
+        {value ? (type === 'phone' ? formatPhone(value) : value) : placeholder}
       </div>
     </button>
   );

package/src/layouts/ProfileLayout/components/Section.tsx

@@ -11,7 +11,7 @@ interface SectionProps {
 }
 
 export const Section = ({ title, children, className }: SectionProps) => (
-  <div className={cn('mb-10', className)}>
+  <div className={cn('mb-4 md:mb-6', className)}>
     {title && (
       <h2 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
         {title}