Merge pull request #1321 from PlanB-Network/gdpr

feat(gdpr): add gdpr check on event booking

Author: trigger67

apps/web/public/locales/en.json

@@ -811,7 +811,9 @@
       "max_capacity": "Max capacity of",
       "payment_successful": "Booking successful.",
       "time": "Time"
-    }
+    },
+    "tcDisclaimer": "I agree that my information may be shared with organizers for venue access purposes.",
+    "tcMustBeAccepter": "You must accept the terms to proceed with the purchase"
   },
   "filters": {
     "categories": "Categories",

apps/web/src/routes/$lang/_content/events/-components/event-book-modal.tsx

@@ -72,6 +72,8 @@ export const EventBookModal = ({
               <ModalBookDescription
                 accessType={accessType}
                 onBooked={saveAndDisplaySuccess}
+                isGdprCompliance={event.isGdprCompliance}
+                gdprTerms={event.customTcDisclaimer ?? t('events.tcDisclaimer')}
                 description={
                   accessType === 'physical'
                     ? t('events.payment.description_free_physical')

apps/web/src/routes/$lang/_content/events/-components/modal-book-description.tsx

@@ -1,16 +1,19 @@
 import { t } from 'i18next';
 
-import { Button } from '@blms/ui';
+import { Button, Checkbox } from '@blms/ui';
 
 import PlanBLogo from '#src/assets/logo/planb_logo_horizontal_black.svg?react';
 import { PaymentCallout } from '#src/components/payment-callout.js';
 
-import type { JSX } from 'react';
+import { type JSX, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 
 interface ModalBookDescriptionProps {
   accessType: 'physical' | 'online' | 'replay';
   callout: string;
   description: string;
+  isGdprCompliance: boolean;
+  gdprTerms: string;
   onBooked: () => void;
   children?: JSX.Element | JSX.Element[];
 }
@@ -19,12 +22,16 @@ export const ModalBookDescription = ({
   accessType,
   callout,
   description,
+  isGdprCompliance,
+  gdprTerms,
   onBooked,
   children,
 }: ModalBookDescriptionProps) => {
   const splitDescription =
     description.includes('\n') && description.split('\n');
 
+  const [isBookEnabled, setIsBookEnabled] = useState(!isGdprCompliance);
+  const [isBtnClicked, setIsBtnClicked] = useState(false);
   return (
     <div className="items-center justify-center w-full max-w-96 lg:w-96 flex flex-col gap-6 max-lg:pb-6 max-lg:pt-8">
       <PlanBLogo className="h-auto max-lg:hidden" width={240} />
@@ -40,14 +47,61 @@ export const ModalBookDescription = ({
           <p className="text-sm max-lg:text-center">{description}</p>
         )}
       </div>
-
       {accessType === 'physical' && (
         <p className="w-full text-sm max-lg:text-center">
           {t('events.payment.additional_free_description')}
         </p>
       )}
       {children}
-      <Button variant="primary" className="lg:w-full" onClick={onBooked}>
+
+      {isGdprCompliance ? (
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="terms"
+            className="self-start mt-[2px]"
+            checked={isBookEnabled}
+            onCheckedChange={(e: boolean) => {
+              setIsBookEnabled(e);
+              console.log(e);
+            }}
+          />
+          <label htmlFor="terms" className="text-sm">
+            <ReactMarkdown
+              components={{
+                a: ({ children, href }) => (
+                  <a
+                    href={href}
+                    target="_blank"
+                    className=" text-darkOrange-5 "
+                    rel="noreferrer"
+                  >
+                    {children}
+                  </a>
+                ),
+              }}
+            >
+              {gdprTerms}
+            </ReactMarkdown>
+          </label>
+        </div>
+      ) : null}
+
+      {!isBookEnabled && isBtnClicked ? (
+        <p className="text-red-6 text-sm self-start">
+          {t('events.tcMustBeAccepter')}
+        </p>
+      ) : null}
+
+      <Button
+        variant="primary"
+        className="lg:w-full"
+        onClick={() => {
+          setIsBtnClicked(true);
+          if (isBookEnabled) {
+            onBooked();
+          }
+        }}
+      >
         {t('events.payment.book_seat')}
       </Button>
     </div>

packages/database/drizzle/migrations/0081_lowly_robin_chapel.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "content"."events" ADD COLUMN "is_gdpr_compliance" boolean DEFAULT false;--> statement-breakpoint
+ALTER TABLE "content"."events" ADD COLUMN "custom_tc_disclaimer" text;

packages/database/drizzle/migrations/0082_silky_quasimodo.sql

@@ -0,0 +1 @@
+ALTER TABLE "content"."events" ALTER COLUMN "is_gdpr_compliance" SET NOT NULL;