2022-12-24 20:51:37 +00:00
< template >
< div >
< div class = "row justify-content-center" >
< div class = "col-12 col-sm-8" >
2023-02-03 09:27:36 +00:00
< h4 class = "fw-bold text-center me-5 pt-5" >
2023-02-27 00:26:27 +00:00
< span class = "float-start" style = "cursor: pointer" @click ="this.$router.go(-1)" > < i class = "fa-solid fa-arrow-left-long" > < / i > < / span > { { t ( "Subscription" ) } } < / h4 >
2022-12-24 20:51:37 +00:00
< div class = "row" >
< div class = "col-12" >
2023-02-27 00:26:27 +00:00
< h4 class = "fw-bold text-center pt-3" > { { t ( "Subscribe to increase your productivity with Mindboost" ) } } < / h4 >
2022-12-24 20:51:37 +00:00
< / div >
< / div >
< div class = "row" >
2022-12-27 20:47:47 +00:00
< div class = "col-12 pt-3 col-sm-4" >
2023-02-25 06:48:20 +00:00
< div class = "card" @click ="oneMonth=true;twoMonth=false;threeMonth=false" :class ="{'active-sub':oneMonth,'sub-card':!oneMonth}" >
2022-12-24 20:51:37 +00:00
< div class = "card-body py-4" >
2023-02-25 06:48:20 +00:00
< h5 class = "text-center fw-bolder" style = "font-weight: 600;font-size: 32px" > $2 .99 < / h5 >
2023-02-27 00:26:27 +00:00
< p class = "text-center" > { { t ( "1 month" ) } } < / p >
2022-12-24 20:51:37 +00:00
< / div >
< / div >
< / div >
2022-12-27 20:47:47 +00:00
< div class = "col-12 pt-3 col-sm-4" >
2023-02-25 06:48:20 +00:00
< div class = "card" @click ="twoMonth=true;oneMonth=false;threeMonth=false" :class ="{'active-sub':twoMonth,'sub-card':!twoMonth}" >
2022-12-24 20:51:37 +00:00
< div class = "card-body py-4" >
< h5 class = "text-center fw-bolder " style = "font-weight: 600;font-size: 32px" > $9 .99 < / h5 >
2023-02-27 00:26:27 +00:00
< p class = " text-center" > { { t ( "6 month" ) } } < / p >
2022-12-24 20:51:37 +00:00
< / div >
< / div >
< / div >
2022-12-27 20:47:47 +00:00
< div class = "col-12 pt-3 col-sm-4" >
2023-02-25 06:48:20 +00:00
< div class = "card" @click ="threeMonth=true;twoMonth=false;oneMonth=false" :class ="{'active-sub':threeMonth,'sub-card':!threeMonth}" >
2022-12-24 20:51:37 +00:00
< div class = "card-body py-4" >
< h5 class = "text-center fw-bolder " style = "font-weight: 600;font-size: 32px" > $14 .99 < / h5 >
2023-02-27 00:26:27 +00:00
< p class = " text-center" > { { t ( "1 year" ) } } < / p >
2022-12-24 20:51:37 +00:00
< / div >
< / div >
< / div >
< / div >
< div class = "row pt-5" >
< div class = "col-12 px-md-5 px-0" >
2023-02-27 00:26:27 +00:00
< h6 class = "text-center text-muted" style = "font-style: normal;font-weight: 500;font-size: 14px;line-height: 20px;" > { { t ( "You can cancel Mindboost at any time. The subscription will start automatically after the end of the trial period unless it is canceled before the end of the trial period. The total price is charged per period, price includes VAT." ) } } < / h6 >
2022-12-24 20:51:37 +00:00
< / div >
< / div >
< div class = "row pt-5 justify-content-center " >
< div class = "col-6 text-center" >
2023-02-27 00:26:27 +00:00
< button :disabled ="loading" type = "button" @click ="paynow" class = "btn text-white fs-5 col-12 fw-bold py-2 " style = "background-color: #e9c046" > { { t ( "Save Changes" ) } } < span v-if ="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" > < / span > < / button >
2022-12-24 20:51:37 +00:00
< / div >
2023-02-25 06:48:20 +00:00
<!-- < StripeElements - - >
<!-- v - if = "stripeLoaded" -- >
<!-- v - slot = "{ elements, instance }" ref = "elms" -- >
<!-- : stripe - key = "stripeKey" -- >
<!-- : instance - options = "instanceOptions" -- >
<!-- : elements - options = "elementsOptions" -- >
<!-- > -- >
<!-- < StripeElement - - >
<!-- ref = "card" -- >
<!-- : elements = "elements" -- >
<!-- : options = "cardOptions" -- >
<!-- / > - - >
<!-- < / StripeElements > -- >
<!-- < button type = "button" class = "btn text-white fs-5 col-12 fw-bold py-2" @click ="pay" style = "background-color: #e9c046" > Pay < / button > -- >
2022-12-24 20:51:37 +00:00
< / div >
< / div >
< / div >
< / div >
< / template >
2023-02-25 06:48:20 +00:00
2022-12-24 20:51:37 +00:00
< script >
2023-02-25 06:48:20 +00:00
import { mapState , mapActions , mapStores } from "pinia" ;
import { useUserStore } from "~/stores/user" ;
2022-12-24 20:51:37 +00:00
export default {
2023-02-27 00:26:27 +00:00
setup ( ) {
const { t } = useI18n ( )
const localePath = useLocalePath ( )
return { t , localePath }
} ,
2023-02-25 06:48:20 +00:00
mounted ( ) {
// this.updateUserNow();
// const plans=this.user.subscriptions;
// console.log(plans);
console . log ( this . userStore . user . first _name ) ;
// if (plans) {
// const isMonthly = plans.some(plan => plan.name === 'monthly');
// if (isMonthly) {
// this.oneMonth = true;
// this.twoMonth = false;
// this.threeMonth = false;
// }
// const isSixMonth = plans.some(plan => plan.name === 'sixmonth');
// if (isSixMonth) {
// this.oneMonth = false;
// this.twoMonth = true;
// this.threeMonth = false;
// }
// const isYearly = plans.some(plan => plan.name === 'yearly');
// if (isYearly) {
// this.oneMonth = false;
// this.twoMonth = false;
// this.threeMonth = true;
// }
// }
} ,
computed : {
// ...mapState(useUserStore, ['user']),
... mapStores ( useUserStore ) ,
} ,
data ( ) {
return {
oneMonth : false ,
twoMonth : false ,
threeMonth : false ,
loading : false ,
form : {
type : "one" ,
}
}
} ,
methods : {
... mapActions ( useUserStore , [ 'updateUser' ] ) ,
updateUserNow ( ) {
this . $axios . post ( '/api/auth/me' ) . then ( ( { data } ) => {
this . updateUser ( data . user ) ;
} )
} ,
paynow ( ) {
if ( this . oneMonth == true ) {
this . form . type = 'one' ;
}
if ( this . twoMonth == true ) {
this . form . type = 'six' ;
}
if ( this . threeMonth == true ) {
this . form . type = 'year' ;
}
this . loading = true ;
this . $axios . post ( '/api/subscribe' , this . form ) . then ( ( { data } ) => {
this . loading = false ;
if ( data . message ) {
this . $toast . success ( data . message ) ;
} else {
window . location . href = data . checkout _url . url ;
}
} ) . catch ( ( error ) => {
this . loading = false ;
this . $toast . error ( 'Error while saving....' ) ;
console . log ( error ) ;
} )
}
}
2022-12-24 20:51:37 +00:00
}
2023-02-25 06:48:20 +00:00
// export default {
// name: 'CardOnly',
// data() {
// return {
// stripeKey: 'pk_test_0S0H9CTYtkhPlArgg4KkPFcZ',
// instanceOptions: {},
// elementsOptions: {},
// cardOptions: {},
// stripeLoaded: false,
// card: null,
// elms: null,
// oneMonth:false,
// twoMonth:false,
// threeMonth:false,
// };
// },
// components: {
// StripeElements,
// StripeElement,
// },
// beforeMount() {
// const stripePromise = loadStripe(this.stripeKey);
// stripePromise.then(() => {
// this.stripeLoaded = true;
// });
// },
// methods: {
// pay() {
// const cardElement = this.$refs.card.stripeElement;
//
// this.$refs.elms.instance
// .createPaymentMethod({ type: 'card', card: cardElement })
// .then((result) => {
// console.log(result);
// console.log(result.paymentMethod);
// this.$axios.post('/api/subscribe', result).then((response) => {
// console.log(response.data);
// });
// });
// },
// },
// computed: {
//
// },
// created() {
//
// },
// };
< / script >
2022-12-24 20:51:37 +00:00
< style >
2023-02-25 06:48:20 +00:00
. active - sub {
background : # E9C046 ; box - shadow : 0 px 0 px 16 px 1 px rgba ( 108 , 97 , 97 , 0.05 ) ; border - radius : 12 px ;
color : white ;
}
. sub - card {
background : # FFFFFF ; box - shadow : 0 px 0 px 16 px 1 px rgba ( 108 , 97 , 97 , 0.05 ) ; border - radius : 12 px ;
color : black ;
}
2022-12-24 20:51:37 +00:00
< / style >