Skip to content

Commit 12f60c9

Browse files
prafull-opensignlabsprafull-opensignlabs
committed
fix: wrong alert is visible after loader in quicksend popup
1 parent 9ca7aee commit 12f60c9

File tree

2 files changed

+151
-138
lines changed

2 files changed

+151
-138
lines changed

‎apps/OpenSign/src/components/BulkSendUi.js‎

Lines changed: 150 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ const BulkSendUi = (props) => {
2020
const [amount, setAmount] = useState({
2121
price: (75.0).toFixed(2),
2222
quantity: 500,
23-
totalPrice: 0,
2423
priceperbulksend: 0.15,
2524
totalQuickSend: 0
2625
});
2726
const [isQuotaReached, setIsQuotaReached] = useState(false);
27+
const [isLoader, setIsLoader] = useState(false);
2828
const allowedSigners = 50;
2929
useEffect(() => {
3030
signatureExist();
@@ -34,24 +34,24 @@ const BulkSendUi = (props) => {
3434
//function to check atleast one signature field exist
3535
const signatureExist = async () => {
3636
if (isEnableSubscription) {
37-
setIsSubmit(true);
37+
setIsLoader(true);
3838
try {
3939
const allowedquicksend = await Parse.Cloud.run("allowedquicksend");
4040
if (allowedquicksend > 0) {
4141
setIsBulkAvailable(true);
42-
const getPlaceholder = props.item?.Placeholders;
43-
const checkIsSignatureExistt = getPlaceholder?.every(
44-
(placeholderObj) =>
45-
placeholderObj?.placeHolder?.some((holder) =>
46-
holder?.pos?.some((posItem) => posItem?.type === "signature")
47-
)
48-
);
49-
setIsSignatureExist(checkIsSignatureExistt);
5042
}
5143
setAmount((obj) => ({ ...obj, totalQuickSend: allowedquicksend }));
52-
setIsSubmit(false);
44+
const getPlaceholder = props.item?.Placeholders;
45+
const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
46+
placeholderObj?.placeHolder?.some((holder) =>
47+
holder?.pos?.some((posItem) => posItem?.type === "signature")
48+
)
49+
);
50+
setIsSignatureExist(checkIsSignatureExistt);
51+
setIsLoader(false);
5352
} catch (err) {
54-
setIsSubmit(false);
53+
setIsLoader(false);
54+
alert(t("something-went-wrong-mssg"));
5555
console.log("Err", err);
5656
}
5757
} else {
@@ -63,6 +63,7 @@ const BulkSendUi = (props) => {
6363
)
6464
);
6565
setIsSignatureExist(checkIsSignatureExistt);
66+
setIsLoader(false);
6667
}
6768
};
6869
useEffect(() => {
@@ -246,9 +247,9 @@ const BulkSendUi = (props) => {
246247
setAmount((obj) => ({
247248
...obj,
248249
quantity: 500,
249-
priceperapi: 0.15,
250+
priceperbulksend: 0.15,
250251
price: (75.0).toFixed(2),
251-
totalapis: _resAddon.addon
252+
totalQuickSend: _resAddon.addon
252253
}));
253254
}
254255
}
@@ -274,146 +275,158 @@ const BulkSendUi = (props) => {
274275
};
275276
return (
276277
<>
277-
{isSubmit && (
278-
<div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
278+
{isLoader ? (
279+
<div className="w-full h-[100px] flex justify-center items-center z-[999]">
279280
<Loader />
280281
</div>
281-
)}
282-
{isBulkAvailable ? (
282+
) : (
283283
<>
284-
{props.Placeholders?.length > 0 ? (
285-
isSignatureExist ? (
286-
<>
287-
{props.Placeholders?.some((x) => !x.signerObjId) ? (
288-
<div>
289-
<form onSubmit={handleSubmit}>
290-
<div className="min-h-max max-h-[250px] overflow-y-auto">
291-
{forms?.map((form, index) => (
292-
<div
293-
key={form.Id}
294-
className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
295-
>
296-
{form?.fields?.map((field, fieldIndex) => (
284+
{isSubmit && (
285+
<div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
286+
<Loader />
287+
</div>
288+
)}
289+
{isBulkAvailable ? (
290+
<>
291+
{props.Placeholders?.length > 0 ? (
292+
isSignatureExist ? (
293+
<>
294+
{props.Placeholders?.some((x) => !x.signerObjId) ? (
295+
<div>
296+
<form onSubmit={handleSubmit}>
297+
<div className="min-h-max max-h-[250px] overflow-y-auto">
298+
{forms?.map((form, index) => (
297299
<div
298-
className="flex flex-col"
299-
key={field.fieldId}
300+
key={form.Id}
301+
className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
300302
>
301-
<label>{field.label}</label>
302-
<SuggestionInput
303-
required
304-
type="email"
305-
value={field.value}
306-
index={fieldIndex}
307-
onChange={(signer) =>
308-
handleInputChange(index, signer, fieldIndex)
309-
}
310-
/>
303+
{form?.fields?.map((field, fieldIndex) => (
304+
<div
305+
className="flex flex-col"
306+
key={field.fieldId}
307+
>
308+
<label>{field.label}</label>
309+
<SuggestionInput
310+
required
311+
type="email"
312+
value={field.value}
313+
index={fieldIndex}
314+
onChange={(signer) =>
315+
handleInputChange(
316+
index,
317+
signer,
318+
fieldIndex
319+
)
320+
}
321+
/>
322+
</div>
323+
))}
324+
{forms?.length > 1 && (
325+
<button
326+
onClick={() => handleRemoveForm(index)}
327+
className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
328+
>
329+
<i className="fa-light fa-trash"></i>
330+
</button>
331+
)}
332+
<div ref={formRef}></div>
311333
</div>
312334
))}
313-
{forms?.length > 1 && (
314-
<button
315-
onClick={() => handleRemoveForm(index)}
316-
className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
317-
>
318-
<i className="fa-light fa-trash"></i>
319-
</button>
320-
)}
321-
<div ref={formRef}></div>
322335
</div>
323-
))}
324-
</div>
325-
<div className="flex flex-col mx-4 mb-4 gap-3">
326-
<button
327-
onClick={handleAddForm}
328-
className="op-btn op-btn-primary focus:outline-none"
329-
>
330-
<i className="fa-light fa-plus"></i>{" "}
331-
<span>{t("add-new")}</span>
332-
</button>
333-
<button
334-
type="submit"
335-
className="op-btn op-btn-accent focus:outline-none"
336+
<div className="flex flex-col mx-4 mb-4 gap-3">
337+
<button
338+
onClick={handleAddForm}
339+
className="op-btn op-btn-primary focus:outline-none"
340+
>
341+
<i className="fa-light fa-plus"></i>{" "}
342+
<span>{t("add-new")}</span>
343+
</button>
344+
<button
345+
type="submit"
346+
className="op-btn op-btn-accent focus:outline-none"
347+
>
348+
<i className="fa-light fa-paper-plane"></i>{" "}
349+
<span>{t("send")}</span>
350+
</button>
351+
</div>
352+
</form>
353+
<ModalUi
354+
isOpen={isQuotaReached}
355+
handleClose={() => handleCloseQuotaReached()}
336356
>
337-
<i className="fa-light fa-paper-plane"></i>{" "}
338-
<span>{t("send")}</span>
339-
</button>
357+
<div className="p-4 flex justify-center items-center flex-col gap-y-3">
358+
<p className="text-center text-base-content">
359+
{t("quotaerrquicksend")}
360+
</p>
361+
<button
362+
onClick={() => setIsBulkAvailable(false)}
363+
className=" op-btn op-btn-primary w-28"
364+
>
365+
{t("buycredits")}
366+
</button>
367+
</div>
368+
</ModalUi>
340369
</div>
341-
</form>
342-
<ModalUi
343-
isOpen={isQuotaReached}
344-
handleClose={() => handleCloseQuotaReached()}
345-
>
346-
<div className="p-4 flex justify-center items-center flex-col gap-y-3">
347-
<p className="text-center text-base-content">
348-
{t("quotaerrquicksend")}
349-
</p>
350-
<button
351-
onClick={() => setIsBulkAvailable(false)}
352-
className=" op-btn op-btn-primary w-28"
353-
>
354-
{t("buycredits")}
355-
</button>
370+
) : (
371+
<div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
372+
{t("quick-send-alert-1")}
356373
</div>
357-
</ModalUi>
358-
</div>
374+
)}
375+
</>
359376
) : (
360377
<div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
361-
{t("quick-send-alert-1")}
378+
{t("quick-send-alert-2")}
362379
</div>
363-
)}
364-
</>
365-
) : (
366-
<div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
367-
{t("quick-send-alert-2")}
368-
</div>
369-
)
380+
)
381+
) : (
382+
<div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
383+
{t("quick-send-alert-3")}
384+
</div>
385+
)}
386+
</>
370387
) : (
371-
<div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
372-
{t("quick-send-alert-3")}
373-
</div>
388+
<form onSubmit={handleAddOnQuickSubmit} className="p-3">
389+
<p className="flex justify-center text-center mx-2 mb-3 text-base op-text-accent font-medium">
390+
{t("additional-quicksend")}
391+
</p>
392+
<div className="mb-3 flex justify-between">
393+
<label
394+
htmlFor="quantity"
395+
className="block text-xs text-gray-700 font-semibold"
396+
>
397+
{t("quantityofquicksend")}
398+
<span className="text-[red] text-[13px]">*</span>
399+
</label>
400+
<select
401+
value={amount.quantity}
402+
onChange={(e) => handlePricePerQuick(e)}
403+
name="quantity"
404+
className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-1/4 text-xs"
405+
required
406+
>
407+
{quantityList.length > 0 &&
408+
quantityList.map((x) => (
409+
<option key={x} value={x}>
410+
{x}
411+
</option>
412+
))}
413+
</select>
414+
</div>
415+
<div className="mb-3 flex justify-between">
416+
<label className="block text-xs text-gray-700 font-semibold">
417+
{t("Price")} (1 * {amount.priceperbulksend})
418+
</label>
419+
<div className="w-1/4 flex justify-center items-center text-sm">
420+
USD {amount.price}
421+
</div>
422+
</div>
423+
<hr className="text-base-content mb-3" />
424+
<button className="op-btn op-btn-primary w-full mt-2">
425+
{t("Proceed")}
426+
</button>
427+
</form>
374428
)}
375429
</>
376-
) : (
377-
<form onSubmit={handleAddOnQuickSubmit} className="p-3">
378-
<p className="flex justify-center text-center mx-2 mb-3 text-base op-text-accent font-medium">
379-
{t("additional-quicksend")}
380-
</p>
381-
<div className="mb-3 flex justify-between">
382-
<label
383-
htmlFor="quantity"
384-
className="block text-xs text-gray-700 font-semibold"
385-
>
386-
{t("quantityofquicksend")}
387-
<span className="text-[red] text-[13px]">*</span>
388-
</label>
389-
<select
390-
value={amount.quantity}
391-
onChange={(e) => handlePricePerQuick(e)}
392-
name="quantity"
393-
className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-1/4 text-xs"
394-
required
395-
>
396-
{quantityList.length > 0 &&
397-
quantityList.map((x) => (
398-
<option key={x} value={x}>
399-
{x}
400-
</option>
401-
))}
402-
</select>
403-
</div>
404-
<div className="mb-3 flex justify-between">
405-
<label className="block text-xs text-gray-700 font-semibold">
406-
{t("Price")} (1 * {amount.priceperbulksend})
407-
</label>
408-
<div className="w-1/4 flex justify-center items-center text-sm">
409-
USD {amount.price}
410-
</div>
411-
</div>
412-
<hr className="text-base-content mb-3" />
413-
<button className="op-btn op-btn-primary w-full mt-2">
414-
{t("Proceed")}
415-
</button>
416-
</form>
417430
)}
418431
</>
419432
);

‎apps/OpenSign/src/primitives/GetReportDisplay.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1669,7 +1669,7 @@ const ReportTable = (props) => {
16691669
handleClose={() => setIsBulkSend({})}
16701670
>
16711671
{isLoader[item.objectId] ? (
1672-
<div className="w-full h-[100px] flex justify-center items-center bg-opacity-30 z-30">
1672+
<div className="w-full h-[100px] flex justify-center items-center z-30">
16731673
<Loader />
16741674
</div>
16751675
) : (

0 commit comments

Comments
 (0)