Skip to content

Commit f0f270b

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix: handle form advanced options data for self hosting user
1 parent 529de2b commit f0f270b

File tree

1 file changed

+152
-62
lines changed

1 file changed

+152
-62
lines changed

‎apps/OpenSign/src/pages/Form.js‎

Lines changed: 152 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -937,7 +937,7 @@ const Forms = (props) => {
937937
/>
938938
) : (
939939
<div className="flex flex-col md:flex-row w-full mt-4 md:mt-10 gap-3 ">
940-
<div className="card bg-base-100 rounded-box grid flex-grow p-3 ">
940+
<div className="card bg-base-100 rounded-box flex-grow p-3 ">
941941
{props.title !== "New Template" ? (
942942
<SelectFolder
943943
onSuccess={handleFolder}
@@ -946,63 +946,10 @@ const Forms = (props) => {
946946
/>
947947
) : (
948948
<>
949-
<div className="text-xs mt-[10px]">
950-
<span className={isSubscribe ? "" : " text-gray-300"}>
951-
{t("auto-reminder")}{" "}
952-
{!isSubscribe && isEnableSubscription && <Upgrade />}
953-
</span>
954-
<label
955-
className={`${
956-
isSubscribe
957-
? "cursor-pointer "
958-
: "pointer-events-none opacity-50"
959-
} relative block items-center mb-0 mt-1.5`}
960-
>
961-
<input
962-
type="checkbox"
963-
className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
964-
checked={formData.autoreminder}
965-
onChange={handleAutoReminder}
966-
/>
967-
</label>
968-
</div>
969-
970-
{formData?.autoreminder === true && (
971-
<div className="text-xs mt-2">
972-
<label className="block">
973-
{t("remind-once")}
974-
<span className="text-red-500 text-[13px]">*</span>
975-
</label>
976-
<input
977-
type="number"
978-
value={formData.remindOnceInEvery}
979-
name="remindOnceInEvery"
980-
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
981-
onChange={handleStrInput}
982-
onInvalid={(e) =>
983-
e.target.setCustomValidity(t("input-required"))
984-
}
985-
onInput={(e) => e.target.setCustomValidity("")}
986-
required
987-
/>
988-
</div>
989-
)}
990-
</>
991-
)}
992-
{!isAdvanceOpt && (
993-
<div
994-
onClick={() => setIsAdvanceOpt(!isAdvanceOpt)}
995-
className={`mt-2.5 op-link op-link-primary text-sm`}
996-
>
997-
{t("advanced-options")}
998-
</div>
999-
)}
1000-
{isAdvanceOpt && (
1001-
<>
1002-
<span className="mt-3 mb-2 font-[400]">
949+
<span className=" mb-2 font-[400]">
1003950
{t("form-title-1")}
1004951
</span>
1005-
<div className="text-xs mt-2">
952+
<div className="text-xs mt-3">
1006953
<label className="block">
1007954
{t("send-in-order")}
1008955
<a
@@ -1062,6 +1009,133 @@ const Forms = (props) => {
10621009
</div>
10631010
</div>
10641011
</div>
1012+
</>
1013+
)}
1014+
{isAdvanceOpt && (
1015+
<>
1016+
{isEnableSubscription &&
1017+
props.title === "New Template" && (
1018+
<div className="text-xs mt-[15px]">
1019+
<span
1020+
className={isSubscribe ? "" : " text-gray-300"}
1021+
>
1022+
{t("auto-reminder")}{" "}
1023+
{!isSubscribe && isEnableSubscription && (
1024+
<Upgrade />
1025+
)}
1026+
</span>
1027+
<label
1028+
className={`${
1029+
isSubscribe
1030+
? "cursor-pointer "
1031+
: "pointer-events-none opacity-50"
1032+
} relative block items-center mb-0 mt-1.5`}
1033+
>
1034+
<input
1035+
type="checkbox"
1036+
className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
1037+
checked={formData.autoreminder}
1038+
onChange={handleAutoReminder}
1039+
/>
1040+
</label>
1041+
</div>
1042+
)}
1043+
{formData?.autoreminder === true && (
1044+
<div className="text-xs mt-2">
1045+
<label className="block">
1046+
{t("remind-once")}
1047+
<span className="text-red-500 text-[13px]">*</span>
1048+
</label>
1049+
<input
1050+
type="number"
1051+
value={formData.remindOnceInEvery}
1052+
name="remindOnceInEvery"
1053+
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
1054+
onChange={handleStrInput}
1055+
onInvalid={(e) =>
1056+
e.target.setCustomValidity(t("input-required"))
1057+
}
1058+
onInput={(e) => e.target.setCustomValidity("")}
1059+
required
1060+
/>
1061+
</div>
1062+
)}
1063+
{props.title !== "New Template" && (
1064+
<>
1065+
<span className=" mt-2 font-[400]">
1066+
{t("form-title-1")}
1067+
</span>
1068+
<div className="text-xs mt-3">
1069+
<label className="block">
1070+
{t("send-in-order")}
1071+
<a
1072+
data-tooltip-id="sendInOrder-tooltip"
1073+
className="ml-1"
1074+
>
1075+
<sup>
1076+
<i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
1077+
</sup>
1078+
</a>
1079+
<Tooltip
1080+
id="sendInOrder-tooltip"
1081+
className="z-50"
1082+
>
1083+
<div className="max-w-[200px] md:max-w-[450px]">
1084+
<p className="font-bold">
1085+
{t("send-in-order")}
1086+
</p>
1087+
<p>{t("send-in-order-help.p1")}</p>
1088+
<p className="p-[5px]">
1089+
<ol className="list-disc">
1090+
<li>
1091+
<span className="font-bold">
1092+
{t("yes")}:{" "}
1093+
</span>
1094+
<span>
1095+
{t("send-in-order-help.p2")}
1096+
</span>
1097+
</li>
1098+
<li>
1099+
<span className="font-bold">
1100+
{t("no")}:{" "}
1101+
</span>
1102+
<span>
1103+
{t("send-in-order-help.p3")}
1104+
</span>
1105+
</li>
1106+
</ol>
1107+
</p>
1108+
<p>{t("send-in-order-help.p4")}</p>
1109+
</div>
1110+
</Tooltip>
1111+
</label>
1112+
<div className="flex flex-col md:flex-row md:gap-4">
1113+
<div className="flex items-center gap-2 ml-2 mb-1">
1114+
<input
1115+
type="radio"
1116+
value={"true"}
1117+
className="op-radio op-radio-xs"
1118+
name="SendinOrder"
1119+
checked={formData.SendinOrder === "true"}
1120+
onChange={handleStrInput}
1121+
/>
1122+
<div className="text-center">{t("yes")}</div>
1123+
</div>
1124+
<div className="flex items-center gap-2 ml-2 mb-1">
1125+
<input
1126+
type="radio"
1127+
value={"false"}
1128+
name="SendinOrder"
1129+
className="op-radio op-radio-xs"
1130+
checked={formData.SendinOrder === "false"}
1131+
onChange={handleStrInput}
1132+
/>
1133+
<div className="text-center">{t("no")}</div>
1134+
</div>
1135+
</div>
1136+
</div>
1137+
</>
1138+
)}
10651139

10661140
<div className="overflow-y-auto z-[500] transition-all">
10671141
{props.title === "Request Signatures" && (
@@ -1093,13 +1167,19 @@ const Forms = (props) => {
10931167
{isAdvanceOpt && (
10941168
<div
10951169
style={{
1096-
height: props.title === "New Template" ? "220px" : "280px"
1170+
height:
1171+
props.title === "New Template" && isEnableSubscription
1172+
? "220px"
1173+
: !isEnableSubscription &&
1174+
props.title === "New Template"
1175+
? "100px"
1176+
: "280px"
10971177
}}
10981178
className="w-[1px] bg-gray-300 m-auto hidden md:inline-block"
10991179
></div>
11001180
)}
11011181
{isAdvanceOpt && (
1102-
<div className="card bg-base-100 rounded-box grid p-3 flex-grow ">
1182+
<div className="card bg-base-100 rounded-box p-3 flex-grow ">
11031183
{isEnableSubscription && props.title !== "New Template" && (
11041184
<div className="text-xs mt-[10px]">
11051185
<span className={isSubscribe ? "" : " text-gray-300"}>
@@ -1143,9 +1223,9 @@ const Forms = (props) => {
11431223
/>
11441224
</div>
11451225
)}
1146-
<span className="font-[400]">{t("form-title-2")}</span>
1226+
<span className="font-[400] mt-2">{t("form-title-2")}</span>
11471227
{isEnableSubscription && (
1148-
<div className="text-xs mt-2">
1228+
<div className="text-xs mt-4">
11491229
<label className="block">
11501230
<span className={isSubscribe ? "" : " text-gray-300"}>
11511231
{t("isenable-otp")}{" "}
@@ -1223,7 +1303,7 @@ const Forms = (props) => {
12231303
</div>
12241304
</div>
12251305
)}
1226-
<div className="text-xs mt-2">
1306+
<div className="text-xs mt-3">
12271307
<label className="block">
12281308
<span>
12291309
{t("enable-tour")}
@@ -1286,13 +1366,23 @@ const Forms = (props) => {
12861366
)}
12871367
</div>
12881368
)}
1289-
{isAdvanceOpt && (
1369+
1370+
{isAdvanceOpt && props.title !== "Sign Yourself" ? (
12901371
<div
12911372
onClick={() => setIsAdvanceOpt(!isAdvanceOpt)}
12921373
className={`mt-2.5 op-link op-link-primary text-sm`}
12931374
>
12941375
{t("hide-advanced-options")}
12951376
</div>
1377+
) : (
1378+
props.title !== "Sign Yourself" && (
1379+
<div
1380+
onClick={() => setIsAdvanceOpt(!isAdvanceOpt)}
1381+
className={`mt-2.5 op-link op-link-primary text-sm`}
1382+
>
1383+
{t("advanced-options")}
1384+
</div>
1385+
)
12961386
)}
12971387

12981388
<div className="flex items-center mt-3 gap-2">

0 commit comments

Comments
 (0)