- get plans via api

- subscribe to plan at the frontend

resources/js/views/Profile.vue

@@ -39,39 +39,13 @@
                                 <span class="email">{{ user.data.attributes.email }}</span>
                             </div>
                         </div>
-<!--                        <div v-if="config.storageLimit && config.isSaaS && config.app_payments_active && !canShowIncompletePayment" class="headline-actions">
-                            <router-link :to="{name: 'UpgradePlan'}">
-                                <ButtonBase class="upgrade-button" button-style="secondary" type="button">
-                                    {{ $t('global.upgrade_plan') }}
-                                </ButtonBase>
-                            </router-link>
-                        </div>-->
-
-                    	<!--TODO: temporary button-->
-						<div class="headline-actions">
-<!--							<ButtonBase class="upgrade-button" button-style="secondary" type="button">
-								<paystack
-									:channels="['bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
-									class="font-bold"
-									currency="ZAR"
-									plan="PLN_kki6co7iviyl4vb"
-									email="howdy@hi5ve.digital"
-									paystackkey="pk_test_5d69324328b8904cdd3cad17ff60892c93abfe89"
-									:reference="reference"
-									:callback="processPayment"
-									:close="close"
-								>
-									{{ $t('global.upgrade_plan') }}
-								 </paystack>
-							</ButtonBase>-->
-
+                        <div v-if="config.storageLimit && config.isSaaS && config.app_payments_active && !canShowIncompletePayment" class="headline-actions">
+							<ButtonBase @click.native="$openUpgradeOptions" class="upgrade-button" button-style="secondary" type="button">
+								{{ $t('global.upgrade_plan') }}
+							</ButtonBase>
                         </div>
                     </div>
 
-
-                    <!--PayPal Button-->
-					<div id="paypal-button-container"></div>
-
                     <!--Incomplete Payment Warning-->
                     <InfoBox v-if="canShowIncompletePayment" type="error" class="message-box">
                         <i18n path="incomplete_payment.description" tag="p">
@@ -96,7 +70,6 @@
 </template>
 
 <script>
-	import paystack from 'vue-paystack';
     import FilePreview from '/resources/js/components/FilePreview/FilePreview'
 	import Spotlight from '/resources/js/components/Spotlight/Spotlight'
 	import TwoFactorRecoveryCodesPopup from '/resources/js/components/Others/TwoFactorRecoveryCodesPopup'
@@ -116,7 +89,6 @@
     export default {
         name: 'Settings',
         components: {
-			paystack,
 			FilePreview,
 			Spotlight,
 			TwoFactorRecoveryCodesPopup,
@@ -133,14 +105,6 @@
             InfoBox,
         },
         computed: {
-			reference() {
-				let text = "";
-				let possible =
-					"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-				for (let i = 0; i < 10; i++)
-					text += possible.charAt(Math.floor(Math.random() * possible.length));
-				return text;
-			},
             ...mapGetters([
             	'user',
 				'config'
@@ -160,35 +124,10 @@
         },
         data() {
             return {
-				amount: 10100,
                 avatar: undefined,
                 isLoading: false,
             }
         },
-		methods: {
-			processPayment: () => {
-				window.alert("Payment recieved")
-			},
-			close: () => {
-				console.log("You closed checkout page")
-			}
-		},
-		created() {
-
-			setTimeout(() => {
-				paypal.Buttons({
-					createSubscription: function(data, actions) {
-						return actions.subscription.create({
-							'plan_id': 'P-1P873319R2491082NMGFK3RY',
-							'custom_id': 'user_id_howdy'
-						});
-					},
-					onApprove: function(data, actions) {
-						console.log('Subscription id: ', data.subscriptionID);
-					}
-				}).render('#paypal-button-container'); // Renders the PayPal button
-			}, 500)
-		}
 	}
 </script>