rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-29 18:52:22 +01:00
Code Issues Releases Activity

show indicator while the payment is pending

Browse Source
This commit is contained in:
Sylvain 2020-12-07 12:58:11 +01:00
parent 7ed0f6141a
commit 1e43dc9518
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/frontend/src/javascript/components/stripe-modal.tsx
View File

@ -196,13 +196,17 @@ const StripeModal: React.FC<StripeModalProps> = ({ isOpen, toggleModal, afterSuc
<p>{ t('app.shared.stripe.payment_schedule', { DEADLINES: schedule.items.length }) }</p>
</div>}
</StripeForm>
<button type="submit"
disabled={!canSubmit()}
form="stripe-form"
className="validate-btn">
{!submitState && <button type="submit"
disabled={!canSubmit()}
form="stripe-form"
className="validate-btn">
{t('app.shared.stripe.confirm_payment_of_', { AMOUNT: formatPrice(remainingPrice) })}
</button>
{/* TODO, add loader if submitState === true */}
</button>}
{submitState && <div className="payment-pending">
<div className="fa-2x">
<i className="fas fa-circle-notch fa-spin" />
</div>
</div>}
</StripeElements>}
</FabModal>
);

12
app/frontend/src/stylesheets/modules/stripe-modal.scss
View File

@ -64,5 +64,17 @@
padding: 16px;
color: #fff;
background-color: #1d98ec;
margin-bottom: 15px;
&[disabled] {
background-color: lighten(#1d98ec, 20%);
}
}
.payment-pending {
@extend .validate-btn;
@extend .validate-btn[disabled];
text-align: center;
padding: 4px;
}
}