feat: adds terms and conditions acceptance to checkout (#71)

JSConfCL · Nov 22, 2024 · e1921aa · e1921aa
1 parent 60df8f6
commit e1921aa
Showing 1 changed file with 42 additions and 12 deletions.
diff --git a/app/components/TicketsSaleFlow/Stepper.tsx b/app/components/TicketsSaleFlow/Stepper.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { Button } from "~/components/ui/button";
 import {
   Popover,
@@ -12,18 +14,46 @@ export const SecondStepFooter = ({
   onClickNext,
   isDisabled,
   popoverContent,
-}: SecondStepFooterProps) => (
-  <div className="mt-2 flex justify-end gap-2 text-right">
-    <Button variant="outline" onClick={onClickPrevious}>
-      Atras
-    </Button>
-    <ConditionalPopoverWrapper popoverContent={popoverContent}>
-      <Button disabled={isDisabled} onClick={onClickNext}>
-        Pagar
-      </Button>
-    </ConditionalPopoverWrapper>
-  </div>
-);
+}: SecondStepFooterProps) => {
+  const [acceptTerms, setAcceptTerms] = useState(false);
+
+  return (
+    <>
+      <div className="ml-auto">
+        <label className="ms-2 flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          <input
+            type="checkbox"
+            className="size-4"
+            checked={acceptTerms}
+            onChange={() => setAcceptTerms((prev) => !prev)}
+          />
+          <div>
+            Estoy de acuerdo con los{" "}
+            <a
+              href="https://legal.jsconf.cl/terminos_de_compra_e_imagen/"
+              className="text-blue-600 hover:underline dark:text-blue-500"
+              target="_blank"
+              rel="noreferrer"
+            >
+              términos y condiciones
+            </a>
+            .
+          </div>
+        </label>
+      </div>
+      <div className="mt-2 flex justify-end gap-2 text-right">
+        <Button variant="outline" onClick={onClickPrevious}>
+          Atras
+        </Button>
+        <ConditionalPopoverWrapper popoverContent={popoverContent}>
+          <Button disabled={isDisabled || !acceptTerms} onClick={onClickNext}>
+            Pagar
+          </Button>
+        </ConditionalPopoverWrapper>
+      </div>
+    </>
+  );
+};
 
 const ConditionalPopoverWrapper = ({
   popoverContent,