akaunting 3.0 (the last dance)
This commit is contained in:
Burak Civan
@ -1,76 +1,58 @@
|
||||
<template>
|
||||
<div class="card-item" :class="{ '-active' : isCardFlipped }">
|
||||
<div class="card-item__side -front">
|
||||
<div class="card-item relative w-2/4 lg:w-3/4 h-48 m-auto" :class="{ '-active' : isCardFlipped }">
|
||||
<div class="card-item__side h-full rounded-lg shadow-lg overflow-hidden" style="transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
|
||||
backface-visibility: hidden;">
|
||||
<div
|
||||
class="card-item__focus"
|
||||
:class="{'-active' : focusElementStyle }"
|
||||
class="absolute w-full h-full left-0 right-0 top-0 rounded-sm overflow-hidden z-10 pointer-events-none opacity-0"
|
||||
style="transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);"
|
||||
:class="{'opacity-100' : focusElementStyle }"
|
||||
:style="focusElementStyle"
|
||||
ref="focusElement"
|
||||
></div>
|
||||
<div class="card-item__cover">
|
||||
<div class="absolute w-full h-full bg-black left-0 top-0 rounded-lg overflow-hidden" style="background-image: linear-gradient(147deg, #354fce 0%, #0c296b 74%);">
|
||||
<img
|
||||
v-if="currentCardBackground"
|
||||
:src="currentCardBackground"
|
||||
class="card-item__bg"
|
||||
class="w-full h-full block object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-item__wrapper">
|
||||
<div class="card-item__top">
|
||||
<div class="relative h-full py-6 px-4 select-none">
|
||||
<div class="flex items-start justify-between px-4">
|
||||
<img
|
||||
src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png"
|
||||
class="card-item__chip"
|
||||
class="w-12"
|
||||
/>
|
||||
<div class="card-item__type">
|
||||
<div class="relative w-full h-12 flex flex-end">
|
||||
<transition name="slide-fade-up">
|
||||
<img
|
||||
:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + cardType + '.png'"
|
||||
v-if="cardType"
|
||||
:key="cardType"
|
||||
alt
|
||||
class="card-item__typeImg"
|
||||
class="w-full h-full object-right-top object-contain"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<label :for="fields.cardNumber" class="card-item__number" :ref="fields.cardNumber">
|
||||
<template>
|
||||
<span v-for="(n, $index) in currentPlaceholder" :key="$index">
|
||||
<transition name="slide-fade-up">
|
||||
<div class="card-item__numberItem" v-if="getIsNumberMasked($index, n)">*</div>
|
||||
<div
|
||||
class="card-item__numberItem"
|
||||
:class="{ '-active' : n.trim() === '' }"
|
||||
:key="currentPlaceholder"
|
||||
v-else-if="labels.cardNumber.length > $index"
|
||||
>{{labels.cardNumber[$index]}}</div>
|
||||
<div
|
||||
class="card-item__numberItem"
|
||||
:class="{ '-active' : n.trim() === '' }"
|
||||
v-else
|
||||
:key="currentPlaceholder + 1"
|
||||
>{{n}}</div>
|
||||
</transition>
|
||||
</span>
|
||||
</template>
|
||||
</label>
|
||||
<div class="card-item__content">
|
||||
<label :for="fields.cardName" class="card-item__info" :ref="fields.cardName">
|
||||
<div class="card-item__holder">Card Holder</div>
|
||||
|
||||
<div class="flex items-start justify-between text-white">
|
||||
<label :for="fields.cardName" class="p-2 block cursor-pointer text-white" :ref="fields.cardName">
|
||||
<transition name="slide-fade-up">
|
||||
<div class="card-item__name" v-if="labels.cardName.length" key="1">
|
||||
<div class="text-lg overflow-hidden" v-if="labels.cardName.length" key="1">
|
||||
<transition-group name="slide-fade-right">
|
||||
<span
|
||||
class="card-item__nameItem"
|
||||
class="text-lg overflow-hidden"
|
||||
v-for="(n, $index) in labels.cardName.replace(/\s\s+/g, ' ')"
|
||||
:key="$index + 1"
|
||||
>{{n}}</span>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div class="card-item__name" v-else key="2">Full Name</div>
|
||||
<div class="text-lg overflow-hidden" v-else key="2">Full Name</div>
|
||||
</transition>
|
||||
</label>
|
||||
<div class="card-item__date" ref="cardDate">
|
||||
<label :for="fields.cardMonth" class="card-item__dateTitle">Expires</label>
|
||||
<div class="flex flex-wrap shrink-0 text-lg p-2 cursor-pointer" ref="cardDate">
|
||||
<label :for="fields.cardMonth" class="card-item__dateItem">
|
||||
<transition name="slide-fade-up">
|
||||
<span v-if="labels.cardMonth" :key="labels.cardMonth">{{labels.cardMonth}}</span>
|
||||
@ -86,27 +68,49 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label :for="fields.cardNumber" class="flex justify-around font-medium text-white text-lg p-3 cursor-pointer" :ref="fields.cardNumber">
|
||||
<template>
|
||||
<span v-for="(n, $index) in currentPlaceholder" :key="$index">
|
||||
<transition name="slide-fade-up">
|
||||
<div class="w-2" v-if="getIsNumberMasked($index, n)">*</div>
|
||||
<div
|
||||
class="w-2"
|
||||
:class="{ '-active' : n.trim() === '' }"
|
||||
:key="currentPlaceholder"
|
||||
v-else-if="labels.cardNumber.length > $index"
|
||||
>{{labels.cardNumber[$index]}}</div>
|
||||
<div
|
||||
class="w-2"
|
||||
:class="{ '-active' : n.trim() === '' }"
|
||||
v-else
|
||||
:key="currentPlaceholder + 1"
|
||||
>{{n}}</div>
|
||||
</transition>
|
||||
</span>
|
||||
</template>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-item__side -back">
|
||||
<div class="card-item__cover">
|
||||
<div class="card-item__side -back absolute top-0 left-0 w-full p-0 h-full">
|
||||
<div class="absolute w-full h-full bg-black left-0 top-0 rounded-lg overflow-hidden" style="background-image: linear-gradient(147deg, #354fce 0%, #0c296b 74%);">
|
||||
<img
|
||||
v-if="currentCardBackground"
|
||||
:src="currentCardBackground"
|
||||
class="card-item__bg"
|
||||
class="w-full h-full block object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-item__band"></div>
|
||||
<div class="card-item__cvv">
|
||||
<div class="card-item__cvvTitle">CVV</div>
|
||||
<div class="card-item__cvvBand">
|
||||
<div class="absolute w-full h-32 mt-12 bg-black"></div>
|
||||
<div class="relative p-4 text-right">
|
||||
<div class="pr-4 text-white mb-3">CVV</div>
|
||||
<div class="h-12 flex items-center justify-end text-black rounded-sm shadow-lg bg-white text-right">
|
||||
<span v-for="(n, $index) in labels.cardCvv" :key="$index">*</span>
|
||||
</div>
|
||||
<div class="card-item__type">
|
||||
<div class="relative w-24 h-12 flex justify-end">
|
||||
<img
|
||||
:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + cardType + '.png'"
|
||||
v-if="cardType"
|
||||
class="card-item__typeImg"
|
||||
class="w-full h-full object-right-top object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -244,3 +248,33 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-item.-active .card-item__side.-front {
|
||||
transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg);
|
||||
}
|
||||
.card-item.-active .card-item__side.-back {
|
||||
transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg);
|
||||
}
|
||||
|
||||
.card-item__side {
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
|
||||
backface-visibility: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-item__side.-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg);
|
||||
z-index: 2;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,337 +1,195 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row align-items-center" v-if="Object.keys(cards).length">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label for="item_name" class="form-control-label">{{ textCard }}</label>
|
||||
<div class="input-group-invoice-text" v-for="(name, key, id) in cards">
|
||||
<div class="custom-radio mb-2">
|
||||
<button type="button"
|
||||
:id="'card-'+ key + '-' + id"
|
||||
class="btn btn-outline-default w-100"
|
||||
@click="onSelectedCard(key)"
|
||||
:disabled="loading">
|
||||
<div class="description text-center">
|
||||
<i v-if="loading" class="fa fa-spinner fa-spin fa-1x checkout-spin"></i>
|
||||
|
||||
{{ name }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group-invoice-text">
|
||||
<div class="custom-radio mb-2">
|
||||
<button type="button"
|
||||
id="card-new-card"
|
||||
class="btn btn-outline-default w-100"
|
||||
data-toggle="collapse"
|
||||
data-target="#collapseNewCard"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapseNewCard"
|
||||
:disabled="loading">
|
||||
<div class="description text-center">
|
||||
<i v-if="loading" class="fa fa-spinner fa-spin fa-1x checkout-spin"></i>
|
||||
|
||||
{{ textNewCard }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse w-100" id="collapseNewCard">
|
||||
<div class="row">
|
||||
<div class="col-md-6 p-5">
|
||||
<div class="form-group">
|
||||
<label for="cardName" class="form-control-label">{{ textCardName }}</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-font"></i>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
:id="fields.cardName"
|
||||
v-letter-only
|
||||
@input="changeName"
|
||||
class="form-control"
|
||||
:placeholder="placeholderCardName"
|
||||
:value="formData.cardName"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="tel"
|
||||
:id="fields.cardNumber"
|
||||
@input="changeNumber"
|
||||
@focus="focusCardNumber"
|
||||
@blur="blurCardNumber"
|
||||
class="form-control"
|
||||
:placeholder="placeholderCardNumber"
|
||||
:value="formData.cardNumber"
|
||||
:maxlength="cardNumberMaxLength"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<label for="cardMonth" class="form-control-label">{{ textExpirationDate }}</label>
|
||||
<div class="card-form__group">
|
||||
<select
|
||||
class="card-input__input -select"
|
||||
:id="fields.cardMonth"
|
||||
v-model="formData.cardMonth"
|
||||
@change="changeMonth"
|
||||
data-card-field
|
||||
>
|
||||
<option value disabled selected>{{ textMonth }}</option>
|
||||
<option
|
||||
v-bind:value="n < 10 ? '0' + n : n"
|
||||
v-for="n in 12"
|
||||
v-bind:disabled="n < minCardMonth"
|
||||
v-bind:key="n"
|
||||
>{{generateMonthValue(n)}}</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
class="card-input__input -select"
|
||||
:id="fields.cardYear"
|
||||
v-model="formData.cardYear"
|
||||
@change="changeYear"
|
||||
data-card-field
|
||||
>
|
||||
<option value disabled selected>{{ textYear }}</option>
|
||||
<option
|
||||
v-bind:value="$index + minCardYear"
|
||||
v-for="(n, $index) in 12"
|
||||
v-bind:key="n"
|
||||
>{{$index + minCardYear}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label for="cardCvv" class="form-control-label">{{ textCvv }}</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-key"></i>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="tel"
|
||||
class="form-control"
|
||||
:placeholder="placeholderCvv"
|
||||
v-number-only
|
||||
:id="fields.cardCvv"
|
||||
maxlength="4"
|
||||
:value="formData.cardCvv"
|
||||
@input="changeCvv"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" v-if="storeCard">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="custom-control-input">
|
||||
<label :for="'store_card' + _uid" class="custom-control-label">
|
||||
<strong>{{ textStoreCard }}</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
|
||||
<div v-if="loading" class="aka-loader-frame">
|
||||
<div class="aka-loader"></div>
|
||||
</div>
|
||||
<span v-if="!loading" class="btn-inner--text">{{ textButton }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mt-6">
|
||||
<Card
|
||||
:fields="fields"
|
||||
:labels="formData"
|
||||
:isCardNumberMasked="isCardNumberMasked"
|
||||
:randomBackgrounds="randomBackgrounds"
|
||||
:backgroundImage="backgroundImage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center" v-if="!Object.keys(cards).length">
|
||||
<div class="col-md-6 p-5">
|
||||
<div class="form-group">
|
||||
<label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="tel"
|
||||
:id="fields.cardNumber"
|
||||
@input="changeNumber"
|
||||
@focus="focusCardNumber"
|
||||
@blur="blurCardNumber"
|
||||
class="form-control"
|
||||
:placeholder="placeholderCardNumber"
|
||||
:value="formData.cardNumber"
|
||||
:maxlength="cardNumberMaxLength"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div class="invalid-feedback d-block" v-if="validations.card_number" v-html="validations.card_number[0]"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="cardName" class="form-control-label">{{ textCardName }}</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-font"></i>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
:id="fields.cardName"
|
||||
v-letter-only
|
||||
@input="changeName"
|
||||
class="form-control"
|
||||
:placeholder="placeholderCardName"
|
||||
:value="formData.cardName"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div class="invalid-feedback d-block" v-if="validations.card_name" v-html="validations.card_name[0]"></div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<label for="cardMonth" class="form-control-label">{{ textExpirationDate }}</label>
|
||||
<div class="form-group d-flex">
|
||||
<div class="input-group input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</span>
|
||||
</div>
|
||||
<select
|
||||
class="form-control w-50"
|
||||
:id="fields.cardMonth"
|
||||
v-model="formData.cardMonth"
|
||||
@change="changeMonth"
|
||||
data-card-field
|
||||
>
|
||||
<option value="" disabled>{{ textMonth }}</option>
|
||||
<option
|
||||
v-bind:value="n < 10 ? '0' + n : n"
|
||||
v-for="n in 12"
|
||||
v-bind:disabled="n < minCardMonth"
|
||||
v-bind:key="n"
|
||||
>{{generateMonthValue(n)}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group input-group-merge ml-4">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</span>
|
||||
</div>
|
||||
<select
|
||||
class="form-control w-50"
|
||||
:id="fields.cardYear"
|
||||
v-model="formData.cardYear"
|
||||
@change="changeYear"
|
||||
data-card-field
|
||||
>
|
||||
<option value="" disabled>{{ textYear }}</option>
|
||||
<option
|
||||
v-bind:value="$index + minCardYear"
|
||||
v-for="(n, $index) in 12"
|
||||
v-bind:key="n"
|
||||
>{{$index + minCardYear}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label for="cardCvv" class="form-control-label">{{ textCvv }}</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-key"></i>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="tel"
|
||||
class="form-control"
|
||||
:placeholder="placeholderCvv"
|
||||
v-number-only
|
||||
:id="fields.cardCvv"
|
||||
maxlength="4"
|
||||
:value="formData.cardCvv"
|
||||
@input="changeCvv"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div class="invalid-feedback d-block" v-if="validations.card_cvv" v-html="validations.card_cvv[0]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" v-if="storeCard">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="custom-control-input">
|
||||
<label :for="'store_card' + _uid" class="custom-control-label">
|
||||
<strong>{{ textStoreCard }}</strong>
|
||||
<div>
|
||||
<div class="flex flex-col" v-if="Object.keys(cards).length">
|
||||
<div class="gap-y-2">
|
||||
<div
|
||||
class="py-2 border-b hover:bg-gray-100 cursor-pointer"
|
||||
v-for="(name, key, id) in cards" :key="key"
|
||||
@click="onRegisterCard(id)"
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
:disabled="loading"
|
||||
:checked="register_card == id"
|
||||
>
|
||||
<span class="ltr:ml-2 rtl:mr-2">{{ name }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
|
||||
<div v-if="loading" class="aka-loader-frame">
|
||||
<div class="aka-loader"></div>
|
||||
</div>
|
||||
<span v-if="!loading" class="btn-inner--text">{{ textButton }}</span>
|
||||
<div class="py-2 border-b hover:bg-gray-100 cursor-pointer" @click="onAddNewCard()">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
id="card-new-card"
|
||||
name="new-card"
|
||||
:disabled="loading"
|
||||
:checked="new_card"
|
||||
>
|
||||
<span class="ltr:ml-2 rtl:mr-2">{{ textNewCard }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end" v-for="(name, key, id) in cards" :key="key">
|
||||
<button
|
||||
v-if="register_card == id"
|
||||
type="button"
|
||||
:id="'card-'+ key + '-' + id"
|
||||
@click="onSelectedCard(key)"
|
||||
class="relative flex items-center justify-center px-6 py-1.5 my-2 bg-green hover:bg-green-700 text-white rounded-lg"
|
||||
:disabled="loading"
|
||||
>
|
||||
<i
|
||||
v-if="loading || register_card_loading"
|
||||
class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
|
||||
>
|
||||
</i>
|
||||
|
||||
<span :class="[{'opacity-0': loading || register_card_loading}]">
|
||||
{{ textButton }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="new_card" class="w-full mt-3" id="collapseNewCard">
|
||||
<Card
|
||||
:fields="fields"
|
||||
:labels="formData"
|
||||
:isCardNumberMasked="isCardNumberMasked"
|
||||
:randomBackgrounds="randomBackgrounds"
|
||||
:backgroundImage="backgroundImage"
|
||||
/>
|
||||
|
||||
<div class="grid sm:grid-cols-8 gap-x-4 gap-y-6 my-3.5">
|
||||
<div class="sm:col-span-8">
|
||||
<label for="cardName" class="form-control-label text-black text-sm font-medium">
|
||||
{{ textCardName }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
:id="fields.cardName"
|
||||
v-letter-only
|
||||
@input="changeName"
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:placeholder="placeholderCardName"
|
||||
:value="formData.cardName"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block" v-if="validations.card_name" v-html="validations.card_name[0]"></div>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-8">
|
||||
<label for="cardNumber" class="form-control-label text-black text-sm font-medium">
|
||||
{{ textCardNumber }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="tel"
|
||||
:id="fields.cardNumber"
|
||||
@input="changeNumber"
|
||||
@focus="focusCardNumber"
|
||||
@blur="blurCardNumber"
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:placeholder="placeholderCardNumber"
|
||||
:value="formData.cardNumber"
|
||||
:maxlength="cardNumberMaxLength"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block" v-if="validations.card_number" v-html="validations.card_number[0]"></div>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-3">
|
||||
<label for="cardMonth" class="form-control-label text-black text-sm font-medium">
|
||||
{{ textExpirationDate }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:id="fields.cardMonth"
|
||||
v-model="formData.cardMonth"
|
||||
@change="changeMonth"
|
||||
data-card-field
|
||||
>
|
||||
<option value disabled selected>{{ textMonth }}</option>
|
||||
<option
|
||||
v-bind:value="n < 10 ? '0' + n : n"
|
||||
v-for="n in 12"
|
||||
v-bind:disabled="n < minCardMonth"
|
||||
v-bind:key="n"
|
||||
>{{generateMonthValue(n)}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-3 flex items-end">
|
||||
<select
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:id="fields.cardYear"
|
||||
v-model="formData.cardYear"
|
||||
@change="changeYear"
|
||||
data-card-field
|
||||
>
|
||||
<option value="" disabled>{{ textYear }}</option>
|
||||
<option
|
||||
v-bind:value="$index + minCardYear"
|
||||
v-for="(n, $index) in 12"
|
||||
v-bind:key="n"
|
||||
>{{$index + minCardYear}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-2">
|
||||
<label for="cardCvv" class="form-control-label text-black text-sm font-medium">
|
||||
{{ textCvv }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="tel"
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:placeholder="placeholderCvv"
|
||||
v-number-only
|
||||
:id="fields.cardCvv"
|
||||
maxlength="4"
|
||||
:value="formData.cardCvv"
|
||||
@input="changeCvv"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block" v-if="validations.card_cvv" v-html="validations.card_cvv[0]"></div>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-8 flex" :class="storeCard ? 'justify-between' : 'justify-end'">
|
||||
<div class="flex items-center" v-if="storeCard">
|
||||
<input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="rounded-sm text-purple border-gray-300 cursor-pointer disabled:bg-gray-200 focus:outline-none focus:ring-transparent">
|
||||
|
||||
<label :for="'store_card' + _uid" class="form-control-label ltr:ml-2 rtl:ml-2">
|
||||
<strong>{{ textStoreCard }}</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="relative flex items-center justify-center px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg" v-on:click="invaildCard" :disabled="loading">
|
||||
<i
|
||||
v-if="loading"
|
||||
class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
|
||||
>
|
||||
</i>
|
||||
|
||||
<span :class="[{'opacity-0': loading}]">
|
||||
{{ textButton }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mt--6">
|
||||
<div class="flex flex-col" v-if="! Object.keys(cards).length">
|
||||
<Card
|
||||
:fields="fields"
|
||||
:labels="formData"
|
||||
@ -339,16 +197,141 @@
|
||||
:randomBackgrounds="randomBackgrounds"
|
||||
:backgroundImage="backgroundImage"
|
||||
/>
|
||||
|
||||
<div class="grid sm:grid-cols-8 gap-x-4 gap-y-6 my-3.5">
|
||||
<div class="sm:col-span-8">
|
||||
<label for="cardName" class="form-control-label text-black text-sm font-medium">
|
||||
{{ textCardName }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
:id="fields.cardName"
|
||||
v-letter-only
|
||||
@input="changeName"
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:placeholder="placeholderCardName"
|
||||
:value="formData.cardName"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block" v-if="validations.card_name" v-html="validations.card_name[0]"></div>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-8">
|
||||
<label for="cardNumber" class="form-control-label text-black text-sm font-medium">
|
||||
{{ textCardNumber }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="tel"
|
||||
:id="fields.cardNumber"
|
||||
@input="changeNumber"
|
||||
@focus="focusCardNumber"
|
||||
@blur="blurCardNumber"
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:placeholder="placeholderCardNumber"
|
||||
:value="formData.cardNumber"
|
||||
:maxlength="cardNumberMaxLength"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block" v-if="validations.card_number" v-html="validations.card_number[0]"></div>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-3">
|
||||
<label for="cardMonth" class="form-control-label text-black text-sm font-medium">
|
||||
{{ textExpirationDate }}
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<select
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:id="fields.cardMonth"
|
||||
v-model="formData.cardMonth"
|
||||
@change="changeMonth"
|
||||
data-card-field
|
||||
>
|
||||
<option value="" disabled>{{ textMonth }}</option>
|
||||
<option
|
||||
v-bind:value="n < 10 ? '0' + n : n"
|
||||
v-for="n in 12"
|
||||
v-bind:disabled="n < minCardMonth"
|
||||
v-bind:key="n"
|
||||
>{{generateMonthValue(n)}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-3 flex items-end">
|
||||
<select
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:id="fields.cardYear"
|
||||
v-model="formData.cardYear"
|
||||
@change="changeYear"
|
||||
data-card-field
|
||||
>
|
||||
<option value="" disabled>{{ textYear }}</option>
|
||||
<option
|
||||
v-bind:value="$index + minCardYear"
|
||||
v-for="(n, $index) in 12"
|
||||
v-bind:key="n"
|
||||
>{{$index + minCardYear}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-2">
|
||||
<label for="cardCvv" class="form-control-label text-black text-sm font-medium">
|
||||
{{ textCvv }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="tel"
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:placeholder="placeholderCvv"
|
||||
v-number-only
|
||||
:id="fields.cardCvv"
|
||||
maxlength="4"
|
||||
:value="formData.cardCvv"
|
||||
@input="changeCvv"
|
||||
data-card-field
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block" v-if="validations.card_cvv" v-html="validations.card_cvv[0]"></div>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-8 flex" :class="storeCard ? 'justify-between' : 'justify-end'">
|
||||
<div class="flex items-center" v-if="storeCard">
|
||||
<input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="rounded-sm text-purple border-gray-300 cursor-pointer disabled:bg-gray-200 focus:outline-none focus:ring-transparent">
|
||||
|
||||
<label :for="'store_card' + _uid" class="form-control-label ltr:ml-2 rtl:ml-2">
|
||||
<strong>{{ textStoreCard }}</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="relative flex items-center justify-center px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg" v-on:click="invaildCard" :disabled="loading">
|
||||
<i
|
||||
v-if="loading"
|
||||
class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
|
||||
>
|
||||
</i>
|
||||
<span :class="[{'opacity-0': loading}]">
|
||||
{{ textButton }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
import axios from 'axios';
|
||||
import Card from './Card';
|
||||
import './../../../css/creditcard/style.scss';
|
||||
|
||||
export default {
|
||||
name: 'CardForm',
|
||||
@ -369,6 +352,7 @@ export default {
|
||||
el.addEventListener('keypress', checkValue);
|
||||
}
|
||||
},
|
||||
|
||||
'letter-only': {
|
||||
bind (el) {
|
||||
function checkValue (event) {
|
||||
@ -496,7 +480,9 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
backgroundImage: [String, Object],
|
||||
|
||||
randomBackgrounds: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@ -524,6 +510,9 @@ export default {
|
||||
mainCardNumber: this.cardNumber,
|
||||
cardNumberMaxLength: 19,
|
||||
card_id: 0,
|
||||
new_card: false,
|
||||
register_card: 0,
|
||||
register_card_loading: false
|
||||
}
|
||||
},
|
||||
|
||||
@ -550,6 +539,22 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRegisterCard(id) {
|
||||
this.register_card = id;
|
||||
this.new_card = false;
|
||||
this.register_card_loading = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.register_card_loading = false;
|
||||
}, 800);
|
||||
},
|
||||
|
||||
onAddNewCard() {
|
||||
this.new_card = true;
|
||||
this.register_card = null;
|
||||
},
|
||||
|
||||
|
||||
onSelectedCard(card_id) {
|
||||
this.card_id = card_id;
|
||||
this.formData.card_id = card_id;
|
||||
@ -696,6 +701,9 @@ export default {
|
||||
} else {
|
||||
this.unMaskCardNumber();
|
||||
}
|
||||
},
|
||||
|
||||
showNewCard() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user