[feat] Support retention durations

apps/example/package.json

@@ -11,8 +11,8 @@
     "test": "jest --passWithNoTests"
   },
   "dependencies": {
-    "@coinbase/cookie-banner": "1.0.1",
-    "@coinbase/cookie-manager": "^1.0.0",
+    "@coinbase/cookie-banner": "1.0.2",
+    "@coinbase/cookie-manager": "1.1.0",
     "next": "14.0.0",
     "react": "^18",
     "react-dom": "^18"

apps/example/pages/_app.tsx

@@ -9,11 +9,12 @@ import { cookieManagerConfig } from '../utils/cookieManagerConfig';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [isMounted, setIsMounted] = useState(false);
+  const trackingPreference = useRef<TrackingPreference | undefined>();
+
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
-  const trackingPreference = useRef<TrackingPreference | undefined>();
   const setTrackingPreference = useCallback((newPreference: TrackingPreference) => {
     const priorConsent = trackingPreference.current?.consent;
     trackingPreference.current = newPreference;
@@ -38,14 +39,15 @@ export default function App({ Component, pageProps }: AppProps) {
       window.location.reload();
     }
   }, []);
+
   if (!isMounted) return null;
 
   return (
     <Provider
       onError={console.error}
       projectName="test"
       locale="en"
-      region={Region.EU}
+      region={Region.DEFAULT}
       config={cookieManagerConfig}
       log={console.log}
       onPreferenceChange={setTrackingPreference}

apps/example/pages/index.tsx

@@ -1,11 +1,24 @@
 import { CookieBanner } from '@coinbase/cookie-banner';
+import { useCookie } from '@coinbase/cookie-manager';
 import { Inter } from 'next/font/google';
+import { useEffect } from 'react';
 
 import useTranslations from '@/hooks/useTranslations';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export default function Home() {
+  const [, setIpCountryCookie] = useCookie('ip_country');
+  const [, setLocaleCookie] = useCookie('locale');
+  const [, setRFMCookie] = useCookie('rfm');
+  const [trackingPreference] = useCookie('cm_eu_preference');
+
+  useEffect(() => {
+    setIpCountryCookie('US');
+    setRFMCookie('locale');
+    setLocaleCookie('en');
+  }, [setIpCountryCookie, setLocaleCookie, setRFMCookie, trackingPreference]);
+
   return (
     <main className={`flex min-h-screen bg-black justify-end flex-col ${inter.className}`}>
       <CookieBanner

apps/example/utils/cookieManagerConfig.ts

@@ -4,25 +4,34 @@ export const cookieManagerConfig = {
   categories: [
     {
       id: TrackingCategory.NECESSARY,
+      expiry: 365,
       required: true,
       trackers: [
         {
           id: 'ip_country',
           type: TrackerType.COOKIE,
+          expiry: 10,
+        },
+        {
+          id: 'locale',
+          type: TrackerType.COOKIE,
         },
       ],
     },
     {
       id: TrackingCategory.PERFORMANCE,
+      expiry: 365,
       trackers: [
         {
-          id: 'cb-rfm',
+          id: 'rfm',
           type: TrackerType.COOKIE,
+          sessionCookie: true,
         },
       ],
     },
     {
       id: TrackingCategory.FUNCTIONAL,
+      expiry: 365,
       trackers: [
         {
           id: 'mode',
@@ -32,6 +41,7 @@ export const cookieManagerConfig = {
     },
     {
       id: TrackingCategory.TARGETING,
+      expiry: 365,
       trackers: [
         {
           id: 'gclid',
@@ -41,6 +51,7 @@ export const cookieManagerConfig = {
     },
     {
       id: TrackingCategory.DELETE_IF_SEEN,
+      expiry: 0,
       trackers: [
         {
           id: 'challenge-regex',

packages/cookie-banner/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.2 (12/11/2023 PST)
+
+#### Chore
+
+- Update the cookie manager version and fix Close Icon styling
+
 ## 1.0.1 (12/11/2023 PST)
 
 #### 🐞 Fixes

packages/cookie-banner/README.md

@@ -201,4 +201,4 @@ The returned record should contain all the keys mentioned in this example. All t
 
 ## License
 
-Licensed under the Apache License. See [LICENSE](./LICENSE) for more information.
+Licensed under the Apache License. See [LICENSE](./LICENSE.md) for more information.

packages/cookie-banner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cookie-banner",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -18,14 +18,15 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "wrap-ansi": "^7.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.1.0"
   },
   "dependencies": {
-    "@coinbase/cookie-manager": "^1.0.0",
+    "@coinbase/cookie-manager": "1.1.0",
     "react-intl": "^6.5.1",
     "styled-components": "^5.3.6"
   }

packages/cookie-banner/src/components/CookieBannerContent.tsx

@@ -126,8 +126,9 @@ const MobileDismissButton = styled(DismissButton)`
 `;
 
 const DesktopDismissButton = styled(DismissButton)`
+  display: flex;
   @media (max-width: ${({ theme }) => theme.breakpoints.tablet}px) {
-    display: flex;
+    display: none;
   }
 `;
 

packages/cookie-banner/src/examples/config.ts

@@ -4,6 +4,7 @@ export default {
   categories: [
     {
       id: TrackingCategory.NECESSARY,
+      expiry: 365,
       required: true,
       trackers: [
         {
@@ -14,6 +15,7 @@ export default {
     },
     {
       id: TrackingCategory.PERFORMANCE,
+      expiry: 365,
       trackers: [
         {
           id: 'some_cookie',
@@ -31,6 +33,7 @@ export default {
     },
     {
       id: TrackingCategory.FUNCTIONAL,
+      expiry: 365,
       trackers: [
         {
           id: 'mode',
@@ -40,6 +43,7 @@ export default {
     },
     {
       id: TrackingCategory.TARGETING,
+      expiry: 365,
       trackers: [
         // First party
         {
@@ -55,6 +59,7 @@ export default {
     },
     {
       id: TrackingCategory.DELETE_IF_SEEN,
+      expiry: 0,
       trackers: [
         {
           id: 'cgl_prog',

packages/cookie-manager/CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 
-## 1.0.0 (12/7/2023 PST)
+## 1.1.0 (12/14/2023)
+
+- Updated cookie config to include retention durations at both category and cookie levels.
+- Introduced an optional boolean field `sessionCookie` in cookie config to accommodate session cookies.
+- Implemented a setExpiryForCookie hook that adjusts the cookie's expiration in the following manner:
+  - If the sessionCookie parameter is enabled, the expiry is set to session
+  - If an expiry is specified at the cookie level, it takes precedence; otherwise, the expiry is derived from the category's expiration setting.
+
+## 1.0.0 (12/7/2023)
 
 #### 🚀 Updates
 

packages/cookie-manager/README.md

@@ -4,8 +4,8 @@
 
 # Contents
 
-- [Introduction](#Introduction)
 - [Installation](#installation)
+- [Introduction](#Introduction)
 - [Methods](#methods)
   - [Provider](#provider)
   - [useCookie](#usecookie)
@@ -20,6 +20,18 @@
   - [isOptOut](#isoptout)
 - [License](#license)
 
+## Installation
+
+Install the package as follows:
+
+```shell
+yarn add @coinbase/cookie-manager
+
+npm install @coinbase/cookie-manager
+
+pnpm install @coinbase/cookie-manager
+```
+
 ## Introduction
 
 `@coinbase/cookie-manager` helps manage the following first party client side cookie categories:
@@ -57,24 +69,29 @@ export default {
     {
       id: TrackingCategory.NECESSARY,
       required: true,
+      expiry: 365,
       trackers: [
         {
           id: 'locale',
           type: TrackerType.COOKIE,
+          expiry: 10,
         },
       ],
     },
     {
       id: TrackingCategory.PERFORMANCE,
+      expiry: 365,
       trackers: [
         {
           id: 'some_cookie',
           type: TrackerType.COOKIE,
+          sessionCookie: true,
         },
       ],
     },
     {
       id: TrackingCategory.FUNCTIONAL,
+      expiry: 365,
       trackers: [
         {
           id: 'mode',
@@ -84,6 +101,7 @@ export default {
     },
     {
       id: TrackingCategory.TARGETING,
+      expiry: 365,
       trackers: [
         {
           id: 'id-regex',
@@ -94,6 +112,7 @@ export default {
     },
     {
       id: TrackingCategory.DELETE_IF_SEEN,
+      expiry: 0,
       trackers: [
         {
           id: 'cgl_prog',
@@ -115,7 +134,7 @@ export default {
 };
 ```
 
-In this config, under each category you can specify what all cookies should be allowed. Everything else, if detected will be deleted at an interval of 500 ms.
+In this config, under each category you can specify what all cookies that should be allowed. Everything else, if detected will be deleted at an interval of 500 ms.
 
 `DELETE_IF_SEEN` can be used to specify the cookies which should be deleted if seen on the browser
 
@@ -131,19 +150,47 @@ You can also specify regex for a given cookie as follows:
 
 Any id with `-regex` at the end should contain a `regex` which will be used to match different cookies.
 
-In this example: `id_ac7a5c3da45e3612b44543a702e42b01` will also be allowed
+In this example: `id_ac7a5c3da45e3612b44543a702e42b01` will also be allowed.
 
-## Installation
+You need to specify the retention days for a category using the expiry key as follows:
 
-Install the package as follows:
+```
+{
+      id: TrackingCategory.NECESSARY,
+      required: true,
+      expiry: 365,
+      trackers: [
+        {
+          id: 'locale',
+          type: TrackerType.COOKIE,
+          expiry: 10,
+        },
+      ],
+    }
 
-```shell
-yarn add @coinbase/cookie-manager
+```
 
-npm install @coinbase/cookie-manager
+Each cookie by default will inherit its category's retention duration but you can override this by specifying an expiry (in days) for the cookie:
 
-pnpm install @coinbase/cookie-manager
 ```
+ {
+    id: 'locale',
+    type: TrackerType.COOKIE,
+    expiry: 10
+}
+```
+
+If you want a cookie to only be valid for a session, it can optionally be marked as a session cookie as follows:
+
+```
+{
+  id: 'some_cookie',
+  type: TrackerType.COOKIE,
+  sessionCookie: true
+}
+```
+
+**Note: Session cookies only last as long as your browser is open and are automatically deleted when a user closes the browser**
 
 ## Methods
 
@@ -476,4 +523,4 @@ const SomeComponent = () => {
 
 ## License
 
-Licensed under the Apache License. See [LICENSE](./LICENSE) for more information.
+Licensed under the Apache License. See [LICENSE](./LICENSE.md) for more information.