@enadhq/enad-react-sdk 0.0.6

package/dist/client/user/components/signup-organisation-form.mjs

@@ -0,0 +1,813 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { registerOrganisationAction } from "../actions/registerOrganisationAction";
+import { registerUserWithoutRedirectAction } from "../actions/registerUserWithoutRedirectAction";
+const addressSchema = z.object({
+  street_address: z.string().min(1, "Street address is required"),
+  house_number: z.string().optional(),
+  city: z.string().min(1, "City is required"),
+  postal_code: z.string().min(1, "Postal code is required"),
+  country: z.string().min(1, "Country is required"),
+  state_province: z.string().optional(),
+  phone: z.string().optional(),
+  co_address: z.string().optional(),
+  name: z.string().optional(),
+  is_default: z.boolean().default(true),
+  shipping_type: z.string().default("standard")
+});
+const userSchema = z.object({
+  first_name: z.string().trim().min(1, "First name is required"),
+  last_name: z.string().trim().min(1, "Last name is required"),
+  email: z.string().email("Invalid email address").min(1, "Email is required"),
+  password: z.string().min(10, "Password must be at least 10 characters").regex(/\d/, "Password must contain a number"),
+  confirmPassword: z.string(),
+  phone_number: z.string().optional(),
+  language: z.string().default("SV"),
+  country_code: z.string().default("SE"),
+  market: z.string().default("SE"),
+  store_group: z.string().default("default"),
+  allow_email_notifications: z.boolean().default(false),
+  allow_phone_notifications: z.boolean().default(false),
+  allow_postal_notifications: z.boolean().default(false)
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"]
+});
+const organizationSchema = z.object({
+  name: z.string().min(1, "Organization name is required"),
+  organisation_number: z.string().min(1, "Organization number is required"),
+  tax_id_vat_number: z.string().min(1, "Tax ID/VAT number is required"),
+  contact_name: z.string().optional(),
+  email: z.string().email("Invalid email address").min(1, "Email is required"),
+  invoice_email: z.string().email("Invalid email address").optional(),
+  phone: z.string().optional(),
+  external_ref: z.string().optional(),
+  attribute: z.string().optional(),
+  credit_check: z.boolean().default(false),
+  custom_fields: z.record(z.string(), z.any()).optional(),
+  billing_address: z.array(addressSchema).min(1)
+});
+const formSchema = z.object({
+  user: userSchema,
+  organization: organizationSchema,
+  shipping_address: z.array(addressSchema).min(1),
+  use_billing_as_shipping: z.boolean().default(false),
+  terms_accepted: z.boolean().refine((val) => val === true, {
+    message: "You must accept the terms and conditions"
+  })
+});
+const SignupOrganisationForm = ({
+  title = "Create your organisation account",
+  subtitle = "Sign up to get started",
+  submitText = "Sign Up",
+  extraLink = { href: "/login", text: "Already have an account? Sign in" },
+  organisationStatus = "active",
+  defaultMarket = "SE",
+  defaultLanguage = "SV",
+  defaultCountry = "SE",
+  defaultStoreGroup = "default"
+}) => {
+  const [errors, setErrors] = useState({});
+  const [isPending, setIsPending] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [confirmMode, setConfirmMode] = useState(false);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      user: {
+        first_name: "",
+        last_name: "",
+        email: "",
+        password: "",
+        confirmPassword: "",
+        phone_number: "",
+        language: defaultLanguage,
+        market: defaultMarket,
+        country_code: defaultCountry,
+        store_group: defaultStoreGroup,
+        allow_email_notifications: false,
+        allow_phone_notifications: false,
+        allow_postal_notifications: false
+      },
+      organization: {
+        name: "",
+        organisation_number: "",
+        tax_id_vat_number: "",
+        contact_name: "",
+        email: "",
+        invoice_email: "",
+        phone: "",
+        external_ref: "",
+        attribute: "",
+        credit_check: false,
+        custom_fields: {},
+        billing_address: [
+          {
+            street_address: "",
+            house_number: "",
+            city: "",
+            postal_code: "",
+            country: defaultCountry,
+            state_province: "",
+            phone: "",
+            co_address: "",
+            name: "",
+            is_default: true,
+            shipping_type: "standard"
+          }
+        ]
+      },
+      shipping_address: [
+        {
+          street_address: "",
+          house_number: "",
+          city: "",
+          postal_code: "",
+          country: defaultCountry,
+          state_province: "",
+          phone: "",
+          co_address: "",
+          name: "",
+          is_default: true,
+          shipping_type: "standard"
+        }
+      ],
+      use_billing_as_shipping: false,
+      terms_accepted: false
+    }
+  });
+  const { watch, setValue } = form;
+  const useBillingAsShipping = watch("use_billing_as_shipping");
+  const billingAddress = watch("organization.billing_address.0");
+  const contactEmail = watch("user.email");
+  const contactPhone = watch("user.phone_number");
+  const orgNumber = watch("organization.organisation_number");
+  const invoiceCountry = watch("organization.billing_address.0.country");
+  const lastAutoOrgEmail = useRef(null);
+  const lastAutoInvoiceEmail = useRef(null);
+  const lastAutoOrgPhone = useRef(null);
+  const lastAutoVat = useRef(null);
+  useEffect(() => {
+    if (useBillingAsShipping && billingAddress) {
+      setValue("shipping_address.0", billingAddress);
+    }
+  }, [useBillingAsShipping, billingAddress, setValue]);
+  useEffect(() => {
+    if (!contactEmail) return;
+    const currentOrgEmail = form.getValues("organization.email");
+    if (!currentOrgEmail || currentOrgEmail === lastAutoOrgEmail.current) {
+      setValue("organization.email", contactEmail);
+      lastAutoOrgEmail.current = contactEmail;
+    }
+    const currentInvoiceEmail = form.getValues("organization.invoice_email");
+    if (!currentInvoiceEmail || currentInvoiceEmail === lastAutoInvoiceEmail.current) {
+      setValue("organization.invoice_email", contactEmail);
+      lastAutoInvoiceEmail.current = contactEmail;
+    }
+  }, [contactEmail, setValue, form]);
+  useEffect(() => {
+    if (!contactPhone) return;
+    const currentOrgPhone = form.getValues("organization.phone");
+    if (!currentOrgPhone || currentOrgPhone === lastAutoOrgPhone.current) {
+      setValue("organization.phone", contactPhone);
+      lastAutoOrgPhone.current = contactPhone;
+    }
+  }, [contactPhone, setValue, form]);
+  useEffect(() => {
+    const currentOrgNumber = form.getValues("organization.organisation_number");
+    const currentCountry = (form.getValues("organization.billing_address.0.country") || "").toString().toUpperCase();
+    const currentVat = form.getValues("organization.tax_id_vat_number");
+    if (!currentOrgNumber) {
+      if (!currentVat || currentVat === lastAutoVat.current) {
+        setValue("organization.tax_id_vat_number", "");
+        lastAutoVat.current = "";
+      }
+      return;
+    }
+    const computedVat = currentCountry === "SE" ? `SE${currentOrgNumber}01` : currentOrgNumber;
+    if (!currentVat || currentVat === lastAutoVat.current) {
+      setValue("organization.tax_id_vat_number", computedVat);
+      lastAutoVat.current = computedVat;
+    }
+  }, [orgNumber, invoiceCountry, setValue, form]);
+  const onSubmit = async (values) => {
+    setIsPending(true);
+    setErrors({});
+    try {
+      const userResult = await registerUserWithoutRedirectAction({
+        firstName: values.user.first_name,
+        lastName: values.user.last_name,
+        email: values.user.email,
+        password: values.user.password,
+        phone_number: values.user.phone_number,
+        language: values.user.language,
+        country_code: values.user.country_code,
+        market: values.user.market,
+        store_group: values.user.store_group,
+        allow_email_notifications: values.user.allow_email_notifications,
+        allow_phone_notifications: values.user.allow_phone_notifications,
+        allow_postal_notifications: values.user.allow_postal_notifications,
+        status: organisationStatus
+      });
+      if (userResult?.errors) {
+        setErrors(userResult.errors);
+        setIsPending(false);
+        return;
+      }
+      const userId = userResult?.data.id;
+      if (!userId) {
+        setErrors({ general: ["User registration failed. Please try again."] });
+        setIsPending(false);
+        return;
+      }
+      const organisationData = {
+        billing_address: values.organization.billing_address,
+        shipping_address: values.shipping_address,
+        contact_name: values.organization.contact_name,
+        credit_check: values.organization.credit_check,
+        custom_fields: values.organization.custom_fields,
+        email: values.organization.email.toLowerCase(),
+        external_ref: values.organization.external_ref,
+        invoice_email: values.organization.invoice_email?.toLowerCase(),
+        name: values.organization.name,
+        organisation_number: values.organization.organisation_number,
+        phone: values.organization.phone,
+        tax_id_vat_number: values.organization.tax_id_vat_number,
+        user_id: userId,
+        attribute_ids: values.organization.attribute ? [values.organization.attribute] : [],
+        status: organisationStatus
+      };
+      const orgResult = await registerOrganisationAction(organisationData);
+      if (orgResult?.error) {
+        setErrors({ general: [orgResult.error] });
+        setIsPending(false);
+        return;
+      }
+      setConfirmMode(true);
+    } catch (error) {
+      console.error("Registration error:", error);
+      setErrors({ general: ["Failed to register. Please try again."] });
+    } finally {
+      setIsPending(false);
+    }
+  };
+  const inputBaseClasses = `
+    w-full px-4 py-2.5
+    border border-(--enad-border-color) 
+    rounded-(--enad-border-radius)
+    focus:ring-2 focus:ring-(--enad-button-bg)
+    focus:border-(--enad-button-bg)
+    outline-none transition
+    bg-(--enad-background)
+    text-(--enad-text-primary-color)
+  `;
+  const buttonBaseClasses = `
+    w-full py-2.5
+    bg-(--enad-button-bg)
+    hover:bg-(--enad-button-hover-bg)
+    text-(--enad-button-color)
+    font-medium rounded-(--enad-border-radius)
+    transition shadow-sm hover:shadow
+    disabled:opacity-50 disabled:cursor-not-allowed
+  `;
+  const labelClasses = `block text-sm font-medium text-(--enad-text-primary-color) mb-1`;
+  const errorClasses = `text-(--enad-error-color) text-sm mt-1`;
+  const sectionTitleClasses = `text-xl font-semibold mb-4 pb-2 border-b border-(--enad-border-color)`;
+  if (confirmMode) {
+    return /* @__PURE__ */ jsx("main", { className: "flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md bg-(--enad-surface) shadow-lg p-8 border border-(--enad-border-color) rounded-(--enad-border-radius)", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold mb-2 text-center text-(--enad-text-primary-color)", children: "Verify your email" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-center text-(--enad-text-muted-color)", children: "Please check your email to verify your account." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("main", { className: "flex items-center justify-center px-4 py-8", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl bg-(--enad-surface) shadow-lg p-8 border border-(--enad-border-color) rounded-(--enad-border-radius)", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold mb-2 text-center text-(--enad-text-primary-color)", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm mb-8 text-center text-(--enad-text-muted-color)", children: subtitle }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: sectionTitleClasses, children: "Contact Person" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "First Name ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("user.first_name"),
+                className: inputBaseClasses,
+                placeholder: "John"
+              }
+            ),
+            form.formState.errors.user?.first_name && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.user.first_name.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Last Name ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("user.last_name"),
+                className: inputBaseClasses,
+                placeholder: "Doe"
+              }
+            ),
+            form.formState.errors.user?.last_name && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.user.last_name.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Email ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "email",
+                ...form.register("user.email"),
+                className: inputBaseClasses,
+                placeholder: "you@example.com"
+              }
+            ),
+            form.formState.errors.user?.email && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.user.email.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: labelClasses, children: "Phone Number" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "tel",
+                ...form.register("user.phone_number"),
+                className: inputBaseClasses,
+                placeholder: "+46 123 456 789"
+              }
+            ),
+            form.formState.errors.user?.phone_number && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.user.phone_number.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Password ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: showPassword ? "text" : "password",
+                  ...form.register("user.password"),
+                  className: inputBaseClasses + " pr-10",
+                  placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-2 top-1/2 -translate-y-1/2 text-(--enad-text-muted-color)",
+                  children: showPassword ? "Hide" : "Show"
+                }
+              )
+            ] }),
+            form.formState.errors.user?.password && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.user.password.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Confirm Password ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: showConfirmPassword ? "text" : "password",
+                  ...form.register("user.confirmPassword"),
+                  className: inputBaseClasses + " pr-10",
+                  placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowConfirmPassword(!showConfirmPassword),
+                  className: "absolute right-2 top-1/2 -translate-y-1/2 text-(--enad-text-muted-color)",
+                  children: showConfirmPassword ? "Hide" : "Show"
+                }
+              )
+            ] }),
+            form.formState.errors.user?.confirmPassword && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.user.confirmPassword.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-(--enad-text-primary-color)", children: "Communication Preferences" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                ...form.register("user.allow_email_notifications"),
+                className: "h-4 w-4"
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { className: "text-sm text-(--enad-text-primary-color)", children: "Accept email notifications" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                ...form.register("user.allow_phone_notifications"),
+                className: "h-4 w-4"
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { className: "text-sm text-(--enad-text-primary-color)", children: "Accept SMS notifications" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                ...form.register("user.allow_postal_notifications"),
+                className: "h-4 w-4"
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { className: "text-sm text-(--enad-text-primary-color)", children: "Accept postal notifications" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: sectionTitleClasses, children: "Company Information" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+            "Company Name ",
+            /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...form.register("organization.name"),
+              className: inputBaseClasses,
+              placeholder: "Company Name"
+            }
+          ),
+          form.formState.errors.organization?.name && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.name.message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Organisation Number ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.organisation_number"),
+                className: inputBaseClasses,
+                placeholder: "1234567890",
+                onChange: (e) => {
+                  form.setValue(
+                    "organization.organisation_number",
+                    e.target.value.replace(/\D/g, "")
+                  );
+                }
+              }
+            ),
+            form.formState.errors.organization?.organisation_number && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.organisation_number.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Tax ID/VAT Number ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.tax_id_vat_number"),
+                className: inputBaseClasses,
+                placeholder: "SE123456789001"
+              }
+            ),
+            form.formState.errors.organization?.tax_id_vat_number && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.tax_id_vat_number.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Company Email ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "email",
+                ...form.register("organization.email"),
+                className: inputBaseClasses,
+                placeholder: "company@example.com"
+              }
+            ),
+            form.formState.errors.organization?.email && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.email.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: labelClasses, children: "Company Phone" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "tel",
+                ...form.register("organization.phone"),
+                className: inputBaseClasses,
+                placeholder: "+46 123 456 789"
+              }
+            ),
+            form.formState.errors.organization?.phone && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.phone.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: labelClasses, children: "Invoice Email" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "email",
+              ...form.register("organization.invoice_email"),
+              className: inputBaseClasses,
+              placeholder: "invoices@example.com"
+            }
+          ),
+          form.formState.errors.organization?.invoice_email && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.invoice_email.message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: labelClasses, children: "Contact Name" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.contact_name"),
+                className: inputBaseClasses,
+                placeholder: "Contact Person"
+              }
+            ),
+            form.formState.errors.organization?.contact_name && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.contact_name.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: labelClasses, children: "External Reference" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.external_ref"),
+                className: inputBaseClasses,
+                placeholder: "External Ref"
+              }
+            ),
+            form.formState.errors.organization?.external_ref && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.external_ref.message })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: sectionTitleClasses, children: "Billing Address" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Street Address ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.billing_address.0.street_address"),
+                className: inputBaseClasses,
+                placeholder: "Street Address"
+              }
+            ),
+            form.formState.errors.organization?.billing_address?.[0]?.street_address && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.billing_address[0]?.street_address?.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: labelClasses, children: "House Number" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.billing_address.0.house_number"),
+                className: inputBaseClasses,
+                placeholder: "123"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: labelClasses, children: "Co Address" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.billing_address.0.co_address"),
+                className: inputBaseClasses,
+                placeholder: "Co Address"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Postal Code ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.billing_address.0.postal_code"),
+                className: inputBaseClasses,
+                placeholder: "12345"
+              }
+            ),
+            form.formState.errors.organization?.billing_address?.[0]?.postal_code && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.billing_address[0]?.postal_code?.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "City ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...form.register("organization.billing_address.0.city"),
+                className: inputBaseClasses,
+                placeholder: "City"
+              }
+            ),
+            form.formState.errors.organization?.billing_address?.[0]?.city && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.billing_address[0]?.city?.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+              "Country ",
+              /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                ...form.register("organization.billing_address.0.country"),
+                className: inputBaseClasses,
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "SE", children: "Sweden" }),
+                  /* @__PURE__ */ jsx("option", { value: "NO", children: "Norway" }),
+                  /* @__PURE__ */ jsx("option", { value: "DK", children: "Denmark" }),
+                  /* @__PURE__ */ jsx("option", { value: "FI", children: "Finland" })
+                ]
+              }
+            ),
+            form.formState.errors.organization?.billing_address?.[0]?.country && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.organization.billing_address[0]?.country?.message })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: sectionTitleClasses, children: "Shipping Address" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              ...form.register("use_billing_as_shipping"),
+              className: "h-4 w-4"
+            }
+          ),
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-(--enad-text-primary-color)", children: "Same address as billing address" })
+        ] }),
+        !useBillingAsShipping && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+                "Street Address ",
+                /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...form.register("shipping_address.0.street_address"),
+                  className: inputBaseClasses,
+                  placeholder: "Street Address"
+                }
+              ),
+              form.formState.errors.shipping_address?.[0]?.street_address && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.shipping_address[0]?.street_address?.message })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: labelClasses, children: "House Number" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...form.register("shipping_address.0.house_number"),
+                  className: inputBaseClasses,
+                  placeholder: "123"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: labelClasses, children: "Co Address" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...form.register("shipping_address.0.co_address"),
+                  className: inputBaseClasses,
+                  placeholder: "Co Address"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+                "Postal Code ",
+                /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...form.register("shipping_address.0.postal_code"),
+                  className: inputBaseClasses,
+                  placeholder: "12345"
+                }
+              ),
+              form.formState.errors.shipping_address?.[0]?.postal_code && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.shipping_address[0]?.postal_code?.message })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+                "City ",
+                /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...form.register("shipping_address.0.city"),
+                  className: inputBaseClasses,
+                  placeholder: "City"
+                }
+              ),
+              form.formState.errors.shipping_address?.[0]?.city && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.shipping_address[0]?.city?.message })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+                "Country ",
+                /* @__PURE__ */ jsx("span", { className: "text-(--enad-error-color)", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  ...form.register("shipping_address.0.country"),
+                  className: inputBaseClasses,
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "SE", children: "Sweden" }),
+                    /* @__PURE__ */ jsx("option", { value: "NO", children: "Norway" }),
+                    /* @__PURE__ */ jsx("option", { value: "DK", children: "Denmark" }),
+                    /* @__PURE__ */ jsx("option", { value: "FI", children: "Finland" })
+                  ]
+                }
+              ),
+              form.formState.errors.shipping_address?.[0]?.country && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.shipping_address[0]?.country?.message })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register("terms_accepted"), className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxs("label", { className: "text-sm text-(--enad-text-primary-color)", children: [
+          "I accept the",
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "/terms",
+              target: "_blank",
+              className: "text-(--enad-link-color) hover:text-(--enad-link-hover-color) hover:underline",
+              children: "terms and conditions"
+            }
+          )
+        ] })
+      ] }),
+      form.formState.errors.terms_accepted && /* @__PURE__ */ jsx("p", { className: errorClasses, children: form.formState.errors.terms_accepted.message }),
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: isPending, className: buttonBaseClasses, children: isPending ? "Signing up..." : submitText }),
+      errors.general && /* @__PURE__ */ jsx("p", { className: errorClasses + " mt-2 text-center", children: errors.general.join(", ") })
+    ] }),
+    extraLink && /* @__PURE__ */ jsx("p", { className: "text-sm text-(--enad-text-muted-color) text-center mt-6", children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: extraLink.href,
+        className: "text-(--enad-link-color) hover:text-(--enad-link-hover-color) font-medium",
+        children: extraLink.text
+      }
+    ) })
+  ] }) });
+};
+export {
+  SignupOrganisationForm
+};
+//# sourceMappingURL=signup-organisation-form.mjs.map