From 1e6bf34b9e22482c16e9ccd78147c86b57d46393 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Mon, 7 Oct 2024 03:03:36 +0300 Subject: [PATCH] TW-1548: Redesign 'Advanced Features' section (#1205) * TW-1548 Redesign 'Advanced Features' section * TW-1548 Some refactoring * TW-1548 Remove old EnablingSetting component * TW-1548 Remove unused exports * TW-1548 Refactoring according to comments --- .../pages/general-settings.page.ts | 2 - public/_locales/en/messages.json | 21 ++--- src/app/atoms/BakingButtons/index.tsx | 3 +- src/app/atoms/FormCheckbox.tsx | 2 +- src/app/atoms/SettingsCell.tsx | 4 +- src/app/atoms/action-modal/action-modal.tsx | 8 +- src/app/atoms/index.ts | 1 - src/app/layouts/Dialogs.tsx | 12 +-- .../Tokens/components/TokenTag/ScamTag.tsx | 3 +- .../account-already-exists-warning.tsx | 10 +-- src/app/templates/AdvancedFeatures/index.tsx | 2 +- .../partners-promotion-settings.tsx | 69 ++++++++-------- .../referral-links-settings.tsx | 10 ++- .../templates/AdvancedFeatures/selectors.ts | 3 +- src/app/templates/AlertModal.tsx | 42 +++++----- .../ConfirmationModal/ConfirmationModal.tsx | 79 ++++++++++--------- src/app/templates/DialogBody.tsx | 14 ++++ src/app/templates/EnablingSetting.tsx | 44 ----------- src/app/templates/ModalWithTitle.tsx | 2 +- .../components/enabling-setting.tsx | 27 ------- .../components/notifications-settings.tsx | 5 +- .../components/popup-settings.tsx | 5 +- .../templates/SettingsGeneral/selectors.ts | 3 +- src/app/templates/enabling-setting.tsx | 31 ++++++++ src/lib/i18n/index.ts | 2 +- src/lib/i18n/react.tsx | 2 +- src/lib/ui/dialog.tsx | 2 +- 27 files changed, 189 insertions(+), 219 deletions(-) create mode 100644 src/app/templates/DialogBody.tsx delete mode 100644 src/app/templates/EnablingSetting.tsx delete mode 100644 src/app/templates/SettingsGeneral/components/enabling-setting.tsx create mode 100644 src/app/templates/enabling-setting.tsx diff --git a/e2e/src/page-objects/pages/general-settings.page.ts b/e2e/src/page-objects/pages/general-settings.page.ts index 6affeefcb..a432fd5a0 100644 --- a/e2e/src/page-objects/pages/general-settings.page.ts +++ b/e2e/src/page-objects/pages/general-settings.page.ts @@ -12,7 +12,6 @@ export class GeneralSettingsPage extends Page { extensionLockUpCheckBox = createPageElement(SettingsGeneralSelectors.extensionLockUpCheckBox); anonymousAnalyticsCheckBox = createPageElement(SettingsGeneralSelectors.anonymousAnalyticsCheckBox); notificationCheckBox = createPageElement(SettingsGeneralSelectors.notificationCheckBox); - partnersPromotion = createPageElement(SettingsGeneralSelectors.partnersPromotion); async isVisible() { await this.languageDropDown.waitForDisplayed(); @@ -21,6 +20,5 @@ export class GeneralSettingsPage extends Page { await this.extensionLockUpCheckBox.waitForDisplayed(); await this.anonymousAnalyticsCheckBox.waitForDisplayed(); await this.notificationCheckBox.waitForDisplayed(); - await this.partnersPromotion.waitForDisplayed(); } } diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index 5e86242ae..e1747f589 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -2150,8 +2150,14 @@ "actionConfirmation": { "message": "Confirm the action" }, - "closePartnersPromotion": { - "message": "Are you sure you want to disable all ads?" + "adsEnabledAlertTitle": { + "message": "Earn TKEY & Support Temple" + }, + "adsEnabledAlertDescription": { + "message": "Congrats, you've started earning TKEY tokens!\nBy enabling this feature, you agreed to share your Wallet address and IP to receive tokens and view ads. You can turn ads off or on anytime in the settings." + }, + "disableAdsModalTitle": { + "message": "Disable advertising?" }, "hideAd": { "message": "Hide Ad" @@ -2599,8 +2605,8 @@ "deleteContactConfirm": { "message": "Are you sure you want to delete this contact?" }, - "closePartnersPromoConfirm": { - "message": "Pay attention: you can receive rewards in TKEY tokens for viewing ads in our wallet. If you disabled Ads, you can always activate it in the settings." + "disableAdsModalDescription": { + "message": "Did you know, you can earn TKEY tokens by viewing ads? If ads are turned off, you can easily enable them anytime in the settings and start earning rewards!" }, "enablePartnersPromotionConfirm": { "message": "Support the development team and earn TKEY tokens by viewing ads." @@ -2807,12 +2813,7 @@ "description": "Part of partnersPromoDescription phrase" }, "partnersPromoDescription": { - "message": "Here you can configure displaying of ads in Temple wallet. Remember, you get $rewards$ at TKEY tokens for viewing ads.", - "placeholders": { - "rewards": { - "content": "$1" - } - } + "message": "Here you can configure displaying ads in Temple Wallet and getting reward in TKEY tokens. By enabling this, you agree to share your wallet address and IP to receive tokens and view ads." }, "referralLinks": { "message": "Referral Links" diff --git a/src/app/atoms/BakingButtons/index.tsx b/src/app/atoms/BakingButtons/index.tsx index ea928e511..be6ce1007 100644 --- a/src/app/atoms/BakingButtons/index.tsx +++ b/src/app/atoms/BakingButtons/index.tsx @@ -116,8 +116,7 @@ const RedelegateButtonWithConfirmation = memo { if (confirmed) navigate(`/delegate/${chainId}`); }), diff --git a/src/app/atoms/FormCheckbox.tsx b/src/app/atoms/FormCheckbox.tsx index 02e30d892..97e2a8484 100644 --- a/src/app/atoms/FormCheckbox.tsx +++ b/src/app/atoms/FormCheckbox.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx'; import Checkbox, { CheckboxProps } from 'app/atoms/Checkbox'; import { AnalyticsEventCategory, setTestID, useAnalytics } from 'lib/analytics'; -export interface FormCheckboxProps extends CheckboxProps { +interface FormCheckboxProps extends CheckboxProps { basic?: boolean; label?: ReactNode; labelDescription?: ReactNode; diff --git a/src/app/atoms/SettingsCell.tsx b/src/app/atoms/SettingsCell.tsx index c0ebdaa01..cca98ffbe 100644 --- a/src/app/atoms/SettingsCell.tsx +++ b/src/app/atoms/SettingsCell.tsx @@ -11,6 +11,7 @@ interface SettingsCellPropsBase

{ isLast?: boolean; cellIcon?: ReactNode; cellName: ReactNode; + cellNameClassName?: string; Component: 'div' | FC

; } @@ -28,6 +29,7 @@ export const SettingsCell =

({ className, cellIcon, cellName, + cellNameClassName = 'text-font-medium-bold', isLast = true, children, Component, @@ -41,7 +43,7 @@ export const SettingsCell =

({

{cellIcon} - {cellName} + {cellName}
{children} diff --git a/src/app/atoms/action-modal/action-modal.tsx b/src/app/atoms/action-modal/action-modal.tsx index 0e3b67c0a..c11e2b541 100644 --- a/src/app/atoms/action-modal/action-modal.tsx +++ b/src/app/atoms/action-modal/action-modal.tsx @@ -1,4 +1,4 @@ -import React, { memo } from 'react'; +import React, { ReactNode, memo } from 'react'; import clsx from 'clsx'; @@ -14,11 +14,11 @@ import { import actionModalStyles from './action-modal.module.css'; -interface ActionModalProps { +export interface ActionModalProps { hasCloseButton?: boolean; onClose?: EmptyFn; - children: JSX.Element | JSX.Element[]; - title: string; + children?: ReactNode | ReactNode[]; + title?: ReactNode; className?: string; } diff --git a/src/app/atoms/index.ts b/src/app/atoms/index.ts index 0997b2848..522350af8 100644 --- a/src/app/atoms/index.ts +++ b/src/app/atoms/index.ts @@ -37,7 +37,6 @@ export { FormSubmitButton } from './FormSubmitButton'; export { FormSecondaryButton } from './FormSecondaryButton'; -export type { FormCheckboxProps } from './FormCheckbox'; export { FormCheckbox } from './FormCheckbox'; export { SyncSpinner } from './SyncSpinner'; diff --git a/src/app/layouts/Dialogs.tsx b/src/app/layouts/Dialogs.tsx index 2f49216f0..c1e0c6da2 100644 --- a/src/app/layouts/Dialogs.tsx +++ b/src/app/layouts/Dialogs.tsx @@ -1,7 +1,7 @@ import React, { FC, useCallback } from 'react'; -import AlertModal from 'app/templates/AlertModal'; -import ConfirmationModal from 'app/templates/ConfirmationModal/ConfirmationModal'; +import { AlertModal } from 'app/templates/AlertModal'; +import { ConfirmationModal } from 'app/templates/ConfirmationModal/ConfirmationModal'; import { dispatchAlertClose, dispatchConfirmClose, useModalsParams } from 'lib/ui/dialog'; const Dialogs: FC = () => { @@ -17,12 +17,8 @@ const Dialogs: FC = () => { return ( <> - - + + ); }; diff --git a/src/app/pages/Home/OtherComponents/Tokens/components/TokenTag/ScamTag.tsx b/src/app/pages/Home/OtherComponents/Tokens/components/TokenTag/ScamTag.tsx index 0e158673c..0e4c83a36 100644 --- a/src/app/pages/Home/OtherComponents/Tokens/components/TokenTag/ScamTag.tsx +++ b/src/app/pages/Home/OtherComponents/Tokens/components/TokenTag/ScamTag.tsx @@ -25,9 +25,8 @@ export const ScamTag = memo(({ assetSlug, tezPkh, tezosChainId }) => { try { const confirmed = await confirm({ title: t('deleteScamTokenConfirmTitle'), - titleClassName: 'font-bold', description: t('deleteScamTokenConfirmDescription'), - comfirmButtonText: t('delete') + confirmButtonText: t('delete') }); if (confirmed) diff --git a/src/app/templates/AccountsManagement/account-already-exists-warning.tsx b/src/app/templates/AccountsManagement/account-already-exists-warning.tsx index 93e8a9a16..806946efb 100644 --- a/src/app/templates/AccountsManagement/account-already-exists-warning.tsx +++ b/src/app/templates/AccountsManagement/account-already-exists-warning.tsx @@ -6,7 +6,7 @@ import { ActionModalButton, ActionModalButtonsContainer } from 'app/atoms/action-modal'; -import { t } from 'lib/i18n'; +import { T } from 'lib/i18n'; import { DisplayedGroup, StoredAccount } from 'lib/temple/types'; import { useHDGroups } from 'temple/front'; import { getAllGroups } from 'temple/front/accounts-groups'; @@ -25,10 +25,10 @@ export const AccountAlreadyExistsWarning = memo getAllGroups(hdGroups, [oldAccount])[0].name, [hdGroups, oldAccount]); return ( - + } hasCloseButton={false} onClose={onClose}> - - {t('accountAlreadyExistsWarning', [newAccountGroup.name, oldAccountGroupName])} + + @@ -38,7 +38,7 @@ export const AccountAlreadyExistsWarning = memo - Got it + diff --git a/src/app/templates/AdvancedFeatures/index.tsx b/src/app/templates/AdvancedFeatures/index.tsx index e6e21462f..4850430fd 100644 --- a/src/app/templates/AdvancedFeatures/index.tsx +++ b/src/app/templates/AdvancedFeatures/index.tsx @@ -5,7 +5,7 @@ import { ReferralLinksSettings } from './referral-links-settings'; export const AdvancedFeatures = memo(() => { return ( -
+
diff --git a/src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx b/src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx index bb64727d4..5f1bf6baf 100644 --- a/src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx +++ b/src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx @@ -1,44 +1,50 @@ -import React, { ChangeEvent, FC } from 'react'; +import React, { ChangeEvent, memo, useCallback } from 'react'; import { useDispatch } from 'react-redux'; import { togglePartnersPromotionAction } from 'app/store/partners-promotion/actions'; import { useShouldShowPartnersPromoSelector } from 'app/store/partners-promotion/selectors'; -import { T, t } from 'lib/i18n'; -import { useConfirm } from 'lib/ui/dialog'; +import { T } from 'lib/i18n'; +import { useAlert, useConfirm } from 'lib/ui/dialog'; -import { EnablingSetting } from '../EnablingSetting'; -import { SettingsGeneralSelectors } from '../SettingsGeneral/selectors'; +import { EnablingSetting } from '../enabling-setting'; -export const PartnersPromotionSettings: FC = () => { +import { AdvancedFeaturesSelectors } from './selectors'; + +export const PartnersPromotionSettings = memo(() => { const dispatch = useDispatch(); + const alert = useAlert(); const confirm = useConfirm(); const shouldShowPartnersPromo = useShouldShowPartnersPromoSelector(); - const handleHidePromotion = async (toChecked: boolean) => { - const confirmed = await confirm({ - title: t('closePartnersPromotion'), - children: t('closePartnersPromoConfirm'), - comfirmButtonText: t('disable') - }); + const handleHidePromotion = useCallback( + async (toChecked: boolean) => { + const confirmed = await confirm({ + title: , + description: , + confirmButtonText: ( + + + + ), + hasCloseButton: false + }); - if (confirmed) { - dispatch(togglePartnersPromotionAction(toChecked)); - } - }; - - const handleShowPromotion = async (toChecked: boolean) => { - const confirmed = await confirm({ - title: t('enablePartnersPromotionConfirm'), - children: t('enablePartnersPromotionDescriptionConfirm'), - comfirmButtonText: t('enable') - }); + if (confirmed) { + dispatch(togglePartnersPromotionAction(toChecked)); + } + }, + [confirm, dispatch] + ); - if (confirmed) { + const handleShowPromotion = useCallback( + async (toChecked: boolean) => { dispatch(togglePartnersPromotionAction(toChecked)); - } - }; + alert({ title: , description: }); + }, + [alert, dispatch] + ); const togglePartnersPromotion = (toChecked: boolean, event: ChangeEvent) => { event?.preventDefault(); @@ -49,15 +55,10 @@ export const PartnersPromotionSettings: FC = () => { return ( - - - } + description={} enabled={shouldShowPartnersPromo} onChange={togglePartnersPromotion} - testID={SettingsGeneralSelectors.partnersPromotion} + testID={AdvancedFeaturesSelectors.partnersPromotionToggle} /> ); -}; +}); diff --git a/src/app/templates/AdvancedFeatures/referral-links-settings.tsx b/src/app/templates/AdvancedFeatures/referral-links-settings.tsx index 0e219d1d5..e7e656864 100644 --- a/src/app/templates/AdvancedFeatures/referral-links-settings.tsx +++ b/src/app/templates/AdvancedFeatures/referral-links-settings.tsx @@ -15,7 +15,7 @@ import { t, T } from 'lib/i18n'; import { putToStorage } from 'lib/storage'; import { useConfirm } from 'lib/ui/dialog'; -import { EnablingSetting } from '../EnablingSetting'; +import { EnablingSetting } from '../enabling-setting'; import { AdvancedFeaturesSelectors } from './selectors'; @@ -38,6 +38,7 @@ export const ReferralLinksSettings = memo(() => { substitutions={[ { , { ]} /> ), - comfirmButtonText: t('agreeAndContinue') + confirmButtonText: t('agreeAndContinue') }); if (!confirmed) { @@ -73,10 +75,10 @@ export const ReferralLinksSettings = memo(() => { return ( } enabled={referralLinksEnabled} onChange={toggleReferralLinks} - testID={AdvancedFeaturesSelectors.referralLinksCheckbox} + testID={AdvancedFeaturesSelectors.referralLinksToggle} /> ); }); diff --git a/src/app/templates/AdvancedFeatures/selectors.ts b/src/app/templates/AdvancedFeatures/selectors.ts index b511db854..83d7347f3 100644 --- a/src/app/templates/AdvancedFeatures/selectors.ts +++ b/src/app/templates/AdvancedFeatures/selectors.ts @@ -1,3 +1,4 @@ export enum AdvancedFeaturesSelectors { - referralLinksCheckbox = 'Advanced Features/Referral Links Checkbox' + referralLinksToggle = 'Advanced Features/Referral Links Toggle', + partnersPromotionToggle = 'Advanced Features/Partners Promotion Toggle' } diff --git a/src/app/templates/AlertModal.tsx b/src/app/templates/AlertModal.tsx index 21c0b7e5d..cf3951780 100644 --- a/src/app/templates/AlertModal.tsx +++ b/src/app/templates/AlertModal.tsx @@ -1,26 +1,24 @@ -import React, { FC } from 'react'; +import React, { memo } from 'react'; -import { FormSubmitButton } from 'app/atoms'; -import ModalWithTitle, { ModalWithTitleProps } from 'app/templates/ModalWithTitle'; -import { t } from 'lib/i18n'; +import { ActionModal, ActionModalButton, ActionModalButtonsContainer, ActionModalProps } from 'app/atoms/action-modal'; +import { T } from 'lib/i18n'; -export type AlertModalProps = ModalWithTitleProps; +import { DialogBody } from './DialogBody'; -const AlertModal: FC = props => { - const { onRequestClose, children, ...restProps } = props; +export interface AlertModalProps extends ActionModalProps { + description?: ActionModalProps['children']; + isOpen: boolean; +} - return ( - -
-
{children}
-
- - {t('ok')} - -
-
- - ); -}; - -export default AlertModal; +export const AlertModal = memo(({ children, description, isOpen, onClose, ...restProps }) => + isOpen ? ( + + {children} + + + + + + + ) : null +); diff --git a/src/app/templates/ConfirmationModal/ConfirmationModal.tsx b/src/app/templates/ConfirmationModal/ConfirmationModal.tsx index 11568d6ef..db5b587b5 100644 --- a/src/app/templates/ConfirmationModal/ConfirmationModal.tsx +++ b/src/app/templates/ConfirmationModal/ConfirmationModal.tsx @@ -1,52 +1,55 @@ -import React, { FC } from 'react'; +import React, { ReactNode, memo } from 'react'; -import clsx from 'clsx'; - -import { FormSubmitButton, FormSecondaryButton } from 'app/atoms'; -import ModalWithTitle, { ModalWithTitleProps } from 'app/templates/ModalWithTitle'; +import { ActionModal, ActionModalButton, ActionModalButtonsContainer, ActionModalProps } from 'app/atoms/action-modal'; import { T } from 'lib/i18n'; +import { StyledButtonColor } from 'lib/ui/button-like-styles'; + +import { DialogBody } from '../DialogBody'; import { ConfirmatonModalSelectors } from './ConfirmatonModal.selectors'; -export interface ConfirmationModalProps extends ModalWithTitleProps { - onConfirm: () => void; - comfirmButtonText?: string; - stretchButtons?: boolean; +export interface ConfirmationModalProps extends ActionModalProps { + description?: ActionModalProps['children']; + isOpen: boolean; + confirmButtonText?: ReactNode; + confirmButtonColor?: StyledButtonColor; + onConfirm: EmptyFn; } -const ConfirmationModal: FC = props => { - const { onRequestClose, children, onConfirm, comfirmButtonText, stretchButtons, ...restProps } = props; - - return ( - - <> -
{children}
- -
- ( + ({ + onClose, + isOpen, + children, + description, + onConfirm, + confirmButtonText, + confirmButtonColor = 'primary', + ...restProps + }) => + isOpen ? ( + + {children} + + + - + - - {comfirmButtonText ?? } - -
- - - ); -}; - -export default ConfirmationModal; + {confirmButtonText ?? } + + + + ) : null +); diff --git a/src/app/templates/DialogBody.tsx b/src/app/templates/DialogBody.tsx new file mode 100644 index 000000000..e44078ae9 --- /dev/null +++ b/src/app/templates/DialogBody.tsx @@ -0,0 +1,14 @@ +import React, { FC, ReactNode } from 'react'; + +import { ActionModalBodyContainer } from 'app/atoms/action-modal'; + +interface DialogBodyProps { + description?: ReactNode | ReactNode[]; +} + +export const DialogBody: FC> = ({ children, description }) => ( + + {description &&

{description}

} + {children} + +); diff --git a/src/app/templates/EnablingSetting.tsx b/src/app/templates/EnablingSetting.tsx deleted file mode 100644 index 0816bb26a..000000000 --- a/src/app/templates/EnablingSetting.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; - -import { FormCheckboxProps, FormCheckbox } from 'app/atoms'; -import { T, TID, t, ReactSubstitutions } from 'lib/i18n'; - -interface Props extends Pick { - titleI18nKey: TID; - titleSubstituions?: ReactSubstitutions; - descriptionI18nKey: TID; - descriptionSubstitutions?: ReactSubstitutions; - enabled?: boolean; -} - -export const EnablingSetting = ({ - titleI18nKey, - titleSubstituions, - descriptionI18nKey, - descriptionSubstitutions, - enabled, - onChange, - testID, - errorCaption -}: Props) => ( - <> -
- - - - - - - -
- - - -); diff --git a/src/app/templates/ModalWithTitle.tsx b/src/app/templates/ModalWithTitle.tsx index a7767f08a..e8bd057bc 100644 --- a/src/app/templates/ModalWithTitle.tsx +++ b/src/app/templates/ModalWithTitle.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx'; import CustomModal, { CustomModalProps } from 'app/atoms/CustomModal'; import { useAppEnv } from 'app/env'; -export interface ModalWithTitleProps extends CustomModalProps { +interface ModalWithTitleProps extends CustomModalProps { title?: ReactNode; titleClassName?: string; description?: ReactNode; diff --git a/src/app/templates/SettingsGeneral/components/enabling-setting.tsx b/src/app/templates/SettingsGeneral/components/enabling-setting.tsx deleted file mode 100644 index d874563d6..000000000 --- a/src/app/templates/SettingsGeneral/components/enabling-setting.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { ReactNode, memo } from 'react'; - -import { ToggleSwitch } from 'app/atoms'; -import { SettingsCell } from 'app/atoms/SettingsCell'; -import { SettingsCellGroup } from 'app/atoms/SettingsCellGroup'; - -interface EnablingSettingProps { - title: ReactNode; - enabled: boolean; - description: ReactNode; - onChange: SyncFn; - testID: string; -} - -export const EnablingSetting = memo(({ title, enabled, description, onChange, testID }: EnablingSettingProps) => ( - - - - - {description}} - > - {null} - - -)); diff --git a/src/app/templates/SettingsGeneral/components/notifications-settings.tsx b/src/app/templates/SettingsGeneral/components/notifications-settings.tsx index 951716c32..c5e7196cf 100644 --- a/src/app/templates/SettingsGeneral/components/notifications-settings.tsx +++ b/src/app/templates/SettingsGeneral/components/notifications-settings.tsx @@ -2,14 +2,13 @@ import React, { memo, useCallback } from 'react'; import { useDispatch } from 'react-redux'; +import { EnablingSetting } from 'app/templates/enabling-setting'; import { T } from 'lib/i18n'; import { setIsNewsEnabledAction } from 'lib/notifications/store/actions'; import { useIsNewsEnabledSelector } from 'lib/notifications/store/selectors'; import { SettingsGeneralSelectors } from '../selectors'; -import { EnablingSetting } from './enabling-setting'; - export const NotificationsSettings = memo(() => { const dispatch = useDispatch(); const isNewsEnabled = useIsNewsEnabledSelector(); @@ -21,7 +20,7 @@ export const NotificationsSettings = memo(() => { return ( } + titleI18nKey="notifications" description={} enabled={isNewsEnabled} onChange={handleNewsNotificationsChange} diff --git a/src/app/templates/SettingsGeneral/components/popup-settings.tsx b/src/app/templates/SettingsGeneral/components/popup-settings.tsx index 0a8aa1aa3..a6bcf1472 100644 --- a/src/app/templates/SettingsGeneral/components/popup-settings.tsx +++ b/src/app/templates/SettingsGeneral/components/popup-settings.tsx @@ -1,12 +1,11 @@ import React, { memo, useCallback, useRef } from 'react'; +import { EnablingSetting } from 'app/templates/enabling-setting'; import { T } from 'lib/i18n'; import { isPopupModeEnabled, setPopupMode } from 'lib/popup-mode'; import { SettingsGeneralSelectors } from '../selectors'; -import { EnablingSetting } from './enabling-setting'; - export const PopupSettings = memo(() => { const popupEnabled = isPopupModeEnabled(); const changingRef = useRef(false); @@ -22,7 +21,7 @@ export const PopupSettings = memo(() => { return ( } + titleI18nKey="popupSettings" description={} enabled={popupEnabled} onChange={handlePopupModeChange} diff --git a/src/app/templates/SettingsGeneral/selectors.ts b/src/app/templates/SettingsGeneral/selectors.ts index db39f7e5e..991fd2d1b 100644 --- a/src/app/templates/SettingsGeneral/selectors.ts +++ b/src/app/templates/SettingsGeneral/selectors.ts @@ -6,6 +6,5 @@ export enum SettingsGeneralSelectors { popUpCheckBox = 'Setting General/Pop-up Check Box', extensionLockUpCheckBox = 'Setting General/Extension Lock-up Check Box', anonymousAnalyticsCheckBox = 'Setting General/Anonymous Analytics Check Box', - notificationCheckBox = 'Setting General/Notification Check Box', - partnersPromotion = 'Setting General/Partners Promotion Check Box' + notificationCheckBox = 'Setting General/Notification Check Box' } diff --git a/src/app/templates/enabling-setting.tsx b/src/app/templates/enabling-setting.tsx new file mode 100644 index 000000000..7c54073fb --- /dev/null +++ b/src/app/templates/enabling-setting.tsx @@ -0,0 +1,31 @@ +import React, { ReactNode, memo } from 'react'; + +import { ToggleSwitch } from 'app/atoms'; +import { SettingsCell } from 'app/atoms/SettingsCell'; +import { SettingsCellGroup } from 'app/atoms/SettingsCellGroup'; +import { T, TID } from 'lib/i18n'; + +interface EnablingSettingProps { + titleI18nKey: TID; + enabled: boolean; + description: ReactNode; + onChange: (newValue: boolean, event: React.ChangeEvent) => void; + testID: string; +} + +export const EnablingSetting = memo( + ({ titleI18nKey, enabled, description, onChange, testID }: EnablingSettingProps) => ( + + }> + + + + {null} + + + ) +); diff --git a/src/lib/i18n/index.ts b/src/lib/i18n/index.ts index ae18de2bb..aadbc536d 100644 --- a/src/lib/i18n/index.ts +++ b/src/lib/i18n/index.ts @@ -6,5 +6,5 @@ export { updateLocale, onInited } from './loading'; export { toLocalFixed, toLocalFormat, toShortened, getPluralKey } from './numbers'; -export type { TProps, ReactSubstitutions } from './react'; +export type { TProps } from './react'; export { t, T } from './react'; diff --git a/src/lib/i18n/react.tsx b/src/lib/i18n/react.tsx index 5049acab7..ff8e8f5f3 100644 --- a/src/lib/i18n/react.tsx +++ b/src/lib/i18n/react.tsx @@ -4,7 +4,7 @@ import { getMessage } from './core'; import { toList } from './helpers'; import { TID, Substitutions } from './types'; -export type ReactSubstitutions = ReactNode | ReactNode[]; +type ReactSubstitutions = ReactNode | ReactNode[]; export type TProps = { id: TID; diff --git a/src/lib/ui/dialog.tsx b/src/lib/ui/dialog.tsx index 0970d77e9..857d5fc61 100644 --- a/src/lib/ui/dialog.tsx +++ b/src/lib/ui/dialog.tsx @@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react'; import constate from 'constate'; -import type { AlertModalProps } from 'app/templates/AlertModal'; +import { AlertModalProps } from 'app/templates/AlertModal'; import type { ConfirmationModalProps } from 'app/templates/ConfirmationModal/ConfirmationModal'; type AlertParams = Omit;