@splpi/estore-shared-components 7.0.1 → 7.0.2

package/dist/index.d.mts

@@ -70,10 +70,40 @@ interface LifePlanApplication1Props {
 }
 declare const LifePlanApplication1: ({ initialData, onUpdate, }: LifePlanApplication1Props) => react_jsx_runtime.JSX.Element;
 
+interface IOcrValue {
+    firstName?: string;
+    middleName?: string;
+    lastName?: string;
+    birthDate?: string;
+    idType?: string;
+    idNumber?: string;
+    addressLine?: string;
+}
+/** Shape returned by the host app's address parser (e.g. GeoApifyService.parseAddress). */
+interface IParsedAddress {
+    lot: string;
+    street: string;
+    barangay: string;
+    district: string;
+    city: string;
+    province: string;
+    zipCode: string;
+    barangayCandidates: string[];
+    districtCandidates: string[];
+    cityCandidates: string[];
+    provinceCandidates: string[];
+    geoapifyUsed: boolean;
+}
+
 interface LifePlanApplication2Props {
     onAddressUpdate?: (address: IAddress) => void;
+    /**
+     * Optional address parser from the host app (e.g. GeoApifyService.parseAddress).
+     * When provided, the scanned ID address (OCR) is split into the form fields.
+     */
+    parseAddress?: (addressLine: string) => Promise<IParsedAddress>;
 }
-declare const LifePlanApplication2: ({ onAddressUpdate, }: LifePlanApplication2Props) => react_jsx_runtime.JSX.Element;
+declare const LifePlanApplication2: ({ onAddressUpdate, parseAddress, }: LifePlanApplication2Props) => react_jsx_runtime.JSX.Element;
 
 interface LifePlanApplication3Props {
     initialData?: IEmployment;
@@ -88,20 +118,58 @@ declare const Beneficiary: ({ onUpdate }: BeneficiaryProps) => react_jsx_runtime
 
 declare const HealthDeclaration: () => react_jsx_runtime.JSX.Element;
 
-declare const LifePlanApplicationFormWrapper: ({ openSection, openSectionKey, onValidChange, }: {
+declare const LifePlanApplicationFormWrapper: ({ openSection, openSectionKey, onValidChange, parseAddress, }: {
     openSection?: string;
     openSectionKey?: number;
     onValidChange?: (valid: boolean) => void;
+    parseAddress?: (addressLine: string) => Promise<IParsedAddress>;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const LifePlanApplicationStepWrapper: () => react_jsx_runtime.JSX.Element;
+interface CartItem {
+    planDesc: string;
+    mode: string;
+    planTerm: string;
+    quantity: number;
+    price: number;
+    total: number;
+    contractPrice: number;
+    ipInstAmt?: number;
+    balance?: number;
+}
 
+type NewSalesCheckoutItem = {
+    planDesc: CartItem["planDesc"];
+    mode: CartItem["mode"];
+    ipInstAmt: number;
+    planTerm: CartItem["planTerm"];
+    quantity: number;
+};
+type NewSalesCheckoutRequest = {
+    items: NewSalesCheckoutItem[];
+    application: IApplicationData;
+};
 type SharedLifePlanApplicationProps = {
     title?: string;
     description?: string;
     onPaymentError?: (error: unknown) => void;
+    /**
+     * Called on the payment step with the cart items and application data.
+     * Must return the checkout URL (e.g. from PayMongoService.createNewSalesCheckout).
+     */
+    onCheckout?: (request: NewSalesCheckoutRequest) => Promise<string | undefined>;
+    /** Optional address parser used to fill the address form from the scanned ID. */
+    parseAddress?: (addressLine: string) => Promise<IParsedAddress>;
 };
-declare const SharedLifePlanApplication: ({ title, description, onPaymentError, }: SharedLifePlanApplicationProps) => react_jsx_runtime.JSX.Element;
+declare const SharedLifePlanApplication: ({ title, description, onPaymentError, onCheckout, parseAddress, }: SharedLifePlanApplicationProps) => react_jsx_runtime.JSX.Element;
+
+declare const LifePlanApplicationStepWrapper: (props: SharedLifePlanApplicationProps) => react_jsx_runtime.JSX.Element;
+
+declare const OCR_STORAGE_KEY = "ocrResult";
+type OcrSection = "personal" | "address";
+/** Returns the saved OCR result if it has not been applied to this section yet. */
+declare const readOcrResult: (section: OcrSection) => IOcrValue | null;
+/** Marks the OCR result as used for this section. Returns true the first time only. */
+declare const markOcrApplied: (section: OcrSection) => boolean;
 
 type QuickAction = {
     /** React Icons icon component */
@@ -185,20 +253,8 @@ interface ReusableProfileProps {
 }
 declare function ReusableProfile({ user, colorMode: controlledColorMode, onColorModeChange, initialTwoFactorEnabled, initialQuickNavHrefs, availableNavOptions, maxQuickNavItems, enableLocalStorage, storageKey, onSaveAccount, onChangePassword, onSignOut, onTwoFactorChange, onToast, }: ReusableProfileProps): react_jsx_runtime.JSX.Element;
 
-interface CartItem {
-    planDesc: string;
-    mode: string;
-    planTerm: string;
-    quantity: number;
-    price: number;
-    total: number;
-    contractPrice: number;
-    ipInstAmt?: number;
-    balance?: number;
-}
-
 declare const createEmptyApplicationData: () => IApplicationData;
 declare const loadApplicationDataFromLocalStorage: (storageKey?: string) => IApplicationData | null;
 declare const saveApplicationDataToLocalStorage: (data: IApplicationData, storageKey?: string) => void;
 
-export { Beneficiary, type BeneficiaryClass, BottomQuickActions, type CartItem, HealthDeclaration, type IAddress, type IApplicationData, type IBeneficiary, type IEmployment, type IHealthDeclaration, type IPersonalInfo, type ITransactionData, LifePlanApplication1, LifePlanApplication2, LifePlanApplication3, LifePlanApplicationFormWrapper, LifePlanApplicationStepWrapper, type NavOptionDef, NotifyInstall, type ProfileUser, type ReusableProfileProps, SharedLifePlanApplication, ReusableProfile as UserProfile, createEmptyApplicationData, loadApplicationDataFromLocalStorage, saveApplicationDataToLocalStorage };
+export { Beneficiary, type BeneficiaryClass, BottomQuickActions, type CartItem, HealthDeclaration, type IAddress, type IApplicationData, type IBeneficiary, type IEmployment, type IHealthDeclaration, type IOcrValue, type IParsedAddress, type IPersonalInfo, type ITransactionData, LifePlanApplication1, LifePlanApplication2, LifePlanApplication3, LifePlanApplicationFormWrapper, LifePlanApplicationStepWrapper, type NavOptionDef, type NewSalesCheckoutItem, type NewSalesCheckoutRequest, NotifyInstall, OCR_STORAGE_KEY, type OcrSection, type ProfileUser, type ReusableProfileProps, SharedLifePlanApplication, type SharedLifePlanApplicationProps, ReusableProfile as UserProfile, createEmptyApplicationData, loadApplicationDataFromLocalStorage, markOcrApplied, readOcrResult, saveApplicationDataToLocalStorage };

package/dist/index.d.ts

@@ -70,10 +70,40 @@ interface LifePlanApplication1Props {
 }
 declare const LifePlanApplication1: ({ initialData, onUpdate, }: LifePlanApplication1Props) => react_jsx_runtime.JSX.Element;
 
+interface IOcrValue {
+    firstName?: string;
+    middleName?: string;
+    lastName?: string;
+    birthDate?: string;
+    idType?: string;
+    idNumber?: string;
+    addressLine?: string;
+}
+/** Shape returned by the host app's address parser (e.g. GeoApifyService.parseAddress). */
+interface IParsedAddress {
+    lot: string;
+    street: string;
+    barangay: string;
+    district: string;
+    city: string;
+    province: string;
+    zipCode: string;
+    barangayCandidates: string[];
+    districtCandidates: string[];
+    cityCandidates: string[];
+    provinceCandidates: string[];
+    geoapifyUsed: boolean;
+}
+
 interface LifePlanApplication2Props {
     onAddressUpdate?: (address: IAddress) => void;
+    /**
+     * Optional address parser from the host app (e.g. GeoApifyService.parseAddress).
+     * When provided, the scanned ID address (OCR) is split into the form fields.
+     */
+    parseAddress?: (addressLine: string) => Promise<IParsedAddress>;
 }
-declare const LifePlanApplication2: ({ onAddressUpdate, }: LifePlanApplication2Props) => react_jsx_runtime.JSX.Element;
+declare const LifePlanApplication2: ({ onAddressUpdate, parseAddress, }: LifePlanApplication2Props) => react_jsx_runtime.JSX.Element;
 
 interface LifePlanApplication3Props {
     initialData?: IEmployment;
@@ -88,20 +118,58 @@ declare const Beneficiary: ({ onUpdate }: BeneficiaryProps) => react_jsx_runtime
 
 declare const HealthDeclaration: () => react_jsx_runtime.JSX.Element;
 
-declare const LifePlanApplicationFormWrapper: ({ openSection, openSectionKey, onValidChange, }: {
+declare const LifePlanApplicationFormWrapper: ({ openSection, openSectionKey, onValidChange, parseAddress, }: {
     openSection?: string;
     openSectionKey?: number;
     onValidChange?: (valid: boolean) => void;
+    parseAddress?: (addressLine: string) => Promise<IParsedAddress>;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const LifePlanApplicationStepWrapper: () => react_jsx_runtime.JSX.Element;
+interface CartItem {
+    planDesc: string;
+    mode: string;
+    planTerm: string;
+    quantity: number;
+    price: number;
+    total: number;
+    contractPrice: number;
+    ipInstAmt?: number;
+    balance?: number;
+}
 
+type NewSalesCheckoutItem = {
+    planDesc: CartItem["planDesc"];
+    mode: CartItem["mode"];
+    ipInstAmt: number;
+    planTerm: CartItem["planTerm"];
+    quantity: number;
+};
+type NewSalesCheckoutRequest = {
+    items: NewSalesCheckoutItem[];
+    application: IApplicationData;
+};
 type SharedLifePlanApplicationProps = {
     title?: string;
     description?: string;
     onPaymentError?: (error: unknown) => void;
+    /**
+     * Called on the payment step with the cart items and application data.
+     * Must return the checkout URL (e.g. from PayMongoService.createNewSalesCheckout).
+     */
+    onCheckout?: (request: NewSalesCheckoutRequest) => Promise<string | undefined>;
+    /** Optional address parser used to fill the address form from the scanned ID. */
+    parseAddress?: (addressLine: string) => Promise<IParsedAddress>;
 };
-declare const SharedLifePlanApplication: ({ title, description, onPaymentError, }: SharedLifePlanApplicationProps) => react_jsx_runtime.JSX.Element;
+declare const SharedLifePlanApplication: ({ title, description, onPaymentError, onCheckout, parseAddress, }: SharedLifePlanApplicationProps) => react_jsx_runtime.JSX.Element;
+
+declare const LifePlanApplicationStepWrapper: (props: SharedLifePlanApplicationProps) => react_jsx_runtime.JSX.Element;
+
+declare const OCR_STORAGE_KEY = "ocrResult";
+type OcrSection = "personal" | "address";
+/** Returns the saved OCR result if it has not been applied to this section yet. */
+declare const readOcrResult: (section: OcrSection) => IOcrValue | null;
+/** Marks the OCR result as used for this section. Returns true the first time only. */
+declare const markOcrApplied: (section: OcrSection) => boolean;
 
 type QuickAction = {
     /** React Icons icon component */
@@ -185,20 +253,8 @@ interface ReusableProfileProps {
 }
 declare function ReusableProfile({ user, colorMode: controlledColorMode, onColorModeChange, initialTwoFactorEnabled, initialQuickNavHrefs, availableNavOptions, maxQuickNavItems, enableLocalStorage, storageKey, onSaveAccount, onChangePassword, onSignOut, onTwoFactorChange, onToast, }: ReusableProfileProps): react_jsx_runtime.JSX.Element;
 
-interface CartItem {
-    planDesc: string;
-    mode: string;
-    planTerm: string;
-    quantity: number;
-    price: number;
-    total: number;
-    contractPrice: number;
-    ipInstAmt?: number;
-    balance?: number;
-}
-
 declare const createEmptyApplicationData: () => IApplicationData;
 declare const loadApplicationDataFromLocalStorage: (storageKey?: string) => IApplicationData | null;
 declare const saveApplicationDataToLocalStorage: (data: IApplicationData, storageKey?: string) => void;
 
-export { Beneficiary, type BeneficiaryClass, BottomQuickActions, type CartItem, HealthDeclaration, type IAddress, type IApplicationData, type IBeneficiary, type IEmployment, type IHealthDeclaration, type IPersonalInfo, type ITransactionData, LifePlanApplication1, LifePlanApplication2, LifePlanApplication3, LifePlanApplicationFormWrapper, LifePlanApplicationStepWrapper, type NavOptionDef, NotifyInstall, type ProfileUser, type ReusableProfileProps, SharedLifePlanApplication, ReusableProfile as UserProfile, createEmptyApplicationData, loadApplicationDataFromLocalStorage, saveApplicationDataToLocalStorage };
+export { Beneficiary, type BeneficiaryClass, BottomQuickActions, type CartItem, HealthDeclaration, type IAddress, type IApplicationData, type IBeneficiary, type IEmployment, type IHealthDeclaration, type IOcrValue, type IParsedAddress, type IPersonalInfo, type ITransactionData, LifePlanApplication1, LifePlanApplication2, LifePlanApplication3, LifePlanApplicationFormWrapper, LifePlanApplicationStepWrapper, type NavOptionDef, type NewSalesCheckoutItem, type NewSalesCheckoutRequest, NotifyInstall, OCR_STORAGE_KEY, type OcrSection, type ProfileUser, type ReusableProfileProps, SharedLifePlanApplication, type SharedLifePlanApplicationProps, ReusableProfile as UserProfile, createEmptyApplicationData, loadApplicationDataFromLocalStorage, markOcrApplied, readOcrResult, saveApplicationDataToLocalStorage };

package/dist/index.js

@@ -39,10 +39,13 @@ __export(index_exports, {
   LifePlanApplicationFormWrapper: () => LifePlanApplicationFormWrapper_default,
   LifePlanApplicationStepWrapper: () => LifePlanApplicationStepWrapper_default,
   NotifyInstall: () => NotifyInstall,
+  OCR_STORAGE_KEY: () => OCR_STORAGE_KEY,
   SharedLifePlanApplication: () => SharedLifePlanApplication_default,
   UserProfile: () => UserProfile_default,
   createEmptyApplicationData: () => createEmptyApplicationData,
   loadApplicationDataFromLocalStorage: () => loadApplicationDataFromLocalStorage,
+  markOcrApplied: () => markOcrApplied,
+  readOcrResult: () => readOcrResult,
   saveApplicationDataToLocalStorage: () => saveApplicationDataToLocalStorage
 });
 module.exports = __toCommonJS(index_exports);
@@ -269,6 +272,37 @@ var STANDARD_ICON_BUTTON_STYLES = {
   }
 };
 
+// src/hooks/ocrStorage.ts
+var OCR_STORAGE_KEY = "ocrResult";
+var readStored = () => {
+  try {
+    const raw = localStorage.getItem(OCR_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+};
+var readOcrResult = (section) => {
+  if (typeof window === "undefined") return null;
+  const stored = readStored();
+  if (!stored || stored.applied?.[section]) return null;
+  return stored;
+};
+var markOcrApplied = (section) => {
+  if (typeof window === "undefined") return false;
+  const stored = readStored();
+  if (!stored || stored.applied?.[section]) return false;
+  try {
+    localStorage.setItem(
+      OCR_STORAGE_KEY,
+      JSON.stringify({ ...stored, applied: { ...stored.applied, [section]: true } })
+    );
+  } catch {
+    return false;
+  }
+  return true;
+};
+
 // src/NewSaleForm/LifePlanApplication1.tsx
 var import_react4 = require("react");
 
@@ -366,11 +400,20 @@ var civilStatusCollection = (0, import_react3.createListCollection)({
     { label: "Annulled", value: "annulled" }
   ]
 });
+var applyOcr = (data, ocr) => ocr ? {
+  ...data,
+  firstName: ocr.firstName || data.firstName || "",
+  middleName: ocr.middleName || data.middleName || "",
+  lastName: ocr.lastName || data.lastName || "",
+  birthDate: ocr.birthDate || data.birthDate || "",
+  idType: ocr.idType || data.idType || "",
+  idNumber: ocr.idNumber || data.idNumber || ""
+} : data;
 var LifePlanApplication1 = ({
   initialData,
   onUpdate
 }) => {
-  const [formData, setFormData] = (0, import_react4.useState)({
+  const [formData, setFormData] = (0, import_react4.useState)(() => applyOcr({
     firstName: initialData?.firstName ?? "Juan",
     middleName: initialData?.middleName ?? "Santos",
     lastName: initialData?.lastName ?? "Dela Cruz",
@@ -387,49 +430,14 @@ var LifePlanApplication1 = ({
     emailAddress: initialData?.emailAddress ?? "juan.delacruz@example.com",
     mailingAddress: initialData?.mailingAddress ?? "123 Mabini Street, Barangay San Antonio, Makati City",
     landLineNumber: initialData?.landLineNumber ?? "02-8123-4567"
-  });
+  }, readOcrResult("personal")));
   const updateFormData = (nextData) => {
     setFormData(nextData);
     onUpdate?.(nextData);
   };
   (0, import_react4.useEffect)(() => {
-    const OCRValue = typeof window === "undefined" ? null : localStorage.getItem("ocrResult");
-    if (OCRValue != null) {
-      try {
-        const ocrData = JSON.parse(OCRValue);
-        let formattedBirthDate = "";
-        if (typeof ocrData?.birthDate === "string") {
-          const [month, day, year] = ocrData.birthDate.split("/").map((part) => part.trim());
-          if (month && day && year) {
-            formattedBirthDate = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
-          }
-        }
-        let mappedIdType = "";
-        if (ocrData?.idType) {
-          const normalizedIdType = ocrData.idType.toLowerCase().replace(/\s+/g, "_").replace(/'/g, "");
-          if (normalizedIdType.includes("passport")) {
-            mappedIdType = "passport";
-          } else if (normalizedIdType.includes("driver")) {
-            mappedIdType = "driver_license";
-          } else if (normalizedIdType.includes("national") || normalizedIdType.includes("id")) {
-            mappedIdType = "national_id";
-          }
-        }
-        const updatedData = {
-          ...formData,
-          firstName: ocrData?.firstName || "",
-          lastName: ocrData?.lastName || "",
-          middleName: ocrData?.middleName || "",
-          birthDate: formattedBirthDate || "",
-          idType: mappedIdType || ""
-        };
-        updateFormData(updatedData);
-      } catch (e) {
-        console.error("Failed to parse OCR value:", e);
-        localStorage.removeItem("ocrResult");
-      }
-    }
-  }, []);
+    if (markOcrApplied("personal")) onUpdate?.(formData);
+  }, [formData, onUpdate]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     import_react3.Grid,
     {
@@ -878,22 +886,45 @@ var cityOptions = [
   "Bongao",
   "Ipil"
 ].map((city) => ({ label: city, value: city }));
-var districtOptions = cityOptions;
-var barangayOptions = cityOptions;
 var provinceCollection = (0, import_react5.createListCollection)({ items: provinceOptions });
 var cityCollection = (0, import_react5.createListCollection)({ items: cityOptions });
-var districtCollection = (0, import_react5.createListCollection)({ items: districtOptions });
-var barangayCollection = (0, import_react5.createListCollection)({ items: barangayOptions });
+var normalizePlace = (value) => value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/^city of\s+/, "").replace(/\s+city$/, "").replace(/[^a-z0-9]/g, "");
+var matchOption = (candidates, options) => {
+  for (const candidate of candidates ?? []) {
+    const key = normalizePlace(candidate);
+    const match = options.find(
+      (option) => normalizePlace(option.value) === key
+    );
+    if (match) return match.value;
+  }
+  return "";
+};
 var LifePlanApplication2 = ({
-  onAddressUpdate
+  onAddressUpdate,
+  parseAddress
 }) => {
-  const OCRValue = typeof window === "undefined" ? null : localStorage.getItem("ocrResult");
-  const [lot, setLot] = (0, import_react6.useState)("123");
-  const [street, setStreet] = (0, import_react6.useState)("Mabini Street");
-  const [city, setCity] = (0, import_react6.useState)("Makati");
-  const [province, setProvince] = (0, import_react6.useState)("Metro Manila");
-  const [district, setDistrict] = (0, import_react6.useState)("Taguig");
-  const [barangay, setBarangay] = (0, import_react6.useState)("San Juan");
+  const [lot, setLot] = (0, import_react6.useState)("");
+  const [street, setStreet] = (0, import_react6.useState)("");
+  const [city, setCity] = (0, import_react6.useState)("");
+  const [province, setProvince] = (0, import_react6.useState)("");
+  const [district, setDistrict] = (0, import_react6.useState)("");
+  const [barangay, setBarangay] = (0, import_react6.useState)("");
+  (0, import_react6.useEffect)(() => {
+    if (!parseAddress) return;
+    const ocr = readOcrResult("address");
+    if (!ocr?.addressLine) return;
+    markOcrApplied("address");
+    parseAddress(ocr.addressLine).then((result) => {
+      setLot(result.lot ?? "");
+      setStreet(result.street ?? "");
+      setProvince(matchOption(result.provinceCandidates, provinceOptions));
+      setCity(matchOption(result.cityCandidates, cityOptions));
+      setDistrict(result.district ?? "");
+      setBarangay(result.barangay ?? "");
+    }).catch((error) => {
+      console.error("Error parsing address:", error);
+    });
+  }, [parseAddress]);
   (0, import_react6.useEffect)(() => {
     onAddressUpdate?.({
       lot,
@@ -949,44 +980,22 @@ var LifePlanApplication2 = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          import_react5.Select.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          FloatingLabelInput,
           {
-            value: [district],
-            onValueChange: (e) => setDistrict(e.value[0] ?? ""),
-            collection: districtCollection,
-            width: "100%",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.HiddenSelect, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Select.Control, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.ValueText, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.IndicatorGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Indicator, {}) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Content, { children: districtOptions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Select.Item, { item, children: [
-                item.label,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.ItemIndicator, {})
-              ] }, item.value)) }) }) })
-            ]
+            id: "district",
+            label: "District",
+            value: district,
+            onChange: (e) => setDistrict(e.target.value)
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          import_react5.Select.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          FloatingLabelInput,
           {
-            value: [barangay],
-            onValueChange: (e) => setBarangay(e.value[0] ?? ""),
-            collection: barangayCollection,
-            width: "100%",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.HiddenSelect, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Select.Control, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.ValueText, { placeholder: "Select Barangay" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.IndicatorGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Indicator, {}) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Content, { children: barangayOptions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Select.Item, { item, children: [
-                item.label,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.ItemIndicator, {})
-              ] }, item.value)) }) }) })
-            ]
+            id: "barangay",
+            label: "Barangay",
+            value: barangay,
+            onChange: (e) => setBarangay(e.target.value)
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2260,7 +2269,8 @@ var isEmploymentComplete = (e) => !!e && [
 var LifePlanApplicationFormWrapper = ({
   openSection,
   openSectionKey,
-  onValidChange
+  onValidChange,
+  parseAddress
 }) => {
   const [applicationData, setApplicationData] = (0, import_react18.useState)(
     createEmptyApplicationData
@@ -2335,7 +2345,13 @@ var LifePlanApplicationFormWrapper = ({
       description: "Where you currently live",
       value: "address",
       complete: isAddressComplete(applicationData.address),
-      page: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LifePlanApplication2_default, { onAddressUpdate: handleAddressUpdate })
+      page: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        LifePlanApplication2_default,
+        {
+          onAddressUpdate: handleAddressUpdate,
+          ...parseAddress ? { parseAddress } : {}
+        }
+      )
     },
     {
       icon: import_io.IoIosInformationCircleOutline,
@@ -3076,6 +3092,9 @@ var createLifePlanSteps = (confirmationProps) => [
       if (confirmationProps?.onApplicationValidChange !== void 0) {
         applicationFormWrapperProps.onValidChange = confirmationProps.onApplicationValidChange;
       }
+      if (confirmationProps?.parseAddress !== void 0) {
+        applicationFormWrapperProps.parseAddress = confirmationProps.parseAddress;
+      }
       return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LifePlanApplicationFormWrapper_default, { ...applicationFormWrapperProps });
     })()
   },
@@ -3459,10 +3478,20 @@ var horizontal_stepper_default = HorizontalStepper;
 
 // src/NewSaleForm/SharedLifePlanApplication.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var safeParse = (value) => {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+};
 var SharedLifePlanApplication = ({
   title = "Life Plan Application",
   description = "Please fill out the form below to apply for a life plan.",
-  onPaymentError
+  onPaymentError,
+  onCheckout,
+  parseAddress
 }) => {
   const [currentStep, setCurrentStep] = (0, import_react27.useState)(0);
   const [loading, setLoading] = (0, import_react27.useState)(false);
@@ -3475,6 +3504,7 @@ var SharedLifePlanApplication = ({
     ...applicationSection ? { applicationSection } : {},
     applicationSectionKey,
     onApplicationValidChange: setApplicationValid,
+    ...parseAddress ? { parseAddress } : {},
     onEdit: (section) => {
       setApplicationSection(section ?? "personal");
       setApplicationSectionKey((key) => key + 1);
@@ -3485,6 +3515,38 @@ var SharedLifePlanApplication = ({
   const handleCheckout = async () => {
     if (!allAgreementsAccepted) return;
     setLoading(true);
+    try {
+      if (!onCheckout) {
+        throw new Error("onCheckout prop is not provided");
+      }
+      const checkoutRaw = sessionStorage.getItem("CheckoutCart");
+      const cartRaw = sessionStorage.getItem("Cart");
+      const parsed = safeParse(checkoutRaw) ?? safeParse(cartRaw);
+      const items = Array.isArray(parsed) ? parsed : parsed ? [parsed] : [];
+      if (items.length === 0) {
+        throw new Error("No items to checkout");
+      }
+      const applicationData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+      const checkoutPayload = items.map((item) => ({
+        planDesc: item.planDesc,
+        mode: item.mode,
+        ipInstAmt: Number(item.price),
+        planTerm: item.planTerm,
+        quantity: item.quantity ?? 1
+      }));
+      const checkoutUrl = await onCheckout({
+        items: checkoutPayload,
+        application: applicationData
+      });
+      if (!checkoutUrl) throw new Error("Checkout URL not found");
+      window.location.href = checkoutUrl;
+    } catch (error) {
+      console.error(error);
+      onPaymentError?.(error);
+      alert("Failed to proceed to payment");
+    } finally {
+      setLoading(false);
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react26.Box, { w: "full", overflowX: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     horizontal_stepper_default,
@@ -3502,8 +3564,8 @@ var SharedLifePlanApplication_default = SharedLifePlanApplication;
 
 // src/NewSaleForm/LifePlanApplicationStepWrapper.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var LifePlanApplicationStepWrapper = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SharedLifePlanApplication_default, {});
+var LifePlanApplicationStepWrapper = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SharedLifePlanApplication_default, { ...props });
 };
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
@@ -5475,10 +5537,13 @@ var UserProfile_default = ReusableProfile;
   LifePlanApplicationFormWrapper,
   LifePlanApplicationStepWrapper,
   NotifyInstall,
+  OCR_STORAGE_KEY,
   SharedLifePlanApplication,
   UserProfile,
   createEmptyApplicationData,
   loadApplicationDataFromLocalStorage,
+  markOcrApplied,
+  readOcrResult,
   saveApplicationDataToLocalStorage
 });
 //# sourceMappingURL=index.js.map