@incodetech/web 2.0.1 → 2.1.0-rc.0

package/dist/phone/phone.es.js

@@ -1,98 +1,242 @@
-import { n as e } from "../i18n-9s4OSqwi.js";
-import { p as t, v as n } from "../vendor-preact-D6SntenC.js";
-import { o as r } from "../hooks-BVnGysT7.js";
-import { t as i } from "../incodeComponent-C1o4M0ZK.js";
-import { r as a } from "../loadingIcon-BN5YRQUb.js";
-import { t as o } from "../page-C1yT4DLb.js";
-import { t as s } from "../button-DcCUEn2n.js";
-import { t as c } from "../otpInput-DqRA_egd.js";
-import { t as l } from "../checkbox-Cl57ltq_.js";
-import { t as u } from "../phoneInputComposed-bvWhGLFZ.js";
-import { t as d } from "../incodeModule-BqCjVgEI.js";
-import { createPhoneManager as f } from "@incodetech/core/phone";
+import { n as useTranslation } from "../i18n-CoCO2ZuN.js";
+import { h as q, v as u } from "../vendor-preact-DThS2ZQ_.js";
+import { a as isTerminalModuleState, c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "../incodeComponent-wfnHlnXx.js";
+import { r as Spacer } from "../loadingIcon-B0ysgiNq.js";
+import { t as Page } from "../page-DxGQj7Gk.js";
+import { t as Button } from "../button-CM_hgyIP.js";
+import { t as OtpInput } from "../otpInput-_JmtVwa0.js";
+import { t as Checkbox } from "../checkbox-BoeLHKgp.js";
+import { t as PhoneInputComposed } from "../phoneInputComposed-DjNdsmPE.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BUDoTwT9.js";
+import { createPhoneManager } from "@incodetech/core/phone";
 //#region src/modules/phone/phone.tsx
-function p(e) {
-	return e === "invalidPhone" ? "phone.invalidPhone" : e === "serverError" ? "phone.serverError" : e;
+/**
+* @module @incodetech/ui/phone
+*
+* Phone verification UI component for the Incode Web SDK.
+* Provides a complete, ready-to-use phone verification experience
+* with country code selection and OTP input.
+*
+* ## UI Usage
+*
+* The Phone component can be used as a React/Preact component or as a
+* Web Component (`<incode-phone>`).
+*
+* @example React/Preact component usage
+* ```tsx
+* import { Phone } from '@incodetech/ui/phone';
+* import { setup } from '@incodetech/core';
+*
+* // Configure the SDK first
+* setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*
+* function App() {
+*   const config = {
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   };
+*
+*   return (
+*     <Phone
+*       config={config}
+*       onFinish={() => console.log('Phone verified!')}
+*       onError={(error) => console.error('Error:', error)}
+*     />
+*   );
+* }
+* ```
+*
+* @example Web Component usage
+* ```html
+* <!-- Include the script -->
+* <script type="module">
+*   import '@incodetech/ui/phone';
+*   import { setup } from '@incodetech/core';
+*
+*   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*
+*   const phone = document.querySelector('incode-phone');
+*   phone.config = {
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   };
+*   phone.onFinish = () => console.log('Phone verified!');
+*   phone.onError = (error) => console.error('Error:', error);
+* <\/script>
+*
+* <incode-phone></incode-phone>
+* ```
+*
+* ## Styling
+*
+* The component uses CSS custom properties (variables) for theming.
+* Override these variables to customize the appearance:
+*
+* ```css
+* :root {
+*   --button-primary-surface-default: #0066cc;
+*   --input-border-default: #cccccc;
+*   --text-title: #333333;
+* }
+* ```
+*
+* ## Headless Alternative
+*
+* For complete control over the UI, use the headless `createPhoneManager`
+* from `@incodetech/core/phone` instead. See the core module documentation.
+*/
+function getPhoneErrorTranslationKey(error) {
+	if (error === "invalidPhone") return "phone.invalidPhone";
+	if (error === "serverError") return "phone.serverError";
+	return error;
 }
-function m(e) {
-	return e === "serverError" ? "phone.serverError" : e;
+function getOtpErrorTranslationKey(error) {
+	if (error === "serverError") return "phone.serverError";
+	return error;
 }
-var h = ({ config: i, manager: d, onFinish: h, onError: g }) => {
-	let { t: _ } = e(), [v, y] = r(() => {
-		if (d) return d;
-		if (!i) throw Error("Phone config is required");
-		return f({ config: i });
-	}, { manageLifecycle: !d }), [b, x] = t(!1), [S, C] = t(!1), [w, T] = t(!1);
-	if (v.status === "idle" || v.status === "loadingPrefill" || v.status === "loadingStartInfo") return null;
-	if (v.status === "inputting" || v.status === "submitting" || v.status === "sendingInitialOtp") {
-		let e = v.status === "submitting" || v.status === "sendingInitialOtp", t = v.status === "inputting" ? v.countryCode : "US", r = v.status === "inputting" ? v.prefilledPhone : void 0, i = v.status === "inputting" && v.phoneError ? _(p(v.phoneError)) : void 0, c = v.status === "inputting" && S && w && !b ? _("phone.invalidPhone") : void 0, d = i ?? c, f = !b || i !== void 0, m = v.status === "inputting" ? v.optinEnabled ?? !1 : !1;
-		return /* @__PURE__ */ n(o, {
+var PhoneContent = ({ config, manager: externalManager, onFinish, onError }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => {
+		if (externalManager) return externalManager;
+		if (!config) throw new Error("Phone config is required");
+		return createPhoneManager({ config });
+	}, { manageLifecycle: !externalManager });
+	const formatHintBuilder = q((example) => t("phone.formatHint", { example }), [t]);
+	const countryAriaLabelBuilder = q(({ callingCode, countryName }) => t("phone.countryCodeAriaLabel", {
+		callingCode,
+		countryName
+	}), [t]);
+	useModuleTerminalCallbacks({
+		status: state.status,
+		onFinish,
+		onError,
+		error: state.status === "error" ? state.error : void 0
+	});
+	if (state.status === "idle" || state.status === "loadingPrefill" || state.status === "loadingStartInfo") return null;
+	if (state.status === "inputting" || state.status === "submitting" || state.status === "sendingInitialOtp") {
+		const isLoading = state.status === "submitting" || state.status === "sendingInitialOtp";
+		const countryCode = state.status === "inputting" ? state.countryCode : "US";
+		const prefilledPhone = state.status === "inputting" ? state.prefilledPhone : void 0;
+		const serverPhoneError = state.status === "inputting" && state.phoneError ? t(getPhoneErrorTranslationKey(state.phoneError)) : void 0;
+		const clientPhoneError = state.status === "inputting" && state.validationErrors?.phone ? t(getPhoneErrorTranslationKey(state.validationErrors.phone)) : void 0;
+		const phoneError = serverPhoneError ?? clientPhoneError;
+		const showFormatHintInError = !serverPhoneError && !!clientPhoneError;
+		const isValid = state.status === "inputting" ? state.isValid : true;
+		const optinEnabled = state.status === "inputting" ? state.optinEnabled ?? false : false;
+		return /* @__PURE__ */ u(Page, {
 			className: "IncodePhonePage",
-			title: _("phone.verify"),
-			subtitle: _("email.willSendCode"),
+			title: t("phone.verify"),
+			subtitle: t("email.willSendCode"),
 			children: [
-				/* @__PURE__ */ n("div", {
+				/* @__PURE__ */ u("div", {
 					class: "IncodePhoneInputContainer",
 					children: [
-						/* @__PURE__ */ n(u, {
+						/* @__PURE__ */ u(PhoneInputComposed, {
 							id: "phone",
-							countryCode: t,
-							value: r,
-							error: d,
-							disabled: e,
-							onChange: (e, t) => {
-								y.setPhoneNumber(e, t), C(!0), T(!1), x(t);
+							countryCode,
+							value: prefilledPhone,
+							error: phoneError,
+							showFormatHintInError,
+							disabled: isLoading,
+							onChange: (phone, isValid) => {
+								manager.setPhoneNumber(phone, isValid);
 							},
 							onBlur: () => {
-								T(!0);
+								manager.validatePhone();
 							},
+							formatHintBuilder,
+							countryAriaLabelBuilder,
 							"data-testid": "phone-input",
-							showErrorIcon: !0
+							showErrorIcon: true
 						}),
-						/* @__PURE__ */ n(a, { size: 16 }),
-						m && /* @__PURE__ */ n(l, {
+						/* @__PURE__ */ u(Spacer, { size: 16 }),
+						optinEnabled && /* @__PURE__ */ u(Checkbox, {
 							id: "phone-optin",
-							label: _("phone.optIn"),
+							label: t("phone.optIn"),
 							size: "s",
-							onChange: (e) => y.setOptInGranted(e.target.checked)
+							onChange: (e) => manager.setOptInGranted(e.target.checked)
 						})
 					]
 				}),
-				/* @__PURE__ */ n(a, {}),
-				/* @__PURE__ */ n(s, {
-					onClick: () => y.submit(),
-					disabled: f,
-					isLoading: e,
+				/* @__PURE__ */ u(Spacer, {}),
+				/* @__PURE__ */ u(Button, {
+					onClick: () => manager.submit(),
+					disabled: !isValid,
+					isLoading,
 					"data-testid": "phone-submit",
-					children: _("common.continue")
+					children: t("common.continue")
 				})
 			]
 		}, "phone-input");
 	}
-	if (v.status === "awaitingOtp" || v.status === "verifyingOtp" || v.status === "otpError" || v.status === "resendingOtp") {
-		let e = v.status === "verifyingOtp", t = v.status === "otpError", r = v.status === "awaitingOtp", i = v.status === "resendingOtp", a = r || t || e, s = t ? _(m(v.otpError)) : void 0;
-		return /* @__PURE__ */ n(o, {
+	if (state.status === "awaitingOtp" || state.status === "verifyingOtp" || state.status === "otpError" || state.status === "resendingOtp") {
+		const isVerifying = state.status === "verifyingOtp";
+		const hasOtpError = state.status === "otpError";
+		const isAwaitingOtp = state.status === "awaitingOtp";
+		const isResending = state.status === "resendingOtp";
+		const showResendCooldown = isAwaitingOtp || hasOtpError || isVerifying;
+		const otpError = hasOtpError ? t(getOtpErrorTranslationKey(state.otpError)) : void 0;
+		const otpValidationError = "otpValidationErrors" in state && state.otpValidationErrors?.otp ? t("otp.incompleteCode", { length: state.otpLength }) : void 0;
+		const isOtpValid = "isOtpValid" in state ? state.isOtpValid : true;
+		return /* @__PURE__ */ u(Page, {
 			className: "IncodePhonePage",
-			title: _("otp.enterCodeSMS"),
-			children: /* @__PURE__ */ n(c, {
-				resendTimer: a ? v.resendTimer : 0,
-				canResend: a ? v.canResend : !1,
-				isLoading: e,
-				disabled: i || e,
-				error: s,
-				onSubmit: (e) => y.submitOtp(e),
-				onResend: () => y.resendOtp(),
-				onBack: () => y.back()
+			title: t("otp.enterCodeSMS"),
+			children: /* @__PURE__ */ u(OtpInput, {
+				value: state.otpCode,
+				otpLength: state.otpLength,
+				resendTimer: showResendCooldown ? state.resendTimer : 0,
+				canResend: showResendCooldown ? state.canResend : false,
+				isLoading: isVerifying,
+				disabled: isResending || isVerifying,
+				error: otpError,
+				validationError: otpValidationError,
+				isValid: isOtpValid,
+				onSubmit: (code) => manager.submitOtp(code),
+				onChange: (code) => manager.setOtpCode(code),
+				onValidate: () => manager.validateOtp(),
+				onResend: () => manager.resendOtp(),
+				onBack: () => manager.back()
 			})
 		}, "phone-otp");
 	}
-	return v.status === "finished" ? (h?.(), null) : (v.status === "error" && g?.(v.error), null);
-}, g = ({ config: e, manager: t, onFinish: r, onError: a }) => /* @__PURE__ */ n(i, { children: e || t ? /* @__PURE__ */ n(h, {
-	config: e,
-	manager: t,
-	onFinish: r,
-	onError: a
-}) : null });
-d(g, "incode-phone");
+	if (isTerminalModuleState(state)) return null;
+	return null;
+};
+/**
+* Phone verification UI component.
+*
+* Provides a complete phone verification experience including:
+* - Country code selector with flag emojis
+* - Phone number input with validation
+* - OTP code entry with resend functionality
+* - Loading states and error handling
+*
+* @example Basic usage
+* ```tsx
+* <Phone
+*   config={{
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   }}
+*   onFinish={() => router.push('/next-step')}
+*   onError={(err) => toast.error(err)}
+* />
+* ```
+*
+* @see {@link createPhoneManager} for headless usage
+*/
+var Phone = ({ config, manager, onFinish, onError }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(PhoneContent, {
+		config,
+		manager,
+		onFinish,
+		onError
+	}) : null });
+};
+registerIncodeModuleElement(Phone, "incode-phone");
 //#endregion
-export { g as Phone };
+export { Phone };