-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Back button for languages and new AcceptAllRejectAllToggle view state (…
…#134) * first version back button * Configured view state * PR candidate for the new view state * Remove superfluous debug changes * Added README entry. Need to figure out image. * Removed unsused import * update types and fixing ci errors * Merges dev * Updating imagine in the README, as well as translations * Adding customizable footer link message to AcceptAllOrMoreChoices * Updating translations * Updating version --------- Co-authored-by: michaelfarrell76 <[email protected]>
- Loading branch information
1 parent
2c4454a
commit 113e52b
Showing
49 changed files
with
472 additions
and
71 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Binary file renamed
BIN
+62.3 KB
...ypes-npm-10.2.0-cffce5b53f-d50bde26f0.zip → ...ypes-npm-10.3.0-1ae141fe14-47be7d892a.zip
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import { h, JSX } from 'preact'; | ||
| import { useState } from 'preact/hooks'; | ||
| import { useIntl } from 'react-intl'; | ||
| import { useAirgap } from '../hooks'; | ||
| import { messages } from '../messages'; | ||
| import type { HandleSetViewState } from '../types'; | ||
| import { GPCIndicator } from './GPCIndicator'; | ||
| import { Switch } from './Switch'; | ||
|
|
||
| // Timer for save state | ||
| let savingTimeout: ReturnType<typeof setTimeout>; | ||
|
|
||
| /** | ||
| * Component showing explanatory text before offering a way | ||
| * to opt out of the sale or share of data | ||
| */ | ||
| export function AcceptAllRejectAllToggle({ | ||
| handleSetViewState, | ||
| fontColor, | ||
| }: { | ||
| /** Function to change viewState */ | ||
| handleSetViewState: HandleSetViewState; | ||
| /** Font color */ | ||
| fontColor: string; | ||
| }): JSX.Element { | ||
| const { airgap } = useAirgap(); | ||
| const { formatMessage } = useIntl(); | ||
| const [saving, setSaving] = useState<boolean | null>(null); | ||
| const [consentLocal, setConsentLocal] = useState( | ||
| !!airgap.getConsent().purposes.SaleOfInfo, | ||
| ); | ||
| const switchId = `all-purposes-${consentLocal}`; | ||
|
|
||
| const handleSwitch = ( | ||
| checked: boolean, | ||
| event: JSX.TargetedEvent<HTMLInputElement, Event>, | ||
| ): void => { | ||
| if (checked) { | ||
| event.preventDefault(); | ||
| airgap.optIn(event); | ||
| } else { | ||
| event.preventDefault(); | ||
| airgap.optOut(event); | ||
| } | ||
|
|
||
| setConsentLocal(checked); | ||
| setSaving(true); | ||
|
|
||
| // Clear any existing timeouts still running | ||
| if (savingTimeout) { | ||
| clearTimeout(savingTimeout); | ||
| } | ||
| savingTimeout = setTimeout(() => { | ||
| setSaving(false); | ||
| }, 500); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="column-content"> | ||
| <button | ||
| type="button" | ||
| aria-label={formatMessage(messages.close)} | ||
| className="do-not-sell-explainer-close" | ||
| onClick={() => { | ||
| handleSetViewState('close'); | ||
| }} | ||
| > | ||
| <svg width="24" height="24" viewBox="0 0 32 32" aria-hidden="true"> | ||
| <path | ||
| fill={fontColor} | ||
| // eslint-disable-next-line max-len | ||
| d="M25.71 24.29a.996.996 0 1 1-1.41 1.41L16 17.41 7.71 25.7a.996.996 0 1 1-1.41-1.41L14.59 16l-8.3-8.29A.996.996 0 1 1 7.7 6.3l8.3 8.29 8.29-8.29a.996.996 0 1 1 1.41 1.41L17.41 16l8.3 8.29z" | ||
| /> | ||
| </svg> | ||
| <span className="screen-reader">{formatMessage(messages.close)}</span> | ||
| </button> | ||
| <div> | ||
| <div> | ||
| <p className="text-title text-title-left"> | ||
| {formatMessage(messages.consentTitleAcceptAllRejectAllToggle)} | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p className="paragraph"> | ||
| <div | ||
| // eslint-disable-next-line react/no-danger | ||
| dangerouslySetInnerHTML={{ | ||
| __html: formatMessage( | ||
| messages.acceptAllRejectAllToggleDescription, | ||
| ), | ||
| }} | ||
| /> | ||
| </p> | ||
| </div> | ||
| <div className="margin-tops do-not-sell-explainer-interface"> | ||
| <GPCIndicator /> | ||
| <Switch | ||
| id={switchId} | ||
| checked={consentLocal} | ||
| handleSwitch={handleSwitch} | ||
| label={formatMessage( | ||
| consentLocal | ||
| ? messages.doNotSellOptedIn | ||
| : messages.doNotSellOptedOut, | ||
| )} | ||
| /> | ||
|
|
||
| <p className="paragraph"> | ||
| {typeof saving === 'boolean' | ||
| ? formatMessage( | ||
| saving | ||
| ? messages.saving | ||
| : consentLocal | ||
| ? messages.preferencesSavedOptedIn | ||
| : messages.preferencesSaved, | ||
| ) | ||
| : '\u200b'} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
113e52bThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
consent-manager-ui – ./
consent-manager-ui-git-main-transcend-io.vercel.app
consent-manager-ui.vercel.app
consent-manager-ui-transcend-io.vercel.app