CMP.tsx

import { useEffect } from 'react';
import { NextSeo } from 'next-seo';
import { PrismicRichText } from '@prismicio/react';

import Container from 'components/Container/Container';
import Toptitle from 'components/Toptitle/Toptitle';
import Headings from 'components/Headings/Headings';
import Spacer from 'components/Spacer/Spacer';
import Button from 'components/Button/Button';
import PageHeader from 'components/PageHeader/PageHeader';

const CmpTcfPage = ({ prismicData }) => {
  const slices = prismicData.data?.body || [];

  const getTitle = (baseline, keyword) => {
    const slices = (baseline || '').split(keyword);
    if (slices.length === 1) {
      return slices[0];
    }

    const keywordHighlighted = <strong>{keyword}</strong>;

    return (
      <>
        {slices[0]}
        {keywordHighlighted}
        {slices[1]}
      </>
    );
  };

  const showCmp = () => {
    if (typeof window.cmpOptions !== 'undefined') {
      window.__tcfapi('showConsentManager', 2, (show, success) =>
        console.log('showConsentManager', success, show)
      );
    }
  };

  useEffect(() => {
    if (typeof window.cmpOptions === 'undefined') {
      window.cmpOptions = {
        colorScheme: 'light',
        title: "We're the Cookies",
        subtitle: 'Subtitle, if needed',
        surtitle: 'Hi there!',
        logo: './payfit.svg',
        page: 0,
        consentLanguage: 'en',
        stacks: [1, 42],
        vendors: [1, 2, 10, 12, 253],
        publisherRestrictions: { '253': { '2': 1, '7': 1, '10': 1 } },
        introduction:
          '<p>On this website, we utilize cookies and similar technologies to process device information and personal data. This processing serves various purposes, including the integration of content, external services, and elements from third parties, statistical analysis and measurement, personalized advertising, and social media integration. Depending on the specific function, data may be shared with up to <strong><a href="#page-4">[VENDOR_COUNT] third parties</a></strong> and processed by them. Remember, this consent is entirely voluntary, not mandatory for using our website, and can be revoked anytime by using the “Privacy Settings” link at the bottom of any page and click the "Reject all" button.</p>'
      };
    }

    if (typeof window.cmpOptions !== 'undefined') {
      const script = document.createElement('script');

      script.src = './tcf-sdk.js';
      script.async = true;

      document.body.appendChild(script);

      return () => {
        document.body.removeChild(script);
      };
    }
  }, []);

  return (
    <>
      <NextSeo
        title={`Axeptio - ${prismicData.data?.html_title || ''}`}
        description={prismicData.data?.html_desc || ''}
      />

      {slices.map((slice, key) => {
        if (slice.slice_type === 'widget_showcase') {
          return (
            <div key={key}>
              <PageHeader>
                <Container maxWidth="medium">
                  <Headings>
                    <Spacer xlarge>
                      <h1>
                        {slice?.primary.subtitle && (
                          <Toptitle>{slice?.primary.subtitle}</Toptitle>
                        )}
                        {getTitle(
                          slice.primary.title[0].text,
                          'CMP TCF Widget'
                        )}
                      </h1>
                      <PrismicRichText field={slice.primary.content} />
                    </Spacer>
                    <Button primary onClick={() => showCmp()}>
                      Show CMP
                    </Button>
                  </Headings>
                </Container>
              </PageHeader>
            </div>
          );
        }
      })}
    </>
  );
};

export default CmpTcfPage;