[chore] Update cookie banner text and CHANGELOG.md

apps/example/package.json

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

apps/example/pages/index.tsx

@@ -11,6 +11,7 @@ export default function Home() {
       <CookieBanner
         link={'https://www.coinbase.com/legal/cookie'}
         useTranslations={useTranslations}
+        companyName={'Coinbase'}
       />
     </main>
   );

packages/cookie-banner/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 1.0.1 (12/11/2023 PST)
+
+#### 🐞 Fixes
+
+- Update the cookie banner text and some CSS
+
+## 1.0.0 (12/7/2023 PST)
+
+#### 🚀 Updates
+
+Package Created

packages/cookie-banner/README.md

@@ -37,6 +37,7 @@ It takes the following props:
 
 - `link` : Link to your Cookie Policy
 - `useTranslations` - Hook to return translations for your cookie banner's texts. More info [here](#usetranslations)
+- `companyName` - Name of your comapany/product
 
 Example usage:
 
@@ -48,6 +49,7 @@ const SomeComponent = () => {
         <CookieBanner
             link={'https://www.coinbase.com/legal/cookie'}
             useTranslations={useTranslations}
+            companyName={'XYZ'}
         />
     )
 };

packages/cookie-banner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cookie-banner",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -25,7 +25,7 @@
     "react-dom": "^18.1.0"
   },
   "dependencies": {
-    "@coinbase/cookie-manager": "1.0.0",
+    "@coinbase/cookie-manager": "^1.0.0",
     "react-intl": "^6.5.1",
     "styled-components": "^5.3.6"
   }

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

@@ -25,6 +25,7 @@ type Props = {
   useTranslations?:
     | ((() => [boolean, Record<string, string>]) & (() => [boolean, Record<string, string>]))
     | undefined;
+  companyName: string;
 };
 
 const cookieOptions = {
@@ -100,7 +101,7 @@ export const useBanner = () => {
   };
 };
 
-function Banner({ theme, link, useTranslations }: Props) {
+function Banner({ theme, link, useTranslations, companyName }: Props) {
   const { hasDismissed, handleBannerDismiss, handleAcceptAll, closeModal, openModal, isModalOpen } =
     useBanner();
 
@@ -113,6 +114,7 @@ function Banner({ theme, link, useTranslations }: Props) {
         showPreferencesModal={openModal}
         hasDismissed={hasDismissed}
         link={link}
+        companyName={companyName}
       />
     </UIProviders>
   );

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

@@ -23,9 +23,17 @@ type Props = {
   showPreferencesModal: () => void;
   hasDismissed: boolean;
   link?: string;
+  companyName: string;
 };
 
-function BannerContent({ onDismiss, onAccept, showPreferencesModal, hasDismissed, link }: Props) {
+function BannerContent({
+  onDismiss,
+  onAccept,
+  showPreferencesModal,
+  hasDismissed,
+  link,
+  companyName,
+}: Props) {
   const { log } = useTrackingManager();
 
   const [isVisible, closeWithTransition] = useIsVisibleWithTransition(!hasDismissed, 100);
@@ -61,6 +69,7 @@ function BannerContent({ onDismiss, onAccept, showPreferencesModal, hasDismissed
       <DescriptionText>
         {formatMessage(messages.defaultBannerDescription, {
           link: (node: React.ReactNode) => CookieLink(node, link),
+          span: () => <span key="span">{companyName}</span>,
           button: (node: React.ReactNode) => [
             <ManageSettingsButton
               key="ManageCookieSettingsBtn"
@@ -118,7 +127,7 @@ const MobileDismissButton = styled(DismissButton)`
 
 const DesktopDismissButton = styled(DismissButton)`
   @media (max-width: ${({ theme }) => theme.breakpoints.tablet}px) {
-    display: none;
+    display: flex;
   }
 `;
 
@@ -145,7 +154,6 @@ const SettingsCTA = styled.button`
 const DescriptionText = styled.div`
   ${({ theme }) => css`
     font-size: ${theme.fontSize.sm};
-    width: 734px;
     line-height: 23px;
     margin-right: ${theme.size.lg};
 
@@ -168,7 +176,7 @@ const Container = styled.div<{ visible: boolean }>`
     background-color: ${theme.colors.backgroundMuted};
     z-index: ${theme.zIndex.overlay};
     color: ${theme.colors.onBackgroundMuted};
-    padding: ${`${theme.size.md} 60px ${theme.size.md} 160px`};
+    padding: ${`${theme.size.md} 60px`};
     justify-content: space-between;
     ${visible ? 'bottom: 0' : 'bottom: -140px'};
     transition: bottom ${TRANSITION_TIME_MS}ms;

packages/cookie-banner/src/hooks/useMessages.ts

@@ -1,10 +1,10 @@
-import { useTrackingManager } from '@coinbase/cookie-manager';
+import { Region, useTrackingManager } from '@coinbase/cookie-manager';
 
 import messages from '../utils/messages';
 
 const useMessages = () => {
   const { region } = useTrackingManager();
-  if (region === 'EU') return messages.euMessages;
+  if (region === Region.EU) return messages.euMessages;
   return messages.defaultMessages;
 };
 

packages/cookie-banner/src/utils/messages.ts

@@ -5,13 +5,13 @@ const messages = defineMessages({
   defaultBannerDescription: {
     id: `${i18nKey}.defaultBannerDescription`,
     defaultMessage:
-      'We use our own and third-party cookies on our websites to enhance your experience, analyze traffic, and for security and marketing. For more info or to modify cookies, see our <link>Cookie Policy</link> or go to <button>Manage Settings</button>.',
+      'We use cookies and similar technologies on our websites to enhance and tailor your experience, analyze our traffic, and for security and marketing. You can choose not to allow some type of cookies by clicking <button>Manage Settings</button>. For more information see our <link>Cookie Policy</link>.',
     description: 'Cookie banner for managing cooking consent preferences',
   },
   euBannerDescription: {
     id: `${i18nKey}.euBannerDescription`,
     defaultMessage:
-      'We use our own cookies as well as third-party cookies on our websites to enhance your experience, analyze our traffic, and for security and marketing. For more info or to modify cookies, see our <link>Cookie Policy</link> or go to <button>Manage Settings</button>. Select "Accept All" to allow them to be used.',
+      'We use cookies and similar technologies on our websites to enhance and tailor your experience, analyze our traffic, and for security and marketing. Select "Accept All" to allow <span> companyName </span> and its trusted affiliates and partners to use cookies and similar technologies or click <button>Manage Settings</button> to individually select which cookies you allow. You can withdraw your consent at any time. For more information see our <link>Cookie Policy</link>.',
     description: 'Cookie banner for managing cooking consent preferences',
   },
   bannerSettingsCTA: {

packages/cookie-manager/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## 1.0.0 (12/7/2023 PST)
+
+#### 🚀 Updates
+
+Package Created

packages/cookie-manager/src/CookieContext.tsx

@@ -183,7 +183,7 @@ const getTrackingPreference = (
   config: Config
 ): TrackingPreference => {
   const trackingPreference =
-    region === 'EU'
+    region === Region.EU
       ? cookieCache[EU_CONSENT_PREFERENCES_COOKIE]
       : cookieCache[DEFAULT_CONSENT_PREFERENCES_COOKIE];
   return trackingPreference || getDefaultTrackingPreference(region, config);

packages/cookie-manager/src/utils/setTrackingPreference.ts

@@ -22,7 +22,7 @@ const setTrackingPreference = (
     path: '/',
   };
 
-  if (region === 'EU') {
+  if (region === Region.EU) {
     setCookie(EU_CONSENT_PREFERENCES_COOKIE, newConsentPreference, cookieOptions);
   } else {
     setCookie(DEFAULT_CONSENT_PREFERENCES_COOKIE, newConsentPreference, cookieOptions);