CORE-670 Switch from Osano to CookieYes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",

src/components/ManageCookies.node.spec.tsx

@@ -3,6 +3,7 @@
 import renderer from 'react-test-renderer';
 import { ManageCookiesLink } from "./ManageCookies";
 
+// For prerendering
 describe('ManageCookies outside a browser', () => {
   it('renders nothing', () => {
     const tree = renderer.create(

src/components/ManageCookies.spec.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import renderer from 'react-test-renderer';
+import renderer, { act } from 'react-test-renderer';
 import { ManageCookiesLink } from "./ManageCookies";
 
 describe('ManageCookies', () => {
-  describe('without osano', () => {
+  describe('without cookieYes', () => {
 
     it('renders nothing', () => {
       const tree = renderer.create(
@@ -20,64 +20,108 @@ describe('ManageCookies', () => {
     });
   });
 
-  describe('with osano', () => {
-    let showDrawerSpy: jest.SpyInstance;
+  describe('when CookieYes loads', () => {
+    const bannerLoadEvent = new CustomEvent('cookieyes_banner_load', {});
+    let component: renderer.ReactTestRenderer;
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('renders button', () => {
+      act(() => {
+        component = renderer.create(
+          <ManageCookiesLink />
+        );
+      });
+      act(() => { document.dispatchEvent(bannerLoadEvent); });
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders button with content and correct class', () => {
+      act(() => {
+        component = renderer.create(
+          <ManageCookiesLink>some content</ManageCookiesLink>
+        );
+      });
+      act(() => { document.dispatchEvent(bannerLoadEvent); });
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders button in wrapper', () => {
+      act(() => {
+        component = renderer.create(
+          <ManageCookiesLink wrapper={button => <div>{button}</div>} />
+        );
+      });
+      act(() => { document.dispatchEvent(bannerLoadEvent); });
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('calls additional callback', () => {
+      const onClick = jest.fn();
+      act(() => {
+        component = renderer.create(
+          <ManageCookiesLink onClick={onClick} />
+        );
+      });
+      act(() => { document.dispatchEvent(bannerLoadEvent); });
+      component.root.findByType('button').props.onClick();
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('with CookieYes already loaded', () => {
+    let component: renderer.ReactTestRenderer;
 
     beforeAll(() => {
-      showDrawerSpy = jest.fn();
-      (window as any).Osano = {cm: {mode: 'production',
-        showDrawer: showDrawerSpy}
-      };
+      (window as any).getCkyConsent = jest.fn();
     });
 
     afterAll(() => {
-      delete (window as any).Osano;
+      delete (window as any).getCkyConsent;
     });
 
     beforeEach(() => {
       jest.clearAllMocks();
     });
 
     it('renders button', () => {
-      const tree = renderer.create(
-        <ManageCookiesLink />
-      ).toJSON();
-      expect(tree).toMatchSnapshot();
+      act(() => {
+        component = renderer.create(
+          <ManageCookiesLink />
+        );
+      });
+      expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it('renders button with content', () => {
-      const tree = renderer.create(
-        <ManageCookiesLink>some content</ManageCookiesLink>
-      ).toJSON();
-      expect(tree).toMatchSnapshot();
+    it('renders button with content and correct class', () => {
+      act(() => {
+        component = renderer.create(
+          <ManageCookiesLink>some content</ManageCookiesLink>
+        );
+      });
+      expect(component.toJSON()).toMatchSnapshot();
     });
 
     it('renders button in wrapper', () => {
-      const tree = renderer.create(
-        <ManageCookiesLink wrapper={button => <div>{button}</div>} />
-      ).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('calls osano showDrawer', () => {
-      const component = renderer.create(
-        <ManageCookiesLink />
-      );
-
-      expect(showDrawerSpy).not.toHaveBeenCalled();
-      component.root.findByType('button').props.onClick();
-      expect(showDrawerSpy).toHaveBeenCalled();
+      act(() => {
+        component = renderer.create(
+          <ManageCookiesLink wrapper={button => <div>{button}</div>} />
+        );
+      });
+      expect(component.toJSON()).toMatchSnapshot();
     });
 
     it('calls additional callback', () => {
       const onClick = jest.fn();
-      const component = renderer.create(
-        <ManageCookiesLink onClick={onClick} />
-      );
+      act(() => {
+        component = renderer.create(
+          <ManageCookiesLink onClick={onClick} />
+        );
+      });
 
-      expect(showDrawerSpy).not.toHaveBeenCalled();
       component.root.findByType('button').props.onClick();
-      expect(showDrawerSpy).toHaveBeenCalled();
       expect(onClick).toHaveBeenCalled();
     });
   });

src/components/ManageCookies.stories.tsx

@@ -2,23 +2,23 @@ import React from 'react';
 import styled from "styled-components";
 import { ManageCookiesLink } from "./ManageCookies";
 
-export const WithoutOsano = () => {
-  const [show, setShow] = React.useState<boolean>(false);
+export const WithoutCookieYes = () => <>
+  <div className="cky-btn-revisit">mock CookieYes cookie button</div>
 
-  // small delay so that going back and forth from WithOsano works
-  React.useEffect(() => setShow(true),[]);
+  <h2>Standalone</h2>
+  <ManageCookiesLink />
 
-  return <>
-    <div className="osano-cm-widget">mock osano cookie button</div>
-    {show ? <ManageCookiesLink /> : null}
+  <h2>Inside a styled container</h2>
+  <SomeContainer>
+    if there is some container like a footer or whatever that sets colors: <ManageCookiesLink />
+  </SomeContainer>
 
-    <ul>
-      <li>in a list</li>
-      <li>use a function child to provide wrappers that will only be included if the link is shown</li>
-      <ManageCookiesLink wrapper={button => <li>{button}</li>} />
-    </ul>
-  </>;
-};
+  <h2>As a list item</h2>
+  <ul>
+    <li>use a function child to provide wrappers that will only be included if the link is shown</li>
+    <ManageCookiesLink wrapper={button => <li>{button}</li>} />
+  </ul>
+</>;
 
 const SomeContainer = styled.div`
   a, button {
@@ -30,25 +30,24 @@ const SomeContainer = styled.div`
   }
 `;
 
-export const WithOsano = () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (window as any).Osano = {cm: {mode: 'production', showDrawer: (...args: any[]) => alert('showDrawer called ' + JSON.stringify(args))}};
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  React.useEffect(() => () => { delete (window as any).Osano }, []);
+export const WithCookieYes = () => {
+  React.useEffect(() => {
+    document.dispatchEvent(new CustomEvent('cookieyes_banner_load', {}));
+  }, []);
 
   return <>
-    <div className="osano-cm-widget">mock osano cookie button</div>
+    <div className="cky-btn-revisit">mock CookieYes cookie button</div>
 
+    <h2>Standalone</h2>
     <ManageCookiesLink />
 
+    <h2>Inside a styled container</h2>
     <SomeContainer>
-      if there is some container like a footer or whatever that sets colors, it works
-      <ManageCookiesLink />
+      if there is some container like a footer or whatever that sets colors: <ManageCookiesLink />
     </SomeContainer>
 
+    <h2>As a list item</h2>
     <ul>
-      <li>in a list</li>
       <li>use a function child to provide wrappers that will only be included if the link is shown</li>
       <ManageCookiesLink wrapper={button => <li>{button}</li>} />
     </ul>

src/components/ManageCookies.tsx

@@ -3,35 +3,45 @@ import { ButtonLink } from "./Button";
 import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
-  .osano-cm-widget { display: none; }
-`
+  .cky-btn-revisit { display: none; }
+`;
 
 type ManageCookiesLinkProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  wrapper?: (button: React.ReactElement) => React.ReactElement
-}
+  wrapper?: (button: React.ReactElement) => React.ReactElement;
+};
+
+// documentation for this at https://www.cookieyes.com/documentation/change-cookie-consent-using-cookieyes/
+export const ManageCookiesLink = ({children, className, wrapper, ...props}: ManageCookiesLinkProps) => {
+  const inBrowser = typeof window === 'object';
+  const [cookieYesLoaded, setCookieYesLoaded] = React.useState(false);
 
-// documentation for this at https://docs.osano.com/hiding-the-cookie-widget
-export const ManageCookiesLink = (props: ManageCookiesLinkProps) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any 
-  const osano = typeof window === 'undefined' ? undefined : (window as any).Osano
+  React.useEffect(() => {
+    if (inBrowser && !cookieYesLoaded) {
+      const handleCkyLoaded = () => setCookieYesLoaded(true);
+      if ('getCkyConsent' in window) {
+        handleCkyLoaded();
+      } else {
+        document.addEventListener('cookieyes_banner_load', handleCkyLoaded);
+        return () => document.removeEventListener('cookieyes_banner_load', handleCkyLoaded);
+      }
+    }
+    return;
+  }, [cookieYesLoaded, inBrowser]);
 
-  if (osano === undefined || osano.cm.mode === 'debug') {
-    return null;
-  }
+  if (!inBrowser) { return <><GlobalStyle /></>; }
 
   const button = <ButtonLink
+    className={`cky-banner-element${className ? ` ${className}` : ''}`}
     {...props}
-    onClick={e => {
-      osano.cm.showDrawer('osano-cm-dom-info-dialog-open')
-      props.onClick?.(e)
-    }}
-  >{props.children || 'Manage Cookies'}</ButtonLink>;
+  >{children || 'Manage Cookies'}</ButtonLink>;
 
   return <>
     <GlobalStyle />
-    {typeof props.wrapper === 'function'
-      ? props.wrapper(button)
-      : button
+    {cookieYesLoaded
+       ? typeof wrapper === 'function'
+         ? wrapper(button)
+         : button
+       : null
     }
-  </>
+  </>;
 };

src/components/__snapshots__/ManageCookies.spec.tsx.snap

@@ -1,34 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ManageCookies with osano renders button 1`] = `
+exports[`ManageCookies when CookieYes loads renders button 1`] = `
 <button
-  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct"
-  onClick={[Function]}
+  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
 >
   Manage Cookies
 </button>
 `;
 
-exports[`ManageCookies with osano renders button in wrapper 1`] = `
+exports[`ManageCookies when CookieYes loads renders button in wrapper 1`] = `
 <div>
   <button
-    className="sc-gsnTZi sc-dkzDqf czjxlp jmylct"
-    onClick={[Function]}
+    className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
   >
     Manage Cookies
   </button>
 </div>
 `;
 
-exports[`ManageCookies with osano renders button with content 1`] = `
+exports[`ManageCookies when CookieYes loads renders button with content and correct class 1`] = `
 <button
-  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct"
-  onClick={[Function]}
+  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
 >
   some content
 </button>
 `;
 
-exports[`ManageCookies without osano renders nothing 1`] = `null`;
+exports[`ManageCookies with CookieYes already loaded renders button 1`] = `
+<button
+  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+>
+  Manage Cookies
+</button>
+`;
+
+exports[`ManageCookies with CookieYes already loaded renders button in wrapper 1`] = `
+<div>
+  <button
+    className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+  >
+    Manage Cookies
+  </button>
+</div>
+`;
+
+exports[`ManageCookies with CookieYes already loaded renders button with content and correct class 1`] = `
+<button
+  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+>
+  some content
+</button>
+`;
+
+exports[`ManageCookies without cookieYes renders nothing 1`] = `null`;
 
-exports[`ManageCookies without osano renders nothing, even a wrapper 1`] = `null`;
+exports[`ManageCookies without cookieYes renders nothing, even a wrapper 1`] = `null`;