Implement terms accepting

frontend/components/cart/global/CartSummary.vue

@@ -35,6 +35,8 @@ const { mutateAsync: deleteSpecialDiscountCode, isPending: deleteSpecialDiscount
 
 const { mutateAsync: pay, isPending: paymentIsPending } = usePayOrder();
 
+const isTermsAccepted = ref(false);
+
 // computed
 
 const nextPage = computed(() => route.meta.nextPage as { name: string; label: string; query?: string } | undefined);
@@ -99,7 +101,7 @@ const handleSubmitSpecialDiscountCode = () => {
                 });
                 specialDiscountCode.value = "";
             },
-        }
+        },
     );
 };
 
@@ -141,7 +143,7 @@ const handlePayment = () => {
                     },
                 });
             },
-        }
+        },
     );
 };
 
@@ -155,7 +157,7 @@ watch(
         } else {
             discountCode.value = "";
         }
-    }
+    },
 );
 
 watch(
@@ -166,7 +168,7 @@ watch(
         } else {
             specialDiscountCode.value = "";
         }
-    }
+    },
 );
 </script>
 
@@ -312,6 +314,7 @@ watch(
                 class="w-full rounded-100"
                 @click="handlePayment"
                 variant="primary"
+                :disabled="!isTermsAccepted"
             >
                 {{ nextPage?.label }}
             </Button>
@@ -329,6 +332,40 @@ watch(
                 </Button>
             </NuxtLink>
 
+            <div
+                v-if="nextPage?.name == 'payment'"
+                class="flex items-center gap-3 ps-2 pt-1 pb-3"
+            >
+                <label class="translate-y-0.5">
+                    <input
+                        id="payment-terms-accept-checkbox"
+                        v-model="isTermsAccepted"
+                        type="checkbox"
+                        hidden
+                    />
+                    <button
+                        @click="isTermsAccepted = !isTermsAccepted"
+                        class="rounded-sm size-5 border-[1.5px] cursor-pointer transition-colors"
+                        :class="isTermsAccepted ? 'border-blue-500 bg-blue-500' : 'border-slate-400 bg-transparent'"
+                    >
+                        <Icon
+                            name="ci:bi-check"
+                            class="-translate-x-px **:fill-white transition-all"
+                            :class="isTermsAccepted ? 'opacity-100' : 'opacity-0'"
+                        />
+                    </button>
+                </label>
+                <div class="whitespace-nowrap text-sm">
+                    <NuxtLink
+                        to="/terms"
+                        class="text-blue-600 underline"
+                    >
+                        قوانین و مقررات
+                    </NuxtLink>
+                    را خوانده و قبول دارم
+                </div>
+            </div>
+
             <PaymentPendingModal v-model:isShow="paymentIsPending" />
         </div>
     </div>