diff --git a/app/src/views/CookiePolicy/i18n.json b/app/src/views/CookiePolicy/i18n.json index 963b8315b..165764589 100644 --- a/app/src/views/CookiePolicy/i18n.json +++ b/app/src/views/CookiePolicy/i18n.json @@ -3,27 +3,27 @@ "strings": { "cookiePolicyTitle": "Cookie Policy", "disclaimerTitle": "Disclaimer", - "disclaimerDescription": "All the information contained in the web site is Copyright © The International Federation of Red Cross and Red Crescent Societies.All rights reserved. ", + "disclaimerDescription": "All the information contained in the website is Copyright © The International Federation of Red Cross and Red Crescent Societies. All rights reserved.", "useOfOurInformationTitle": "Use Of Our Information", "useOfOurInformationDescription1": "To use text information from this website, please obtain prior permission from the IFRC.", "useOfOurInformationDescription2": "To use photographs from this website, please contact our {termsLink}.", "useOfOurInformationAudiovisualLink": "audiovisual department", - "useOfOurInformationDescription3": "If you have any question about this website,or if you find any errors,please notify us.", + "useOfOurInformationDescription3": "If you have any question about this website, or if you find any errors, please notify us.", "useOfOurInformationDescriptionLink": "Click here for important information about fraudulent websites and emails.", "ourPrivacyPolicyHeading": "Our Privacy Policy", - "ourPrivacyPolicyContent": "This website is operated by the Federation. The Federation takes your privacy and the security of our personal information-meaning and information relating to an identified or identifiable individual- seriously.Please take a moment to read this privacy and learn about the Federation's general privacy and information security principles.Any changes to this Privacy Policy will be posted on this page.The version of the policy was published on {publishedDay} {publishedDate} {publishedYear}", + "ourPrivacyPolicyContent": "This website is operated by the Federation. The Federation takes your privacy and the security of our personal information-meaning and information relating to an identified or identifiable individual seriously. Please take a moment to read this privacy and learn about the Federation's general privacy and information security principles. Any changes to this Privacy Policy will be posted on this page. The version of the policy was published on {publishedDay} {publishedDate} {publishedYear}.", "dataCollectedByAccessingHeading": "A) Data collected by accessing our sites", "informationProvideHeading": "1. Information you provide", - "informationProvideDescription1": "On certain IFRC.org webpages, your personal data may be requested For instance, it is necessary to obtain your email address,name and other data to sign up for a newsletter oe make a donation .It is important to note that some of the features on IFRC.org sites require the use of third-party providers (please see Section F below for more derails).", - "informationProvideDescription2": "You will also need to provide some personal data if you use the \"Contact us\" Link at the bottom of our pages.If there are any specific changes ( relative to this privacy policy) to how your data is handled on those IFRC.org those changes will be specified in the privacy policies located on the respective site.", + "informationProvideDescription1": "On certain IFRC.org webpages, your personal data may be requested. For instance, it is necessary to obtain your email address, name and other data to sign up for a newsletter or make a donation. It is important to note that some of the features on IFRC.org sites require the use of third-party providers (please see Section F below for more details).", + "informationProvideDescription2": "You will also need to provide some personal data if you use the \"Contact us\" link at the bottom of our pages. If there are any specific changes (relative to this privacy policy) to how your data is handled on those IFRC.org, those changes will be specified in the privacy policies located on the respective site.", "automaticallyCollectedHeading": "2. Automatically or routinely collected", - "automaticallyCollectedDescription": "Just by Visiting IFRC.org,certain metadata may still be collected and processed while we have worked to minimize data collection,the following may be collected(and processed for the reasons set out in Section B of this Privacy Policy):", + "automaticallyCollectedDescription": "Just by visiting IFRC.org, certain metadata may still be collected and processed while we have worked to minimize data collection, the following may be collected (and processed for the reasons set out in Section B of this Privacy Policy):", "automaticallyCollectedList1": "your internet protocol(IP) address (which may reveal your approximate location and time zone)", "automaticallyCollectedList2": "devices ID ( which indicates the type of device being used to access the platform and may also reveal the operating system used)", "automaticallyCollectedList3": "dates and time of use", "automaticallyCollectedList4": "requested URL", "automaticallyCollectedList5": "Operating system you are using", - "ifrcLimitedCookiesAnalyticHeading": "3. IFRC.org also makes limited use of Cookies and analytics as further described below", + "ifrcLimitedCookiesAnalyticHeading": "3. IFRC.org also makes limited use of cookies and analytics as further described below", "ifrcLimitedCookiesAnalyticDescription": "Cookies are text files that contain small amounts of information that we may store on your device when you use our site. Cookies enable us to monitor site traffic and estimate our audience size and usage pattern as well as allowing us to store information about your preferences to allow us to customize our site according to those preferences. They also help us to improve our site and deliver a more personalized service. We use the following types of cookies in connection with our site:", "ifrcLimitedCookiesAnalyticList1": "Strictly Necessary: These cookies enable our site to function correctly and deliver the services and products that visitors have requested. These cookies do not gather information about the visitors that could be used for marketing or remembering sites that visitors have visited on the internet.", "ifrcLimitedCookiesAnalyticList2": "Performance and Functionality: These cookies do things like remembering a visitor’s preferred language, understand their preferences, and associates users to any forms visitor’s submit to us to enable pre-completion of subsequent forms.", @@ -31,7 +31,7 @@ "ifrcLimitedCookiesAnalyticList4": "User Authentication: These social media cookies allow visitors to login to share and promote their activities via social media.", "ifrcLimitedCookiesAnalyticDescription2": "Our site will issue cookies to your device when you log on to the site. Cookies may either be permanent (i.e. remaining on your device until you delete them) or temporary (i.e. remaining only until you close your browser). Most browsers permit you to reject or delete cookies.", "ifrcLimitedCookiesAnalyticDescription3": "Certain browsers and devices allow you to block cookies. If you do choose to block cookies, you may not be able to use certain features on our site and/or may be required to re-enter information more frequently to use certain services on the site.", - "howInformationUsedHeading": "B) How is this information used? ", + "howInformationUsedHeading": "B) How is this information used?", "howInformationUsedDescription": "This information is used to improve our service, compile statistics (including on consultation) and to communicate with you. More specifically, it is used:", "howInformationUsedDescriptionList1": "To reply to your requests for information", "howInformationUsedDescriptionList2": "to enable you to use certain interactive functions (e.g. download data,save files)", @@ -39,7 +39,7 @@ "howInformationUsedDescriptionList4": "To improve our website, communication, products and services; to compile statistics on consultation, and to understand what content matters most to the community", "howInformationUsedDescriptionList5": "To maintain the security and integrity", "howInformationUsedDescriptionList6": "To ensure that content is presented in the way that suits you best", - "dataAccessSharingHeading": "C) Data access and sharing ", + "dataAccessSharingHeading": "C) Data access and sharing", "dataAccessSharingDescription1": "As a general rule, the Federation will not disclose any information identifying you personally, except with your permission. Information you provide to the Federation will not be sold to third parties or used in a manner inconsistent with the aims of the website.", "dataAccessSharingDescription2": "Information may be shared with the Federation membership or other components of the International Red Cross and Red Crescent Movement, to further facilitate humanitarian assistance. Some information identifying donors to the Federation is forwarded to third parties for purely technical and administrative processing (such as for payment processing). These parties are not authorized to distribute, sell or rent user information.", "dataAccessSharingDescription3": "Further, your data will only be accessible to those staff (and other authorized individuals) that have a legitimate need to have such access.", @@ -47,15 +47,15 @@ "storageSecurityQuestionsDataDescription1": "The Federation uses secure systems and implements appropriate technical and organizational measures to safeguard your personal information and protect it against unauthorized or unlawful processing, accidental loss, destruction, or damage. While we take reasonable measures to protect your personal information, please be aware that no system can guarantee 100% security.", "storageSecurityQuestionsDataDescription2": "Where it is necessary for your personal data to be shared with third parties, we will take reasonable measures to ensure that your personal data continues to be treated securely.", "storageSecurityQuestionsAboutDataDescription3": "These measures may be specific contractual provisions requiring those third parties to implement no less equivalent security measures than those of the Federation. Please be aware of this when sending any communications. We cannot (and do not) guarantee absolute security. Under certain circumstances, you may request to review personal information we hold about you. You may also object to certain personal data processing and/or request the correction or deletion of such personal data according to our {termsLink}. More detail about data subject requests can be found in Section 3 of that Policy.", - "policyProtectionOfPersonalDataLink": "Policy on the Protection of Personal Data", + "policyProtectionOfPersonalDataLink": "Policy on the Protection of Personal Data", "storageSecurityQuestionsAboutDataDescription4": "For further information on how the IFRC processes personal data, please consult our {termsLink}. Here you may also find general information, useful tools for humanitarians, and information specific to procurements and other partners of the Federation.", "dataProtectionPageLink": "Data Protection page", "storageSecurityQuestionsDataDescription5": "Please contact the following department for personal data questions related to:", "storageSecurityQuestionsDataGoEnquires": "IFRC-GO enquiries: {termsLink}", - "storageSecurityQuestionsDataDonations": "Donations:{termsLink}", - "storageSecurityQuestionsDataRecruitment": "Recruitment:{termsLink}", - "securityQuestionsWebpageCollection": "General webpage collection:{termsLink}", - "storageSecurityQuestionsDataEnquires": "Other data protection enquiries:{termsLink}", + "storageSecurityQuestionsDataDonations": "Donations: {termsLink}", + "storageSecurityQuestionsDataRecruitment": "Recruitment: {termsLink}", + "securityQuestionsWebpageCollection": "General webpage collection: {termsLink}", + "storageSecurityQuestionsDataEnquires": "Other data protection enquiries: {termsLink}", "privilegesAndImmunitiesHeading": "E) Privileges and immunities", "privilegesAndImmunitiesDescription": "Nothing in or relating to this Privacy Policy or this site shall be deemed a waiver of any of the privileges and immunities of the Federation.", "noteOnLinksToExternalWebsitesHeading": "F) Notes on links to external websites", diff --git a/app/src/views/CookiePolicy/index.tsx b/app/src/views/CookiePolicy/index.tsx index e00dcfd9d..8f5ab8aac 100644 --- a/app/src/views/CookiePolicy/index.tsx +++ b/app/src/views/CookiePolicy/index.tsx @@ -20,13 +20,14 @@ import Page from '#components/Page'; import i18n from './i18n.json'; import styles from './styles.module.css'; +type TitlesOptionKey = 'disclaimer' | 'use-of-our-information' | 'our-privacy-policy'; + // eslint-disable-next-line import/prefer-default-export export function Component() { const strings = useTranslation(i18n); - type TitlesOptionKey = 'declaimer' | 'use-of-our-information' | 'our-privacy-policy'; - const [activeTitlesOption, setActiveTitleOption] = useState('declaimer'); + const [activeTitlesOption, setActiveTitleOption] = useState('disclaimer'); - const declaimerRef = useRef(null); + const disclaimerRef = useRef(null); const useOfOurInformationRef = useRef(null); const ourPrivacyPolicyRef = useRef(null); @@ -34,7 +35,7 @@ export function Component() { setActiveTitleOption(newTab); const tabRefs = { - declaimer: declaimerRef, + disclaimer: disclaimerRef, 'use-of-our-information': useOfOurInformationRef, 'our-privacy-policy': ourPrivacyPolicyRef, }; @@ -52,7 +53,7 @@ export function Component() { variant="vertical" > - + {strings.disclaimerTitle} @@ -63,13 +64,13 @@ export function Component() { -
+
{resolveToString(strings.ourPrivacyPolicyContent, { @@ -124,13 +126,12 @@ export function Component() {
@@ -142,7 +143,6 @@ export function Component() { @@ -160,7 +160,6 @@ export function Component() { @@ -179,8 +178,8 @@ export function Component() { @@ -198,9 +197,9 @@ export function Component() { />
{strings.dataAccessSharingDescription1}
@@ -211,9 +210,9 @@ export function Component() { />
{strings.storageSecurityQuestionsDataDescription1}
@@ -346,8 +345,8 @@ export function Component() { /> {strings.privilegesAndImmunitiesDescription} @@ -356,9 +355,9 @@ export function Component() { />
{strings.noteOnLinksToExternalWebsitesDescription1}
diff --git a/app/src/views/CookiePolicy/styles.module.css b/app/src/views/CookiePolicy/styles.module.css index 347ada6a4..f90892fa2 100644 --- a/app/src/views/CookiePolicy/styles.module.css +++ b/app/src/views/CookiePolicy/styles.module.css @@ -1,16 +1,36 @@ .cookie-page { - display: flex; - - .side-titles { display: flex; - flex-direction: column; - padding: var(--go-ui-spacing-sm); - gap: var(--go-ui-spacing-md); - } + gap: var(--go-ui-spacing-xl); - .header-description { - display: flex; - flex-direction: column; - gap: var(--go-ui-spacing-md); - } + .side-titles { + display: flex; + flex-direction: column; + flex-shrink: 0; + padding: var(--go-ui-spacing-sm); + gap: var(--go-ui-spacing-md); + } + + .header-description { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-md); + } + + .main-content { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-md); + + .first-level-content { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-md); + + .second-level-content { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-sm); + } + } + } } diff --git a/app/src/views/RootLayout/i18n.json b/app/src/views/RootLayout/i18n.json index dbbc4e2fe..b86c69200 100644 --- a/app/src/views/RootLayout/i18n.json +++ b/app/src/views/RootLayout/i18n.json @@ -1,11 +1,11 @@ { "namespace": "root", "strings": { - "environmentTextProduction": "Production Site'", + "environmentTextProduction": "Production Site", "environmentTextDevelopment": "Development Site", "environmentTextStaging": "Staging Site", "environmentTextTesting": "Testing Site", - "cookiesBannerDescription": "By entering this website,you consent to the use of technologies,such as cookies and analytics. These will be used to analyse traffic to the website, allowing us to understand visitor preferences and improve our services", + "cookiesBannerDescription": "By entering this website, you consent to the use of technologies, such as cookies and analytics. These will be used to analyse traffic to the website, allowing us to understand visitor preferences and improve our services", "cookiesBannerLearnMore": "Learn more", "cookiesBannerIAccept": "I Accept" } diff --git a/app/src/views/RootLayout/index.tsx b/app/src/views/RootLayout/index.tsx index 5f296ea13..c72a71786 100644 --- a/app/src/views/RootLayout/index.tsx +++ b/app/src/views/RootLayout/index.tsx @@ -15,6 +15,7 @@ import { AlertInformationLineIcon } from '@ifrc-go/icons'; import { AlertContainer, Button, + PageContainer, Container, } from '@ifrc-go/ui'; import { LanguageContext } from '@ifrc-go/ui/contexts'; @@ -65,11 +66,16 @@ export function Component() { const [languagePending, setLanguagePending] = useState(false); - const [isCookiesBannerVisible, { setFalse }] = useBooleanState(true); + // FIXME: To be made functional after the implications of cookie rejections are finalized + const [ + isCookiesBannerVisible, + { setFalse: hideCookiesBanner }, + ] = useBooleanState(false); const handleClick = useCallback(() => { - setFalse(); - }, [setFalse]); + // FIXME: Add cookies permission to session storage + hideCookiesBanner(); + }, [hideCookiesBanner]); const { currentLanguage, @@ -430,40 +436,45 @@ export function Component() {
- {environment !== 'production' && ( -
- {/* NOTE: We are not translating alpha server names */} - {environmentTexts[environment] ?? environment} -
- )} - {isCookiesBannerVisible && ( -
- + {isCookiesBannerVisible && ( + + + )} + spacing="comfortable" + actions={( + <> + + {strings.cookiesBannerLearnMore} + + + + )} /> - )} - footerActions={( - <> - - {strings.cookiesBannerLearnMore} - - - - )} - /> + + )} + {environment !== 'production' && ( +
+ {/* NOTE: We are not translating alpha server names */} + {environmentTexts[environment] ?? environment} +
+ )}
)}
diff --git a/app/src/views/RootLayout/styles.module.css b/app/src/views/RootLayout/styles.module.css index 4a00fd88a..88480b9b5 100644 --- a/app/src/views/RootLayout/styles.module.css +++ b/app/src/views/RootLayout/styles.module.css @@ -4,30 +4,31 @@ flex-direction: column; min-height: 100vh; - .banner { + .banners-container { position: sticky; bottom: 0; - background-color: var(--go-ui-color-orange); - padding: var(--go-ui-spacing-xs); - text-align: center; - text-transform: uppercase; - color: var(--go-ui-color-white); - font-weight: var(--go-ui-font-weight-medium); - @media print { - display: none; + .environment-banner { + background-color: var(--go-ui-color-orange); + padding: var(--go-ui-spacing-xs); + text-align: center; + text-transform: uppercase; + color: var(--go-ui-color-white); + font-weight: var(--go-ui-font-weight-medium); + + @media print { + display: none; + } } - } - .cookies-banner { - position: sticky; - bottom: 0; - background-color: var(--go-ui-color-primary-blue); - padding: var(--go-ui-spacing-xl); - color: var(--go-ui-color-white); - font-weight: var(--go-ui-font-weight-medium); - - .alert-info-icon { - font-size: 3rem; + + .cookies-banner { + background-color: var(--go-ui-color-primary-blue); + width: 100%; + color: var(--go-ui-color-white); + + .alert-info-icon { + font-size: 3rem; + } } }