closing checkout modal when clicking on the overlay

calimania · Feb 21, 2025 · 62b44c6 · 62b44c6
1 parent 20487b9
commit 62b44c6
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/src/components/SubscriptionModal.tsx b/src/components/SubscriptionModal.tsx
@@ -23,7 +23,7 @@ const SubscriptionModal: React.FC<Props> = ({
         <h2 className="text-lg font-semibold text-gray-800 flex items-center">
           {error ? title : `🎉 ${title} ✨`}
         </h2>
-        
+
         <button
           onClick={() => {
             try {
@@ -42,7 +42,7 @@ const SubscriptionModal: React.FC<Props> = ({
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
-            strokeWidth="2"
+            strokeWidth={2}
             strokeLinecap="round"
             strokeLinejoin="round"
             className="icon icon-tabler icons-tabler-outline icon-tabler-x"

diff --git a/src/components/checkout/CheckoutModal.tsx b/src/components/checkout/CheckoutModal.tsx
@@ -42,13 +42,16 @@ const CheckoutModal: FC<Props> = ({ prices, product }: Props)  => {
   return (
     <>
       {isModalOpen && (
-        <div className="modal-overlay fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center z-50">
+        <div className="modal-overlay fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center z-50"
+          onClick={(e) => (e.target as Element).classList.contains('modal-overlay') && setIsModalOpen(false)}>
           <div className="modal-content bg-skin-card p-6 rounded-lg max-w-lg w-full">
             <button
               className="absolute top-4 right-4 text-gray-500"
               onClick={() => setIsModalOpen(false)}
             >
-              <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x">
+              <svg
+                xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" stroke-linecap="round" stroke-linejoin="round"
+                className="icon icon-tabler icons-tabler-outline icon-tabler-x">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                 <path d="M18 6l-12 12" />
                 <path d="M6 6l12 12" />

diff --git a/src/config.ts b/src/config.ts
@@ -1,8 +1,6 @@
 import type { Site, SocialObjects } from "./types";
 
-// import { loadEnv } from "vite";
-
-// hack because Astro doesn't read the .env file before their config file
+// Loading .env files to populate the configuration
 const {
   BASE_URL,
   PUBLIC_STRIPE_PUBLISHABLE_KEY,
@@ -13,8 +11,7 @@ const {
   POSTHOG_ID,
 } = import.meta.env;
 
-
-console.info('Loading Astro config',
+console.info('Loading Astro environment variables:',
   { BASE_URL, PUBLIC_STRIPE_PUBLISHABLE_KEY, STRAPI_URL, STORE_SLUG, COLOR_PRIMARY, COLOR_ACCENT, POSTHOG_ID }
 );
 

diff --git a/src/scripts/ui.product.ts b/src/scripts/ui.product.ts
@@ -12,15 +12,15 @@ export const ProductSlideshow = function () {
   // Add event listeners to fire confetti when a button is clicked.
   buttons.forEach(button => {
     button.addEventListener("click", e => {
-      const jsonData = e.target?.getAttribute('data-astro-image');
+      const jsonData = (e.target as Element)?.getAttribute('data-astro-image');
 
       try {
         const jsonObject = JSON.parse(jsonData || ''); // Parse the JSON string
         const heroImage = document.querySelector(".hero-image");
         console.log({ heroImage })
 
         if (heroImage) {
-          heroImage.src = jsonObject.url;
+          (heroImage as HTMLImageElement).src = jsonObject.url;
         }
 
       } catch (error) {
@@ -95,6 +95,7 @@ export const createPaymentLink = async (options: PaymentLinkOptions, isTest: boo
  */
 export const ProductForm = function () {
   console.log('Activating ProductForm');
+
   const options: PaymentLinkOptions = {
     totalPrice: 0,
     product: '',