[WIP] React example for do not sell button

src/DoNotSellButton.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable no-restricted-globals */
+
+import { AirgapAPI, TranscendAPI } from '@transcend-io/airgap.js-types';
+import { h, FunctionComponent } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+
+/**
+ * Global window with airgap instance attached
+ */
+type WindowWithAirgap = typeof self & {
+ /** Airgap instance should have been initialized on self when script added in header */
+ transcend: TranscendAPI;
+ /** Airgap API */
+ airgap: AirgapAPI;
+};
+
+/**
+ * A button that implements the logic for Do Not Sell/Do Not Share
+ * to ensure compliance with laws like CPRA, CPA, CDPA
+ */
+export const DoNotSellButton: FunctionComponent = () => {
+ // Ensure airgap was initialized
+ const selfWithAirgap = self as WindowWithAirgap;
+ if (!selfWithAirgap.airgap || !selfWithAirgap.transcend) {
+ throw new Error(`Expected airgap and transcend to be initialized on self!`);
+ }
+
+ // Check if the user is opted into sale of data
+ const [isSellingData, setIsSellingData] = useState(
+ !!selfWithAirgap.airgap.getConsent().purposes.SaleOfInfo,
+ );
+
+ // update state variable when consent values change
+ useEffect(() => {
+ // Callback to re-calculate consent preferences
+ const onConsentChange = (): void => {
+ setIsSellingData(
+ !!selfWithAirgap.airgap.getConsent().purposes.SaleOfInfo,
+ );
+ };
+
+ // Add listener on change to re-calculate consent preferences
+ selfWithAirgap.airgap.addEventListener('consent-change', onConsentChange);
+
+ // Remove event listener when component dismounts
+ return () =>
+ selfWithAirgap.airgap.removeEventListener(
+ 'consent-change',
+ onConsentChange,
+ );
+ }, [selfWithAirgap.airgap]);
+
+ // Only show the button in california
+ if (!selfWithAirgap.airgap.getRegimes().has('CPRA')) {
+ return null;
+ }
+
+ return (
+ <button
+ onClick={
+ // only open modal if user is currently opted out
+ isSellingData
+ ? (event) => selfWithAirgap.transcend.doNotSell(event.nativeEvent)
+ : undefined
+ }
+ disabled={!isSellingData}
+ >
+ {isSellingData
+ ? 'Do Not Sell My Personal Information'
+ : 'We No Longer Sell Your Personal Information'}
+ </button>
+ );
+};
+/* eslint-enable no-restricted-globals */