feat: #197 switch hobby plan to the yearly payment

ptah-sh · Sep 23, 2024 · 93aa08d · 93aa08d
1 parent c829d16
commit 93aa08d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 22 deletions.
diff --git a/config/billing.php b/config/billing.php
@@ -7,10 +7,11 @@
         'plans' => [
             [
                 'name' => 'Hobby',
-                'price' => 14,
+                'price' => 57,
                 'description' => 'Perfect plan to try the service or host non-critical applications',
                 'product_id' => env('PADDLE_PLAN_HOBBY_PRODUCT_ID'),
                 'price_id' => env('PADDLE_PLAN_HOBBY_PRICE_ID'),
+                'billing_cycle' => 'yearly', // Added billing cycle
                 'quotas' => [
                     'nodes' => ['limit' => 1, 'soft' => false],
                     'swarms' => ['limit' => 1, 'soft' => false],
@@ -20,10 +21,11 @@
             ],
             [
                 'name' => 'Startup',
-                'price' => 29,
-                'description' => 'Need more power or an improved stability? This is your choice!',
+                'price' => 27,
+                'description' => 'Need more power or an additional features? This is your choice!',
                 'product_id' => env('PADDLE_PLAN_STARTUP_PRODUCT_ID'),
                 'price_id' => env('PADDLE_PLAN_STARTUP_PRICE_ID'),
+                'billing_cycle' => 'monthly', // Added billing cycle
                 'quotas' => [
                     'nodes' => ['limit' => 5, 'soft' => true],
                     'swarms' => ['limit' => 1, 'soft' => false],

diff --git a/resources/js/Pages/Teams/Billing.vue b/resources/js/Pages/Teams/Billing.vue
@@ -160,28 +160,49 @@ const updatePaymentMethod = () => {
                             <div
                                 v-for="plan in props.plans"
                                 :key="plan.price_id"
-                                class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 text-center"
+                                class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 text-center flex flex-col justify-between"
                             >
-                                <h3 class="text-lg font-semibold mb-2">
-                                    {{ plan.name }}
-                                </h3>
-                                <p
-                                    class="text-gray-600 dark:text-gray-400 mb-4 text-balance"
-                                >
-                                    {{ plan.description }}
-                                </p>
-                                <div
-                                    class="flex items-baseline mb-4 justify-center"
-                                >
-                                    <span class="text-gray-500 text-sm mr-1"
-                                        >$</span
+                                <div>
+                                    <h3 class="text-lg font-semibold mb-2">
+                                        {{ plan.name }}
+                                    </h3>
+                                    <p
+                                        class="text-gray-600 dark:text-gray-400 mb-4 text-balance"
+                                    >
+                                        {{ plan.description }}
+                                    </p>
+                                    <div
+                                        class="flex items-baseline mb-4 justify-center"
+                                    >
+                                        <span class="text-gray-500 text-sm mr-1"
+                                            >$</span
+                                        >
+                                        <span class="text-4xl font-extrabold">
+                                            {{
+                                                plan.billing_cycle === "yearly"
+                                                    ? (plan.price / 12).toFixed(
+                                                          2,
+                                                      )
+                                                    : plan.price
+                                            }}
+                                        </span>
+                                        <span
+                                            class="text-gray-500 text-sm ml-1"
+                                        >
+                                            /month
+                                        </span>
+                                    </div>
+                                    <p
+                                        class="text-gray-500 text-xs mt-2 italic"
                                     >
-                                    <span class="text-4xl font-extrabold">{{
-                                        plan.price
-                                    }}</span>
-                                    <span class="text-gray-500 text-sm ml-1"
-                                        >/month</span
+                                        (price excludes tax)
+                                    </p>
+                                    <p
+                                        v-if="plan.billing_cycle === 'yearly'"
+                                        class="text-gray-500 text-sm font-bold m-2"
                                     >
+                                        Billed yearly at ${{ plan.price }}
+                                    </p>
                                 </div>
 
                                 <PaddleButton