dev-audioprocessing/pages/setting/subscription.vue

<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-sm-8">
        <h4 class="fw-bold text-center me-5 pt-5">
          <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>
        <div class="row">
          <div class="col-12">
            <h4 class="fw-bold  text-center pt-3">{{t("Subscribe to increase your productivity with Mindboost")}}</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-12 pt-3 col-sm-4">
            <div class="card" @click="oneMonth=true;twoMonth=false;threeMonth=false" :class="{'active-sub':oneMonth,'sub-card':!oneMonth}" >
              <div class="card-body py-4">
                <h5 class="text-center fw-bolder" style="font-weight: 600;font-size: 32px">$2.99</h5>
                <p class="text-center">{{t("1 month")}}</p>
              </div>
            </div>
          </div>
          <div class="col-12 pt-3 col-sm-4">
            <div class="card" @click="twoMonth=true;oneMonth=false;threeMonth=false" :class="{'active-sub':twoMonth,'sub-card':!twoMonth}">
              <div class="card-body py-4">
                <h5 class="text-center fw-bolder  " style="font-weight: 600;font-size: 32px">$9.99</h5>
                <p class=" text-center">{{t("6 month")}}</p>
              </div>
            </div>
          </div>
          <div class="col-12 pt-3 col-sm-4">
            <div class="card" @click="threeMonth=true;twoMonth=false;oneMonth=false" :class="{'active-sub':threeMonth,'sub-card':!threeMonth}">
              <div class="card-body py-4">
                <h5 class="text-center fw-bolder  " style="font-weight: 600;font-size: 32px">$14.99</h5>
                <p class=" text-center">{{t("1 year")}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row pt-5">
          <div class="col-12 px-md-5 px-0">
            <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>
          </div>
        </div>
        <div class="row pt-5 justify-content-center ">
          <div class="col-6 text-center">
            <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>
          </div>
<!--          <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>-->
        </div>
      </div>
    </div>
  </div>
</template>



<script>

import {mapState,mapActions,mapStores} from "pinia";
import {useUserStore} from "~/stores/user";

export default {
  setup(){
    const { t } = useI18n()
    const localePath = useLocalePath()
    return {t,localePath}
  },
  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);
      })
    }
  }
}

// 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>
<style>
.active-sub{
  background: #E9C046;box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);border-radius: 12px;
  color:white;
}
.sub-card{
  background: #FFFFFF;box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);border-radius: 12px;
  color:black;
}
</style>