@enadhq/enad-react-sdk 1.0.0 → 1.1.0

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

@@ -0,0 +1,173 @@
+"use client";
+import { StorefrontButton } from "../../storefront/primitives/button.mjs";
+import { StorefrontInput } from "../../storefront/primitives/input.mjs";
+import { Checkbox } from "../../ui/checkbox.mjs";
+import { registerUserAction } from "../actions/registerUserAction.mjs";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/user/components/signup-form.tsx
+const DEFAULT_SIGNUP_LABELS = {
+	title: "Create your account",
+	subtitle: "Sign up to get started",
+	firstName: "First Name",
+	firstNamePlaceholder: "John",
+	lastName: "Last Name",
+	lastNamePlaceholder: "Doe",
+	email: "Email",
+	emailPlaceholder: "you@example.com",
+	password: "Password",
+	passwordPlaceholder: "••••••••",
+	acceptTerms: "I accept the",
+	termsLinkText: "terms and conditions",
+	submit: "Sign Up",
+	signingUp: "Signing up..."
+};
+function SignupFormFields({ firstName, firstNamePlaceholder, lastName, lastNamePlaceholder, email, emailPlaceholder, password, passwordPlaceholder, errors }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(StorefrontInput, {
+			type: "text",
+			id: "firstName",
+			name: "firstName",
+			required: true,
+			label: firstName,
+			placeholder: firstNamePlaceholder,
+			error: errors.firstName?.join(", ")
+		}),
+		/* @__PURE__ */ jsx(StorefrontInput, {
+			type: "text",
+			id: "lastName",
+			name: "lastName",
+			required: true,
+			label: lastName,
+			placeholder: lastNamePlaceholder,
+			error: errors.lastName?.join(", ")
+		}),
+		/* @__PURE__ */ jsx(StorefrontInput, {
+			type: "email",
+			id: "email",
+			name: "email",
+			required: true,
+			label: email,
+			placeholder: emailPlaceholder,
+			error: errors.email?.join(", ")
+		}),
+		/* @__PURE__ */ jsx(StorefrontInput, {
+			type: "password",
+			id: "password",
+			name: "password",
+			required: true,
+			label: password,
+			placeholder: passwordPlaceholder,
+			error: errors.password?.join(", ")
+		})
+	] });
+}
+function SignupTerms({ acceptTerms, termsLinkText, errors }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			id: "acceptTerms",
+			name: "acceptTerms",
+			required: true,
+			"aria-describedby": errors.acceptTerms ? "acceptTerms-error" : void 0
+		}), /* @__PURE__ */ jsxs("label", {
+			htmlFor: "acceptTerms",
+			className: "ml-2 text-sm text-(--enad-text-primary-color)",
+			children: [
+				acceptTerms,
+				" ",
+				/* @__PURE__ */ jsx("a", {
+					href: "/terms",
+					target: "_blank",
+					className: "text-(--enad-link-color) hover:text-(--enad-link-hover-color) hover:underline",
+					children: termsLinkText
+				})
+			]
+		})]
+	}), errors.acceptTerms && /* @__PURE__ */ jsx("p", {
+		id: "acceptTerms-error",
+		role: "alert",
+		className: "text-(--enad-error-color) text-sm mt-1",
+		children: errors.acceptTerms.join(", ")
+	})] });
+}
+const SignupForm = ({ labels = {}, extraLink = {
+	href: "/login",
+	text: "Already have an account? Sign in"
+}, successRedirect = "/" }) => {
+	const { title, subtitle, firstName, firstNamePlaceholder, lastName, lastNamePlaceholder, email, emailPlaceholder, password, passwordPlaceholder, acceptTerms, termsLinkText, submit, signingUp } = {
+		...DEFAULT_SIGNUP_LABELS,
+		...labels
+	};
+	const [errors, setErrors] = useState({});
+	const [isPending, setIsPending] = useState(false);
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setIsPending(true);
+		setErrors({});
+		const res = await registerUserAction(new FormData(e.currentTarget), { redirectPath: successRedirect });
+		if (res?.errors) setErrors(res.errors);
+		setIsPending(false);
+	};
+	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-card-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: handleSubmit,
+					className: "space-y-5",
+					children: [
+						/* @__PURE__ */ jsx(SignupFormFields, {
+							firstName,
+							firstNamePlaceholder,
+							lastName,
+							lastNamePlaceholder,
+							email,
+							emailPlaceholder,
+							password,
+							passwordPlaceholder,
+							errors
+						}),
+						/* @__PURE__ */ jsx(SignupTerms, {
+							acceptTerms,
+							termsLinkText,
+							errors
+						}),
+						/* @__PURE__ */ jsx(StorefrontButton, {
+							type: "submit",
+							disabled: isPending,
+							className: "w-full",
+							children: isPending ? signingUp : submit
+						}),
+						errors.general && /* @__PURE__ */ jsx("p", {
+							role: "alert",
+							className: "text-(--enad-error-color) text-sm mt-2 text-center",
+							children: errors.general.join(", ")
+						})
+					]
+				}),
+				extraLink && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-(--enad-text-muted-color) text-center mt-2",
+					children: /* @__PURE__ */ jsx("a", {
+						href: extraLink.href,
+						className: "text-(--enad-link-color) hover:text-(--enad-link-hover-color) font-medium",
+						children: extraLink.text
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { SignupForm };
+
+//# sourceMappingURL=signup-form.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"signup-form.mjs","names":[],"sources":["../../../../src/client/user/components/signup-form.tsx"],"sourcesContent":["\"use client\"\n\nimport React, { useState, type FormEvent } from \"react\"\nimport { registerUserAction } from \"../actions/registerUserAction\"\nimport { StorefrontInput } from \"../../storefront/primitives/input\"\nimport { StorefrontButton } from \"../../storefront/primitives/button\"\nimport { Checkbox } from \"../../ui/checkbox\"\n\ninterface SignupFormProps {\n  labels?: {\n    title?: string\n    subtitle?: string\n    firstName?: string\n    firstNamePlaceholder?: string\n    lastName?: string\n    lastNamePlaceholder?: string\n    email?: string\n    emailPlaceholder?: string\n    password?: string\n    passwordPlaceholder?: string\n    acceptTerms?: string\n    termsLinkText?: string\n    submit?: string\n    signingUp?: string\n  }\n  extraLink?: {\n    href: string\n    text: string\n  }\n  successRedirect: string\n}\n\ninterface FormErrors {\n  firstName?: string[]\n  lastName?: string[]\n  email?: string[]\n  password?: string[]\n  acceptTerms?: string[]\n  general?: string[]\n}\n\nconst DEFAULT_SIGNUP_LABELS = {\n  title: \"Create your account\",\n  subtitle: \"Sign up to get started\",\n  firstName: \"First Name\",\n  firstNamePlaceholder: \"John\",\n  lastName: \"Last Name\",\n  lastNamePlaceholder: \"Doe\",\n  email: \"Email\",\n  emailPlaceholder: \"you@example.com\",\n  password: \"Password\",\n  passwordPlaceholder: \"••••••••\",\n  acceptTerms: \"I accept the\",\n  termsLinkText: \"terms and conditions\",\n  submit: \"Sign Up\",\n  signingUp: \"Signing up...\",\n} as const\n\nfunction SignupFormFields({\n  firstName,\n  firstNamePlaceholder,\n  lastName,\n  lastNamePlaceholder,\n  email,\n  emailPlaceholder,\n  password,\n  passwordPlaceholder,\n  errors,\n}: {\n  firstName: string\n  firstNamePlaceholder: string\n  lastName: string\n  lastNamePlaceholder: string\n  email: string\n  emailPlaceholder: string\n  password: string\n  passwordPlaceholder: string\n  errors: FormErrors\n}) {\n  return (\n    <>\n      <StorefrontInput\n        type=\"text\"\n        id=\"firstName\"\n        name=\"firstName\"\n        required\n        label={firstName}\n        placeholder={firstNamePlaceholder}\n        error={errors.firstName?.join(\", \")}\n      />\n\n      <StorefrontInput\n        type=\"text\"\n        id=\"lastName\"\n        name=\"lastName\"\n        required\n        label={lastName}\n        placeholder={lastNamePlaceholder}\n        error={errors.lastName?.join(\", \")}\n      />\n\n      <StorefrontInput\n        type=\"email\"\n        id=\"email\"\n        name=\"email\"\n        required\n        label={email}\n        placeholder={emailPlaceholder}\n        error={errors.email?.join(\", \")}\n      />\n\n      <StorefrontInput\n        type=\"password\"\n        id=\"password\"\n        name=\"password\"\n        required\n        label={password}\n        placeholder={passwordPlaceholder}\n        error={errors.password?.join(\", \")}\n      />\n    </>\n  )\n}\n\nfunction SignupTerms({\n  acceptTerms,\n  termsLinkText,\n  errors,\n}: {\n  acceptTerms: string\n  termsLinkText: string\n  errors: FormErrors\n}) {\n  return (\n    <>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox\n          id=\"acceptTerms\"\n          name=\"acceptTerms\"\n          required\n          aria-describedby={errors.acceptTerms ? \"acceptTerms-error\" : undefined}\n        />\n        <label htmlFor=\"acceptTerms\" className=\"ml-2 text-sm text-(--enad-text-primary-color)\">\n          {acceptTerms}{\" \"}\n          <a\n            href=\"/terms\"\n            target=\"_blank\"\n            className=\"text-(--enad-link-color) hover:text-(--enad-link-hover-color) hover:underline\"\n          >\n            {termsLinkText}\n          </a>\n        </label>\n      </div>\n      {errors.acceptTerms && (\n        <p id=\"acceptTerms-error\" role=\"alert\" className=\"text-(--enad-error-color) text-sm mt-1\">\n          {errors.acceptTerms.join(\", \")}\n        </p>\n      )}\n    </>\n  )\n}\n\nexport const SignupForm: React.FC<SignupFormProps> = ({\n  labels = {},\n  extraLink = { href: \"/login\", text: \"Already have an account? Sign in\" },\n  successRedirect = \"/\",\n}) => {\n  const {\n    title, subtitle,\n    firstName, firstNamePlaceholder,\n    lastName, lastNamePlaceholder,\n    email, emailPlaceholder,\n    password, passwordPlaceholder,\n    acceptTerms, termsLinkText,\n    submit, signingUp,\n  } = { ...DEFAULT_SIGNUP_LABELS, ...labels }\n\n  const [errors, setErrors] = useState<FormErrors>({})\n  const [isPending, setIsPending] = useState(false)\n\n  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    setIsPending(true)\n    setErrors({})\n\n    const formData = new FormData(e.currentTarget)\n    const res = await registerUserAction(formData, { redirectPath: successRedirect })\n\n    if (res?.errors) {\n      setErrors(res.errors)\n    }\n\n    setIsPending(false)\n  }\n\n  return (\n    <main className=\"flex items-center justify-center px-4\">\n      <div className=\"w-full max-w-md bg-(--enad-surface) shadow-lg p-8 border border-(--enad-border-color) rounded-(--enad-card-radius)\">\n        <h2 className=\"text-2xl font-semibold mb-2 text-center text-(--enad-text-primary-color)\">\n          {title}\n        </h2>\n        <p className=\"text-sm mb-8 text-center text-(--enad-text-muted-color)\">{subtitle}</p>\n\n        <form onSubmit={handleSubmit} className=\"space-y-5\">\n          <SignupFormFields\n            firstName={firstName}\n            firstNamePlaceholder={firstNamePlaceholder}\n            lastName={lastName}\n            lastNamePlaceholder={lastNamePlaceholder}\n            email={email}\n            emailPlaceholder={emailPlaceholder}\n            password={password}\n            passwordPlaceholder={passwordPlaceholder}\n            errors={errors}\n          />\n\n          <SignupTerms acceptTerms={acceptTerms} termsLinkText={termsLinkText} errors={errors} />\n\n          <StorefrontButton type=\"submit\" disabled={isPending} className=\"w-full\">\n            {isPending ? signingUp : submit}\n          </StorefrontButton>\n\n          {errors.general && (\n            <p role=\"alert\" className=\"text-(--enad-error-color) text-sm mt-2 text-center\">\n              {errors.general.join(\", \")}\n            </p>\n          )}\n        </form>\n\n        {extraLink && (\n          <p className=\"text-sm text-(--enad-text-muted-color) text-center mt-2\">\n            <a\n              href={extraLink.href}\n              className=\"text-(--enad-link-color) hover:text-(--enad-link-hover-color) font-medium\"\n            >\n              {extraLink.text}\n            </a>\n          </p>\n        )}\n      </div>\n    </main>\n  )\n}\n"],"mappings":"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"}

package/dist/client/user/components/signup-organisation-form.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+
+//#region src/client/user/components/signup-organisation-form.d.ts
+declare const DEFAULT_LABELS: {
+  readonly title: "Create your organisation account";
+  readonly subtitle: "Sign up to get started";
+  readonly submit: "Sign Up";
+  readonly signingUp: "Signing up...";
+  readonly contactPersonSection: "Contact Person";
+  readonly companyInfoSection: "Company Information";
+  readonly billingAddressSection: "Billing Address";
+  readonly shippingAddressSection: "Shipping Address";
+  readonly firstName: "First Name";
+  readonly lastName: "Last Name";
+  readonly email: "Email";
+  readonly phoneNumber: "Phone Number";
+  readonly password: "Password";
+  readonly confirmPassword: "Confirm Password";
+  readonly companyName: "Company Name";
+  readonly organisationNumber: "Organisation Number";
+  readonly taxIdVatNumber: "Tax ID/VAT Number";
+  readonly companyEmail: "Company Email";
+  readonly companyPhone: "Company Phone";
+  readonly invoiceEmail: "Invoice Email";
+  readonly contactName: "Contact Name";
+  readonly externalRef: "External Reference";
+  readonly streetAddress: "Street Address";
+  readonly houseNumber: "House Number";
+  readonly coAddress: "Co Address";
+  readonly postalCode: "Postal Code";
+  readonly city: "City";
+  readonly country: "Country";
+  readonly sameBillingAsShipping: "Same address as billing address";
+  readonly emailNotifications: "Accept email notifications";
+  readonly smsNotifications: "Accept SMS notifications";
+  readonly postalNotifications: "Accept postal notifications";
+  readonly communicationPreferences: "Communication Preferences";
+  readonly acceptTerms: "I accept the";
+  readonly termsLinkText: "terms and conditions";
+  readonly verifyEmailTitle: "Verify your email";
+  readonly verifyEmailMessage: "Please check your email to verify your account.";
+};
+interface SignupOrganisationFormProps {
+  labels?: { [K in keyof typeof DEFAULT_LABELS]?: string };
+  extraLink?: {
+    href: string;
+    text: string;
+  };
+  successRedirect?: string;
+  organisationStatus?: "active" | "pending";
+  defaultMarket?: string;
+  defaultLanguage?: string;
+  defaultCountry?: string;
+  defaultStoreGroup?: string;
+}
+declare const SignupOrganisationForm: React.FC<SignupOrganisationFormProps>;
+//#endregion
+export { SignupOrganisationForm };
+//# sourceMappingURL=signup-organisation-form.d.ts.map

package/dist/client/user/components/signup-organisation-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signup-organisation-form.d.ts","names":[],"sources":["../../../../src/client/user/components/signup-organisation-form.tsx"],"mappings":";;;cA2aM,cAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAgDI,2BAAA;EACR,MAAA,wBACqB,cAAA;EAErB,SAAA;IACE,IAAA;IACA,IAAA;EAAA;EAEF,eAAA;EACA,kBAAA;EACA,aAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;AAAA;AAAA,cAmIW,sBAAA,EAAwB,KAAA,CAAM,EAAA,CAAG,2BAAA"}