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-06-11 19:20:39 +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" >
2023-06-11 19:20:39 +00:00
< 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" >
2023-06-11 19:20:39 +00:00
< 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 >
2023-03-07 04:28:32 +00:00
< / div >
< div class = "col-12 text-end" >
2022-12-24 20:51:37 +00:00
< / div >
< / div >
< div class = "row pt-5 justify-content-center " >
2023-03-07 04:28:32 +00:00
< div class = "col-12 col-md-6 col-lg-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 >
2023-03-07 04:28:32 +00:00
< / div >
< div class = "col-12 col-md-6 col-lg-6" v-if ="subscription=='monthly'||subscription=='sixmonth'||subscription=='yearly'" >
< button @click ="cancelNow" :disabled ="cancel_loading" class = "btn text-white fs-5 col-12 fw-bold py-2 " style = "background-color: #dc042a" > Cancel Now < span v-if ="cancel_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;
// }
// }
2023-03-07 04:28:32 +00:00
this . fetchSubscription ( ) ;
2023-02-25 06:48:20 +00:00
} ,
computed : {
// ...mapState(useUserStore, ['user']),
... mapStores ( useUserStore ) ,
} ,
data ( ) {
return {
oneMonth : false ,
twoMonth : false ,
threeMonth : false ,
loading : false ,
2023-03-07 04:28:32 +00:00
cancel _loading : false ,
subscription : '' ,
2023-02-25 06:48:20 +00:00
form : {
type : "one" ,
}
}
} ,
methods : {
2023-03-07 04:28:32 +00:00
... mapActions ( useUserStore , [ 'updateUser' , 'logout' ] ) ,
2023-02-25 06:48:20 +00:00
updateUserNow ( ) {
this . $axios . post ( '/api/auth/me' ) . then ( ( { data } ) => {
this . updateUser ( data . user ) ;
2023-03-07 04:28:32 +00:00
} ) . catch ( ( e ) => {
this . logout ( ) ;
this . $router . push ( this . localePath ( '/auth/login' ) ) ;
2023-02-25 06:48:20 +00:00
} )
} ,
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 ) ;
2023-03-07 04:28:32 +00:00
} )
} ,
cancelNow ( ) {
this . cancel _loading = true ;
this . $axios . post ( '/api/cancel-subscription' ) . then ( ( { data } ) => {
console . log ( data ) ;
this . cancel _loading = false ;
if ( data . success ) {
this . $toast . success ( 'Subscription canceled successfully...' ) ;
this . oneMonth = false ;
this . twoMonth = false ;
this . threeMonth = false
;
this . subscription = '' ;
}
} ) . catch ( ( error ) => {
console . log ( error )
this . cancel _loading = false ;
} )
} ,
fetchSubscription ( ) {
this . $axios . post ( '/api/fetch-subscription' ) . then ( ( { data } ) => {
console . log ( data ) ;
this . subscription = data . name ;
if ( data . name == 'monthly' ) {
this . oneMonth = true ;
this . twoMonth = false ;
this . threeMonth = false ;
}
if ( data . name == 'sixmonth' ) {
this . oneMonth = false ;
this . twoMonth = true ;
this . threeMonth = false ;
}
if ( data . name == 'yearly' ) {
this . oneMonth = false ;
this . twoMonth = false ;
this . threeMonth = true ;
}
2023-02-25 06:48:20 +00:00
} )
}
2023-03-07 04:28:32 +00:00
} ,
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 ;
2023-03-07 04:28:32 +00:00
background - color : # E9C046 ! important ;
2023-02-25 06:48:20 +00:00
}
. 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 >