JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: slightly refactored billing modals

Browse Source 
Slightly refactored html and css code (it's still weird) of billing modals.
Probably there is no reason to rework it entirely since we're going to migrate to Vuetify project.

Issue:
https://github.com/storj/storj/issues/5220

Change-Id: I25b4b0cdb9d4d24ef3d1f615f2a3471b2d3e727d
This commit is contained in:
Vitalii 2023-09-14 17:22:13 +03:00 committed by Storj Robot
parent 0a063fdeb3
commit 81d49ada06
1 changed files with 66 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -60,48 +60,47 @@
<div v-if="isRemovePaymentMethodsModalOpen || isChangeDefaultPaymentModalOpen" class="edit_payment_method"> <div v-if="isRemovePaymentMethodsModalOpen || isChangeDefaultPaymentModalOpen" class="edit_payment_method">
<div v-if="isChangeDefaultPaymentModalOpen" class="change-default-modal-container"> <div v-if="isChangeDefaultPaymentModalOpen" class="change-default-modal-container">
<CreditCardImage class="card-icon-default" /> <CreditCardImage />
<div class="edit_payment_method__container__close-cross-container-default" @click="onCloseClickDefault"> <div class="edit_payment_method__container__close-cross-container-default" @click="onCloseClickDefault">
<CloseCrossIcon class="close-icon" /> <CloseCrossIcon class="close-icon" />
</div> </div>
<div class="edit_payment_method__header">Select Default Card</div> <div class="edit_payment_method__header">Select Default Card</div>
<form v-for="card in creditCards" :key="card.id"> <label v-for="card in creditCards" :key="card.id" :for="card.id" class="change-default-input-container">
<div class="change-default-input-container"> <AmericanExpressIcon v-if="card.brand === 'amex' " class="cardIcons" />
<AmericanExpressIcon v-if="card.brand === 'amex' " class="cardIcons" /> <DiscoverIcon v-if="card.brand === 'discover' " class="cardIcons" />
<DiscoverIcon v-if="card.brand === 'discover' " class="cardIcons" /> <JCBIcon v-if="card.brand === 'jcb' " class="cardIcons jcb-icon" />
<JCBIcon v-if="card.brand === 'jcb' " class="cardIcons jcb-icon" /> <MastercardIcon v-if="card.brand === 'mastercard' " class="cardIcons mastercard-icon" />
<MastercardIcon v-if="card.brand === 'mastercard' " class="cardIcons mastercard-icon" /> <UnionPayIcon v-if="card.brand === 'unionpay' " class="cardIcons union-icon" />
<UnionPayIcon v-if="card.brand === 'unionpay' " class="cardIcons union-icon" /> <VisaIcon v-if="card.brand === 'visa' " class="cardIcons" />
<VisaIcon v-if="card.brand === 'visa' " class="cardIcons" /> <DinersIcon v-if="card.brand === 'diners' " class="cardIcons diners-icon" />
<DinersIcon v-if="card.brand === 'diners' " class="cardIcons diners-icon" /> <img src="@/../static/images/payments/cardStars.png" alt="Hidden card digits stars image" class="payment-methods-container__card-container__info-area__info-container__image">
<img src="@/../static/images/payments/cardStars.png" alt="Hidden card digits stars image" class="payment-methods-container__card-container__info-area__info-container__image"> {{ card.last4 }}
{{ card.last4 }} <input
<input :id="card.id"
:id="card.id" v-model="defaultCreditCardSelection"
v-model="defaultCreditCardSelection" :value="card.id"
:value="card.id" class="change-default-input"
class="change-default-input" type="radio"
type="radio" name="defaultCreditCardSelection"
name="defaultCreditCardSelection" >
> </label>
</div>
</form>
<div class="default-card-button" @click="updatePaymentMethod"> <div class="default-card-button" @click="updatePaymentMethod">
Update Default Card Update Default Card
</div> </div>
</div> </div>
<div v-if="isRemovePaymentMethodsModalOpen" class="edit_payment_method__container"> <div v-if="isRemovePaymentMethodsModalOpen" class="edit_payment_method__container">
<CreditCardImage class="card-icon" /> <CreditCardImage />
<div class="edit_payment_method__container__close-cross-container" @click="onCloseClick"> <div class="edit_payment_method__container__close-cross-container" @click="onCloseClick">
<CloseCrossIcon class="close-icon" /> <CloseCrossIcon class="close-icon" />
</div> </div>
<div class="edit_payment_method__header">Remove Credit Card</div> <div class="edit_payment_method__header">Remove Credit Card</div>
<div v-if="!cardBeingEdited.isDefault" class="edit_payment_method__header-subtext">This is not your default payment card.</div> <div v-if="cardBeingEdited.isDefault" class="edit_payment_method__header-subtext-default">This is your default payment card.<br>It can't be deleted.</div>
<div v-if="cardBeingEdited.isDefault" class="edit_payment_method__header-subtext-default">This is your default payment card.</div> <div v-else class="edit_payment_method__header-subtext">This is not your default payment card.</div>
<div class="edit_payment_method__header-change-default" @click="changeDefault"> <div class="edit_payment_method__header-change-default" @click="changeDefault">
<a class="edit-card-text">Edit default card -></a> <a class="edit-card-text">Edit default card -></a>
</div> </div>
<div <div
v-if="!cardBeingEdited.isDefault"
class="remove-card-button" class="remove-card-button"
@click="removePaymentMethod" @click="removePaymentMethod"
@mouseover="deleteHover = true" @mouseover="deleteHover = true"
@ -330,6 +329,17 @@ async function prepQRCode(): Promise<void> {
} }
async function updatePaymentMethod(): Promise<void> { async function updatePaymentMethod(): Promise<void> {
if (!defaultCreditCardSelection.value) {
notify.error('Default card is not selected', AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);
return;
}
const card = creditCards.value.find(c => c.id === defaultCreditCardSelection.value);
if (card && card.isDefault) {
notify.error('Chosen card is already default', AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);
return;
}
try { try {
await billingStore.makeCardDefault(defaultCreditCardSelection.value); await billingStore.makeCardDefault(defaultCreditCardSelection.value);
notify.success('Default payment card updated'); notify.success('Default payment card updated');
@ -485,6 +495,8 @@ function paginationController(page: number, limit: number): void {
} }
onMounted((): void => { onMounted((): void => {
defaultCreditCardSelection.value = creditCards.value.find(c => c.isDefault)?.id ?? '';
if (route.query.action === 'token history') { if (route.query.action === 'token history') {
showTransactionsTable(); showTransactionsTable();
} }
@ -541,16 +553,17 @@ $align: center;
} }
.change-default-input-container { .change-default-input-container {
font-family: 'font_regular', sans-serif;
display: $flex; display: $flex;
flex-direction: row; align-items: center;
align-items: flex-start;
padding: 16px; padding: 16px;
gap: 10px; gap: 10px;
width: 300px; width: 100%;
height: 10px; box-sizing: border-box;
border: 1px solid var(--c-grey-4); border: 1px solid var(--c-grey-4);
border-radius: 8px; border-radius: 8px;
margin: 7px auto auto; margin: 7px auto auto;
cursor: pointer;
} }
.change-default-input { .change-default-input {
@ -562,23 +575,15 @@ $align: center;
.default-card-button { .default-card-button {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px;
cursor: pointer; cursor: pointer;
margin-left: 112px;
display: $flex;
grid-column: 1;
grid-row: 5;
width: 132px;
height: 24px; height: 24px;
padding: 16px; padding: 16px;
gap: 8px;
background: var(--c-blue-3); background: var(--c-blue-3);
box-shadow: 0 0 1px rgb(9 28 69 / 80%); box-shadow: 0 0 1px rgb(9 28 69 / 80%);
border-radius: 8px; border-radius: 8px;
font-family: 'font_bold', sans-serif; font-family: 'font_bold', sans-serif;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
align-items: $align;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: white; color: white;
@ -589,16 +594,9 @@ $align: center;
.remove-card-button { .remove-card-button {
cursor: pointer; cursor: pointer;
margin-left: 130px;
margin-top: 15px;
margin-bottom: 21px;
grid-column: 1;
grid-row: 5;
width: 111px;
height: 24px;
padding: 16px; padding: 16px;
gap: 8px;
background: #fff; background: #fff;
gap: 8px;
border: 1px solid var(--c-grey-3); border: 1px solid var(--c-grey-3);
box-shadow: 0 0 3px rgb(0 0 0 / 8%); box-shadow: 0 0 3px rgb(0 0 0 / 8%);
border-radius: 8px; border-radius: 8px;
@ -623,23 +621,16 @@ $align: center;
cursor: pointer; cursor: pointer;
} }
.card-icon {
margin-top: 20px;
margin-left: 168px;
grid-column: 1;
grid-row: 1;
}
.card-icon-default {
margin-top: 35px;
margin-bottom: 10px;
margin-left: 168px;
}
.change-default-modal-container { .change-default-modal-container {
width: 400px; display: flex;
background: #f5f6fa; flex-direction: column;
align-items: center;
width: 320px;
padding: 20px;
box-sizing: border-box;
background: var(--c-white);
border-radius: 6px; border-radius: 6px;
position: relative;
} }
.edit_payment_method { .edit_payment_method {
@ -652,15 +643,10 @@ $align: center;
justify-content: $align; justify-content: $align;
&__header-change-default { &__header-change-default {
margin-top: -6px; margin: 16px 0;
margin-left: 141px;
grid-column: 1;
grid-row: 4;
} }
&__header { &__header {
grid-column: 1;
grid-row: 2;
font-family: 'font_bold', sans-serif; font-family: 'font_bold', sans-serif;
font-size: 24px; font-size: 24px;
line-height: 31px; line-height: 31px;
@ -668,11 +654,11 @@ $align: center;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: #1b2533; color: #1b2533;
align-self: center; align-self: center;
margin-top: 16px;
} }
&__header-subtext { &__header-subtext,
grid-column: 1; &__header-subtext-default {
grid-row: 3;
font-family: 'font_regular', sans-serif; font-family: 'font_regular', sans-serif;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
@ -680,49 +666,23 @@ $align: center;
color: var(--c-grey-6); color: var(--c-grey-6);
} }
&__header-subtext-default {
margin-left: 94px;
font-family: 'font_regular', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--c-grey-6);
}
&__container { &__container {
display: grid; display: flex;
grid-template-columns: auto; flex-direction: column;
grid-template-rows: 1fr 60px 30px auto auto; align-items: center;
width: 400px; width: 320px;
background: #f5f6fa; padding: 20px;
box-sizing: border-box;
background: var(--c-white);
border-radius: 6px; border-radius: 6px;
position: relative;
&__close-cross-container { &__close-cross-container,
margin-top: 22px;
margin-left: 357px;
grid-column: 1;
grid-row: 1;
height: 24px;
width: 24px;
cursor: pointer;
&:hover .close-cross-svg-path {
fill: #2683ff;
}
}
&__close-cross-container-default { &__close-cross-container-default {
position: absolute; position: absolute;
margin-top: -58px; top: 20px;
margin-left: 357px; right: 20px;
grid-column: 1;
grid-row: 1;
height: 24px;
width: 24px;
cursor: pointer; cursor: pointer;
&:hover .close-cross-svg-path {
fill: #2683ff;
}
} }
} }
} }