sc 7027 book call page

src/components/book-call/BookCallEmbed.tsx

@@ -0,0 +1,63 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react"
+import { companyContactInformation } from "../../configuration/companyContactInformation";
+import { UsercentricsContext } from "../usercentrics/UsercentricsProvider";
+
+declare global {
+  interface Window {
+    Calendly: {
+      initInlineWidget: (options: { url: string; parentElement: HTMLElement }) => void;
+    };
+    calendlyLoaded: boolean;
+  }
+}
+
+export const BookCallEmbed = () => {
+  const divRef = useRef<HTMLDivElement>(null)
+  const [calendlyInitialized, setCalendlyInitialized] = useState(false);
+  const url = companyContactInformation.launchCallUrl;
+  const { isClientSide, isInitialized, hasServiceConsent, acceptService } = useContext(UsercentricsContext)
+
+  const provideConsent = useCallback((e: MouseEvent) => {
+    e.preventDefault()
+    if (acceptService) {
+      acceptService("Calendly").then(() => {
+        if (typeof window !== "undefined") {
+          const interval = setInterval(() => {
+            if (window.Calendly) {
+              initCalendly()
+              window.clearInterval(interval)
+            }
+          }, 500)
+        }
+      })
+    }
+  }, [acceptService, isInitialized, isClientSide])
+
+  const initCalendly = useCallback(() => {
+    if (!calendlyInitialized && divRef.current) {
+      window.Calendly.initInlineWidget({
+        url: `${url}&hide_event_type_details=1`,
+        parentElement: divRef.current,
+      });
+      setCalendlyInitialized(true);
+    }
+
+  }, [divRef.current, calendlyInitialized])
+
+  useEffect(() => {
+    if (hasServiceConsent && hasServiceConsent("Calendly") && typeof window !== "undefined" && window.Calendly && divRef.current) {
+      initCalendly()
+    }
+  }, [divRef.current, hasServiceConsent, isInitialized, isClientSide])
+
+  const div = <div ref={divRef} className="calendly-inline-widget" data-auto-load="false" />
+
+  const consentNotice = (!calendlyInitialized && (!hasServiceConsent || !hasServiceConsent("Calendly"))) && <>
+    <p>We use Calendly to embed content that may collect data about your activity.</p>
+    <p>Please provide <a href="#" className="text-launch-orange" onClick={provideConsent}>consent</a> to connect to our partner, Calendly</p>
+  </>
+  return <>
+    {consentNotice}
+    {div}
+  </>
+}

src/components/book-call/BookCallModal.tsx

@@ -3,8 +3,10 @@ import React, { RefObject } from "react";
 import "@launchware/replicator/dist/css/Modal/modal.css";
 import "./css/book-call-modal.css";
 import { StaticImage } from "gatsby-plugin-image";
+import { BookCallEmbed } from "./BookCallEmbed";
+import { UsercentricsProvider } from "../usercentrics/UsercentricsProvider";
 
-export const BookCallModal = ({ divRef }: { divRef: RefObject<HTMLDivElement> }) => (
+export const BookCallModal = () => (
   <div className="book-call">
     <StaticImage
       alt=""
@@ -16,7 +18,9 @@ export const BookCallModal = ({ divRef }: { divRef: RefObject<HTMLDivElement> })
       <p className="book-call__text">Let's chat about your custom software development project.</p>
     </div>
     <div className="book-call__widget-container">
-      <div ref={divRef} className="calendly-inline-widget" data-auto-load="false" />
+      <UsercentricsProvider>
+        <BookCallEmbed />
+      </UsercentricsProvider>
     </div>
   </div>
 );

src/components/book-call/css/book-call-modal.css

@@ -1,26 +1,5 @@
-.calendly-inline-widget {
-  overflow: hidden;
-  position: relative;
-
-  & iframe {
-    display: block;
-    margin: 0 auto;
-    top: 32px;
-    left: 0;
-    border: 0;
-    width: 100%;
-    min-height: 600px;
-  }
-}
-
-@media screen(lg) {
-  .calendly-inline-widget {
-    min-width: 300px;
-  }
-}
-
-.modal__contents,
-.modal__contents_large {
+div.modal__contents,
+div.modal__contents_large {
   @apply p-0 border-none max-w-6xl mx-2 md:mx-4 lg:mx-auto;
 }
 

src/components/book-call/hooks/useBookCallModal.tsx

@@ -16,35 +16,23 @@ declare global {
 }
 
 export const useBookCallModal = () => {
-  const divRef = useRef<HTMLDivElement>(null);
-
   const {
     modal,
     isVisible: isModalVisible,
     setVisibility: setModalVisibility,
-  } = useModal(() => <BookCallModal divRef={divRef} />, {
+  } = useModal(() => <BookCallModal />, {
     scrollToTop: false,
+    size: "large"
   });
 
-  const [calendlyInitialized, setCalendlyInitialized] = useState(false);
-
-  const url = companyContactInformation.launchCallUrl;
 
   useEffect(() => {
     window.addEventListener("message", (e) => {
       if (e.data.event && e.data.event.indexOf("calendly")) {
         setModalVisibility(false);
       }
     });
-
-    if (isModalVisible && !!divRef?.current) {
-      window.Calendly.initInlineWidget({
-        url: `${url}&hide_event_type_details=1`,
-        parentElement: divRef.current,
-      });
-      setCalendlyInitialized(true);
-    }
-  }, [calendlyInitialized, isModalVisible, setModalVisibility, url]);
+  }, []);
 
   const clickHandler: MouseEventHandler = (event) => {
     event.preventDefault();

src/components/icons/BinaryIcon.tsx

@@ -19,43 +19,43 @@ export const BinaryIcon = ({ className = "", width }: { className?: string; widt
       </defs>
       <g id="uuid-62a60ad5-0a18-421d-ad5b-6aee4028173a">
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m17.12,21.29c.55,0,1-.45,1-1v-7.46c0-.55-.45-1-1-1s-1,.45-1,1v7.46c0,.55.45,1,1,1Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m39.03,21.29c.55,0,1-.45,1-1v-7.46c0-.55-.45-1-1-1s-1,.45-1,1v7.46c0,.55.45,1,1,1Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m28.07,11.84c-2.61,0-4.73,2.12-4.73,4.73s2.12,4.73,4.73,4.73,4.73-2.12,4.73-4.73-2.12-4.73-4.73-4.73Zm0,7.46c-1.5,0-2.73-1.22-2.73-2.73s1.22-2.73,2.73-2.73,2.73,1.22,2.73,2.73-1.22,2.73-2.73,2.73Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m49.98,11.84c-2.61,0-4.73,2.12-4.73,4.73s2.12,4.73,4.73,4.73,4.73-2.12,4.73-4.73-2.12-4.73-4.73-4.73Zm0,7.46c-1.5,0-2.73-1.22-2.73-2.73s1.22-2.73,2.73-2.73,2.73,1.22,2.73,2.73-1.22,2.73-2.73,2.73Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m28.13,25.54c-.55,0-1,.45-1,1v7.46c0,.55.45,1,1,1s1-.45,1-1v-7.46c0-.55-.45-1-1-1Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m50.04,25.54c-.55,0-1,.45-1,1v7.46c0,.55.45,1,1,1s1-.45,1-1v-7.46c0-.55-.45-1-1-1Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m17.17,25.54c-2.61,0-4.73,2.12-4.73,4.73s2.12,4.73,4.73,4.73,4.73-2.12,4.73-4.73-2.12-4.73-4.73-4.73Zm0,7.46c-1.5,0-2.73-1.22-2.73-2.73s1.22-2.73,2.73-2.73,2.73,1.22,2.73,2.73-1.22,2.73-2.73,2.73Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m39.08,25.54c-2.61,0-4.73,2.12-4.73,4.73s2.12,4.73,4.73,4.73,4.73-2.12,4.73-4.73-2.12-4.73-4.73-4.73Zm0,7.46c-1.5,0-2.73-1.22-2.73-2.73s1.22-2.73,2.73-2.73,2.73,1.22,2.73,2.73-1.22,2.73-2.73,2.73Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m90.73,36.74l-7.06-7.06c2.82-5.47,1.81-12.19-2.59-16.58-1.5-1.5-3.26-2.62-5.23-3.33h0c-1.24-.44-2.51-.7-3.79-.79v-2.35c0-3.66-2.97-6.63-6.62-6.63H12.5c-3.66,0-6.63,2.97-6.63,6.63v38.2H1c-.55,0-1,.45-1,1v5.87c0,2.49,2.03,4.52,4.52,4.52h68.9c2.49,0,4.52-2.03,4.52-4.52v-5.87c0-.55-.45-1-1-1h-4.88v-7.46c1.87-.14,3.74-.65,5.48-1.54l7.05,7.05c.85.85,1.96,1.27,3.07,1.27s2.22-.42,3.07-1.27,1.27-1.91,1.27-3.07-.45-2.25-1.27-3.07Zm-15.55-25.08c1.69.61,3.21,1.57,4.49,2.86,3.94,3.94,4.72,10.04,1.91,14.84-.53.9-1.17,1.73-1.91,2.47-.73.73-1.56,1.38-2.46,1.9-4.81,2.82-10.91,2.03-14.85-1.9-1.54-1.54-2.64-3.45-3.18-5.54-.92-3.49-.26-7.18,1.81-10.13.4-.58.86-1.13,1.37-1.64,2.32-2.33,5.47-3.58,8.68-3.58,1.39,0,2.79.24,4.13.72h0Zm-29.4,33.17c-.55,0-1,.45-1,1,0,1.4-1.3,1.7-2.39,1.7h-6.84c-1.09,0-2.39-.29-2.39-1.7,0-.55-.45-1-1-1H7.87V6.63c0-2.55,2.08-4.63,4.63-4.63h52.95c2.55,0,4.62,2.08,4.62,4.63v2.35c-3.38.23-6.64,1.65-9.11,4.12-.59.59-1.13,1.24-1.6,1.91-2.41,3.42-3.17,7.72-2.1,11.78.63,2.43,1.91,4.66,3.7,6.45,2.5,2.5,5.76,3.9,9.11,4.12v7.47h-24.28Z"
         />
         <path
-          class="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
+          className="uuid-bb5f6733-bb1c-4776-8371-2d3407a27580"
           d="m70.02,17.2c0,.55.45,1,1,1,2.74,0,4.97,2.23,4.97,4.97,0,.55.45,1,1,1s1-.45,1-1c0-3.84-3.12-6.97-6.97-6.97-.55,0-1,.45-1,1Z"
         />
       </g>

src/components/icons/CommunityIcon.tsx

@@ -43,13 +43,13 @@ export const CommunityIcon = ({
           <path d="m36.492,27.812c.651.561,1.063,1.393,1.063,2.32,0,.134-.01.268-.027.399-.194,1.504-1.481,2.667-3.039,2.667-1.694,0-3.066-1.374-3.066-3.066,0-.161.011-.318.034-.471.228-1.47,1.498-2.594,3.031-2.594.119,0,.236.008.351.019.628.073,1.198.333,1.652.726Z" />
         </g>
         <path
-          class="community-icon-1"
+          className="community-icon-1"
           d="m47.995,34.389c.009-.131.009-.271.009-.402,0-7.728-6.259-13.987-13.987-13.987s-13.987,6.259-13.987,13.987,6.259,13.987,13.987,13.987"
         />
-        <polyline class="community-icon-1" points="47.995 34.389 48.004 34.389 48.004 47.973 34.017 47.973" />
+        <polyline className="community-icon-1" points="47.995 34.389 48.004 34.389 48.004 47.973 34.017 47.973" />
       </g>
       <path
-        class="community-icon-3"
+        className="community-icon-3"
         d="m56.005,34.389h-.009v13.584s13.987,0,13.987,0c7.728,0,13.987-6.259,13.987-13.987s-6.259-13.987-13.987-13.987-13.987,6.259-13.987,13.987c0,.131,0,.271.009.402Z"
       />
       <g>
@@ -58,10 +58,10 @@ export const CommunityIcon = ({
           <path d="m71.513,63.839c.651.561,1.063,1.393,1.063,2.32,0,.134-.01.268-.027.399-.194,1.504-1.481,2.667-3.039,2.667-1.694,0-3.066-1.374-3.066-3.066,0-.161.011-.318.034-.471.228-1.47,1.498-2.594,3.031-2.594.119,0,.236.008.351.019.628.073,1.198.333,1.652.726Z" />
         </g>
         <path
-          class="community-icon-1"
+          className="community-icon-1"
           d="m56.005,69.611c-.009.131-.009.271-.009.402,0,7.728,6.259,13.987,13.987,13.987s13.987-6.259,13.987-13.987-6.259-13.987-13.987-13.987"
         />
-        <polyline class="community-icon-1" points="56.005 69.611 55.996 69.611 55.996 56.027 69.983 56.027" />
+        <polyline className="community-icon-1" points="56.005 69.611 55.996 69.611 55.996 56.027 69.983 56.027" />
       </g>
       <g>
         <path d="m39.86,72.101l.678,4.36h-13.042s.678-4.36.678-4.36c.164-1.195,1.185-2.084,2.39-2.084h3.452s3.45,0,3.45,0c1.207,0,2.228.888,2.393,2.084Z" />
@@ -70,15 +70,15 @@ export const CommunityIcon = ({
       <g>
 
         <path
-          class="community-icon-1"
+          className="community-icon-1"
           d="m34.419,56.036c-.131-.009-.271-.009-.402-.009-7.728,0-13.987,6.259-13.987,13.987s6.259,13.987,13.987,13.987,13.987-6.259,13.987-13.987"
         />
 
-        <polyline class="community-icon-1" points="34.419 56.036 34.419 56.027 48.004 56.027 48.004 70.013" />
+        <polyline className="community-icon-1" points="34.419 56.036 34.419 56.027 48.004 56.027 48.004 70.013" />
       </g>
       <g>
-        <line class="community-icon-2" x1="63.462" y1="31.639" x2="76.504" y2="31.639" />
-        <line class="community-icon-2" x1="63.462" y1="38.29" x2="72.317" y2="38.29" />
+        <line className="community-icon-2" x1="63.462" y1="31.639" x2="76.504" y2="31.639" />
+        <line className="community-icon-2" x1="63.462" y1="38.29" x2="72.317" y2="38.29" />
       </g>
     </svg>
   );

src/components/layout/Footer.tsx

@@ -11,12 +11,11 @@ import { useBookCallModal } from "../book-call/hooks/useBookCallModal"
 import { OptInForm } from "../opt-in/OptInForm"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faEnvelope, faPhone, faSms } from "@fortawesome/free-solid-svg-icons"
+import { UC_UI } from "../usercentrics/UsercentricsProvider"
 
 declare global {
   interface Window {
-    UC_UI: {
-      showSecondLayer: () => void;
-    };
+    UC_UI: UC_UI
   }
 }
 const Footer = () => {
@@ -108,10 +107,7 @@ const Footer = () => {
           </ul>
         </div>
       </div>
-      <Script type="text/javascript" src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" async />
-      <Script type="text/javascript" id="usercentrics-cmp" src="https://app.usercentrics.eu/browser-ui/latest/loader.js" data-settings-id="4Rd5it0XiLQ7g9" async />
       <TrackingCodes />
-      <Script type="text/plain" data-usercentrics="Calendly" src="https://assets.calendly.com/assets/external/widget.js" defer />
     </footer >
   )
 }

src/components/layout/HeadDefaults.tsx

@@ -0,0 +1,11 @@
+import { Script } from "gatsby"
+import React, { useEffect } from "react"
+import { UsercentricsScript } from "../usercentrics/UsercentricsScript"
+
+export const HeadDefaults = () => {
+  return <>
+    <meta charSet="utf-8" />
+    <UsercentricsScript settingsId="4Rd5it0XiLQ7g9" />
+    <Script type="text/javascript" data-usercentrics="Calendly" src="https://assets.calendly.com/assets/external/widget.js" defer />
+  </>
+}

src/components/layout/Layout.tsx

@@ -6,10 +6,11 @@ import Footer from "./Footer";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { WindowLocation } from "@reach/router";
+import { Script } from "gatsby";
 
 export const Head = () => (
   <>
-    <meta charSet="utf-8" />
+
   </>
 );
 

src/components/usercentrics/UsercentricsProvider.tsx

@@ -0,0 +1,61 @@
+import React, { ReactNode, useCallback } from "react"
+import { useEffect, useState } from "react"
+import { UsercentricsService } from "../../services/UsercentricsService"
+
+export type UCContext = {
+  isInitialized: boolean
+  isClientSide: boolean
+  hasServiceConsent: null | undefined | ((name: string) => boolean)
+  acceptService: null | undefined | ((name: string) => Promise<void>)
+}
+
+export const UsercentricsContext = React.createContext<UCContext>({
+  isInitialized: false,
+  isClientSide: false,
+  hasServiceConsent: null,
+  acceptService: null
+})
+
+export const UsercentricsProvider = ({ children }: { children: ReactNode }) => {
+  const [isInitialized, setIsInitialized] = useState(false)
+  const [isClientSide] = useState(typeof window !== "undefined")
+
+  useEffect(() => {
+    if (isClientSide && !isInitialized) {
+      window.addEventListener('UC_UI_INITIALIZED', () => setIsInitialized(true), { once: true })
+    }
+  }, [isClientSide, isInitialized])
+
+  const acceptService = useCallback(async (name: string) => {
+    if (!isInitialized || !isClientSide) {
+      return
+    }
+    else {
+      const service = UsercentricsService.getServicesBaseInfo().find((service) => service.name === name)
+      if (!!service && !!service.consent) {
+        await UsercentricsService.acceptService(service.id, "explicit")
+      }
+    }
+  }, [isInitialized, isClientSide])
+
+  const hasServiceConsent = useCallback((name: string) => {
+    if (!isInitialized || !isClientSide) {
+      return false
+    }
+    else {
+      const service = UsercentricsService.getServicesBaseInfo().find((service) => service.name === name)
+      if (!!service && !!service.consent) {
+        return service.consent.status
+      }
+      return false
+    }
+  }, [isInitialized, isClientSide])
+
+  return <UsercentricsContext.Provider value={{
+    isInitialized,
+    isClientSide,
+    hasServiceConsent,
+    acceptService
+  }}
+  > {children}</UsercentricsContext.Provider>
+}

src/components/usercentrics/UsercentricsScript.tsx

@@ -0,0 +1,6 @@
+import { Script } from "gatsby"
+import React from "react"
+
+export const UsercentricsScript = ({ settingsId }: { settingsId: string }) => {
+  return <Script type="text/javascript" id="usercentrics-cmp" src="https://app.usercentrics.eu/browser-ui/latest/loader.js" data-settings-id={settingsId} data-version="latest" async />
+}