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