@nextblock-cms/ecom 0.20.1 → 0.21.0

package/lib/components/CustomerProfileForm.es.js

@@ -1,317 +1,458 @@
-'use client';
-import { jsxs as r, jsx as l, Fragment as O } from "react/jsx-runtime";
-import x, { useState as R } from "react";
-import { useForm as q } from "react-hook-form";
-import { AccountNavigationMenu as J } from "./AccountNavigationMenu.es.js";
-import { Avatar as K, AvatarImage as Q, AvatarFallback as Y } from "@nextblock-cms/ui/avatar";
-import { Button as Z } from "@nextblock-cms/ui/button";
-import { Card as T, CardHeader as B, CardTitle as I, CardContent as L, CardFooter as D } from "@nextblock-cms/ui/card";
-import { Checkbox as ee } from "@nextblock-cms/ui/checkbox";
-import { Input as i } from "@nextblock-cms/ui/input";
-import { Label as t } from "@nextblock-cms/ui/label";
-import { Select as le, SelectTrigger as re, SelectValue as se, SelectContent as ae, SelectItem as C } from "@nextblock-cms/ui/select";
-import { Separator as te } from "@nextblock-cms/ui/separator";
-import { updateProfile as ne } from "../server-actions/customer-actions.es.js";
-import { addressesMatch as P, normalizeCustomerAddress as j, emptyCustomerAddress as ie } from "../customer.es.js";
-import { createClient as ce } from "@nextblock-cms/db";
-import { User as k, Upload as de, Phone as oe, Globe as me } from "lucide-react";
-import { useTranslations as X } from "@nextblock-cms/utils";
-import { normalizeCountryCode as pe, countries as he } from "../countries.es.js";
-function ue(e) {
-  return e ? e.startsWith("http") ? e : process.env.NEXT_PUBLIC_R2_BASE_URL ? `${process.env.NEXT_PUBLIC_R2_BASE_URL}/${e}` : process.env.NEXT_PUBLIC_SUPABASE_URL ? `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/media/${e}` : e : null;
+"use client";
+import { countries as e, normalizeCountryCode as t } from "../countries.es.js";
+import { addressesMatch as n, emptyCustomerAddress as r, normalizeCustomerAddress as i } from "../customer.es.js";
+import { AccountNavigationMenu as a } from "./AccountNavigationMenu.es.js";
+import { updateProfile as o } from "../server-actions/customer-actions.es.js";
+import { Button as s } from "@nextblock-cms/ui/button";
+import c, { useState as l } from "react";
+import { Globe as u, Phone as d, Upload as f, User as p } from "lucide-react";
+import { useTranslations as m } from "@nextblock-cms/utils";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Input as v } from "@nextblock-cms/ui/input";
+import { Label as y } from "@nextblock-cms/ui/label";
+import { Card as b, CardContent as x, CardFooter as S, CardHeader as C, CardTitle as w } from "@nextblock-cms/ui/card";
+import { Checkbox as T } from "@nextblock-cms/ui/checkbox";
+import { Separator as E } from "@nextblock-cms/ui/separator";
+import { Select as D, SelectContent as O, SelectItem as k, SelectTrigger as A, SelectValue as j } from "@nextblock-cms/ui/select";
+import { useForm as M } from "react-hook-form";
+import { Avatar as ee, AvatarFallback as te, AvatarImage as ne } from "@nextblock-cms/ui/avatar";
+import { createClient as re } from "@nextblock-cms/db";
+//#region libs/ecommerce/src/lib/components/CustomerProfileForm.tsx
+function ie(e) {
+	return e ? e.startsWith("http") ? e : process.env.NEXT_PUBLIC_R2_BASE_URL ? `${process.env.NEXT_PUBLIC_R2_BASE_URL}/${e}` : process.env.NEXT_PUBLIC_SUPABASE_URL ? `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/media/${e}` : e : null;
 }
-function v(e) {
-  return {
-    company_name: e?.company_name || "",
-    recipient_name: e?.recipient_name || "",
-    line1: e?.line1 || "",
-    line2: e?.line2 || "",
-    city: e?.city || "",
-    state: e?.state || "",
-    postal_code: e?.postal_code || "",
-    country_code: pe(e?.country_code) || "CA"
-  };
+function N(e) {
+	return {
+		company_name: e?.company_name || "",
+		recipient_name: e?.recipient_name || "",
+		line1: e?.line1 || "",
+		line2: e?.line2 || "",
+		city: e?.city || "",
+		state: e?.state || "",
+		postal_code: e?.postal_code || "",
+		country_code: t(e?.country_code) || "CA"
+	};
 }
-function V({
-  prefix: e,
-  title: u,
-  register: c
-}) {
-  const { t: n } = X(), b = n("company_name") === "company_name" ? "Company name" : n("company_name");
-  return /* @__PURE__ */ r("div", { className: "space-y-4 rounded-xl border p-4", children: [
-    /* @__PURE__ */ r("div", { children: [
-      /* @__PURE__ */ l("h3", { className: "text-lg font-medium", children: u }),
-      /* @__PURE__ */ l("p", { className: "text-sm text-muted-foreground", children: n("profile_address_defaults_help") })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "grid gap-4 md:grid-cols-3", children: [
-      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ l(t, { htmlFor: `${e}-company_name`, children: b }),
-        /* @__PURE__ */ l(i, { id: `${e}-company_name`, ...c(`${e}.company_name`) })
-      ] }),
-      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ l(t, { htmlFor: `${e}-recipient_name`, children: n("full_name") }),
-        /* @__PURE__ */ l(i, { id: `${e}-recipient_name`, ...c(`${e}.recipient_name`) })
-      ] }),
-      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ l(t, { htmlFor: `${e}-country_code`, children: n("country") }),
-        /* @__PURE__ */ l(
-          "select",
-          {
-            id: `${e}-country_code`,
-            className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-            ...c(`${e}.country_code`),
-            children: he.map((d) => /* @__PURE__ */ l("option", { value: d.code, children: d.name }, d.code))
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ l(t, { htmlFor: `${e}-line1`, children: n("address_line_1") }),
-      /* @__PURE__ */ l(i, { id: `${e}-line1`, ...c(`${e}.line1`) })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ l(t, { htmlFor: `${e}-line2`, children: n("address_line_2") }),
-      /* @__PURE__ */ l(i, { id: `${e}-line2`, ...c(`${e}.line2`) })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "grid gap-4 md:grid-cols-3", children: [
-      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ l(t, { htmlFor: `${e}-city`, children: n("city") }),
-        /* @__PURE__ */ l(i, { id: `${e}-city`, ...c(`${e}.city`) })
-      ] }),
-      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ l(t, { htmlFor: `${e}-state`, children: n("state_province") }),
-        /* @__PURE__ */ l(i, { id: `${e}-state`, ...c(`${e}.state`) })
-      ] }),
-      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ l(t, { htmlFor: `${e}-postal_code`, children: n("postal_zip_code") }),
-        /* @__PURE__ */ l(i, { id: `${e}-postal_code`, ...c(`${e}.postal_code`) })
-      ] })
-    ] })
-  ] });
+function P({ prefix: t, title: n, register: r }) {
+	let { t: i } = m(), a = i("company_name") === "company_name" ? "Company name" : i("company_name");
+	return /* @__PURE__ */ _("div", {
+		className: "space-y-4 rounded-xl border p-4",
+		children: [
+			/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h3", {
+				className: "text-lg font-medium",
+				children: n
+			}), /* @__PURE__ */ g("p", {
+				className: "text-sm text-muted-foreground",
+				children: i("profile_address_defaults_help")
+			})] }),
+			/* @__PURE__ */ _("div", {
+				className: "grid gap-4 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ g(y, {
+							htmlFor: `${t}-company_name`,
+							children: a
+						}), /* @__PURE__ */ g(v, {
+							id: `${t}-company_name`,
+							...r(`${t}.company_name`)
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ g(y, {
+							htmlFor: `${t}-recipient_name`,
+							children: i("full_name")
+						}), /* @__PURE__ */ g(v, {
+							id: `${t}-recipient_name`,
+							...r(`${t}.recipient_name`)
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ g(y, {
+							htmlFor: `${t}-country_code`,
+							children: i("country")
+						}), /* @__PURE__ */ g("select", {
+							id: `${t}-country_code`,
+							className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+							...r(`${t}.country_code`),
+							children: e.map((e) => /* @__PURE__ */ g("option", {
+								value: e.code,
+								children: e.name
+							}, e.code))
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ g(y, {
+					htmlFor: `${t}-line1`,
+					children: i("address_line_1")
+				}), /* @__PURE__ */ g(v, {
+					id: `${t}-line1`,
+					...r(`${t}.line1`)
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ g(y, {
+					htmlFor: `${t}-line2`,
+					children: i("address_line_2")
+				}), /* @__PURE__ */ g(v, {
+					id: `${t}-line2`,
+					...r(`${t}.line2`)
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "grid gap-4 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ g(y, {
+							htmlFor: `${t}-city`,
+							children: i("city")
+						}), /* @__PURE__ */ g(v, {
+							id: `${t}-city`,
+							...r(`${t}.city`)
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ g(y, {
+							htmlFor: `${t}-state`,
+							children: i("state_province")
+						}), /* @__PURE__ */ g(v, {
+							id: `${t}-state`,
+							...r(`${t}.state`)
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ g(y, {
+							htmlFor: `${t}-postal_code`,
+							children: i("postal_zip_code")
+						}), /* @__PURE__ */ g(v, {
+							id: `${t}-postal_code`,
+							...r(`${t}.postal_code`)
+						})]
+					})
+				]
+			})
+		]
+	});
 }
-function Be({
-  initialData: e,
-  MediaPickerComponent: u,
-  isAdmin: c,
-  email: n,
-  accountLinks: b,
-  onAction: d,
-  initialSuccessMessage: _,
-  lockRole: $,
-  lockRoleReason: z
-}) {
-  const { t: s } = X(), [w, F] = R(!1), [y, N] = R(
-    _ ? { type: "success", text: _ } : null
-  ), W = e?.use_billing_for_shipping ?? (!e?.shipping_address || P(e?.billing_address, e?.shipping_address)), {
-    register: o,
-    handleSubmit: G,
-    setValue: g,
-    getValues: A,
-    watch: m,
-    reset: E
-  } = q({
-    defaultValues: {
-      full_name: e?.full_name || "",
-      avatar_url: e?.avatar_url || "",
-      website: e?.website || "",
-      phone: e?.phone || "",
-      role: e?.role,
-      use_billing_for_shipping: W,
-      billing_address: v(e?.billing_address),
-      shipping_address: v(e?.shipping_address)
-    }
-  });
-  x.useEffect(() => {
-    e && E({
-      full_name: e.full_name || "",
-      avatar_url: e.avatar_url || "",
-      website: e.website || "",
-      phone: e.phone || "",
-      role: e.role,
-      use_billing_for_shipping: e.use_billing_for_shipping ?? (!e.shipping_address || P(e.billing_address, e.shipping_address)),
-      billing_address: v(e.billing_address),
-      shipping_address: v(e.shipping_address)
-    });
-  }, [e, E]), x.useEffect(() => {
-    _ && N({ type: "success", text: _ });
-  }, [_]), x.useEffect(() => {
-    const a = ce();
-    (async () => {
-      const {
-        data: { user: f }
-      } = await a.auth.getUser();
-      f && !A("full_name") && f.user_metadata?.full_name && g("full_name", f.user_metadata.full_name);
-    })();
-  }, [A, g]);
-  const H = (a) => {
-    const p = ue(a?.object_key ?? a?.file_path);
-    p && g("avatar_url", p);
-  }, M = async (a) => {
-    F(!0), N(null);
-    const p = j(a.billing_address) ?? ie(), f = a.use_billing_for_shipping ? p : j(a.shipping_address);
-    try {
-      const h = {
-        ...a,
-        billing_address: p,
-        shipping_address: f
-      };
-      if (d) {
-        const S = await d(h);
-        if (S?.error)
-          throw new Error(S.error);
-      } else
-        await ne(h);
-      N({ type: "success", text: s("profile_updated_success") });
-    } catch (h) {
-      if (h.message === "NEXT_REDIRECT" || h.message?.includes("NEXT_REDIRECT"))
-        return;
-      console.error(h), N({ type: "error", text: s("profile_update_failed") });
-    } finally {
-      F(!1);
-    }
-  }, U = m("use_billing_for_shipping");
-  return /* @__PURE__ */ r("div", { className: "grid gap-6 md:grid-cols-12 max-w-5xl mx-auto", children: [
-    /* @__PURE__ */ r(T, { className: "md:col-span-4 h-fit", children: [
-      /* @__PURE__ */ l(B, { children: /* @__PURE__ */ l(I, { className: "text-xl", children: s("public_profile") }) }),
-      /* @__PURE__ */ r(L, { className: "flex flex-col items-center text-center space-y-4", children: [
-        /* @__PURE__ */ r("div", { className: "relative group", children: [
-          /* @__PURE__ */ r(K, { className: "h-32 w-32 border-4 border-muted", children: [
-            /* @__PURE__ */ l(Q, { src: m("avatar_url") || void 0, alt: m("full_name") || "", className: "object-cover" }),
-            /* @__PURE__ */ l(Y, { className: "text-4xl bg-secondary", children: m("full_name")?.charAt(0)?.toUpperCase() || /* @__PURE__ */ l(k, { className: "h-12 w-12" }) })
-          ] }),
-          u && // Hover alone hid this from keyboard focus (focusable but invisible) and from
-          // touch screens, which have no hover at all.
-          /* @__PURE__ */ l("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:none)]:opacity-100 transition-opacity bg-black/40 rounded-full cursor-pointer", children: /* @__PURE__ */ l(
-            u,
-            {
-              triggerLabel: /* @__PURE__ */ r(O, { children: [
-                /* @__PURE__ */ l(de, { className: "h-6 w-6 text-white" }),
-                /* @__PURE__ */ l("span", { className: "sr-only", children: s("profile_change_avatar") === "profile_change_avatar" ? "Change profile picture" : s("profile_change_avatar") })
-              ] }),
-              triggerVariant: "ghost",
-              title: s("customer_profile"),
-              onSelect: H,
-              accept: (a) => a.file_type.startsWith("image/"),
-              hideTrigger: !1
-            }
-          ) })
-        ] }),
-        !u && /* @__PURE__ */ r("div", { className: "w-full", children: [
-          /* @__PURE__ */ l(t, { htmlFor: "avatar_url", className: "sr-only", children: s("avatar_url") }),
-          /* @__PURE__ */ l(i, { id: "avatar_url", type: "url", autoComplete: "off", ...o("avatar_url"), placeholder: "https://…", className: "mt-2" })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "w-full space-y-1 text-left mt-4", children: [
-          /* @__PURE__ */ l("div", { className: "text-sm font-medium text-muted-foreground uppercase tracking-wider", children: s("identity") }),
-          /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ l("span", { className: "font-semibold text-lg", children: m("full_name") || s("full_name") }) })
-        ] }),
-        b?.length ? /* @__PURE__ */ l(
-          J,
-          {
-            links: b,
-            className: "mt-2 text-left"
-          }
-        ) : null
-      ] })
-    ] }),
-    /* @__PURE__ */ l(T, { className: "md:col-span-8", children: /* @__PURE__ */ r("form", { onSubmit: G(M), children: [
-      /* @__PURE__ */ l(B, { children: /* @__PURE__ */ l(I, { children: s("details") }) }),
-      /* @__PURE__ */ r(L, { className: "space-y-6", children: [
-        n && /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ r(t, { htmlFor: "email", children: [
-            s("email") === "email" ? "Email" : s("email"),
-            " (",
-            s("read_only") === "read_only" ? "read-only" : s("read_only"),
-            ")"
-          ] }),
-          /* @__PURE__ */ l(i, { id: "email", value: n, readOnly: !0, disabled: !0, className: "bg-muted/50" })
-        ] }),
-        /* @__PURE__ */ l("div", { className: "rounded-xl border bg-muted/20 p-4 text-sm text-muted-foreground", children: s("profile_basic_info_help") }),
-        /* @__PURE__ */ r("div", { className: "grid gap-4 md:grid-cols-2", children: [
-          /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ r(t, { htmlFor: "full_name", className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ l(k, { className: "h-4 w-4" }),
-              " ",
-              s("full_name")
-            ] }),
-            /* @__PURE__ */ l(i, { id: "full_name", autoComplete: "name", ...o("full_name") })
-          ] }),
-          /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ r(t, { htmlFor: "phone", className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ l(oe, { className: "h-4 w-4" }),
-              " ",
-              s("phone_number")
-            ] }),
-            /* @__PURE__ */ l(i, { id: "phone", type: "tel", inputMode: "tel", autoComplete: "tel", ...o("phone") })
-          ] })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ r(t, { htmlFor: "website", className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ l(me, { className: "h-4 w-4" }),
-            " ",
-            s("website")
-          ] }),
-          /* @__PURE__ */ l(i, { id: "website", type: "url", autoComplete: "url", ...o("website"), placeholder: "https://example.com" })
-        ] }),
-        /* @__PURE__ */ l(te, { className: "my-2" }),
-        /* @__PURE__ */ l(V, { prefix: "billing_address", title: s("billing_address"), register: o }),
-        /* @__PURE__ */ r("div", { className: "flex items-center space-x-3 rounded-lg border p-4", children: [
-          /* @__PURE__ */ l(
-            ee,
-            {
-              id: "use_billing_for_shipping",
-              checked: !!U,
-              onCheckedChange: (a) => g("use_billing_for_shipping", !!a, { shouldDirty: !0 })
-            }
-          ),
-          /* @__PURE__ */ r("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ l(t, { htmlFor: "use_billing_for_shipping", className: "cursor-pointer", children: s("use_billing_for_shipping") }),
-            /* @__PURE__ */ l("p", { className: "text-sm text-muted-foreground", children: s("profile_use_billing_for_shipping_help") })
-          ] })
-        ] }),
-        !U && /* @__PURE__ */ l(
-          V,
-          {
-            prefix: "shipping_address",
-            title: s("shipping_address"),
-            register: o
-          }
-        ),
-        y && /* @__PURE__ */ l(
-          "div",
-          {
-            role: y.type === "error" ? "alert" : "status",
-            className: `mt-4 rounded-xl border p-4 text-sm ${y.type === "success" ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-red-200 bg-red-50 text-red-700"}`,
-            children: y.text
-          }
-        ),
-        c && /* @__PURE__ */ r("div", { className: "border-t pt-4 mt-4", children: [
-          /* @__PURE__ */ l("h3", { className: "text-sm font-medium mb-3", children: "Admin Settings" }),
-          /* @__PURE__ */ r("div", { className: "grid gap-2", children: [
-            /* @__PURE__ */ l(t, { htmlFor: "role", children: "Role" }),
-            /* @__PURE__ */ r(
-              le,
-              {
-                value: m("role") || "USER",
-                onValueChange: (a) => g("role", a),
-                disabled: $,
-                children: [
-                  /* @__PURE__ */ l(re, { children: /* @__PURE__ */ l(se, { placeholder: "Select role" }) }),
-                  /* @__PURE__ */ r(ae, { children: [
-                    /* @__PURE__ */ l(C, { value: "USER", children: "User" }),
-                    /* @__PURE__ */ l(C, { value: "WRITER", children: "Writer" }),
-                    /* @__PURE__ */ l(C, { value: "ADMIN", children: "Admin" })
-                  ] })
-                ]
-              }
-            ),
-            $ && /* @__PURE__ */ l("p", { className: "text-xs text-muted-foreground", children: z || "This is the only Admin account, so its role can't be changed. Promote another user to Admin first." })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ l(D, { className: "flex justify-end", children: /* @__PURE__ */ l(Z, { type: "submit", disabled: w, size: "lg", children: s(w ? "saving" : "save_changes") }) })
-    ] }) })
-  ] });
+function F({ initialData: e, MediaPickerComponent: t, isAdmin: F, email: I, accountLinks: L, onAction: R, initialSuccessMessage: z, lockRole: B, lockRoleReason: V }) {
+	let { t: H } = m(), [U, W] = l(!1), [G, K] = l(z ? {
+		type: "success",
+		text: z
+	} : null), q = e?.use_billing_for_shipping ?? (!e?.shipping_address || n(e?.billing_address, e?.shipping_address)), { register: J, handleSubmit: ae, setValue: Y, getValues: X, watch: Z, reset: Q } = M({ defaultValues: {
+		full_name: e?.full_name || "",
+		avatar_url: e?.avatar_url || "",
+		website: e?.website || "",
+		phone: e?.phone || "",
+		role: e?.role,
+		use_billing_for_shipping: q,
+		billing_address: N(e?.billing_address),
+		shipping_address: N(e?.shipping_address)
+	} });
+	c.useEffect(() => {
+		e && Q({
+			full_name: e.full_name || "",
+			avatar_url: e.avatar_url || "",
+			website: e.website || "",
+			phone: e.phone || "",
+			role: e.role,
+			use_billing_for_shipping: e.use_billing_for_shipping ?? (!e.shipping_address || n(e.billing_address, e.shipping_address)),
+			billing_address: N(e.billing_address),
+			shipping_address: N(e.shipping_address)
+		});
+	}, [e, Q]), c.useEffect(() => {
+		z && K({
+			type: "success",
+			text: z
+		});
+	}, [z]), c.useEffect(() => {
+		let e = re();
+		(async () => {
+			let { data: { user: t } } = await e.auth.getUser();
+			t && !X("full_name") && t.user_metadata?.full_name && Y("full_name", t.user_metadata.full_name);
+		})();
+	}, [X, Y]);
+	let oe = (e) => {
+		let t = ie(e?.object_key ?? e?.file_path);
+		t && Y("avatar_url", t);
+	}, se = async (e) => {
+		W(!0), K(null);
+		let t = i(e.billing_address) ?? r(), n = e.use_billing_for_shipping ? t : i(e.shipping_address);
+		try {
+			let r = {
+				...e,
+				billing_address: t,
+				shipping_address: n
+			};
+			if (R) {
+				let e = await R(r);
+				if (e?.error) throw Error(e.error);
+			} else await o(r);
+			K({
+				type: "success",
+				text: H("profile_updated_success")
+			});
+		} catch (e) {
+			if (e.message === "NEXT_REDIRECT" || e.message?.includes("NEXT_REDIRECT")) return;
+			console.error(e), K({
+				type: "error",
+				text: H("profile_update_failed")
+			});
+		} finally {
+			W(!1);
+		}
+	}, $ = Z("use_billing_for_shipping");
+	return /* @__PURE__ */ _("div", {
+		className: "grid gap-6 md:grid-cols-12 max-w-5xl mx-auto",
+		children: [/* @__PURE__ */ _(b, {
+			className: "md:col-span-4 h-fit",
+			children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, {
+				className: "text-xl",
+				children: H("public_profile")
+			}) }), /* @__PURE__ */ _(x, {
+				className: "flex flex-col items-center text-center space-y-4",
+				children: [
+					/* @__PURE__ */ _("div", {
+						className: "relative group",
+						children: [/* @__PURE__ */ _(ee, {
+							className: "h-32 w-32 border-4 border-muted",
+							children: [/* @__PURE__ */ g(ne, {
+								src: Z("avatar_url") || void 0,
+								alt: Z("full_name") || "",
+								className: "object-cover"
+							}), /* @__PURE__ */ g(te, {
+								className: "text-4xl bg-secondary",
+								children: Z("full_name")?.charAt(0)?.toUpperCase() || /* @__PURE__ */ g(p, { className: "h-12 w-12" })
+							})]
+						}), t && /* @__PURE__ */ g("div", {
+							className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:none)]:opacity-100 transition-opacity bg-black/40 rounded-full cursor-pointer",
+							children: /* @__PURE__ */ g(t, {
+								triggerLabel: /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(f, { className: "h-6 w-6 text-white" }), /* @__PURE__ */ g("span", {
+									className: "sr-only",
+									children: H("profile_change_avatar") === "profile_change_avatar" ? "Change profile picture" : H("profile_change_avatar")
+								})] }),
+								triggerVariant: "ghost",
+								title: H("customer_profile"),
+								onSelect: oe,
+								accept: (e) => e.file_type.startsWith("image/"),
+								hideTrigger: !1
+							})
+						})]
+					}),
+					!t && /* @__PURE__ */ _("div", {
+						className: "w-full",
+						children: [/* @__PURE__ */ g(y, {
+							htmlFor: "avatar_url",
+							className: "sr-only",
+							children: H("avatar_url")
+						}), /* @__PURE__ */ g(v, {
+							id: "avatar_url",
+							type: "url",
+							autoComplete: "off",
+							...J("avatar_url"),
+							placeholder: "https://…",
+							className: "mt-2"
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "w-full space-y-1 text-left mt-4",
+						children: [/* @__PURE__ */ g("div", {
+							className: "text-sm font-medium text-muted-foreground uppercase tracking-wider",
+							children: H("identity")
+						}), /* @__PURE__ */ g("div", {
+							className: "flex items-center gap-2",
+							children: /* @__PURE__ */ g("span", {
+								className: "font-semibold text-lg",
+								children: Z("full_name") || H("full_name")
+							})
+						})]
+					}),
+					L?.length ? /* @__PURE__ */ g(a, {
+						links: L,
+						className: "mt-2 text-left"
+					}) : null
+				]
+			})]
+		}), /* @__PURE__ */ g(b, {
+			className: "md:col-span-8",
+			children: /* @__PURE__ */ _("form", {
+				onSubmit: ae(se),
+				children: [
+					/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, { children: H("details") }) }),
+					/* @__PURE__ */ _(x, {
+						className: "space-y-6",
+						children: [
+							I && /* @__PURE__ */ _("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ _(y, {
+									htmlFor: "email",
+									children: [
+										H("email") === "email" ? "Email" : H("email"),
+										" (",
+										H("read_only") === "read_only" ? "read-only" : H("read_only"),
+										")"
+									]
+								}), /* @__PURE__ */ g(v, {
+									id: "email",
+									value: I,
+									readOnly: !0,
+									disabled: !0,
+									className: "bg-muted/50"
+								})]
+							}),
+							/* @__PURE__ */ g("div", {
+								className: "rounded-xl border bg-muted/20 p-4 text-sm text-muted-foreground",
+								children: H("profile_basic_info_help")
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "grid gap-4 md:grid-cols-2",
+								children: [/* @__PURE__ */ _("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ _(y, {
+										htmlFor: "full_name",
+										className: "flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ g(p, { className: "h-4 w-4" }),
+											" ",
+											H("full_name")
+										]
+									}), /* @__PURE__ */ g(v, {
+										id: "full_name",
+										autoComplete: "name",
+										...J("full_name")
+									})]
+								}), /* @__PURE__ */ _("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ _(y, {
+										htmlFor: "phone",
+										className: "flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ g(d, { className: "h-4 w-4" }),
+											" ",
+											H("phone_number")
+										]
+									}), /* @__PURE__ */ g(v, {
+										id: "phone",
+										type: "tel",
+										inputMode: "tel",
+										autoComplete: "tel",
+										...J("phone")
+									})]
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ _(y, {
+									htmlFor: "website",
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ g(u, { className: "h-4 w-4" }),
+										" ",
+										H("website")
+									]
+								}), /* @__PURE__ */ g(v, {
+									id: "website",
+									type: "url",
+									autoComplete: "url",
+									...J("website"),
+									placeholder: "https://example.com"
+								})]
+							}),
+							/* @__PURE__ */ g(E, { className: "my-2" }),
+							/* @__PURE__ */ g(P, {
+								prefix: "billing_address",
+								title: H("billing_address"),
+								register: J
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "flex items-center space-x-3 rounded-lg border p-4",
+								children: [/* @__PURE__ */ g(T, {
+									id: "use_billing_for_shipping",
+									checked: !!$,
+									onCheckedChange: (e) => Y("use_billing_for_shipping", !!e, { shouldDirty: !0 })
+								}), /* @__PURE__ */ _("div", {
+									className: "space-y-1",
+									children: [/* @__PURE__ */ g(y, {
+										htmlFor: "use_billing_for_shipping",
+										className: "cursor-pointer",
+										children: H("use_billing_for_shipping")
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: H("profile_use_billing_for_shipping_help")
+									})]
+								})]
+							}),
+							!$ && /* @__PURE__ */ g(P, {
+								prefix: "shipping_address",
+								title: H("shipping_address"),
+								register: J
+							}),
+							G && /* @__PURE__ */ g("div", {
+								role: G.type === "error" ? "alert" : "status",
+								className: `mt-4 rounded-xl border p-4 text-sm ${G.type === "success" ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-red-200 bg-red-50 text-red-700"}`,
+								children: G.text
+							}),
+							F && /* @__PURE__ */ _("div", {
+								className: "border-t pt-4 mt-4",
+								children: [/* @__PURE__ */ g("h3", {
+									className: "text-sm font-medium mb-3",
+									children: "Admin Settings"
+								}), /* @__PURE__ */ _("div", {
+									className: "grid gap-2",
+									children: [
+										/* @__PURE__ */ g(y, {
+											htmlFor: "role",
+											children: "Role"
+										}),
+										/* @__PURE__ */ _(D, {
+											value: Z("role") || "USER",
+											onValueChange: (e) => Y("role", e),
+											disabled: B,
+											children: [/* @__PURE__ */ g(A, { children: /* @__PURE__ */ g(j, { placeholder: "Select role" }) }), /* @__PURE__ */ _(O, { children: [
+												/* @__PURE__ */ g(k, {
+													value: "USER",
+													children: "User"
+												}),
+												/* @__PURE__ */ g(k, {
+													value: "WRITER",
+													children: "Writer"
+												}),
+												/* @__PURE__ */ g(k, {
+													value: "ADMIN",
+													children: "Admin"
+												})
+											] })]
+										}),
+										B && /* @__PURE__ */ g("p", {
+											className: "text-xs text-muted-foreground",
+											children: V || "This is the only Admin account, so its role can't be changed. Promote another user to Admin first."
+										})
+									]
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ g(S, {
+						className: "flex justify-end",
+						children: /* @__PURE__ */ g(s, {
+							type: "submit",
+							disabled: U,
+							size: "lg",
+							children: H(U ? "saving" : "save_changes")
+						})
+					})
+				]
+			})
+		})]
+	});
 }
-export {
-  Be as CustomerProfileForm
-};
+//#endregion
+export { F as CustomerProfileForm };