TSOND-789 | Code changes for Sprint 24

.talismanrc

@@ -1,11 +1,8 @@
 fileignoreconfig:
 - filename: package-lock.json
-  checksum: feeab6b3e3a58b1347b5d2e00cb66be4d5f6277e3386837043e733145287e3aa
-- filename: types/app.ts
-  checksum: a6a26902b0d3734888aea634893c96bcaec57af18ad6c531de5a85169e2a9f07
-- filename: types/common.ts
-  checksum: 906230e145a241b70f5ba96ba1cb6817ab00c1c4513c4a6be98a001f1706bff0
-- filename: .github/workflows/secrets-scan.yml
-  ignore_detectors:
-    - filecontent
+  checksum: a182c4fc1c6557d5171b2c84c78aae134060a53514b555f6354bbab33e176bac
+- filename: components/CookieConsentForm/Consentform.tsx
+  checksum: 6262adb2b5a8412cde7a9d789b357013c0ad67b1bd5e71d0dc97e17d9d04e81f
+- filename: components/UserFormModal/UserFormModal.tsx
+  checksum: df240bac699e2006727c409a5ad0acf372c1838a35a66f8024af58ce3fa4f4e2
 version: "1.0"

MainLayout/MainLayout.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useEffect, useState } from 'react'
-import { ConsentForm, Footer, Header } from '@/components'
+import { ConsentForm, Footer, Header, UserFormModal } from '@/components'
 import { App } from '@/types'
 
 import useRouterHook from '@/hooks/useRouterHook'
@@ -82,6 +82,8 @@ const MainLayout: React.FC<App.MainLayout> = (
                         ...webConfig?.consent_modal?.$
                     }}
                 />}
+                {/* user sign up from */}
+                {webConfig?.user_form?.[0] && <UserFormModal {...webConfig.user_form[0]} />}
             </LocaleContext.Provider>}
         </>
     )

app/globals.css

@@ -164,6 +164,14 @@ body {
     overflow: hidden;
   }
 
+  .text-clamp {
+    display: -webkit-box;
+    max-width: 100%;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
   .taxonomies-label {
     @apply font-inter p-[0.875rem] flex items-center gap-[0.625rem] rounded-[0.25rem] border border-[#CDD8E8] bg-[#F0F3F7] hover:border-[#7C4DFF] hover:bg-[#7C4DFF33] hover:underline hover:text-purple text-[#8992AE] text-[1.125rem] leading-[1.375rem] font-medium tracking-[0.045rem] uppercase;
   }

components/Card/Card.tsx

@@ -45,7 +45,7 @@ const Card: React.FC<ImageCardItem> = (props: ImageCardItem) => {
                     title && (
                         <span
                             className='z-10 mt-[10px] text-white line-clamp-3 text-[30px] font-bold leading-[34px] drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] 
-                                uppercase underline decoration-transparent decoration-2 decoration-w-[10%] underline-offset-4 transition-all duration-1000 group-hover:decoration-white'
+                                uppercase group-hover:decoration-2 decoration-w-[10%] underline-offset-4 transition-all duration-1000 group-hover:underline group-hover:decoration-white'
                             {...$?.title}
                             data-id='span-text'
                         >
@@ -59,8 +59,7 @@ const Card: React.FC<ImageCardItem> = (props: ImageCardItem) => {
                 {
                     content && (
                         <span
-                            className='z-10 text-white font-normal text-[1.563rem] leading-[25px] line-clamp-1 drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] 
-                                underline decoration-transparent decoration-1 underline-offset-4 transition-all duration-1000 group-hover:decoration-white'
+                            className='z-10 text-white font-normal text-[1.563rem] leading-[25px] line-clamp-1 drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] transition-all duration-1000'
                             {...$?.content}
                             data-id='span-text'
                         >

components/CookieConsentForm/Consentform.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import {  CheckIcon, XMarkIcon } from '@heroicons/react/20/solid'
-import React, { useEffect, useState } from 'react'
+import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import React, { useEffect, useRef, useState } from 'react'
 import { ConsentFormProps, LivePreviewTypeMapper } from '@/types/common'
 import { getCookie, setCookie } from '@/utils'
 import { Image } from '../common/Image'
@@ -20,9 +20,10 @@ import { Image } from '../common/Image'
  * @param {object} [props.$] - Live preview data-cslp attributes.
  * @returns {JSX.Element} The rendered consent form component.
  */
-const ConsentForm:React.FC<ConsentFormProps> = ({heading, content, icon, consent_actions, $}: ConsentFormProps) => {
+const ConsentForm: React.FC<ConsentFormProps> = ({ heading, content, icon, consent_actions, $ }: ConsentFormProps) => {
     const [isOpen, setIsOpen] = useState(true)
     const [cookieConsent, setCookieConsent] = useState('')
+    const modalRef = useRef<HTMLDivElement>(null)
 
     /**
      * Handles user consent actions for cookies.
@@ -38,7 +39,7 @@ const ConsentForm:React.FC<ConsentFormProps> = ({heading, content, icon, consent
     const handleClick = (action: string) => {
         if (action === 'optIn') {
             try {
-            // @ts-ignore
+                // @ts-ignore
                 if (typeof jstag !== 'undefined' && typeof jstag?.optIn === 'function') jstag?.optIn()
             } catch (err) {
                 console.error('Error calling jstag.optIn:', err)
@@ -50,7 +51,7 @@ const ConsentForm:React.FC<ConsentFormProps> = ({heading, content, icon, consent
             setIsOpen(false)
         } else if (action === 'optOut') {
             try {
-            // @ts-ignore
+                // @ts-ignore
                 if (typeof jstag !== 'undefined' && typeof jstag?.optOut === 'function') jstag?.optOut()
             } catch (err) {
                 console.error('Error calling jstag.optOut:', err)
@@ -67,7 +68,7 @@ const ConsentForm:React.FC<ConsentFormProps> = ({heading, content, icon, consent
             setIsOpen(false)
             setCookieConsent('optOut')
             try {
-            // @ts-ignore
+                // @ts-ignore
                 if (typeof jstag !== 'undefined' && typeof jstag?.optOut === 'function') jstag?.optOut()
             } catch (err) {
                 console.error('Error calling jstag.optOut:', err)
@@ -79,20 +80,58 @@ const ConsentForm:React.FC<ConsentFormProps> = ({heading, content, icon, consent
             setIsOpen(false)
             setCookieConsent('optIn')
             try {
-            // @ts-ignore
+                // @ts-ignore
                 if (typeof jstag !== 'undefined' && typeof jstag?.optIn === 'function') jstag?.optIn()
             } catch (err) {
                 console.error('Error calling jstag.optIn:', err)
             }
         }
     }, [])
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', (event) => {
+                if (event.key === 'Escape') {
+                    setIsOpen(false)
+                }
+            })
+        }
+    }, [isOpen])
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+                setIsOpen(false)
+            }
+        }
 
-    return(
-        <div className='fixed left-[30px] bottom-[30px] z-50' id='cookie-consent'>
-            {isOpen ? <div
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside)
+        } else {
+            document.removeEventListener('mousedown', handleClickOutside)
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside)
+        }
+    }, [isOpen])
+
+    return (
+        <>
+            <button className='fixed left-[30px] bottom-[30px] z-50 p-0 text-left' onClick={() => setIsOpen(true)} id='cookie-consent'>
+                <span>
+                    {icon?.url && <Image
+                        image={icon}
+                        alt={heading || 'Cookie settings'}
+                        className='w-10 h-10 hover:cursor-pointer'
+                    />}
+                </span>
+            </button>
+            <div
                 {...$?.consent_modal}
-                className='flex max-w-lg items-center justify-center gap-2 px-4 py-2 ml-6 rounded border border-transparent bg-white font-medium
-                    shadow-[0px_4px_15px_0px_rgba(108,92,231,0.2),0px_3px_14px_3px_rgba(0,0,0,0.12),0px_8px_10px_1px_rgba(0,0,0,0.14)] scale-100 transition-all duration-300 ease-in-out'
+                ref={modalRef}
+                className={`fixed left-[30px] bottom-[30px] z-[51] p-0 text-left flex max-w-lg items-center justify-center gap-2 px-4 py-2 rounded border border-transparent bg-white font-medium
+                    shadow-[0px_4px_15px_0px_rgba(108,92,231,0.2),0px_3px_14px_3px_rgba(0,0,0,0.12),0px_8px_10px_1px_rgba(0,0,0,0.14)] scale-100 transition-all duration-300 ease-in-out
+                    ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none hidden'}`}
             >
                 <div className='flex flex-col'>
                     {heading && <h6 className='mb-2 font-medium capitalize leading-tight before:hidden' {...$?.heading}>{heading}</h6>}
@@ -105,30 +144,20 @@ const ConsentForm:React.FC<ConsentFormProps> = ({heading, content, icon, consent
                                 onClick={() => {
                                     actionItem?.action && handleClick(actionItem.action)
                                 }}
-                                {...$?.[`consent_actions__${index}` as keyof LivePreviewTypeMapper<ConsentFormProps>] }
+                                {...$?.[`consent_actions__${index}` as keyof LivePreviewTypeMapper<ConsentFormProps>]}
                             >
-                                {actionItem?.label}
+                                <span {...actionItem?.$?.label}>{actionItem?.label}</span>
                                 {cookieConsent === actionItem?.action && <CheckIcon className='h-5 w-5 text-white inline-block ml-2' aria-hidden='true' />}
                             </button>
                         ))}
                     </div>
-                    <XMarkIcon
-                        className='absolute top-2 right-2 h-6 w-6 text-gray-500 cursor-pointer'
-                        onClick={() => setIsOpen(false)}
-                        aria-hidden='true'
-                    />
+                    <button onClick={() => setIsOpen(false)} className='absolute top-2 right-2 h-6 w-6 text-gray-500 cursor-pointer' aria-hidden='true'>
+                        <XMarkIcon />
+                    </button>
                 </div>
             </div>
-                : <span onClick={() => setIsOpen(true)}>
-                    {icon?.url && <Image
-                        image={icon}
-                        alt={heading || 'Cookie settings'}
-                        className='w-10 h-10 hover:cursor-pointer'
-                    />}
-                </span>
-            }
-        </div> 
+        </>
     )
 }
 
-export {ConsentForm}
+export { ConsentForm }

components/Header/Header.tsx

@@ -170,10 +170,10 @@ function Header (props: App.Header): JSX.Element {
                                                                     </h6>
                                                                 </>}
                                                                 {linkData?.link_text && <span
-                                                                    className='mt-[10.54px] btn-primary !min-w-[8.615625rem] w-[8.615625rem] !px-[2.620625rem] group-hover:underline'
+                                                                    className='mt-[10.54px] btn-primary !min-w-[8.615625rem] w-[8.615625rem] text-center !h-auto !leading-[1.5rem] py-[0.62rem] group-hover:underline'
                                                                     {...linkData?.$?.link}
                                                                 >
-                                                                    {linkData?.link_text && <span {...linkData?.$?.link_text}>{linkData?.link_text}</span>}
+                                                                    {linkData?.link_text && <span className='text-clamp' {...linkData?.$?.link_text}>{linkData?.link_text}</span>}
                                                                 </span>}
                                                             </div>
                                                         </a>
@@ -265,13 +265,18 @@ function Header (props: App.Header): JSX.Element {
                                                 onClick={(e: React.MouseEvent) => { currPanel !== item?.text ? handleMouseOver(e) : handleClose(e)}}
                                                 data-title={item?.text}
                                             >
-                                                <span className={`${currPanel === item?.text ? 'underline' : ''} block ml-6 mr-3 text-md font-medium font-inter leading-7 hover:bg-gray-50 hover:underline`}
-                                                    {...((item?.mega_menu?.[0]?.sections) ? '' : item?.$?.link)}>
-                                                    <Link
-                                                        url={item?.link}
-                                                    >
+                                                <span
+                                                    className={`${currPanel === item?.text ? 'underline' : ''} block ml-6 mr-3 text-md font-medium font-inter leading-7 hover:bg-gray-50 hover:underline`}
+                                                    {...((item?.mega_menu?.[0]?.sections) ? '' : item?.$?.link)}
+                                                    data-title={item?.text}
+                                                >
+                                                    {item?.link && item?.link.length > 0 ? <Link url={item?.link}>
                                                         <span {...((item?.mega_menu?.[0]?.sections) ? '' : item?.$?.text)}>{item.text}</span>
                                                     </Link>
+                                                        : item?.mega_menu?.[0]?.sections?.length as number > 0
+                                                            ? <span
+                                                                {...item?.$?.text}
+                                                            >{item.text}</span> : null}
                                                 </span>
                                                 {item && item?.mega_menu?.[0]?.sections && item?.mega_menu?.[0]?.sections?.length > 0 && <>
                                                     {currPanel === item?.text
@@ -296,7 +301,8 @@ function Header (props: App.Header): JSX.Element {
                                                         <div onClick={resetMobileNav}>
                                                             {sect?.title && <Link
                                                                 url={sect?.link}
-                                                                className='font-inter text-base flex items-start text-stone pt-2'>
+                                                                className='font-inter text-base flex items-start text-stone pt-2'
+                                                            >
                                                                 {sect.title}
                                                             </Link>}
                                                         </div>

components/TextAndImageCarousel/TextAndImageCarousel.tsx

@@ -43,7 +43,7 @@ export function TextAndImageCarousel (props: Component.TextAndImageCarousel) {
             className='text-and-image-carousel'
             {...$?.carousel_items}
         >
-            {currentItemData?.length > 0 && currentItemData.map((item, index: number) => {
+            {currentItemData?.length > 0 ? currentItemData.map((item, index: number) => {
                 const { heading, content, image, image_alt_text, cta, styles: { theme }, is_thumbnail } = item
 
                 return <div 
@@ -56,7 +56,7 @@ export function TextAndImageCarousel (props: Component.TextAndImageCarousel) {
                             `${image_position === 'right' ? 'sm:flex-row flex-col'
                                 : image_position === 'left' ? 'sm:flex-row-reverse flex-col'
                                     : 'xs:flex-row-reverse flex-col-reverse'}`,
-                            
+
                             'flex my-25',
                             'text-stone bg-white dark:text-white dark:bg-stone'
                         )}
@@ -86,7 +86,7 @@ export function TextAndImageCarousel (props: Component.TextAndImageCarousel) {
                         </div>
                     </div>
                 </div>
-            })}
+            }) : <div className='text-center text-gray-400 py-16'>No carousel items available. Click + to add one.</div>}
         </div>
     )
 }