hds-web 1.16.6 → 1.16.8

package/src/HDS/helpers/Paperform/index.js

@@ -0,0 +1 @@
+export {default as HDSPaperForm} from './paperform';

package/src/HDS/helpers/Paperform/paperform.js

@@ -0,0 +1,107 @@
+import React from "react";
+import { useState, useEffect, useRef } from "react";
+// import { useRouter } from 'next/router'
+import { GetUtmCookie } from "./utils";
+import { Typography } from "../../foundation/Typography";
+
+export default function Paperform(
+  { 
+    formId, 
+    onSubmitCB, 
+    styleClass, 
+    hasuraConRegSuccessUrl 
+  },
+  props
+) 
+{
+  const isBrowser = typeof window !== "undefined";
+  const [isLoaded, setIsLoaded] = useState(false);
+  const embedDivRef = useRef(null);
+  // const router = useRouter();
+  useEffect(() => {
+    const existingEmbed = document.getElementById("paperform_embed");
+
+    if (existingEmbed) {
+      setIsLoaded(true);
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = "paperform_embed";
+    script.src = "https://forms.hasura.io/__embed.min.js";
+    script.onreadystatechange = () => {
+      if (this.readyState === "complete" || this.readyState === "loaded") {
+        setIsLoaded(true);
+      }
+    };
+    script.onload = () => setIsLoaded(true);
+    document.body.prepend(script);
+
+    return () => script.remove();
+  }, []);
+
+  function handleFormSubmit({ detail }) {
+    const { form_id, data } = detail;
+
+    const email = data.find((d) => d.type === "email")?.value;
+
+    if (!!email) {
+      if (isBrowser) {
+        window?.analytics?.identify(email, {
+          email,
+          identifiedBy: `Paperform ${form_id} Submitted`,
+          // ...nameTraits,
+        });
+      }
+    }
+    if (isBrowser) {
+      window?.analytics?.track("form submit", {
+        data,
+        category: "website",
+        label: `Paperform ${form_id} Submitted`,
+        action: "form submit",
+      });
+    }
+
+    typeof onSubmitCB === "function" && onSubmitCB(detail);
+    window.location.reload(`${window.location.pathname}?aliId=success_submit`);
+  }
+
+  useEffect(() => {
+    const refCurrValue = embedDivRef.current;
+    const utm_cookies = GetUtmCookie();
+    isBrowser &&
+      refCurrValue?.setAttribute(
+        "data-prefill",
+        `utm_landing-page=${window.location.pathname}&utm_search=${window.location.search}&utm_campaign=${utm_cookies.utm_campaign}&utm_medium=${utm_cookies.utm_medium}&utm_source=${utm_cookies.utm_source}&utm_content=${utm_cookies.utm_content}`
+      );
+
+    refCurrValue?.addEventListener("PaperformSubmission", handleFormSubmit);
+
+    return () =>
+      refCurrValue?.removeEventListener(
+        "PaperformSubmission",
+        handleFormSubmit
+      );
+  }, []);
+  return (
+    <div className={styleClass}>
+      {!isLoaded && (
+        <Typography
+          textStyle="h5"
+          as="h5"
+          className="text-neutral-800 font-medium py-8 tb:py-12"
+        >
+          Loading...
+        </Typography>
+      )}
+      <div
+        data-prefill-inherit="1"
+        data-no-scroll="1"
+        ref={embedDivRef}
+        id={formId}
+        data-paperform-id={formId}
+        data-spinner="1"
+      />
+    </div>
+  );
+}

package/src/HDS/helpers/Paperform/utils/index.js

@@ -0,0 +1 @@
+export { default as GetUtmCookie } from './readcookie'

package/src/HDS/helpers/Paperform/utils/readcookie.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+const readCookie = name => {
+  var nameEQ = name + "=";
+  var ca = document.cookie.split(";");
+  for (var i = 0; i < ca.length; i++) {
+    var c = ca[i];
+    while (c.charAt(0) === " ") c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+  }
+  return "";
+};
+
+const GetUtmCookie = () => {
+  const utm_campaign = readCookie("utm_campaign");
+  const utm_medium = readCookie("utm_medium");
+  const utm_source = readCookie("utm_source");
+  const utm_content = readCookie("utm_content");
+    return {
+      utm_campaign,
+      utm_medium,
+      utm_source,
+      utm_content,
+    };
+};
+
+
+export default GetUtmCookie;

package/src/HDS/helpers/index.js

@@ -1,4 +1,5 @@
 export * from './Translations';
 export * from './Media';
 export * from './Effects';
-export * from './AlgoliaSearch';
+export * from './AlgoliaSearch';
+export * from './Paperform';

package/src/HDS/modules/TextCard/textCard.js

@@ -58,7 +58,7 @@ export default function TextCard(props) {
                       <Typography
                         key={i}
                         textStyle="body1"
-                        className="pb-6 pr-8  [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
+                        className="pb-6 pr-8 max-w-[412px] [&>p]:pb-2 [&>p]:text-neutral-600 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
                         <ReactMarkdown>
                           {desc.description}
                         </ReactMarkdown>
@@ -92,7 +92,7 @@ export default function TextCard(props) {
                     )
                   }
                   {props.addiDescription && (
-                    <Typography textStyle='body1' className='text-neutral-600'>{props.addiDescription}</Typography>
+                    <Typography textStyle='body1' className='text-neutral-600 max-w-[412px]'>{props.addiDescription}</Typography>
                   )
                   }
                 </>
@@ -100,14 +100,14 @@ export default function TextCard(props) {
             }
             {
               props.feature_cards_links && (
-                <div className='tb:border border-neutral-150 rounded-3xl'>
+                <div className='tb:border border-neutral-150 rounded-3xl max-w-[460px]'>
                   {
                     props.feature_cards_links.map((list, i) => {
                       const currentStrokeColor = HDSColor(list.icon_color)
                       const imgBgColor = HDSColor(list.tab_img_bg_class)
                       return (
                         <div key={i} className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={() => setImgActive(list.title)}>
-                          <div className={'m-2 p-0 tb:p-6 rounded-2xl transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
+                          <div className={'my-4 tb-l:m-2 p-4 tb:p-6 rounded-2xl transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
                             <div className='flex items-center pb-4'>
                               <Icon
                                 height={`w-6 h-6 mr-2 stroke-[1.5px]`}
@@ -117,7 +117,7 @@ export default function TextCard(props) {
                               />
                               <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
                             </div>
-                            {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-1000'>{list.description}</Typography>}
+                            {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-600'>{list.description}</Typography>}
                             {
                               list.descriptions_list && list.descriptions_list.map((descList, j) => {
                                 const iconBgColor = HDSColor(descList.icon_bg_color);
@@ -132,7 +132,7 @@ export default function TextCard(props) {
                                         strokeColor=""
                                       />
                                     </div>
-                                    <Typography textStyle='body3' className='text-neutral-1000'>{descList.description}</Typography>
+                                    <Typography textStyle='body3' className='text-neutral-600'>{descList.description}</Typography>
                                   </div>
                                 )
                               })
@@ -158,7 +158,7 @@ export default function TextCard(props) {
                             }
                             {
                               list.tab_img_url && (
-                                <div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
+                                <div className={`${imgBgColor} tb-l:hidden p-4 tb-l:p-12 rounded-2xl mt-8`}>
                                   <img src={list.tab_img_url} alt={list.title} loading="lazy" />
                                 </div>
                               )
@@ -206,7 +206,7 @@ export default function TextCard(props) {
                     <Typography
                       key={i}
                       textStyle="body1"
-                      className="pb-6 pr-8  [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
+                      className="pb-6 pr-8 max-w-[412px] [&>p]:pb-2 last:[&>p]:pb-0 [&>p]:text-neutral-600 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
                       <ReactMarkdown>
                         {desc.description}
                       </ReactMarkdown>
@@ -240,7 +240,7 @@ export default function TextCard(props) {
                   )
                 }
                 {props.addiDescription && (
-                  <Typography textStyle='body1' className='text-neutral-600'>{props.addiDescription}</Typography>
+                  <Typography textStyle='body1' className='text-neutral-600 max-w-[412px]'>{props.addiDescription}</Typography>
                 )
                 }
               </div>
@@ -256,7 +256,7 @@ export default function TextCard(props) {
                             <Fragment key={i}>
                               {
                                 imgActive === img.title && (
-                                  <div className={((img.tab_img_bg_class === "pattern") ? "bg-neutral-100" : "") + ` hidden h-full p-12 tb-l:flex items-center justify-center rounded-2xl db:rounded-3xl relative bg-neutral-100`}>
+                                  <div className={((img.tab_img_bg_class === "pattern") ? "bg-neutral-100" : "") + ` hidden h-full p-4 tb-l:p-12 tb-l:flex items-center justify-center rounded-2xl db:rounded-3xl relative bg-neutral-100`}>
                                     {
                                       img.tab_img_bg_class === "pattern" && (
                                         <div className="pattern-gradient absolute left-0 top-0 w-full h-full rounded-3xl"></div>
@@ -279,7 +279,7 @@ export default function TextCard(props) {
                                           />
                                         </video>
                                       ) : (
-                                        <img className="z-[1]" src={img.tab_img_url} alt={img.title} loading="lazy" />
+                                        <img className="z-[1] max-h-[530px]" src={img.tab_img_url} alt={img.title} loading="lazy" />
                                       )
                                     }
                                   </div>
@@ -348,4 +348,4 @@ export default function TextCard(props) {
       </div>
     </>
   )
-}
+}

package/src/styles/tailwind.css

@@ -889,6 +889,14 @@ select{
   left: -137px;
 }
 
+.-left-\[218px\]{
+  left: -218px;
+}
+
+.-left-\[50px\]{
+  left: -50px;
+}
+
 .-left-\[60\%\]{
   left: -60%;
 }
@@ -941,10 +949,18 @@ select{
   left: 1rem;
 }
 
+.left-6{
+  left: 1.5rem;
+}
+
 .left-\[0px\]{
   left: 0px;
 }
 
+.left-\[108px\]{
+  left: 108px;
+}
+
 .left-\[160\%\]{
   left: 160%;
 }
@@ -953,6 +969,10 @@ select{
   left: 17.6%;
 }
 
+.left-\[200px\]{
+  left: 200px;
+}
+
 .left-\[45\%\]{
   left: 45%;
 }
@@ -1009,6 +1029,10 @@ select{
   top: 1.25rem;
 }
 
+.top-8{
+  top: 2rem;
+}
+
 .top-\[112px\]{
   top: 112px;
 }
@@ -1029,14 +1053,6 @@ select{
   top: 96px;
 }
 
-.-left-\[218px\]{
-  left: -218px;
-}
-
-.-left-\[50px\]{
-  left: -50px;
-}
-
 .isolate{
   isolation: isolate;
 }
@@ -1236,6 +1252,10 @@ select{
   margin-bottom: 1.5rem;
 }
 
+.-mb-2{
+  margin-bottom: -0.5rem;
+}
+
 .-mb-\[112\%\]{
   margin-bottom: -112%;
 }
@@ -1268,6 +1288,10 @@ select{
   margin-left: -1rem;
 }
 
+.-ml-9{
+  margin-left: -2.25rem;
+}
+
 .-ml-px{
   margin-left: -1px;
 }
@@ -1380,6 +1404,10 @@ select{
   margin-right: 0.5rem;
 }
 
+.mr-3{
+  margin-right: 0.75rem;
+}
+
 .mr-4{
   margin-right: 1rem;
 }
@@ -1392,8 +1420,8 @@ select{
   margin-right: 2rem;
 }
 
-.mr-\[16px\]{
-  margin-right: 16px;
+.mr-\[17px\]{
+  margin-right: 17px;
 }
 
 .mr-\[30px\]{
@@ -1464,10 +1492,6 @@ select{
   margin-top: 70px;
 }
 
-.mr-\[34px\]{
-  margin-right: 34px;
-}
-
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -1647,6 +1671,10 @@ select{
   height: 90px;
 }
 
+.h-\[calc\(100\%-112px\)\]{
+  height: calc(100% - 112px);
+}
+
 .h-\[calc\(100\%-1px\)\]{
   height: calc(100% - 1px);
 }
@@ -1675,6 +1703,10 @@ select{
   max-height: 26.25;
 }
 
+.max-h-\[530px\]{
+  max-height: 530px;
+}
+
 .max-h-full{
   max-height: 100%;
 }
@@ -1711,10 +1743,6 @@ select{
   min-height: 64px;
 }
 
-.\!w-full{
-  width: 100% !important;
-}
-
 .w-1\/2{
   width: 50%;
 }
@@ -2007,6 +2035,10 @@ select{
   max-width: 400px;
 }
 
+.max-w-\[412px\]{
+  max-width: 412px;
+}
+
 .max-w-\[430px\]{
   max-width: 430px;
 }
@@ -2015,6 +2047,10 @@ select{
   max-width: 44.44rem;
 }
 
+.max-w-\[460px\]{
+  max-width: 460px;
+}
+
 .max-w-\[583px\]{
   max-width: 583px;
 }
@@ -2085,6 +2121,11 @@ select{
   table-layout: fixed;
 }
 
+.origin-top-right{
+  -webkit-transform-origin: top right;
+          transform-origin: top right;
+}
+
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2555,10 +2596,6 @@ select{
   overflow-x: scroll;
 }
 
-.overflow-y-scroll{
-  overflow-y: scroll;
-}
-
 .whitespace-nowrap{
   white-space: nowrap;
 }
@@ -5206,6 +5243,10 @@ select{
   --tw-gradient-to: #854D18 var(--tw-gradient-to-position);
 }
 
+.fill-neutral-150{
+  fill: #ECEDF0;
+}
+
 .stroke-amber-100{
   stroke: #FFF3D4;
 }
@@ -5953,6 +5994,10 @@ select{
   padding-right: 10px;
 }
 
+.pr-\[34px\]{
+  padding-right: 34px;
+}
+
 .pt-0{
   padding-top: 0px;
 }
@@ -5997,6 +6042,10 @@ select{
   padding-top: 2rem;
 }
 
+.pt-9{
+  padding-top: 2.25rem;
+}
+
 .pt-\[72px\]{
   padding-top: 72px;
 }
@@ -6856,6 +6905,12 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-home-drop{
+  --tw-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
+  --tw-shadow-colored: 0px 10px 30px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-inner{
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
@@ -9690,10 +9745,6 @@ select{
     margin-left: 0px;
   }
 
-  .tb\:mr-4{
-    margin-right: 1rem;
-  }
-
   .tb\:mt-0{
     margin-top: 0px;
   }
@@ -9718,10 +9769,6 @@ select{
     margin-top: -4px;
   }
 
-  .tb\:mr-\[16px\]{
-    margin-right: 16px;
-  }
-
   .tb\:block{
     display: block;
   }
@@ -9975,6 +10022,11 @@ select{
     background-color: rgb(14 165 120 / var(--tw-bg-opacity));
   }
 
+  .tb\:bg-neutral-150{
+    --tw-bg-opacity: 1;
+    background-color: rgb(236 237 240 / var(--tw-bg-opacity));
+  }
+
   .tb\:bg-pink-500{
     --tw-bg-opacity: 1;
     background-color: rgb(225 58 124 / var(--tw-bg-opacity));
@@ -10030,6 +10082,11 @@ select{
     padding-right: 2rem;
   }
 
+  .tb\:py-12{
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
   .tb\:py-14{
     padding-top: 3.5rem;
     padding-bottom: 3.5rem;
@@ -10051,10 +10108,6 @@ select{
     padding-right: 0px;
   }
 
-  .tb\:pr-4{
-    padding-right: 1rem;
-  }
-
   .tb\:pt-0{
     padding-top: 0px;
   }
@@ -10525,6 +10578,10 @@ select{
 }
 
 @media (min-width: 905px){
+  .tb-l\:m-2{
+    margin: 0.5rem;
+  }
+
   .tb-l\:mx-4{
     margin-left: 1rem;
     margin-right: 1rem;
@@ -10542,14 +10599,6 @@ select{
     margin-top: 0px;
   }
 
-  .tb-l\:mr-\[34px\]{
-    margin-right: 34px;
-  }
-
-  .tb-l\:mr-\[16px\]{
-    margin-right: 16px;
-  }
-
   .tb-l\:block{
     display: block;
   }
@@ -10648,10 +10697,6 @@ select{
     gap: 0px;
   }
 
-  .tb-l\:gap-2{
-    gap: 0.5rem;
-  }
-
   .tb-l\:gap-20{
     gap: 5rem;
   }
@@ -10704,11 +10749,6 @@ select{
     border-right-color: rgb(229 231 235 / var(--tw-border-opacity));
   }
 
-  .tb-l\:bg-neutral-150{
-    --tw-bg-opacity: 1;
-    background-color: rgb(236 237 240 / var(--tw-bg-opacity));
-  }
-
   .tb-l\:bg-gradient-to-r{
     background-image: linear-gradient(to right, var(--tw-gradient-stops));
   }
@@ -10717,6 +10757,10 @@ select{
     padding: 2.5rem;
   }
 
+  .tb-l\:p-12{
+    padding: 3rem;
+  }
+
   .tb-l\:px-8{
     padding-left: 2rem;
     padding-right: 2rem;
@@ -11404,6 +11448,11 @@ select{
   padding-bottom: 0.5rem;
 }
 
+.\[\&\>p\]\:text-neutral-600>p{
+  --tw-text-opacity: 1;
+  color: rgb(77 87 97 / var(--tw-text-opacity));
+}
+
 .last\:\[\&\>p\]\:pb-0>p:last-child{
   padding-bottom: 0px;
 }