From f0f270b44dcc50a257cd61556e4d0ae20b89e6aa Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Tue, 8 Oct 2024 13:31:30 +0530
Subject: [PATCH] fix: handle form advanced options data for self hosting user

---
 apps/OpenSign/src/pages/Form.js | 214 +++++++++++++++++++++++---------
 1 file changed, 152 insertions(+), 62 deletions(-)

diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index d29b38c1c..ab6e43e9c 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -937,7 +937,7 @@ const Forms = (props) => {
               />
             ) : (
               <div className="flex flex-col md:flex-row w-full mt-4 md:mt-10 gap-3 ">
-                <div className="card bg-base-100 rounded-box grid flex-grow p-3  ">
+                <div className="card bg-base-100 rounded-box  flex-grow p-3  ">
                   {props.title !== "New Template" ? (
                     <SelectFolder
                       onSuccess={handleFolder}
@@ -946,63 +946,10 @@ const Forms = (props) => {
                     />
                   ) : (
                     <>
-                      <div className="text-xs mt-[10px]">
-                        <span className={isSubscribe ? "" : " text-gray-300"}>
-                          {t("auto-reminder")}{" "}
-                          {!isSubscribe && isEnableSubscription && <Upgrade />}
-                        </span>
-                        <label
-                          className={`${
-                            isSubscribe
-                              ? "cursor-pointer "
-                              : "pointer-events-none opacity-50"
-                          } relative block items-center mb-0 mt-1.5`}
-                        >
-                          <input
-                            type="checkbox"
-                            className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
-                            checked={formData.autoreminder}
-                            onChange={handleAutoReminder}
-                          />
-                        </label>
-                      </div>
-
-                      {formData?.autoreminder === true && (
-                        <div className="text-xs mt-2">
-                          <label className="block">
-                            {t("remind-once")}
-                            <span className="text-red-500 text-[13px]">*</span>
-                          </label>
-                          <input
-                            type="number"
-                            value={formData.remindOnceInEvery}
-                            name="remindOnceInEvery"
-                            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                            onChange={handleStrInput}
-                            onInvalid={(e) =>
-                              e.target.setCustomValidity(t("input-required"))
-                            }
-                            onInput={(e) => e.target.setCustomValidity("")}
-                            required
-                          />
-                        </div>
-                      )}
-                    </>
-                  )}
-                  {!isAdvanceOpt && (
-                    <div
-                      onClick={() => setIsAdvanceOpt(!isAdvanceOpt)}
-                      className={`mt-2.5 op-link op-link-primary text-sm`}
-                    >
-                      {t("advanced-options")}
-                    </div>
-                  )}
-                  {isAdvanceOpt && (
-                    <>
-                      <span className="mt-3 mb-2 font-[400]">
+                      <span className=" mb-2 font-[400]">
                         {t("form-title-1")}
                       </span>
-                      <div className="text-xs mt-2">
+                      <div className="text-xs mt-3">
                         <label className="block">
                           {t("send-in-order")}
                           <a
@@ -1062,6 +1009,133 @@ const Forms = (props) => {
                           </div>
                         </div>
                       </div>
+                    </>
+                  )}
+                  {isAdvanceOpt && (
+                    <>
+                      {isEnableSubscription &&
+                        props.title === "New Template" && (
+                          <div className="text-xs mt-[15px]">
+                            <span
+                              className={isSubscribe ? "" : " text-gray-300"}
+                            >
+                              {t("auto-reminder")}{" "}
+                              {!isSubscribe && isEnableSubscription && (
+                                <Upgrade />
+                              )}
+                            </span>
+                            <label
+                              className={`${
+                                isSubscribe
+                                  ? "cursor-pointer "
+                                  : "pointer-events-none opacity-50"
+                              } relative block items-center mb-0 mt-1.5`}
+                            >
+                              <input
+                                type="checkbox"
+                                className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
+                                checked={formData.autoreminder}
+                                onChange={handleAutoReminder}
+                              />
+                            </label>
+                          </div>
+                        )}
+                      {formData?.autoreminder === true && (
+                        <div className="text-xs mt-2">
+                          <label className="block">
+                            {t("remind-once")}
+                            <span className="text-red-500 text-[13px]">*</span>
+                          </label>
+                          <input
+                            type="number"
+                            value={formData.remindOnceInEvery}
+                            name="remindOnceInEvery"
+                            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                            onChange={handleStrInput}
+                            onInvalid={(e) =>
+                              e.target.setCustomValidity(t("input-required"))
+                            }
+                            onInput={(e) => e.target.setCustomValidity("")}
+                            required
+                          />
+                        </div>
+                      )}
+                      {props.title !== "New Template" && (
+                        <>
+                          <span className=" mt-2 font-[400]">
+                            {t("form-title-1")}
+                          </span>
+                          <div className="text-xs mt-3">
+                            <label className="block">
+                              {t("send-in-order")}
+                              <a
+                                data-tooltip-id="sendInOrder-tooltip"
+                                className="ml-1"
+                              >
+                                <sup>
+                                  <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
+                                </sup>
+                              </a>
+                              <Tooltip
+                                id="sendInOrder-tooltip"
+                                className="z-50"
+                              >
+                                <div className="max-w-[200px] md:max-w-[450px]">
+                                  <p className="font-bold">
+                                    {t("send-in-order")}
+                                  </p>
+                                  <p>{t("send-in-order-help.p1")}</p>
+                                  <p className="p-[5px]">
+                                    <ol className="list-disc">
+                                      <li>
+                                        <span className="font-bold">
+                                          {t("yes")}:{" "}
+                                        </span>
+                                        <span>
+                                          {t("send-in-order-help.p2")}
+                                        </span>
+                                      </li>
+                                      <li>
+                                        <span className="font-bold">
+                                          {t("no")}:{" "}
+                                        </span>
+                                        <span>
+                                          {t("send-in-order-help.p3")}
+                                        </span>
+                                      </li>
+                                    </ol>
+                                  </p>
+                                  <p>{t("send-in-order-help.p4")}</p>
+                                </div>
+                              </Tooltip>
+                            </label>
+                            <div className="flex flex-col md:flex-row md:gap-4">
+                              <div className="flex items-center gap-2 ml-2 mb-1">
+                                <input
+                                  type="radio"
+                                  value={"true"}
+                                  className="op-radio op-radio-xs"
+                                  name="SendinOrder"
+                                  checked={formData.SendinOrder === "true"}
+                                  onChange={handleStrInput}
+                                />
+                                <div className="text-center">{t("yes")}</div>
+                              </div>
+                              <div className="flex items-center gap-2 ml-2 mb-1">
+                                <input
+                                  type="radio"
+                                  value={"false"}
+                                  name="SendinOrder"
+                                  className="op-radio op-radio-xs"
+                                  checked={formData.SendinOrder === "false"}
+                                  onChange={handleStrInput}
+                                />
+                                <div className="text-center">{t("no")}</div>
+                              </div>
+                            </div>
+                          </div>
+                        </>
+                      )}
 
                       <div className="overflow-y-auto z-[500] transition-all">
                         {props.title === "Request Signatures" && (
@@ -1093,13 +1167,19 @@ const Forms = (props) => {
                 {isAdvanceOpt && (
                   <div
                     style={{
-                      height: props.title === "New Template" ? "220px" : "280px"
+                      height:
+                        props.title === "New Template" && isEnableSubscription
+                          ? "220px"
+                          : !isEnableSubscription &&
+                              props.title === "New Template"
+                            ? "100px"
+                            : "280px"
                     }}
                     className="w-[1px] bg-gray-300 m-auto hidden md:inline-block"
                   ></div>
                 )}
                 {isAdvanceOpt && (
-                  <div className="card bg-base-100 rounded-box grid p-3 flex-grow ">
+                  <div className="card bg-base-100 rounded-box  p-3 flex-grow ">
                     {isEnableSubscription && props.title !== "New Template" && (
                       <div className="text-xs mt-[10px]">
                         <span className={isSubscribe ? "" : " text-gray-300"}>
@@ -1143,9 +1223,9 @@ const Forms = (props) => {
                           />
                         </div>
                       )}
-                    <span className="font-[400]">{t("form-title-2")}</span>
+                    <span className="font-[400] mt-2">{t("form-title-2")}</span>
                     {isEnableSubscription && (
-                      <div className="text-xs mt-2">
+                      <div className="text-xs mt-4">
                         <label className="block">
                           <span className={isSubscribe ? "" : " text-gray-300"}>
                             {t("isenable-otp")}{" "}
@@ -1223,7 +1303,7 @@ const Forms = (props) => {
                         </div>
                       </div>
                     )}
-                    <div className="text-xs mt-2">
+                    <div className="text-xs mt-3">
                       <label className="block">
                         <span>
                           {t("enable-tour")}
@@ -1286,13 +1366,23 @@ const Forms = (props) => {
                 )}
               </div>
             )}
-            {isAdvanceOpt && (
+
+            {isAdvanceOpt && props.title !== "Sign Yourself" ? (
               <div
                 onClick={() => setIsAdvanceOpt(!isAdvanceOpt)}
                 className={`mt-2.5 op-link op-link-primary text-sm`}
               >
                 {t("hide-advanced-options")}
               </div>
+            ) : (
+              props.title !== "Sign Yourself" && (
+                <div
+                  onClick={() => setIsAdvanceOpt(!isAdvanceOpt)}
+                  className={`mt-2.5 op-link op-link-primary text-sm`}
+                >
+                  {t("advanced-options")}
+                </div>
+              )
             )}
 
             <div className="flex items-center mt-3 gap-2">