diff --git a/apps/example/package.json b/apps/example/package.json index 196ada9..f6277f8 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.1", + "@coinbase/cookie-manager": "^1.0.0", "next": "14.0.0", "react": "^18", "react-dom": "^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 new file mode 100644 index 0000000..e07189e --- /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 and some CSS + +## 1.0.0 (12/7/2023 PST) + +#### 🚀 Updates + +Package Created 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 = () => { ) }; 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/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 dfc86ca..e21a115 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 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/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 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);