From 79771af318451001d33d60bcf086e74c35ccae69 Mon Sep 17 00:00:00 2001 From: Sneh1999 Date: Sun, 10 Dec 2023 12:47:13 -0500 Subject: [PATCH 1/5] update example --- apps/example/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/example/package.json b/apps/example/package.json index 196ada9..41b7f93 100644 --- a/apps/example/package.json +++ b/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.0", + "@coinbase/cookie-manager": "^1.0.0", "next": "14.0.0", "react": "^18", "react-dom": "^18" From ea89044a56c5f83291114e2a3d975ec99dd8cb20 Mon Sep 17 00:00:00 2001 From: Sneh1999 Date: Mon, 11 Dec 2023 10:00:39 -0500 Subject: [PATCH 2/5] update banner text and add changelog --- apps/example/package.json | 4 ++++ packages/cookie-banner/CHANGELOG.md | 13 +++++++++++++ packages/cookie-banner/package.json | 4 ++-- packages/cookie-banner/src/utils/messages.ts | 4 ++-- packages/cookie-manager/CHANGELOG.md | 7 +++++++ 5 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 packages/cookie-banner/CHANGELOG.md create mode 100644 packages/cookie-manager/CHANGELOG.md diff --git a/apps/example/package.json b/apps/example/package.json index 41b7f93..43023db 100644 --- a/apps/example/package.json +++ b/apps/example/package.json @@ -11,7 +11,11 @@ "test": "jest --passWithNoTests" }, "dependencies": { +<<<<<<< Updated upstream "@coinbase/cookie-banner": "^1.0.0", +======= + "@coinbase/cookie-banner": "^1.0.1", +>>>>>>> Stashed changes "@coinbase/cookie-manager": "^1.0.0", "next": "14.0.0", "react": "^18", diff --git a/packages/cookie-banner/CHANGELOG.md b/packages/cookie-banner/CHANGELOG.md new file mode 100644 index 0000000..44a628a --- /dev/null +++ b/packages/cookie-banner/CHANGELOG.md @@ -0,0 +1,13 @@ +# Changelog + +## 1.0.1 (12/11/2023 PST) + +#### 🐞 Fixes + +- Update the cookie banner text + +## 1.0.0 (12/7/2023 PST) + +#### 🚀 Updates + +Package Created diff --git a/packages/cookie-banner/package.json b/packages/cookie-banner/package.json index b2c3ff0..9042de0 100644 --- a/packages/cookie-banner/package.json +++ b/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" } diff --git a/packages/cookie-banner/src/utils/messages.ts b/packages/cookie-banner/src/utils/messages.ts index dfc86ca..a46902c 100644 --- a/packages/cookie-banner/src/utils/messages.ts +++ b/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 Cookie Policy or go to .', + '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 . For more information see our Cookie Policy.', 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 Cookie Policy or go to . 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 Coinbase and its trusted affiliates and partners to use cookies and similar technologies or click to individually select which cookies you allow. You can withdraw your consent at any time. For more information see our Cookie Policy.', description: 'Cookie banner for managing cooking consent preferences', }, bannerSettingsCTA: { diff --git a/packages/cookie-manager/CHANGELOG.md b/packages/cookie-manager/CHANGELOG.md new file mode 100644 index 0000000..1047720 --- /dev/null +++ b/packages/cookie-manager/CHANGELOG.md @@ -0,0 +1,7 @@ +# Changelog + +## 1.0.0 (12/7/2023 PST) + +#### 🚀 Updates + +Package Created From 83f2bcca98d56118a7b510bf4958eb2bb65fca22 Mon Sep 17 00:00:00 2001 From: Sneh1999 Date: Mon, 11 Dec 2023 10:02:31 -0500 Subject: [PATCH 3/5] merge --- apps/example/package.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/example/package.json b/apps/example/package.json index 43023db..978d7e6 100644 --- a/apps/example/package.json +++ b/apps/example/package.json @@ -11,11 +11,7 @@ "test": "jest --passWithNoTests" }, "dependencies": { -<<<<<<< Updated upstream - "@coinbase/cookie-banner": "^1.0.0", -======= "@coinbase/cookie-banner": "^1.0.1", ->>>>>>> Stashed changes "@coinbase/cookie-manager": "^1.0.0", "next": "14.0.0", "react": "^18", From eebc002dad209e778f4a2e5f59e2660cb861de1d Mon Sep 17 00:00:00 2001 From: Sneh1999 Date: Tue, 12 Dec 2023 11:39:54 -0500 Subject: [PATCH 4/5] fix based on comments --- apps/example/package.json | 2 +- apps/example/pages/index.tsx | 1 + packages/cookie-banner/CHANGELOG.md | 2 +- .../src/components/CookieBanner.tsx | 4 +++- .../src/components/CookieBannerContent.tsx | 16 ++++++++++++---- packages/cookie-banner/src/hooks/useMessages.ts | 4 ++-- packages/cookie-banner/src/utils/messages.ts | 2 +- packages/cookie-manager/src/CookieContext.tsx | 2 +- .../src/utils/setTrackingPreference.ts | 2 +- 9 files changed, 23 insertions(+), 12 deletions(-) diff --git a/apps/example/package.json b/apps/example/package.json index 978d7e6..f6277f8 100644 --- a/apps/example/package.json +++ b/apps/example/package.json @@ -11,7 +11,7 @@ "test": "jest --passWithNoTests" }, "dependencies": { - "@coinbase/cookie-banner": "^1.0.1", + "@coinbase/cookie-banner": "1.0.1", "@coinbase/cookie-manager": "^1.0.0", "next": "14.0.0", "react": "^18", diff --git a/apps/example/pages/index.tsx b/apps/example/pages/index.tsx index beacb59..91fa96d 100644 --- a/apps/example/pages/index.tsx +++ b/apps/example/pages/index.tsx @@ -11,6 +11,7 @@ export default function Home() { ); diff --git a/packages/cookie-banner/CHANGELOG.md b/packages/cookie-banner/CHANGELOG.md index 44a628a..e07189e 100644 --- a/packages/cookie-banner/CHANGELOG.md +++ b/packages/cookie-banner/CHANGELOG.md @@ -4,7 +4,7 @@ #### 🐞 Fixes -- Update the cookie banner text +- Update the cookie banner text and some CSS ## 1.0.0 (12/7/2023 PST) diff --git a/packages/cookie-banner/src/components/CookieBanner.tsx b/packages/cookie-banner/src/components/CookieBanner.tsx index d30b620..838b5f7 100644 --- a/packages/cookie-banner/src/components/CookieBanner.tsx +++ b/packages/cookie-banner/src/components/CookieBanner.tsx @@ -25,6 +25,7 @@ type Props = { useTranslations?: | ((() => [boolean, Record]) & (() => [boolean, Record])) | 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} /> ); diff --git a/packages/cookie-banner/src/components/CookieBannerContent.tsx b/packages/cookie-banner/src/components/CookieBannerContent.tsx index 95cd319..95f69c4 100644 --- a/packages/cookie-banner/src/components/CookieBannerContent.tsx +++ b/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 {formatMessage(messages.defaultBannerDescription, { link: (node: React.ReactNode) => CookieLink(node, link), + span: () => {companyName}, button: (node: React.ReactNode) => [ 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; diff --git a/packages/cookie-banner/src/hooks/useMessages.ts b/packages/cookie-banner/src/hooks/useMessages.ts index 922c6db..cb79d17 100644 --- a/packages/cookie-banner/src/hooks/useMessages.ts +++ b/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; }; diff --git a/packages/cookie-banner/src/utils/messages.ts b/packages/cookie-banner/src/utils/messages.ts index a46902c..e21a115 100644 --- a/packages/cookie-banner/src/utils/messages.ts +++ b/packages/cookie-banner/src/utils/messages.ts @@ -11,7 +11,7 @@ const messages = defineMessages({ euBannerDescription: { id: `${i18nKey}.euBannerDescription`, defaultMessage: - '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 Coinbase and its trusted affiliates and partners to use cookies and similar technologies or click to individually select which cookies you allow. You can withdraw your consent at any time. For more information see our Cookie Policy.', + '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 companyName and its trusted affiliates and partners to use cookies and similar technologies or click to individually select which cookies you allow. You can withdraw your consent at any time. For more information see our Cookie Policy.', description: 'Cookie banner for managing cooking consent preferences', }, bannerSettingsCTA: { diff --git a/packages/cookie-manager/src/CookieContext.tsx b/packages/cookie-manager/src/CookieContext.tsx index 93f35b5..98358ff 100644 --- a/packages/cookie-manager/src/CookieContext.tsx +++ b/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); diff --git a/packages/cookie-manager/src/utils/setTrackingPreference.ts b/packages/cookie-manager/src/utils/setTrackingPreference.ts index 3b0b850..7d075ac 100644 --- a/packages/cookie-manager/src/utils/setTrackingPreference.ts +++ b/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); From b38ebe98d571e3b3a23fcb09f98750987eaa7dcc Mon Sep 17 00:00:00 2001 From: Sneh1999 Date: Tue, 12 Dec 2023 11:46:48 -0500 Subject: [PATCH 5/5] update docs --- packages/cookie-banner/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/cookie-banner/README.md b/packages/cookie-banner/README.md index 67bb160..38d69d3 100644 --- a/packages/cookie-banner/README.md +++ b/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 = () => { ) };