@sikka/aps 0.0.1 → 0.0.2

package/dist/react/index.mjs

@@ -423,23 +423,50 @@ var defaultStyles = {
     borderRadius: "8px",
     fontSize: "13px",
     color: "#065F46"
+  },
+  errorMessage: {
+    color: "#EF4444",
+    fontSize: "12px"
+  },
+  helperText: {
+    fontSize: "12px",
+    color: "#6B7280"
   }
 };
+var defaultFieldConfig = {
+  cardNumber: { visible: true, required: true },
+  cardHolder: { visible: true, required: true },
+  customerEmail: { visible: true, required: false },
+  expiryDate: { visible: true, required: true },
+  cvv: { visible: true, required: true }
+};
 var TokenizationForm = ({
   actionUrl,
   formParams,
   customerEmail = "",
   onSuccess: _onSuccess,
-  // Success is handled via returnUrl redirect
   onError,
   styles = {},
   icons = {},
+  fields = {},
+  layout = { type: "vertical" },
   labels = {},
   placeholders = {},
   disableFormatting = false,
   showCardIcons = true,
   showSecurityNotice = true,
-  className = {}
+  securityNotice,
+  submitButton,
+  className = {},
+  errorMessages = {},
+  fieldOrder = ["cardNumber", "cardHolder", "customerEmail", "expiryDate", "cvv"],
+  beforeForm,
+  afterForm,
+  beforeSubmit,
+  afterSubmit,
+  nativeSubmission = true,
+  onChange,
+  onValidSubmit
 }) => {
   const [cardNumber, setCardNumber] = useState3("");
   const [expiryDate, setExpiryDate] = useState3("");
@@ -457,6 +484,13 @@ var TokenizationForm = ({
     ...DefaultIcons,
     ...icons
   };
+  const mergedFields = {
+    cardNumber: { ...defaultFieldConfig.cardNumber, ...fields.cardNumber },
+    cardHolder: { ...defaultFieldConfig.cardHolder, ...fields.cardHolder },
+    customerEmail: { ...defaultFieldConfig.customerEmail, ...fields.customerEmail },
+    expiryDate: { ...defaultFieldConfig.expiryDate, ...fields.expiryDate },
+    cvv: { ...defaultFieldConfig.cvv, ...fields.cvv }
+  };
   const mergedLabels = {
     cardNumber: "Card Number",
     cardHolder: "Card Holder Name",
@@ -475,6 +509,16 @@ var TokenizationForm = ({
     cvv: "123",
     ...placeholders
   };
+  const mergedErrorMessages = {
+    cardNumber: "Invalid card number",
+    cardHolder: "Card holder name is required",
+    customerEmail: "Invalid email address",
+    expiryDate: "Invalid expiry date",
+    cvv: "Invalid CVV",
+    required: "This field is required",
+    invalidEmail: "Invalid email address",
+    ...errorMessages
+  };
   const formatCardNumber = (value) => {
     if (disableFormatting) return value;
     const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
@@ -497,24 +541,75 @@ var TokenizationForm = ({
     }
     return v;
   };
-  const validateForm = () => {
+  const isValidExpiryDate = (value) => {
+    if (!value || value.length !== 5) return false;
+    const [month, year] = value.split("/");
+    if (!month || !year) return false;
+    const mm = parseInt(month, 10);
+    const yy = parseInt(year, 10);
+    if (mm < 1 || mm > 12) return false;
+    if (yy < 0 || yy > 99) return false;
+    const now = /* @__PURE__ */ new Date();
+    const currentYear = now.getFullYear() % 100;
+    const currentMonth = now.getMonth() + 1;
+    if (yy < currentYear) return false;
+    if (yy === currentYear && mm < currentMonth) return false;
+    return true;
+  };
+  const getFormData = () => ({
+    cardNumber,
+    cardHolderName,
+    email,
+    expiryDate,
+    cvv,
+    cardBrand,
+    isValid: validateForm(false)
+  });
+  const validateForm = (updateErrors = true) => {
     const newErrors = {};
-    if (!cardNumber || cardNumber.replace(/\s/g, "").length < 13) {
-      newErrors.cardNumber = "Invalid card number";
+    if (mergedFields.cardNumber?.visible && mergedFields.cardNumber?.required !== false) {
+      const customError = mergedFields.cardNumber?.validate?.(cardNumber);
+      if (customError) {
+        newErrors.cardNumber = customError;
+      } else if (!cardNumber || cardNumber.replace(/\s/g, "").length < 13) {
+        newErrors.cardNumber = mergedErrorMessages.cardNumber;
+      }
     }
-    if (!expiryDate || expiryDate.length !== 5) {
-      newErrors.expiryDate = "Invalid expiry date";
+    if (mergedFields.cardHolder?.visible && mergedFields.cardHolder?.required !== false) {
+      const customError = mergedFields.cardHolder?.validate?.(cardHolderName);
+      if (customError) {
+        newErrors.cardHolder = customError;
+      } else if (!cardHolderName || cardHolderName.length < 2) {
+        newErrors.cardHolder = mergedErrorMessages.cardHolder;
+      }
     }
-    if (!cvv || cvv.length < 3) {
-      newErrors.cvv = "Invalid CVV";
+    if (mergedFields.customerEmail?.visible && email) {
+      const customError = mergedFields.customerEmail?.validate?.(email);
+      if (customError) {
+        newErrors.email = customError;
+      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        newErrors.email = mergedErrorMessages.customerEmail;
+      }
     }
-    if (!cardHolderName || cardHolderName.length < 2) {
-      newErrors.cardHolder = "Card holder name is required";
+    if (mergedFields.expiryDate?.visible && mergedFields.expiryDate?.required !== false) {
+      const customError = mergedFields.expiryDate?.validate?.(expiryDate);
+      if (customError) {
+        newErrors.expiryDate = customError;
+      } else if (!expiryDate || !isValidExpiryDate(expiryDate)) {
+        newErrors.expiryDate = mergedErrorMessages.expiryDate;
+      }
+    }
+    if (mergedFields.cvv?.visible && mergedFields.cvv?.required !== false) {
+      const customError = mergedFields.cvv?.validate?.(cvv);
+      if (customError) {
+        newErrors.cvv = customError;
+      } else if (!cvv || cvv.length < 3) {
+        newErrors.cvv = mergedErrorMessages.cvv;
+      }
     }
-    if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      newErrors.email = "Invalid email address";
+    if (updateErrors) {
+      setErrors(newErrors);
     }
-    setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
   const handleSubmit = (e) => {
@@ -523,6 +618,14 @@ var TokenizationForm = ({
       onError?.("Please fill in all required fields correctly");
       return;
     }
+    const formData = getFormData();
+    if (onValidSubmit) {
+      onValidSubmit(formData);
+      return;
+    }
+    if (!nativeSubmission) {
+      return;
+    }
     setLoading(true);
     const form = document.createElement("form");
     form.method = "POST";
@@ -543,7 +646,10 @@ var TokenizationForm = ({
       form.appendChild(input);
     };
     const cleanCardNumber = cardNumber.replace(/\s/g, "");
-    const cleanExpiryDate = expiryDate.replace("/", "");
+    const cleanExpiry = expiryDate.replace(/\//g, "");
+    const mm = cleanExpiry.substring(0, 2);
+    const yy = cleanExpiry.substring(2, 4);
+    const cleanExpiryDate = yy + mm;
     addHiddenInput("card_number", cleanCardNumber);
     addHiddenInput("expiry_date", cleanExpiryDate);
     addHiddenInput("card_security_code", cvv);
@@ -552,156 +658,342 @@ var TokenizationForm = ({
     form.submit();
     setLoading(false);
   };
-  const handleCardNumberChange = (e) => {
-    const formatted = formatCardNumber(e.target.value);
+  const handleCardNumberChange = (value) => {
+    const formatted = formatCardNumber(value);
     setCardNumber(formatted);
     setCardBrand(detectCardBrand(formatted));
     if (errors.cardNumber) {
       setErrors({ ...errors, cardNumber: "" });
     }
+    onChange?.(getFormData());
   };
-  const handleExpiryDateChange = (e) => {
-    const formatted = formatExpiryDate(e.target.value);
+  const handleExpiryDateChange = (value) => {
+    const formatted = formatExpiryDate(value);
     setExpiryDate(formatted);
     if (errors.expiryDate) {
       setErrors({ ...errors, expiryDate: "" });
     }
+    onChange?.(getFormData());
   };
-  const handleCvvChange = (e) => {
-    const value = e.target.value.replace(/\D/g, "").substring(0, 4);
-    setCvv(value);
+  const handleCvvChange = (value) => {
+    const cleaned = value.replace(/\D/g, "");
+    setCvv(cleaned);
     if (errors.cvv) {
       setErrors({ ...errors, cvv: "" });
     }
+    onChange?.(getFormData());
   };
-  return /* @__PURE__ */ jsx2("div", { style: mergedStyles.container, className: className.container || "", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: mergedStyles.form, className: className.form || "", children: [
-    /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-      /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cardNumber }),
-      /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "text",
+  const handleCardHolderChange = (value) => {
+    setCardHolderName(value);
+    if (errors.cardHolder) {
+      setErrors({ ...errors, cardHolder: "" });
+    }
+    onChange?.(getFormData());
+  };
+  const handleEmailChange = (value) => {
+    setEmail(value);
+    if (errors.email) {
+      setErrors({ ...errors, email: "" });
+    }
+    onChange?.(getFormData());
+  };
+  const renderField = (fieldName) => {
+    const config = mergedFields[fieldName];
+    if (!config?.visible) return null;
+    const fieldRenderers = {
+      cardNumber: () => {
+        const label = config.label || mergedLabels.cardNumber;
+        const placeholder = config.placeholder || mergedPlaceholders.cardNumber;
+        const error = errors.cardNumber;
+        if (config.render) {
+          return config.render({
             value: cardNumber,
             onChange: handleCardNumberChange,
-            placeholder: mergedPlaceholders.cardNumber,
-            maxLength: 19,
-            required: true,
-            style: {
-              ...mergedStyles.input,
-              ...errors.cardNumber ? mergedStyles.inputError : {},
-              paddingRight: showCardIcons ? "60px" : "16px"
+            onBlur: () => {
             },
-            className: className.input || ""
-          }
-        ),
-        showCardIcons && cardBrand !== "unknown" && /* @__PURE__ */ jsx2(
+            error,
+            placeholder,
+            label,
+            required: config.required !== false,
+            disabled: loading,
+            name: "card_number"
+          });
+        }
+        return /* @__PURE__ */ jsxs(
           "div",
           {
-            style: {
-              position: "absolute",
-              right: "12px",
-              top: "50%",
-              transform: "translateY(-50%)"
-            },
-            children: mergedIcons[cardBrand]
+            style: { ...mergedStyles.inputGroup, ...config.style },
+            className: config.className || className.inputGroup,
+            children: [
+              /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label, children: label }),
+              /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    type: "text",
+                    value: cardNumber,
+                    onChange: (e) => handleCardNumberChange(e.target.value),
+                    placeholder,
+                    maxLength: 19,
+                    required: config.required !== false,
+                    disabled: loading,
+                    name: "card_number",
+                    style: {
+                      ...mergedStyles.input,
+                      ...error ? mergedStyles.inputError : {},
+                      paddingRight: showCardIcons ? "60px" : "16px"
+                    },
+                    className: className.input
+                  }
+                ),
+                showCardIcons && cardBrand !== "unknown" && /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      right: "12px",
+                      top: "50%",
+                      transform: "translateY(-50%)"
+                    },
+                    children: mergedIcons[cardBrand]
+                  }
+                )
+              ] }),
+              error && /* @__PURE__ */ jsx2("span", { style: mergedStyles.errorMessage, children: error })
+            ]
           }
-        )
-      ] }),
-      errors.cardNumber && /* @__PURE__ */ jsx2("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cardNumber })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-      /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cardHolder }),
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          type: "text",
-          value: cardHolderName,
-          onChange: (e) => {
-            setCardHolderName(e.target.value);
-            if (errors.cardHolder) {
-              setErrors({ ...errors, cardHolder: "" });
-            }
-          },
-          placeholder: mergedPlaceholders.cardHolder,
-          required: true,
-          style: {
-            ...mergedStyles.input,
-            ...errors.cardHolder ? mergedStyles.inputError : {}
-          },
-          className: className.input || ""
+        );
+      },
+      cardHolder: () => {
+        const label = config.label || mergedLabels.cardHolder;
+        const placeholder = config.placeholder || mergedPlaceholders.cardHolder;
+        const error = errors.cardHolder;
+        if (config.render) {
+          return config.render({
+            value: cardHolderName,
+            onChange: handleCardHolderChange,
+            onBlur: () => {
+            },
+            error,
+            placeholder,
+            label,
+            required: config.required !== false,
+            disabled: loading,
+            name: "card_holder_name"
+          });
         }
-      ),
-      errors.cardHolder && /* @__PURE__ */ jsx2("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cardHolder })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-      /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.customerEmail }),
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          type: "email",
-          value: email,
-          onChange: (e) => {
-            setEmail(e.target.value);
-            if (errors.email) {
-              setErrors({ ...errors, email: "" });
-            }
-          },
-          placeholder: mergedPlaceholders.customerEmail,
-          style: {
-            ...mergedStyles.input,
-            ...errors.email ? mergedStyles.inputError : {}
-          },
-          className: className.input || ""
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { ...mergedStyles.inputGroup, ...config.style },
+            className: config.className || className.inputGroup,
+            children: [
+              /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label, children: label }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "text",
+                  value: cardHolderName,
+                  onChange: (e) => handleCardHolderChange(e.target.value),
+                  placeholder,
+                  required: config.required !== false,
+                  disabled: loading,
+                  name: "card_holder_name",
+                  style: {
+                    ...mergedStyles.input,
+                    ...error ? mergedStyles.inputError : {}
+                  },
+                  className: className.input
+                }
+              ),
+              error && /* @__PURE__ */ jsx2("span", { style: mergedStyles.errorMessage, children: error })
+            ]
+          }
+        );
+      },
+      customerEmail: () => {
+        const label = config.label || mergedLabels.customerEmail;
+        const placeholder = config.placeholder || mergedPlaceholders.customerEmail;
+        const error = errors.email;
+        if (config.render) {
+          return config.render({
+            value: email,
+            onChange: handleEmailChange,
+            onBlur: () => {
+            },
+            error,
+            placeholder,
+            label,
+            required: config.required === true,
+            disabled: loading,
+            name: "customer_email"
+          });
         }
-      ),
-      errors.email && /* @__PURE__ */ jsx2("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.email }),
-      /* @__PURE__ */ jsx2("span", { style: { fontSize: "12px", color: "#6B7280" }, children: "Used to associate the saved card with the customer" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: mergedStyles.row, children: [
-      /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-        /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.expiryDate }),
-        /* @__PURE__ */ jsx2(
-          "input",
+        return /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "text",
+            style: { ...mergedStyles.inputGroup, ...config.style },
+            className: config.className || className.inputGroup,
+            children: [
+              /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label, children: label }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "email",
+                  value: email,
+                  onChange: (e) => handleEmailChange(e.target.value),
+                  placeholder,
+                  required: config.required === true,
+                  disabled: loading,
+                  name: "customer_email",
+                  style: {
+                    ...mergedStyles.input,
+                    ...error ? mergedStyles.inputError : {}
+                  },
+                  className: className.input
+                }
+              ),
+              error && /* @__PURE__ */ jsx2("span", { style: mergedStyles.errorMessage, children: error }),
+              /* @__PURE__ */ jsx2("span", { style: mergedStyles.helperText, children: "Used to associate the saved card with the customer" })
+            ]
+          }
+        );
+      },
+      expiryDate: () => {
+        const label = config.label || mergedLabels.expiryDate;
+        const placeholder = config.placeholder || mergedPlaceholders.expiryDate;
+        const error = errors.expiryDate;
+        if (config.render) {
+          return config.render({
             value: expiryDate,
             onChange: handleExpiryDateChange,
-            placeholder: mergedPlaceholders.expiryDate,
-            maxLength: 5,
-            required: true,
-            style: {
-              ...mergedStyles.input,
-              ...errors.expiryDate ? mergedStyles.inputError : {}
+            onBlur: () => {
             },
-            className: className.input || ""
-          }
-        ),
-        errors.expiryDate && /* @__PURE__ */ jsx2("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.expiryDate })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-        /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cvv }),
-        /* @__PURE__ */ jsx2(
-          "input",
+            error,
+            placeholder,
+            label,
+            required: config.required !== false,
+            disabled: loading,
+            name: "expiry_date"
+          });
+        }
+        return /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "text",
+            style: { ...mergedStyles.inputGroup, ...config.style },
+            className: config.className || className.inputGroup,
+            children: [
+              /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label, children: label }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "text",
+                  value: expiryDate,
+                  onChange: (e) => handleExpiryDateChange(e.target.value),
+                  placeholder,
+                  maxLength: 5,
+                  required: config.required !== false,
+                  disabled: loading,
+                  name: "expiry_date",
+                  style: {
+                    ...mergedStyles.input,
+                    ...error ? mergedStyles.inputError : {}
+                  },
+                  className: className.input
+                }
+              ),
+              error && /* @__PURE__ */ jsx2("span", { style: mergedStyles.errorMessage, children: error })
+            ]
+          }
+        );
+      },
+      cvv: () => {
+        const label = config.label || mergedLabels.cvv;
+        const placeholder = config.placeholder || mergedPlaceholders.cvv;
+        const error = errors.cvv;
+        if (config.render) {
+          return config.render({
             value: cvv,
             onChange: handleCvvChange,
-            placeholder: mergedPlaceholders.cvv,
-            maxLength: 4,
-            required: true,
-            style: {
-              ...mergedStyles.input,
-              ...errors.cvv ? mergedStyles.inputError : {}
+            onBlur: () => {
             },
-            className: className.input || ""
+            error,
+            placeholder,
+            label,
+            required: config.required !== false,
+            disabled: loading,
+            name: "cvv"
+          });
+        }
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { ...mergedStyles.inputGroup, ...config.style },
+            className: config.className || className.inputGroup,
+            children: [
+              /* @__PURE__ */ jsx2("label", { style: mergedStyles.label, className: className.label, children: label }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "text",
+                  value: cvv,
+                  onChange: (e) => handleCvvChange(e.target.value),
+                  placeholder,
+                  maxLength: 4,
+                  required: config.required !== false,
+                  disabled: loading,
+                  name: "cvv",
+                  style: {
+                    ...mergedStyles.input,
+                    ...error ? mergedStyles.inputError : {}
+                  },
+                  className: className.input
+                }
+              ),
+              error && /* @__PURE__ */ jsx2("span", { style: mergedStyles.errorMessage, children: error })
+            ]
           }
-        ),
-        errors.cvv && /* @__PURE__ */ jsx2("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cvv })
-      ] })
-    ] }),
-    showSecurityNotice && /* @__PURE__ */ jsx2("div", { style: mergedStyles.securityNotice, children: "\u{1F512} Your card details are securely processed by Amazon Payment Services. We never store your card information." }),
-    /* @__PURE__ */ jsx2(
+        );
+      }
+    };
+    return fieldRenderers[fieldName]?.() || null;
+  };
+  const getFormStyle = () => {
+    const baseStyle = mergedStyles.form || {};
+    switch (layout.type) {
+      case "horizontal":
+        return {
+          ...baseStyle,
+          flexDirection: "row",
+          flexWrap: "wrap",
+          gap: layout.gap || "12px"
+        };
+      case "grid":
+        return {
+          ...baseStyle,
+          display: "grid",
+          gridTemplateColumns: layout.gridTemplateColumns || `repeat(${layout.columns || 2}, 1fr)`,
+          ...layout.gridTemplateAreas ? { gridTemplateAreas: layout.gridTemplateAreas } : {},
+          gap: layout.gap || "12px"
+        };
+      case "custom":
+        return {
+          ...baseStyle,
+          ...styles?.form || {}
+        };
+      default:
+        return baseStyle;
+    }
+  };
+  const renderSubmitButton = () => {
+    if (submitButton) {
+      if (typeof submitButton === "function") {
+        return submitButton({ loading, onClick: () => {
+        } });
+      }
+      return submitButton;
+    }
+    return /* @__PURE__ */ jsx2(
       "button",
       {
         type: "submit",
@@ -710,11 +1002,37 @@ var TokenizationForm = ({
           ...mergedStyles.button,
           ...loading ? mergedStyles.buttonDisabled : {}
         },
-        className: className.button || "",
+        className: className.button,
         children: loading ? mergedLabels.processing : mergedLabels.submitButton
       }
-    )
-  ] }) });
+    );
+  };
+  const renderSecurityNotice = () => {
+    if (!showSecurityNotice) return null;
+    if (securityNotice) {
+      return securityNotice;
+    }
+    return /* @__PURE__ */ jsx2("div", { style: mergedStyles.securityNotice, children: "\u{1F512} Your card details are securely processed by Amazon Payment Services. We never store your card information." });
+  };
+  return /* @__PURE__ */ jsxs("div", { style: mergedStyles.container, className: className.container, children: [
+    beforeForm,
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        style: getFormStyle(),
+        className: className.form,
+        children: [
+          fieldOrder.map((fieldName) => renderField(fieldName)),
+          renderSecurityNotice(),
+          beforeSubmit,
+          renderSubmitButton(),
+          afterSubmit
+        ]
+      }
+    ),
+    afterForm
+  ] });
 };
 
 // src/constants.ts