@splpi/estore-shared-components 0.0.6 → 7.0.1

package/dist/index.mjs

@@ -6,7 +6,6 @@ import {
   Select,
   createListCollection
 } from "@chakra-ui/react";
-import { useState as useState2, useEffect } from "react";
 
 // src/lib/theme/layout-tokens.ts
 var RESPONSIVE_LAYOUT_TOKENS = {
@@ -227,6 +226,9 @@ var STANDARD_ICON_BUTTON_STYLES = {
   }
 };
 
+// src/NewSaleForm/LifePlanApplication1.tsx
+import { useEffect, useState as useState2 } from "react";
+
 // src/NewSaleForm/ui/FloatingLabelInput.tsx
 import {
   Box,
@@ -358,8 +360,13 @@ var LifePlanApplication1 = ({
     if (OCRValue != null) {
       try {
         const ocrData = JSON.parse(OCRValue);
-        const [month, day, year] = ocrData.birthDate.split("/").map((part) => part.trim());
-        const formattedBirthDate = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+        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, "");
@@ -618,7 +625,37 @@ import {
   Portal,
   Field as Field3
 } from "@chakra-ui/react";
-import { useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+
+// src/lib/theme/brand-colors.ts
+var BRAND_COLORS = {
+  primaryGreen: "#109448",
+  darkGreen: "#006838",
+  softGreen: "#92DDBF",
+  pastelPeaGreen: "#ACD6A6",
+  seafoamGreen: "#92DDBF",
+  lightCyan: "#D3EDEE",
+  successBg: "#F0FDF4",
+  warningBg: "#FFF7ED",
+  warningText: "#F1592B",
+  warningBorder: "#F4845F",
+  errorBg: "#FEF2F2",
+  destructiveRed: "#BF1F2F",
+  errorRed: "#EF4444",
+  neutralText: "#22223B",
+  neutralBorder: "#E5E7EB",
+  mutedBg: "#F3F4F6",
+  subtleBg: "#F9FAFB",
+  white: "#FFFFFF",
+  black: "#000000",
+  grey: "#808080",
+  ashWhite: "#ECECEC",
+  gold: "#CBA135",
+  brightGold: "#FFD026",
+  paleGold: "#FFF48E"
+};
+
+// src/NewSaleForm/LifePlanApplication2.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var provinceOptions = [
   "Abra",
@@ -828,6 +865,16 @@ var LifePlanApplication2 = ({
   const [province, setProvince] = useState3("Metro Manila");
   const [district, setDistrict] = useState3("Taguig");
   const [barangay, setBarangay] = useState3("San Juan");
+  useEffect2(() => {
+    onAddressUpdate?.({
+      lot,
+      street,
+      barangay,
+      district,
+      city,
+      province
+    });
+  }, [lot, street, barangay, city, province, district]);
   return /* @__PURE__ */ jsx3(
     Box2,
     {
@@ -1068,7 +1115,7 @@ import {
   useBreakpointValue,
   Button
 } from "@chakra-ui/react";
-import { useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { FaRegTrashAlt } from "react-icons/fa";
 import { LuPencil } from "react-icons/lu";
 import {
@@ -1099,7 +1146,66 @@ var RowItem = ({
   ),
   /* @__PURE__ */ jsx5(Text3, { fontWeight: "medium", textAlign: "right", whiteSpace: "nowrap", children: value ?? "-" })
 ] });
-var row_item_default = RowItem;
+
+// src/lib/applicationData.ts
+var LIFE_PLAN_APPLICATION_KEY = "LifePlanApplication";
+var createEmptyApplicationData = () => ({
+  personalInfo: {
+    firstName: "",
+    middleName: "",
+    lastName: "",
+    suffix: "",
+    birthDate: "",
+    idType: "",
+    idNumber: "",
+    height: 0,
+    weight: 0,
+    gender: "",
+    civilStatus: "",
+    nationality: "",
+    mobileNumber: "",
+    emailAddress: "",
+    mailingAddress: "",
+    landLineNumber: ""
+  },
+  address: {
+    lot: "",
+    street: "",
+    barangay: "",
+    district: "",
+    city: "",
+    province: ""
+  },
+  employment: {
+    occupation: "",
+    employerName: "",
+    employmentStatus: "",
+    officeAddress: "",
+    TIN: "",
+    SSS: "",
+    sourceOfIncome: ""
+  },
+  beneficiaries: [],
+  healthDeclaration: {
+    healthDeclaration1: false,
+    healthDeclaration2: false,
+    healthDeclaration3: false,
+    healthDeclaration4: false
+  }
+});
+var loadApplicationDataFromLocalStorage = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = window.localStorage.getItem(storageKey);
+    return stored ? JSON.parse(stored) : null;
+  } catch {
+    return null;
+  }
+};
+var saveApplicationDataToLocalStorage = (data, storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(storageKey, JSON.stringify(data));
+};
 
 // src/NewSaleForm/beneficiary.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -1120,7 +1226,7 @@ var relationshipTypes = createListCollection3({
 });
 var ReviewRows = ({
   rows
-}) => /* @__PURE__ */ jsx6(VStack3, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ jsx6(row_item_default, { label: row.label, value: row.value }, row.label)) });
+}) => /* @__PURE__ */ jsx6(VStack3, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ jsx6(RowItem, { label: row.label, value: row.value }, row.label)) });
 var Beneficiary = ({ onUpdate }) => {
   const isMobile = useBreakpointValue({ base: true, md: false });
   const [principalBeneficiaries, setPrincipalBeneficiaries] = useState4([]);
@@ -1146,6 +1252,65 @@ var Beneficiary = ({ onUpdate }) => {
     relationship: "",
     beneficiaryClass: "principal"
   });
+  const syncBeneficiaries = (principal, contingent) => {
+    const allBeneficiaries = [...principal, ...contingent];
+    onUpdate?.(
+      principal.length > 0 ? principal[0] : void 0,
+      contingent.length > 0 ? contingent[0] : void 0,
+      allBeneficiaries
+    );
+    const currentData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+    const {
+      principalBeneficiary: _oldPrincipal,
+      contingentBeneficiary: _oldContingent,
+      ...restData
+    } = currentData;
+    saveApplicationDataToLocalStorage({
+      ...restData,
+      beneficiaries: allBeneficiaries,
+      ...principal[0] ? { principalBeneficiary: principal[0] } : {},
+      ...contingent[0] ? { contingentBeneficiary: contingent[0] } : {}
+    });
+  };
+  useEffect3(() => {
+    const timeoutId = window.setTimeout(() => {
+      const currentData = loadApplicationDataFromLocalStorage();
+      if (!currentData) return;
+      const storedBeneficiaries = currentData.beneficiaries ?? [];
+      let principalFromStorage = storedBeneficiaries.filter(
+        (beneficiary) => beneficiary.beneficiaryClass === "principal"
+      );
+      let contingentFromStorage = storedBeneficiaries.filter(
+        (beneficiary) => beneficiary.beneficiaryClass === "contingent"
+      );
+      if (storedBeneficiaries.length === 0) {
+        if (currentData.principalBeneficiary) {
+          principalFromStorage = [
+            {
+              ...currentData.principalBeneficiary,
+              beneficiaryClass: currentData.principalBeneficiary.beneficiaryClass || "principal"
+            }
+          ];
+        }
+        if (currentData.contingentBeneficiary) {
+          contingentFromStorage = [
+            {
+              ...currentData.contingentBeneficiary,
+              beneficiaryClass: currentData.contingentBeneficiary.beneficiaryClass || "contingent"
+            }
+          ];
+        }
+      }
+      setPrincipalBeneficiaries(principalFromStorage);
+      setContingentBeneficiaries(contingentFromStorage);
+      onUpdate?.(
+        principalFromStorage.length > 0 ? principalFromStorage[0] : void 0,
+        contingentFromStorage.length > 0 ? contingentFromStorage[0] : void 0,
+        [...principalFromStorage, ...contingentFromStorage]
+      );
+    }, 0);
+    return () => window.clearTimeout(timeoutId);
+  }, [onUpdate]);
   const handleSaveAddBeneficiary = () => {
     if (!addFormBeneficiary.firstName || !addFormBeneficiary.lastName || !addFormBeneficiary.birthDate || !addFormBeneficiary.relationship || !addFormBeneficiary.address) {
       alert("Please fill in all required fields");
@@ -1171,6 +1336,7 @@ var Beneficiary = ({ onUpdate }) => {
     });
     setAddDialogOpen(false);
     console.log("Beneficiary added:", addFormBeneficiary);
+    syncBeneficiaries(newPrincipal, newContingent);
   };
   const formatFullName = (beneficiary) => {
     return [
@@ -1194,9 +1360,6 @@ var Beneficiary = ({ onUpdate }) => {
     setFormBeneficiary({ ...beneficiary });
     setEditDialogOpen(true);
   };
-  function handleDeleteBeneficiary(arg0, idx) {
-    throw new Error("Function not implemented.");
-  }
   const handleSaveEdit = () => {
     if (!selectedBeneficiary) return;
     let updatedPrincipal = principalBeneficiaries;
@@ -1212,9 +1375,26 @@ var Beneficiary = ({ onUpdate }) => {
       );
       setContingentBeneficiaries(updatedContingent);
     }
+    syncBeneficiaries(updatedPrincipal, updatedContingent);
     setEditDialogOpen(false);
     setSelectedBeneficiary(null);
   };
+  const handleDeleteBeneficiary = (type, index) => {
+    let updatedPrincipal = principalBeneficiaries;
+    let updatedContingent = contingentBeneficiaries;
+    if (type === "principal") {
+      updatedPrincipal = principalBeneficiaries.filter(
+        (_, beneficiaryIndex) => beneficiaryIndex !== index
+      );
+      setPrincipalBeneficiaries(updatedPrincipal);
+    } else {
+      updatedContingent = contingentBeneficiaries.filter(
+        (_, beneficiaryIndex) => beneficiaryIndex !== index
+      );
+      setContingentBeneficiaries(updatedContingent);
+    }
+    syncBeneficiaries(updatedPrincipal, updatedContingent);
+  };
   return /* @__PURE__ */ jsxs6(Fragment, { children: [
     /* @__PURE__ */ jsxs6(
       Flex2,
@@ -1234,14 +1414,14 @@ var Beneficiary = ({ onUpdate }) => {
             {
               placement: "center",
               motionPreset: "slide-in-bottom",
-              size: { mdDown: "full", md: "lg" },
+              size: { mdDown: "full", md: "xl" },
               open: addDialogOpen,
               onOpenChange: (details) => setAddDialogOpen(details.open),
               children: [
                 /* @__PURE__ */ jsx6(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx6(Button, { w: { base: "full", md: "auto" }, children: "Add Beneficiary" }) }),
                 /* @__PURE__ */ jsxs6(Portal2, { children: [
                   /* @__PURE__ */ jsx6(Dialog.Backdrop, {}),
-                  /* @__PURE__ */ jsx6(Dialog.Positioner, { children: /* @__PURE__ */ jsxs6(Dialog.Content, { mx: { base: 3, md: 0 }, children: [
+                  /* @__PURE__ */ jsx6(Dialog.Positioner, { children: /* @__PURE__ */ jsxs6(Dialog.Content, { children: [
                     /* @__PURE__ */ jsx6(Dialog.Header, { children: /* @__PURE__ */ jsx6(Dialog.Title, { children: "Add Beneficiary" }) }),
                     /* @__PURE__ */ jsx6(Dialog.Body, { children: /* @__PURE__ */ jsxs6(VStack3, { gap: 5, w: "full", align: "stretch", children: [
                       /* @__PURE__ */ jsxs6(
@@ -1734,7 +1914,7 @@ var Beneficiary = ({ onUpdate }) => {
 var beneficiary_default = Beneficiary;
 
 // src/NewSaleForm/HealthDeclaration.tsx
-import { useState as useState5 } from "react";
+import { useState as useState5, useEffect as useEffect4 } from "react";
 import {
   VStack as VStack4,
   Box as Box6,
@@ -1754,6 +1934,29 @@ var HealthDeclaration = () => {
     healthDeclaration3: false,
     healthDeclaration4: false
   });
+  useEffect4(() => {
+    let appData = loadApplicationDataFromLocalStorage();
+    if (!appData) {
+      appData = createEmptyApplicationData();
+      saveApplicationDataToLocalStorage(appData);
+    }
+    if (appData && appData.healthDeclaration) {
+      setHealthDeclarationValues(appData.healthDeclaration);
+    }
+  }, []);
+  useEffect4(() => {
+    return () => {
+      const appData = loadApplicationDataFromLocalStorage();
+      if (appData) {
+        appData.healthDeclaration = healthDeclarationValues;
+        saveApplicationDataToLocalStorage(appData);
+        console.log(
+          "Health Declaration saved to localStorage",
+          healthDeclarationValues
+        );
+      }
+    };
+  }, [healthDeclarationValues]);
   const items = [
     {
       value: "first-item",
@@ -1895,71 +2098,10 @@ import { FaRegAddressCard, FaRegUser } from "react-icons/fa";
 import { IoIosInformationCircleOutline } from "react-icons/io";
 import { LuChevronsDown, LuChevronsUp } from "react-icons/lu";
 import { useCallback, useEffect as useEffect5, useState as useState7 } from "react";
-import { TertiarySmButton } from "st-peter-ui";
-
-// src/lib/applicationData.ts
-var LIFE_PLAN_APPLICATION_KEY = "LifePlanApplication";
-var createEmptyApplicationData = () => ({
-  personalInfo: {
-    firstName: "",
-    middleName: "",
-    lastName: "",
-    suffix: "",
-    birthDate: "",
-    idType: "",
-    idNumber: "",
-    height: 0,
-    weight: 0,
-    gender: "",
-    civilStatus: "",
-    nationality: "",
-    mobileNumber: "",
-    emailAddress: "",
-    mailingAddress: "",
-    landLineNumber: ""
-  },
-  address: {
-    lot: "",
-    street: "",
-    barangay: "",
-    district: "",
-    city: "",
-    province: ""
-  },
-  employment: {
-    occupation: "",
-    employerName: "",
-    employmentStatus: "",
-    officeAddress: "",
-    TIN: "",
-    SSS: "",
-    sourceOfIncome: ""
-  },
-  beneficiaries: [],
-  healthDeclaration: {
-    healthDeclaration1: false,
-    healthDeclaration2: false,
-    healthDeclaration3: false,
-    healthDeclaration4: false
-  }
-});
-var loadApplicationDataFromLocalStorage = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
-  if (typeof window === "undefined") return null;
-  try {
-    const stored = window.localStorage.getItem(storageKey);
-    return stored ? JSON.parse(stored) : null;
-  } catch {
-    return null;
-  }
-};
-var saveApplicationDataToLocalStorage = (data, storageKey = LIFE_PLAN_APPLICATION_KEY) => {
-  if (typeof window === "undefined") return;
-  window.localStorage.setItem(storageKey, JSON.stringify(data));
-};
 
 // src/NewSaleForm/ui/info-card.tsx
-import "react";
 import { Box as Box7, HStack as HStack2, Text as Text4 } from "@chakra-ui/react";
+import "st-peter-ui";
 import { HiInformationCircle } from "react-icons/hi";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var InfoCard = ({
@@ -1969,22 +2111,29 @@ var InfoCard = ({
   return /* @__PURE__ */ jsxs8(
     HStack2,
     {
-      gap: 3,
+      gap: STANDARD_SPACING.sm,
       align: "center",
       p: "8px",
-      borderRadius: "md",
+      borderRadius: STANDARD_RADIUS.md,
       bg: "#ebf4fb",
       borderWidth: "1px",
       borderColor: "#1976d2",
-      color: "#0b3d2e",
+      color: BRAND_COLORS.darkGreen,
       children: [
-        /* @__PURE__ */ jsx8(Box7, { as: icon, boxSize: "20px", color: "#1976d2", flexShrink: 0 }),
+        /* @__PURE__ */ jsx8(
+          Box7,
+          {
+            as: icon,
+            boxSize: STANDARD_SIZES.iconButton.sm,
+            color: "#1976d2",
+            flexShrink: 0
+          }
+        ),
         /* @__PURE__ */ jsx8(Text4, { color: "#1976d2", fontSize: "xs", children })
       ]
     }
   );
 };
-var info_card_default = InfoCard;
 
 // src/NewSaleForm/ui/input-card-accordion.tsx
 import { Box as Box8, Flex as Flex3, Text as Text5 } from "@chakra-ui/react";
@@ -2083,6 +2232,7 @@ function InputCardAccordion({
 }
 
 // src/NewSaleForm/LifePlanApplicationFormWrapper.tsx
+import { TertiarySmButton } from "st-peter-ui";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var hasText = (value) => String(value ?? "").trim() !== "";
 var isPersonalComplete = (p) => !!p && [
@@ -2219,8 +2369,8 @@ var LifePlanApplicationFormWrapper = ({
         justify: "space-between",
         gap: STANDARD_SPACING.sm,
         mb: STANDARD_SPACING.sm,
-        children: /* @__PURE__ */ jsxs10(Flex4, { direction: "column", gap: STANDARD_SPACING.xs, children: [
-          /* @__PURE__ */ jsx10(info_card_default, { children: "Sections below are expandable and collapsible. Use them to focus only on relevant details." }),
+        children: /* @__PURE__ */ jsxs10(Flex4, { direction: "column", gap: STANDARD_SPACING.xs, w: "full", children: [
+          /* @__PURE__ */ jsx10(InfoCard, { children: "Sections below are expandable and collapsible. Use them to focus only on relevant details." }),
           /* @__PURE__ */ jsxs10(Flex4, { gap: STANDARD_SPACING.xs, justify: "flex-end", children: [
             /* @__PURE__ */ jsxs10(TertiarySmButton, { onClick: expandAll, children: [
               /* @__PURE__ */ jsx10(LuChevronsDown, { size: 14 }),
@@ -2274,8 +2424,11 @@ import {
   Dialog as Dialog2,
   Flex as Flex6,
   HStack as HStack3,
+  Heading as Heading2,
   Icon as Icon3,
+  IconButton as IconButton2,
   Portal as Portal3,
+  SimpleGrid as SimpleGrid3,
   Text as Text7,
   VStack as VStack6
 } from "@chakra-ui/react";
@@ -2283,37 +2436,50 @@ import { CancelButton, ConfirmButton, H3 } from "st-peter-ui";
 import { FaRegAddressCard as FaRegAddressCard2 } from "react-icons/fa6";
 import { FaRegUser as FaRegUser2 } from "react-icons/fa";
 import { IoIosInformationCircleOutline as IoIosInformationCircleOutline2 } from "react-icons/io";
+import { FiEdit2 } from "react-icons/fi";
 import { useEffect as useEffect6, useState as useState9 } from "react";
 
 // src/NewSaleForm/data/checkBoxList.tsx
 import { Box as Box10, Separator as Separator2 } from "@chakra-ui/react";
-import { Body as Body3, Small } from "st-peter-ui";
+import { Body as Body4, Small } from "st-peter-ui";
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var checkboxList = [
   {
     title: "TERMS OF USE",
     checkBoxTitle: "I hereby confirm that the information that I provided is correct and that I accept the TERMS AND CONDITIONS AND DATA PRIVACY AGREEMENT.",
     description: /* @__PURE__ */ jsxs11(Box10, { children: [
-      /* @__PURE__ */ jsx11(Body3, { children: "Please read these Terms and Conditions of Use carefully before using this website. Using this website means you have read, understood, agreed to and accepted these Terms and Conditions of Use. If you do not accept these Terms and Conditions of Use, do not use this website." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "CHANGES TO THIS TERMS AND USE" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "St. Peter Group reserves the right to change these Terms and Conditions of Use from time to time, in whole or in part, without prior notice. Your continued use of this Website after changes to the Terms and Conditions of Use have been published constitutes your binding agreement and acceptance of the updated Terms and Conditions of Use." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "TRADEMARKS" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "The trademarks, logos, and service marks displayed on this Website are the properties of the St. Peter Group. You are not permitted to use these items without prior written consent." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "INTELLECTUAL PROPERTY RIGHTS" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "The St. Peter Group owns the intellectual property rights in the content made available on this Website, or has obtained permission from the proper owners to make such content available." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "LINKS TO OTHER SITES" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "This website contains links to other websites for convenience only. St. Peter Group is not responsible for the content or availability of linked websites." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "RULES OF CONDUCT" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Your use of this Website is subject to all applicable laws. Do not post threatening, abusive, defamatory, obscene, hateful, or illegal content. Do not upload harmful software or attempt to disrupt the Website." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "DISCLAIMER" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "The Website is provided as is. St. Peter Group makes no warranties and is not liable for any damages, including loss of data, viruses, errors, or reliance on content." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "PRIVACY POLICY" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Please read our Privacy Policy." }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Please read these Terms and Conditions of Use carefully before using this website. Using this website means you have read, understood, agreed to and accepted these Terms and Conditions of Use. If you do not accept these Terms and Conditions of Use, do not use this website." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "CHANGES TO THIS TERMS AND USE" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "St. Peter Group reserves the right to change these Terms and Conditions of Use from time to time, in whole or in part, without prior notice. Your continued use of this Website after changes to the Terms and Conditions of Use have been published constitutes your binding agreement and acceptance of the updated Terms and Conditions of Use. If at any time the Terms and Conditions of Use are not acceptable to you, you should immediately cease use of this website." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "TRADEMARKS" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "The trademarks, logos, and service marks displayed on this Website are the properties of the St. Peter Group or the St. Peter Group. You are not permitted to use these items without the prior written consent of St. Peter Group or the St. Peter Group." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "INTELLECTUAL PROPERTY RIGHTS" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "The St. Peter Group owns the intellectual property rights in the content that is made available on this Website, or has obtained the permission of the proper owner/s to make such content available. The St. Peter Group strictly prohibits the redistribution or copying of this Website, in whole or in part, without written permission." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "LINKS TO OTHER SITES" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "This website contains links to other websites and are provided for convenience only. St. Peter Group has not reviewed the linked websites and is not responsible for the content or availability of any linked websites. Inclusion of any link does not imply endorsement." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "SUBMISSION OF UNOFFICIAL IDEAS" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "St. Peter Group does not accept unsolicited unofficial ideas. Do not send original creative artwork, samples, demos, or other works. Any submissions will not be treated as confidential or proprietary." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "RULES OF CONDUCT" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Your use of this Website is subject to all applicable laws. Do not post threatening, abusive, defamatory, obscene, hateful, or illegal content. Do not upload harmful software or attempt to disrupt the Website." }),
+      /* @__PURE__ */ jsx11(Body4, { mt: 2, children: "You may not post advertisements, political materials, chain letters, spam, or use robots or scraping tools. You may not harvest data without consent." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "GLOBAL AVAILABILITY" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "St. Peter Group manages this site from the Philippines. You are responsible for complying with local laws if used from other locations. Some products may not be available worldwide." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "ACCURACY, COMPLETENESS AND TIMELINESS OF INFORMATION" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "St. Peter Group is not responsible if information on this Website is inaccurate or incomplete for very specific needs. You are responsible for monitoring changes." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "DISCLAIMER" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "The Website is provided \u201Cas is\u201D. St. Peter Group makes no warranties and is not liable for any damages, including loss of data, viruses, errors, or reliance on content." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "LIMITATION OF LIABILITY" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "St. Peter Group is not liable for any direct, indirect, punitive, special, incidental, or consequential damages, including loss of business or data." }),
+      /* @__PURE__ */ jsx11(Body4, { mt: 2, children: "Some jurisdictions may not allow the exclusion of certain damages." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "JURISDICTION" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "These Terms are governed by Philippine law. If any provision is held invalid, the remainder stays effective." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "PRIVACY POLICY" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Please read our Privacy Policy." }),
       /* @__PURE__ */ jsx11(Separator2, { my: 8 }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "HOW TO CONTACT US" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "If you have any concern regarding these Terms of Use, contact us:" }),
-      /* @__PURE__ */ jsx11(Body3, { mt: 2, fontWeight: "semibold", children: "For website concerns: ronagl@stpeter.com.ph" }),
-      /* @__PURE__ */ jsx11(Body3, { mt: 2, fontWeight: "semibold", children: "For data privacy concerns: joycemb@stpeter.com.ph" }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "HOW TO CONTACT US" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "If you have any concern regarding these Terms of Use, contact us:" }),
+      /* @__PURE__ */ jsx11(Body4, { mt: 2, fontWeight: "semibold", children: "For website concerns: ronagl@stpeter.com.ph" }),
+      /* @__PURE__ */ jsx11(Body4, { mt: 2, fontWeight: "semibold", children: "For data privacy concerns: joycemb@stpeter.com.ph" }),
       /* @__PURE__ */ jsx11(Small, { textAlign: "center", mt: 8, children: "This Terms of Use was amended on August 30, 2018" })
     ] })
   },
@@ -2321,41 +2487,47 @@ var checkboxList = [
     title: "TERMS OF LIFE PLAN CONTRACT",
     checkBoxTitle: "I hereby confirm that the information that I provided is correct and that I accept the TERMS OF LIFE PLAN CONTRACT.",
     description: /* @__PURE__ */ jsxs11(Box10, { children: [
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "ARTICLE I. DEFINITION OF TERMS" }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "ST. PETER" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "ST. PETER LIFE PLAN, INC." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "PLANHOLDER" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the person who purchases and owns the plan for whom or for whose beneficiaries benefits are to be delivered, as stipulated and guaranteed by ST. PETER." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Contract" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the Life Plan Contract between ST. PETER and the PLANHOLDER providing the terms and conditions thereof." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Contract Price" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the stipulated price of the Life Plan which may be paid either in lump sum or in installments, net of handling fees and other charges, if any." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Gross Contract Price" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the stipulated price of the Life Plan which includes handling fees and other charges." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Plan Installment" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the monthly, quarterly, semi-annual or annual installment amounts paid by the PLANHOLDER." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Paying Period" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the period of time within which the PLANHOLDER has to pay for the Gross Contract Price of the plan in monthly, quarterly, semi-annual, annual installments or lump sum." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Due Date" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the date when the PLANHOLDER installment should be paid." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Beneficiary" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the person designated by the PLANHOLDER, in accordance with law, to receive the plan insurance proceeds and/or pre-need benefits in case of unrendered service." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Grace Period" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the sixty-day period given to the PLANHOLDER within which to pay accrued installments due, counted from the due date of the first unpaid installment in default." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Lapsed Plan" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to a delinquent plan which has remained unpaid beyond the grace period. A Lapsed Plan has no force and effect." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Reinstatement" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to the process of reactivating a lapsed plan." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Certificate of Full Payment" }),
-      /* @__PURE__ */ jsx11(Body3, { children: "Refers to ST. PETER duly signed certification stating that a plan has been fully paid." })
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "ARTICLE I. DEFINITION OF TERMS" }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "ST. PETER" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "ST. PETER LIFE PLAN, INC." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "PLANHOLDER" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the person who purchases and owns the plan for whom or for whose beneficiaries benefits are to be delivered, as stipulated and guaranteed by ST. PETER. The term includes the assignee, transferee, and any successor-in-interest of the PLANHOLDER." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Contract" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the Life Plan Contract between ST. PETER and the PLANHOLDER providing the terms and conditions thereof." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Contract Price" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the stipulated price of the Life Plan which may be paid either in lump sum or in installments, net of handling fees and other charges, if any." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Gross Contract Price" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the stipulated price of the Life Plan which includes handling fees and other charges." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Plan Installment" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the monthly, quarterly, semi-annual or annual installment amounts paid by the PLANHOLDER." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Paying Period" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the period of time within which the PLANHOLDER has to pay for the Gross Contract Price of the plan in monthly, quarterly, semi-annual, annual installments or lump sum." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Due Date" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the date when the PLANHOLDER\u2019s installment should be paid." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Beneficiary" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the person designated by the PLANHOLDER, in accordance with law, to receive the plan\u2019s insurance proceeds and/or pre-need benefits in case of unrendered service. The PLANHOLDER has the right to change the beneficiary/ies designated in the application subject to the submission of the standard form and approval." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Grace Period" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the sixty-day period given to the PLANHOLDER within which to pay accrued installments due, counted from the due date of the first unpaid installment in default, as stipulated in this Life Plan Contract." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Lapsed Plan" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to a delinquent plan which has remained unpaid beyond the grace period. A Lapsed Plan has no force and effect." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Reinstatement" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the process of reactivating a lapsed plan." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Certificate of Full Payment" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to ST. PETER\u2019s duly signed certification stating that a plan has been fully paid." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "In Force Plan or Active Plan" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to a pre-need plan for which ST. PETER has an outstanding obligation, either for (1) delivery of benefits or services or (2) payment of termination value." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Mortuary Tie-Up" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the memorial servicing tie-up or mortuary accredited with ST. PETER which renders the memorial services stipulated hereunder." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Effective Date" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "Refers to the date when the payment of at least one (1) modal installment has been accepted and the purchase has been approved by ST. PETER with the issuance of this Contract and as indicated herein." })
     ] })
   },
   {
     title: "OUR CUSTOMER SERVICE CHARTER",
     checkBoxTitle: "I have read and understood the CUSTOMER SERVICE CHARTER.",
     description: /* @__PURE__ */ jsxs11(Box10, { children: [
-      /* @__PURE__ */ jsx11(Body3, { children: "We at ST. PETER LIFE PLAN, INC. hold ourselves as DeathCare Experts who aspire to be the most trusted and reliable provider in your Pre-Need Life Plan needs. We also aim to deliver world-class DeathCare services to our planholders." }),
-      /* @__PURE__ */ jsx11(Body3, { fontWeight: "semibold", mt: 4, children: "Our customer service charter reflects our commitment to:" }),
+      /* @__PURE__ */ jsx11(Body4, { children: "We at ST. PETER LIFE PLAN, INC. hold ourselves as DeathCare Experts who aspire to be the most trusted and reliable provider in your Pre-Need Life Plan needs. We also aim to deliver world-class DeathCare services to our planholders. At the core of our corporate values is customer satisfaction. We believe that every filipino family should have a St. Peter Life Plan. These are the pillars of our company\u2019s customer service commitment especially in our online facility and in social media." }),
+      /* @__PURE__ */ jsx11(Body4, { fontWeight: "semibold", mt: 4, children: "Our customer service charter reflects our commitment to:" }),
       /* @__PURE__ */ jsxs11(Box10, { as: "ul", listStyleType: "circle", listStylePosition: "inside", children: [
         /* @__PURE__ */ jsx11("li", { children: "Safe and Secure Operations" }),
         /* @__PURE__ */ jsx11("li", { children: "Maintenance of Customer Privacy" }),
@@ -2363,7 +2535,7 @@ var checkboxList = [
         /* @__PURE__ */ jsx11("li", { children: "Transparent Product Information" }),
         /* @__PURE__ */ jsx11("li", { children: "Prompt Response to Inquiries and Complaints" })
       ] }),
-      /* @__PURE__ */ jsx11(Body3, { mt: 4, fontWeight: "semibold", children: "OUR CUSTOMER SERVICE STANDARDS AND COMMITMENTS" })
+      /* @__PURE__ */ jsx11(Body4, { mt: 4, fontWeight: "semibold", children: "OUR CUSTOMER SERVICE STANDARDS AND COMMITMENTS" })
     ] })
   }
 ];
@@ -2516,7 +2688,57 @@ var ApplicationAccordion = ({
 };
 var ReviewRows2 = ({
   rows
-}) => /* @__PURE__ */ jsx13(VStack6, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ jsx13(row_item_default, { label: row.label, value: row.value }, row.label)) });
+}) => /* @__PURE__ */ jsx13(VStack6, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ jsx13(RowItem, { label: row.label, value: row.value }, row.label)) });
+var FieldGrid = ({
+  rows
+}) => /* @__PURE__ */ jsx13(SimpleGrid3, { columns: { base: 1, sm: 2 }, columnGap: 6, rowGap: 5, children: rows.map((row) => /* @__PURE__ */ jsxs13(Box12, { minW: 0, children: [
+  /* @__PURE__ */ jsx13(Text7, { fontSize: "xs", color: "gray.500", mb: 1, children: row.label }),
+  /* @__PURE__ */ jsx13(
+    Text7,
+    {
+      fontSize: "sm",
+      fontWeight: "600",
+      color: "gray.900",
+      wordBreak: "break-word",
+      children: row.value ?? "-"
+    }
+  )
+] }, row.label)) });
+var SectionCard = ({
+  title,
+  onEdit,
+  children
+}) => /* @__PURE__ */ jsxs13(
+  Box12,
+  {
+    css: { breakInside: "avoid" },
+    mb: 6,
+    bg: "white",
+    borderWidth: "1px",
+    borderColor: "gray.200",
+    borderRadius: "xl",
+    boxShadow: "sm",
+    p: 6,
+    children: [
+      /* @__PURE__ */ jsxs13(Flex6, { justify: "space-between", align: "center", mb: 5, children: [
+        /* @__PURE__ */ jsx13(Heading2, { as: "h3", fontSize: "lg", fontWeight: "bold", color: "gray.900", children: title }),
+        onEdit ? /* @__PURE__ */ jsx13(
+          IconButton2,
+          {
+            "aria-label": `Edit ${title}`,
+            size: "sm",
+            variant: "ghost",
+            color: "gray.400",
+            _hover: { color: "green.600", bg: "green.50" },
+            onClick: onEdit,
+            children: /* @__PURE__ */ jsx13(FiEdit2, {})
+          }
+        ) : null
+      ] }),
+      children
+    ]
+  }
+);
 var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
   const [cartItems, setCartItems] = useState9(null);
   const [lifePlanApplication, setLifePlanApplication] = useState9(null);
@@ -2587,269 +2809,221 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
     setOpenDialog(false);
     setPendingCheck(null);
   };
-  return /* @__PURE__ */ jsx13(Box12, { minH: "100vh", children: /* @__PURE__ */ jsx13(Box12, { px: { base: 0, md: 8 }, pb: { base: 4, md: 8 }, children: /* @__PURE__ */ jsxs13(VStack6, { align: "stretch", gap: 3, children: [
-    /* @__PURE__ */ jsx13(
-      InfoCardAccordion,
-      {
-        icon: /* @__PURE__ */ jsx13(Icon3, { as: IoIosInformationCircleOutline2, boxSize: "18px" }),
-        title: "Order Summary",
-        subtitle: modeLabel(selectedPlan?.mode),
-        defaultOpen: true,
-        children: /* @__PURE__ */ jsx13(
-          ReviewRows2,
-          {
-            rows: [
-              {
-                label: "Selected Plan",
-                value: selectedPlan?.planDesc
-              },
-              {
-                label: "Quantity",
-                value: selectedPlan?.quantity
-              },
-              {
-                label: "Total Amount Payable",
-                value: selectedPlan ? `\u20B1 ${selectedPlan.total}` : void 0
-              }
-            ]
-          }
-        )
-      }
-    ),
+  const orderRows = [
+    { label: "Selected Plan", value: selectedPlan?.planDesc },
+    { label: "Quantity", value: selectedPlan?.quantity },
+    {
+      label: "Total Amount Payable",
+      value: selectedPlan ? `\u20B1 ${selectedPlan.total}` : void 0
+    }
+  ];
+  const personalRows = [
+    { label: "Uploaded ID", value: lifePlanApplication?.personalInfo.idType },
+    { label: "Last Name", value: lifePlanApplication?.personalInfo.lastName },
+    { label: "First Name", value: lifePlanApplication?.personalInfo.firstName },
+    {
+      label: "Middle Name",
+      value: lifePlanApplication?.personalInfo.middleName
+    },
+    { label: "Suffix", value: lifePlanApplication?.personalInfo.suffix },
+    {
+      label: "Date of Birth",
+      value: lifePlanApplication?.personalInfo.birthDate
+    },
+    { label: "Gender", value: lifePlanApplication?.personalInfo.gender },
+    {
+      label: "Contact Number",
+      value: lifePlanApplication?.personalInfo.mobileNumber
+    },
+    { label: "Email", value: lifePlanApplication?.personalInfo.emailAddress },
+    {
+      label: "Landline Number",
+      value: lifePlanApplication?.personalInfo.landLineNumber
+    },
+    {
+      label: "Mailing Address",
+      value: lifePlanApplication?.personalInfo.mailingAddress
+    },
+    {
+      label: "Civil Status",
+      value: lifePlanApplication?.personalInfo.civilStatus
+    }
+  ];
+  const addressRows = [
+    { label: "Lot #", value: lifePlanApplication?.address.lot },
+    { label: "Street", value: lifePlanApplication?.address.street },
+    { label: "Barangay", value: lifePlanApplication?.address.barangay },
+    { label: "City", value: lifePlanApplication?.address.city },
+    { label: "Province", value: lifePlanApplication?.address.province }
+  ];
+  const employmentRows = [
+    { label: "Occupation", value: lifePlanApplication?.employment.occupation },
+    {
+      label: "Employer Name",
+      value: lifePlanApplication?.employment.employerName
+    },
+    {
+      label: "Employment Status",
+      value: lifePlanApplication?.employment.employmentStatus
+    },
+    {
+      label: "Office Address",
+      value: lifePlanApplication?.employment.officeAddress
+    },
+    { label: "TIN", value: lifePlanApplication?.employment.TIN },
+    { label: "SSS/GSIS", value: lifePlanApplication?.employment.SSS },
+    {
+      label: "Source of Income",
+      value: lifePlanApplication?.employment.sourceOfIncome
+    }
+  ];
+  const beneficiaryItems = /* @__PURE__ */ jsx13(VStack6, { align: "stretch", gap: 4, children: beneficiaries.map((beneficiary, index) => /* @__PURE__ */ jsxs13(Box12, { children: [
+    /* @__PURE__ */ jsx13(Text7, { fontWeight: "semibold", fontSize: "sm", mb: 1, children: beneficiary.name }),
     /* @__PURE__ */ jsx13(
-      ApplicationAccordion,
+      ReviewRows2,
       {
-        onEdit: onEdit ?? (() => {
-        }),
-        items: [
-          {
-            icon: FaRegUser2,
-            label: "Personal Info",
-            subtitle: "Identification and full name",
-            value: "personal",
-            page: /* @__PURE__ */ jsx13(
-              ReviewRows2,
-              {
-                rows: [
-                  {
-                    label: "Uploaded ID",
-                    value: lifePlanApplication?.personalInfo.idType
-                  },
-                  {
-                    label: "Last Name",
-                    value: lifePlanApplication?.personalInfo.lastName
-                  },
-                  {
-                    label: "First Name",
-                    value: lifePlanApplication?.personalInfo.firstName
-                  },
-                  {
-                    label: "Middle Name",
-                    value: lifePlanApplication?.personalInfo.middleName
-                  },
-                  {
-                    label: "Suffix",
-                    value: lifePlanApplication?.personalInfo.suffix
-                  },
-                  {
-                    label: "Date of Birth",
-                    value: lifePlanApplication?.personalInfo.birthDate
-                  },
-                  {
-                    label: "Gender",
-                    value: lifePlanApplication?.personalInfo.gender
-                  },
-                  {
-                    label: "Contact Number",
-                    value: lifePlanApplication?.personalInfo.mobileNumber
-                  },
-                  {
-                    label: "Email",
-                    value: lifePlanApplication?.personalInfo.emailAddress
-                  },
-                  {
-                    label: "Landline Number",
-                    value: lifePlanApplication?.personalInfo.landLineNumber
-                  },
-                  {
-                    label: "Mailing Address",
-                    value: lifePlanApplication?.personalInfo.mailingAddress
-                  },
-                  {
-                    label: "Civil Status",
-                    value: lifePlanApplication?.personalInfo.civilStatus
-                  }
-                ]
-              }
-            )
-          },
-          {
-            icon: FaRegAddressCard2,
-            label: "Address",
-            subtitle: "Where you currently live",
-            value: "address",
-            page: /* @__PURE__ */ jsx13(
-              ReviewRows2,
-              {
-                rows: [
-                  {
-                    label: "Lot #",
-                    value: lifePlanApplication?.address.lot
-                  },
-                  {
-                    label: "Street",
-                    value: lifePlanApplication?.address.street
-                  },
-                  {
-                    label: "Barangay",
-                    value: lifePlanApplication?.address.barangay
-                  },
-                  {
-                    label: "City",
-                    value: lifePlanApplication?.address.city
-                  },
-                  {
-                    label: "Province",
-                    value: lifePlanApplication?.address.province
-                  }
-                ]
-              }
-            )
-          },
-          {
-            icon: IoIosInformationCircleOutline2,
-            label: "Employment",
-            subtitle: "Work and income details",
-            value: "employment",
-            page: /* @__PURE__ */ jsx13(
-              ReviewRows2,
-              {
-                rows: [
-                  {
-                    label: "Occupation",
-                    value: lifePlanApplication?.employment.occupation
-                  },
-                  {
-                    label: "Employer Name",
-                    value: lifePlanApplication?.employment.employerName
-                  },
-                  {
-                    label: "Employment Status",
-                    value: lifePlanApplication?.employment.employmentStatus
-                  },
-                  {
-                    label: "Office Address",
-                    value: lifePlanApplication?.employment.officeAddress
-                  },
-                  {
-                    label: "TIN",
-                    value: lifePlanApplication?.employment.TIN
-                  },
-                  {
-                    label: "SSS/GSIS",
-                    value: lifePlanApplication?.employment.SSS
-                  },
-                  {
-                    label: "Source of Income",
-                    value: lifePlanApplication?.employment.sourceOfIncome
-                  }
-                ]
-              }
-            )
-          }
+        rows: [
+          { label: "Relationship", value: beneficiary.relationship },
+          { label: "Date of Birth", value: beneficiary.dob },
+          { label: "Address", value: beneficiary.address }
         ]
       }
-    ),
-    /* @__PURE__ */ jsx13(
-      InfoCardAccordion,
+    )
+  ] }, `${beneficiary.name}-${index}`)) });
+  const agreementItems = /* @__PURE__ */ jsx13(VStack6, { align: "stretch", gap: 3, children: checkboxList.map((item, index) => {
+    const isAccepted = acceptedAgreements[index];
+    return /* @__PURE__ */ jsx13(
+      Box12,
       {
-        icon: /* @__PURE__ */ jsx13(Icon3, { as: FaRegUser2, boxSize: "18px" }),
-        title: "Beneficiaries",
-        subtitle: `${beneficiaries.length} listed`,
-        children: /* @__PURE__ */ jsx13(VStack6, { align: "stretch", gap: 4, children: beneficiaries.map((beneficiary, index) => /* @__PURE__ */ jsxs13(Box12, { children: [
-          /* @__PURE__ */ jsx13(Text7, { fontWeight: "semibold", fontSize: "sm", mb: 1, children: beneficiary.name }),
+        role: "button",
+        tabIndex: 0,
+        p: 4,
+        borderWidth: "1px",
+        rounded: "xl",
+        bg: isAccepted ? "green.50" : "gray.50",
+        transition: "all 0.15s ease",
+        _hover: { bg: isAccepted ? "green.100" : "gray.100" },
+        onClick: () => {
+          setPendingCheck(index);
+          setOpenDialog(true);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setPendingCheck(index);
+            setOpenDialog(true);
+          }
+        },
+        children: /* @__PURE__ */ jsxs13(Flex6, { justify: "space-between", align: "start", gap: 4, children: [
+          /* @__PURE__ */ jsxs13(Box12, { flex: "1", minW: 0, children: [
+            /* @__PURE__ */ jsxs13(Text7, { fontWeight: "semibold", lineClamp: 2, children: [
+              item.checkBoxTitle,
+              "."
+            ] }),
+            /* @__PURE__ */ jsx13(Text7, { fontSize: "sm", color: "gray.600", mt: 1, lineClamp: 1, children: "Tap to review details." })
+          ] }),
           /* @__PURE__ */ jsx13(
-            ReviewRows2,
+            Badge,
             {
-              rows: [
-                {
-                  label: "Relationship",
-                  value: beneficiary.relationship
-                },
-                {
-                  label: "Date of Birth",
-                  value: beneficiary.dob
-                },
-                {
-                  label: "Address",
-                  value: beneficiary.address
-                }
-              ]
+              variant: "subtle",
+              colorPalette: isAccepted ? "green" : "gray",
+              children: isAccepted ? "Accepted" : "Review"
             }
           )
-        ] }, `${beneficiary.name}-${index}`)) })
-      }
-    ),
-    /* @__PURE__ */ jsx13(
-      InfoCardAccordion,
-      {
-        icon: /* @__PURE__ */ jsx13(Icon3, { as: IoIosInformationCircleOutline2, boxSize: "18px" }),
-        title: "Agreements",
-        subtitle: `${acceptedCount}/${checkboxList.length} accepted`,
-        children: /* @__PURE__ */ jsx13(VStack6, { align: "stretch", gap: 3, children: checkboxList.map((item, index) => {
-          const isAccepted = acceptedAgreements[index];
-          return /* @__PURE__ */ jsx13(
-            Box12,
+        ] })
+      },
+      index
+    );
+  }) });
+  return /* @__PURE__ */ jsx13(Box12, { minH: "100vh", children: /* @__PURE__ */ jsxs13(Box12, { px: { base: 0, md: 8 }, pb: { base: 4, md: 8 }, children: [
+    /* @__PURE__ */ jsx13(Box12, { display: { base: "block", lg: "none" }, children: /* @__PURE__ */ jsxs13(VStack6, { align: "stretch", gap: 3, children: [
+      /* @__PURE__ */ jsx13(
+        InfoCardAccordion,
+        {
+          icon: /* @__PURE__ */ jsx13(Icon3, { as: IoIosInformationCircleOutline2, boxSize: "18px" }),
+          title: "Order Summary",
+          subtitle: modeLabel(selectedPlan?.mode),
+          defaultOpen: true,
+          children: /* @__PURE__ */ jsx13(ReviewRows2, { rows: orderRows })
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        ApplicationAccordion,
+        {
+          onEdit: onEdit ?? (() => {
+          }),
+          items: [
             {
-              role: "button",
-              tabIndex: 0,
-              p: 4,
-              borderWidth: "1px",
-              rounded: "xl",
-              bg: isAccepted ? "green.50" : "gray.50",
-              transition: "all 0.15s ease",
-              _hover: { bg: isAccepted ? "green.100" : "gray.100" },
-              onClick: () => {
-                setPendingCheck(index);
-                setOpenDialog(true);
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setPendingCheck(index);
-                  setOpenDialog(true);
-                }
-              },
-              children: /* @__PURE__ */ jsxs13(Flex6, { justify: "space-between", align: "start", gap: 4, children: [
-                /* @__PURE__ */ jsxs13(Box12, { flex: "1", minW: 0, children: [
-                  /* @__PURE__ */ jsxs13(Text7, { fontWeight: "semibold", lineClamp: 2, children: [
-                    item.checkBoxTitle,
-                    "."
-                  ] }),
-                  /* @__PURE__ */ jsx13(
-                    Text7,
-                    {
-                      fontSize: "sm",
-                      color: "gray.600",
-                      mt: 1,
-                      lineClamp: 1,
-                      children: "Tap to review details."
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx13(
-                  Badge,
-                  {
-                    variant: "subtle",
-                    colorPalette: isAccepted ? "green" : "gray",
-                    children: isAccepted ? "Accepted" : "Review"
-                  }
-                )
-              ] })
+              icon: FaRegUser2,
+              label: "Personal Info",
+              subtitle: "Identification and full name",
+              value: "personal",
+              page: /* @__PURE__ */ jsx13(ReviewRows2, { rows: personalRows })
             },
-            index
-          );
-        }) })
+            {
+              icon: FaRegAddressCard2,
+              label: "Address",
+              subtitle: "Where you currently live",
+              value: "address",
+              page: /* @__PURE__ */ jsx13(ReviewRows2, { rows: addressRows })
+            },
+            {
+              icon: IoIosInformationCircleOutline2,
+              label: "Employment",
+              subtitle: "Work and income details",
+              value: "employment",
+              page: /* @__PURE__ */ jsx13(ReviewRows2, { rows: employmentRows })
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        InfoCardAccordion,
+        {
+          icon: /* @__PURE__ */ jsx13(Icon3, { as: FaRegUser2, boxSize: "18px" }),
+          title: "Beneficiaries",
+          subtitle: `${beneficiaries.length} listed`,
+          children: beneficiaryItems
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        InfoCardAccordion,
+        {
+          icon: /* @__PURE__ */ jsx13(Icon3, { as: IoIosInformationCircleOutline2, boxSize: "18px" }),
+          title: "Agreements",
+          subtitle: `${acceptedCount}/${checkboxList.length} accepted`,
+          children: agreementItems
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs13(
+      Box12,
+      {
+        display: { base: "none", lg: "block" },
+        css: { columnCount: 2, columnGap: "24px" },
+        children: [
+          /* @__PURE__ */ jsx13(
+            SectionCard,
+            {
+              title: "Personal Information",
+              onEdit: () => onEdit?.("personal"),
+              children: /* @__PURE__ */ jsx13(FieldGrid, { rows: personalRows })
+            }
+          ),
+          /* @__PURE__ */ jsx13(SectionCard, { title: "Order Summary", children: /* @__PURE__ */ jsx13(FieldGrid, { rows: orderRows }) }),
+          /* @__PURE__ */ jsx13(SectionCard, { title: "Address", onEdit: () => onEdit?.("address"), children: /* @__PURE__ */ jsx13(FieldGrid, { rows: addressRows }) }),
+          /* @__PURE__ */ jsx13(SectionCard, { title: "Employment", onEdit: () => onEdit?.("employment"), children: /* @__PURE__ */ jsx13(FieldGrid, { rows: employmentRows }) }),
+          /* @__PURE__ */ jsx13(SectionCard, { title: "Beneficiaries", children: beneficiaryItems }),
+          /* @__PURE__ */ jsxs13(SectionCard, { title: "Agreements", children: [
+            /* @__PURE__ */ jsxs13(Text7, { fontSize: "xs", color: "gray.500", mb: 4, children: [
+              acceptedCount,
+              "/",
+              checkboxList.length,
+              " accepted"
+            ] }),
+            agreementItems
+          ] })
+        ]
       }
     ),
     /* @__PURE__ */ jsx13(
@@ -2870,52 +3044,30 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
               overflow: "hidden",
               children: [
                 /* @__PURE__ */ jsx13(Dialog2.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(CloseButton2, { position: "absolute", top: 3, right: 3 }) }),
-                /* @__PURE__ */ jsxs13(
-                  Dialog2.Header,
-                  {
-                    px: { base: 4, md: 6 },
-                    pt: { base: 5, md: 6 },
-                    children: [
-                      /* @__PURE__ */ jsx13(H3, { children: pendingCheck !== null ? pendingAgreement?.title || "Agreement" : "Agreement" }),
-                      /* @__PURE__ */ jsx13(Text7, { fontSize: "sm", color: "gray.600", mt: 2, children: "Please read carefully. Confirm to accept this agreement." })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx13(Dialog2.Body, { px: { base: 4, md: 6 }, pb: { base: 5, md: 6 }, children: /* @__PURE__ */ jsx13(Box12, { p: 4, borderWidth: "0px", rounded: "lg", bg: "gray.50", children: /* @__PURE__ */ jsx13(
-                  Text7,
-                  {
-                    whiteSpace: "pre-wrap",
-                    fontSize: "sm",
-                    color: "gray.800",
-                    children: pendingCheck !== null ? pendingAgreement?.description || "Please review and confirm before proceeding." : "Please review and confirm before proceeding."
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsx13(
-                  Dialog2.Footer,
-                  {
-                    px: { base: 4, md: 6 },
-                    pb: { base: 5, md: 6 },
-                    children: /* @__PURE__ */ jsxs13(HStack3, { justify: "flex-end", gap: 3, w: "full", children: [
-                      /* @__PURE__ */ jsx13(
-                        CancelButton,
-                        {
-                          onClick: () => {
-                            setOpenDialog(false);
-                            setPendingCheck(null);
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx13(ConfirmButton, { onClick: confirmAgreement })
-                    ] })
-                  }
-                )
+                /* @__PURE__ */ jsxs13(Dialog2.Header, { px: { base: 4, md: 6 }, pt: { base: 5, md: 6 }, children: [
+                  /* @__PURE__ */ jsx13(H3, { children: pendingCheck !== null ? pendingAgreement?.title || "Agreement" : "Agreement" }),
+                  /* @__PURE__ */ jsx13(Text7, { fontSize: "sm", color: "gray.600", mt: 2, children: "Please read carefully. Confirm to accept this agreement." })
+                ] }),
+                /* @__PURE__ */ jsx13(Dialog2.Body, { px: { base: 4, md: 6 }, pb: { base: 5, md: 6 }, children: /* @__PURE__ */ jsx13(Box12, { p: 4, borderWidth: "0px", rounded: "lg", bg: "gray.50", children: /* @__PURE__ */ jsx13(Text7, { whiteSpace: "pre-wrap", fontSize: "sm", color: "gray.800", children: pendingCheck !== null ? pendingAgreement?.description || "Please review and confirm before proceeding." : "Please review and confirm before proceeding." }) }) }),
+                /* @__PURE__ */ jsx13(Dialog2.Footer, { px: { base: 4, md: 6 }, pb: { base: 5, md: 6 }, children: /* @__PURE__ */ jsxs13(HStack3, { justify: "flex-end", gap: 3, w: "full", children: [
+                  /* @__PURE__ */ jsx13(
+                    CancelButton,
+                    {
+                      onClick: () => {
+                        setOpenDialog(false);
+                        setPendingCheck(null);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13(ConfirmButton, { onClick: confirmAgreement })
+                ] }) })
               ]
             }
           ) })
         ] })
       }
     )
-  ] }) }) });
+  ] }) });
 };
 var confirmation_default = Confirmation;
 
@@ -3037,7 +3189,8 @@ var HorizontalStepper = ({
       overflow: "visible",
       pb: { base: "12px", md: "0px" },
       children: [
-        (title || description) && /* @__PURE__ */ jsxs14(Box13, { mb: 4, ref: formTopRef, children: [
+        /* @__PURE__ */ jsx15(Box13, { ref: formTopRef, h: "0", w: "full", scrollMarginTop: { base: 4, md: 6 } }),
+        (title || description) && /* @__PURE__ */ jsxs14(Box13, { mb: 4, children: [
           title && /* @__PURE__ */ jsx15(
             Box13,
             {
@@ -3384,36 +3537,6 @@ import {
 } from "@chakra-ui/react";
 import { LuChevronRight as LuChevronRight2 } from "react-icons/lu";
 import Link from "next/link";
-
-// src/lib/theme/brand-colors.ts
-var BRAND_COLORS = {
-  primaryGreen: "#109448",
-  darkGreen: "#006838",
-  softGreen: "#92DDBF",
-  pastelPeaGreen: "#ACD6A6",
-  seafoamGreen: "#92DDBF",
-  lightCyan: "#D3EDEE",
-  successBg: "#F0FDF4",
-  warningBg: "#FFF7ED",
-  warningText: "#F1592B",
-  warningBorder: "#F4845F",
-  errorBg: "#FEF2F2",
-  destructiveRed: "#BF1F2F",
-  errorRed: "#EF4444",
-  neutralText: "#22223B",
-  neutralBorder: "#E5E7EB",
-  mutedBg: "#F3F4F6",
-  subtleBg: "#F9FAFB",
-  white: "#FFFFFF",
-  black: "#000000",
-  grey: "#808080",
-  ashWhite: "#ECECEC",
-  gold: "#CBA135",
-  brightGold: "#FFD026",
-  paleGold: "#FFF48E"
-};
-
-// src/Generic/BottomQuickActions.tsx
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var SHEET_BG = BRAND_COLORS.white;
 var DRAG_COLOR = BRAND_COLORS.neutralBorder;
@@ -3917,7 +4040,7 @@ import {
   Button as Button4,
   Flex as Flex10,
   HStack as HStack6,
-  IconButton as IconButton2,
+  IconButton as IconButton3,
   Input as Input4,
   InputGroup,
   Separator as Separator3,
@@ -4836,7 +4959,7 @@ function ReusableProfile({
   const editAccountContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
     /* @__PURE__ */ jsx20(Box16, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
       /* @__PURE__ */ jsx20(
-        IconButton2,
+        IconButton3,
         {
           size: "sm",
           variant: "ghost",
@@ -4909,7 +5032,7 @@ function ReusableProfile({
   const changePasswordContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
     /* @__PURE__ */ jsx20(Box16, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
       /* @__PURE__ */ jsx20(
-        IconButton2,
+        IconButton3,
         {
           size: "sm",
           variant: "ghost",
@@ -4928,7 +5051,7 @@ function ReusableProfile({
           InputGroup,
           {
             endElement: /* @__PURE__ */ jsx20(
-              IconButton2,
+              IconButton3,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4957,7 +5080,7 @@ function ReusableProfile({
           InputGroup,
           {
             endElement: /* @__PURE__ */ jsx20(
-              IconButton2,
+              IconButton3,
               {
                 size: "xs",
                 variant: "ghost",
@@ -5000,7 +5123,7 @@ function ReusableProfile({
           InputGroup,
           {
             endElement: /* @__PURE__ */ jsx20(
-              IconButton2,
+              IconButton3,
               {
                 size: "xs",
                 variant: "ghost",
@@ -5055,7 +5178,7 @@ function ReusableProfile({
         zIndex: 1,
         children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
           /* @__PURE__ */ jsx20(
-            IconButton2,
+            IconButton3,
             {
               size: "sm",
               variant: "ghost",
@@ -5170,7 +5293,7 @@ function ReusableProfile({
                 ] }),
                 /* @__PURE__ */ jsxs17(HStack6, { gap: 0.5, children: [
                   /* @__PURE__ */ jsx20(
-                    IconButton2,
+                    IconButton3,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -5182,7 +5305,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ jsx20(
-                    IconButton2,
+                    IconButton3,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -5194,7 +5317,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ jsx20(
-                    IconButton2,
+                    IconButton3,
                     {
                       size: "xs",
                       variant: isReplacing ? "solid" : "ghost",
@@ -5207,7 +5330,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ jsx20(
-                    IconButton2,
+                    IconButton3,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -5306,7 +5429,7 @@ function ReusableProfile({
               )
             ] }),
             isReplacingMode ? /* @__PURE__ */ jsx20(
-              IconButton2,
+              IconButton3,
               {
                 size: "xs",
                 variant: "outline",
@@ -5318,7 +5441,7 @@ function ReusableProfile({
                 children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 13 })
               }
             ) : /* @__PURE__ */ jsx20(
-              IconButton2,
+              IconButton3,
               {
                 size: "xs",
                 variant: "outline",