create new subscription if stripe was previously cancelled

resources/js/components/Subscription/ChangeSubscriptionPopup.vue

@@ -95,6 +95,9 @@ export default {
         },
 		subscriptionDriver() {
 			return this.user.data.relationships.subscription.data.attributes.driver
+		},
+		subscription() {
+			return this.user.data.relationships.subscription
 		}
     },
     data() {
@@ -129,11 +132,30 @@ export default {
 				})
 		},
 		payByStripe() {
-			axios
-				.post(`/api/subscriptions/swap/${this.selectedPlan.data.id}`)
-				.then((response) => {
-					console.log(response);
-				})
+			// Subscribe to the new plan
+			if (['inactive', 'cancelled', 'completed'].includes(this.subscription.data.attributes.status)) {
+				axios
+					.post('/api/stripe/checkout', {
+						planCode: this.selectedPlan.data.meta.driver_plan_id.stripe,
+					})
+					.then((response) => {
+						window.location = response.data.url
+					})
+			}
+
+			// Change active subscription
+			if (this.subscription.data.attributes.status === 'active') {
+				axios
+					.post(`/api/subscriptions/swap/${this.selectedPlan.data.id}`)
+					.then(() => {
+						this.$closePopup()
+
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('Your subscription was successfully changed.'),
+						})
+					})
+			}
 		},
 		payByPaystack() {
 			axios

resources/js/components/UI/Bar.vue

@@ -24,7 +24,7 @@
         </div>
         <span
 			class="block h-full w-full rounded-lg"
-			:class="{'bg-theme': bar.percentage > 0, 'bg-gray-200': bar.percentage === 0}"
+			:class="{'bg-theme': bar.percentage > 0, 'dark:bg-gray-700 bg-gray-200': bar.percentage === 0}"
 		></span>
     </div>
 </template>