feat: create a custom store for premium functionality

components/pages/premium/Login.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="material-container text-default-text p-4">
-    <form action="#" method="POST">
+    <form
+      :action="gumroad.authAPI.url"
+      :method="gumroad.authAPI.fetchOptions.method"
+      @submit="checkForm"
+    >
       <label
         class="block text-lg font-medium leading-tight mb-2"
         for="license-key"
@@ -16,6 +20,7 @@
           type="text"
           name="license-key"
           required
+          @input="setLicenseKey($event.target.value)"
         />
 
         <!-- Action -->
@@ -31,6 +36,7 @@
 </template>
 
 <script>
+import { mapState, mapMutations, mapActions } from 'vuex'
 import { ChevronRightIcon } from 'vue-feather-icons'
 
 export default {
@@ -39,5 +45,20 @@ export default {
   components: {
     ChevronRightIcon,
   },
+
+  computed: {
+    ...mapState('premium', ['gumroad']),
+  },
+
+  methods: {
+    ...mapActions('premium', ['authenticate']),
+    ...mapMutations('premium', ['setRawResponse', 'setLicenseKey']),
+
+    async checkForm(event) {
+      event.preventDefault()
+
+      await this.authenticate()
+    },
+  },
 }
 </script>

components/pages/premium/Subscription.vue

@@ -89,7 +89,7 @@
           <a
             target="_blank"
             rel="noopener"
-            href="https://gum.co/gRuqQm"
+            :href="'https://gum.co/' + gumroad.product.product_permalink"
             class="block w-full text-center border-0 rounded-lg bg-gradient-lilac-blue px-6 py-3 text-lg leading-6 font-medium text-default-text focus:outline-none focus:shadow-outline transition ease-in-out duration-150"
           >
             Subscribe
@@ -101,11 +101,16 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import { CheckIcon } from 'vue-feather-icons'
 
 export default {
   components: {
     CheckIcon,
   },
+
+  computed: {
+    ...mapState('premium', ['gumroad']),
+  },
 }
 </script>

pages/premium.vue

@@ -2,25 +2,40 @@
 <template>
   <main class="h-screen flex flex-col">
     <div class="my-auto">
-      <!-- Log In form -->
-      <login />
+      <!-- Log In -->
+      <template v-if="!isUserPremium">
+        <!-- Log In form -->
+        <login />
 
-      <!-- Separator -->
-      <p class="text-default-text leading-loose text-center">Or</p>
+        <!-- Separator -->
+        <p class="text-default-text leading-loose text-center">Or</p>
 
-      <!-- Subscription  -->
-      <subscription />
+        <!-- Subscription  -->
+        <subscription />
+      </template>
+
+      <!-- Control pannel -->
+      <template v-else>
+        <h1 class="text-default-text text-center text-lg">
+          Control pannel
+        </h1>
+      </template>
     </div>
   </main>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import Login from '@/components/pages/premium/Login'
 import Subscription from '@/components/pages/premium/Subscription'
 
 export default {
   components: { Login, Subscription },
 
+  computed: {
+    ...mapGetters('premium', ['isUserPremium']),
+  },
+
   head() {
     return {
       title: 'Premium',

store/premium/index.js

@@ -0,0 +1,81 @@
+export const state = () => ({
+  gumroad: {
+    authAPI: {
+      url: 'https://auth.r34.app/',
+
+      fetchOptions: {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: undefined, // Must be set by a getter
+      },
+    },
+
+    product: {
+      product_permalink: 'gRuqQm',
+      license_key: undefined,
+    },
+  },
+
+  responseData: undefined,
+})
+
+export const getters = {
+  isUserPremium(state, getters, rootState) {
+    return (
+      state.responseData &&
+      state.responseData.success === true &&
+      state.responseData.purchase.disputed === false &&
+      state.responseData.purchase.refunded === false &&
+      state.responseData.purchase.subscription_cancelled_at === null &&
+      state.responseData.purchase.subscription_failed_at === null
+    )
+  },
+
+  getUserEmail(state) {
+    return state.responseData && state.responseData.success
+      ? state.responseData.purchase.email
+      : undefined
+  },
+
+  getFetchOptionsInit(state) {
+    return {
+      ...state.gumroad.authAPI.fetchOptions,
+
+      body: JSON.stringify(state.gumroad.product),
+    }
+  },
+}
+
+export const mutations = {
+  setRawResponse(state, response) {
+    state.responseData = response
+  },
+
+  removeRawResponse(state) {
+    state.responseData = undefined
+  },
+
+  setLicenseKey(state, licenseKey) {
+    state.gumroad.product.license_key = licenseKey
+  },
+
+  removeLicenseKey(state) {
+    state.gumroad.product.license_key = undefined
+  },
+}
+
+export const actions = {
+  async authenticate({ state, dispatch, commit, getters }) {
+    const response = await dispatch(
+      'simpleFetch',
+      {
+        url: state.gumroad.authAPI.url,
+        options: getters.getFetchOptionsInit,
+      },
+      { root: true } // Necessary for tlaking to root actions
+    )
+
+    // console.log(response)
+    commit('setRawResponse', response)
+  },
+}