From d5e15f804434de59b21f61a6fea57ec2fe08b25c Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 1 Oct 2024 14:13:02 +0300 Subject: [PATCH 1/5] TW-1548 Redesign 'Advanced Features' section --- public/_locales/en/messages.json | 21 ++--- src/app/atoms/BakingButtons/index.tsx | 3 +- src/app/atoms/PageModal/index.tsx | 4 +- src/app/atoms/SettingsCell.tsx | 4 +- src/app/atoms/action-modal/action-modal.tsx | 8 +- src/app/layouts/Dialogs.tsx | 10 +-- .../Tokens/components/TokenTag/ScamTag.tsx | 3 +- .../account-already-exists-warning.tsx | 10 +-- src/app/templates/AdvancedFeatures/index.tsx | 2 +- .../partners-promotion-settings.tsx | 71 ++++++++--------- .../referral-links-settings.tsx | 12 +-- .../templates/AdvancedFeatures/selectors.ts | 3 +- src/app/templates/AlertModal.tsx | 42 +++++----- .../ConfirmationModal/ConfirmationModal.tsx | 77 ++++++++++--------- src/app/templates/DialogBody.tsx | 14 ++++ src/app/templates/ModalWithTitle.tsx | 2 +- .../components/notifications-settings.tsx | 3 +- .../components/popup-settings.tsx | 3 +- .../templates/SettingsGeneral/selectors.ts | 3 +- .../components => }/enabling-setting.tsx | 5 +- src/lib/ui/dialog.tsx | 2 +- 21 files changed, 159 insertions(+), 143 deletions(-) create mode 100644 src/app/templates/DialogBody.tsx rename src/app/templates/{SettingsGeneral/components => }/enabling-setting.tsx (79%) diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index 5e86242ae0..e1747f5891 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 ea928e511e..be6ce10077 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/PageModal/index.tsx b/src/app/atoms/PageModal/index.tsx index 179525d139..7ef18c6959 100644 --- a/src/app/atoms/PageModal/index.tsx +++ b/src/app/atoms/PageModal/index.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, memo } from 'react'; +import React, { PropsWithChildren, ReactNode, memo } from 'react'; import clsx from 'clsx'; import Modal from 'react-modal'; @@ -15,7 +15,7 @@ import { IconBase } from '../IconBase'; import ModStyles from './styles.module.css'; interface Props extends TestIDProps { - title: string; + title: ReactNode; opened: boolean; shouldShowBackButton?: boolean; onRequestClose: EmptyFn; diff --git a/src/app/atoms/SettingsCell.tsx b/src/app/atoms/SettingsCell.tsx index c0ebdaa01e..cca98ffbea 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 0e3b67c0a7..c11e2b5415 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/layouts/Dialogs.tsx b/src/app/layouts/Dialogs.tsx index 2f49216f0f..a3cf9f26b5 100644 --- a/src/app/layouts/Dialogs.tsx +++ b/src/app/layouts/Dialogs.tsx @@ -1,6 +1,6 @@ import React, { FC, useCallback } from 'react'; -import AlertModal from 'app/templates/AlertModal'; +import { AlertModal } from 'app/templates/AlertModal'; import ConfirmationModal from 'app/templates/ConfirmationModal/ConfirmationModal'; import { dispatchAlertClose, dispatchConfirmClose, useModalsParams } from 'lib/ui/dialog'; @@ -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 0e158673cc..0e4c83a36c 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 93e8a9a165..806946efb1 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 e6e21462f0..4850430fd5 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 bb64727d4a..fa60e94e60 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(); @@ -48,16 +54,11 @@ export const PartnersPromotionSettings: FC = () => { return ( - - - } + title={} + 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 0e219d1d53..7db488bdaf 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) { @@ -72,11 +74,11 @@ export const ReferralLinksSettings = memo(() => { return ( } + description={} 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 b511db8540..83d7347f38 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 21c0b7e5df..cf39517805 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 11568d6ef6..2b695fc474 100644 --- a/src/app/templates/ConfirmationModal/ConfirmationModal.tsx +++ b/src/app/templates/ConfirmationModal/ConfirmationModal.tsx @@ -1,52 +1,57 @@ -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 ?? } - -
- - - ); -}; + {confirmButtonText ?? } + + + + ) : null +); export default ConfirmationModal; diff --git a/src/app/templates/DialogBody.tsx b/src/app/templates/DialogBody.tsx new file mode 100644 index 0000000000..0403b18cb9 --- /dev/null +++ b/src/app/templates/DialogBody.tsx @@ -0,0 +1,14 @@ +import React, { ReactNode, memo } from 'react'; + +import { ActionModalBodyContainer } from 'app/atoms/action-modal'; + +interface DialogBodyProps { + description?: ReactNode | ReactNode[]; +} + +export const DialogBody = memo>(({ children, description }) => ( + + {description &&

{description}

} + {children} + +)); diff --git a/src/app/templates/ModalWithTitle.tsx b/src/app/templates/ModalWithTitle.tsx index a7767f08a1..e8bd057bcc 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/notifications-settings.tsx b/src/app/templates/SettingsGeneral/components/notifications-settings.tsx index 951716c328..4e538f7271 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(); diff --git a/src/app/templates/SettingsGeneral/components/popup-settings.tsx b/src/app/templates/SettingsGeneral/components/popup-settings.tsx index 0a8aa1aa3f..e899700d5e 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); diff --git a/src/app/templates/SettingsGeneral/selectors.ts b/src/app/templates/SettingsGeneral/selectors.ts index db39f7e5ee..991fd2d1b4 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/SettingsGeneral/components/enabling-setting.tsx b/src/app/templates/enabling-setting.tsx similarity index 79% rename from src/app/templates/SettingsGeneral/components/enabling-setting.tsx rename to src/app/templates/enabling-setting.tsx index d874563d62..dead0ea074 100644 --- a/src/app/templates/SettingsGeneral/components/enabling-setting.tsx +++ b/src/app/templates/enabling-setting.tsx @@ -8,7 +8,7 @@ interface EnablingSettingProps { title: ReactNode; enabled: boolean; description: ReactNode; - onChange: SyncFn; + onChange: (newValue: boolean, event: React.ChangeEvent) => void; testID: string; } @@ -19,7 +19,8 @@ export const EnablingSetting = memo(({ title, enabled, description, onChange, te {description}} + cellName={description} + cellNameClassName="text-grey-1 text-font-description font-normal" > {null} diff --git a/src/lib/ui/dialog.tsx b/src/lib/ui/dialog.tsx index 0970d77e96..857d5fc616 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; From f57b9f81759dc174a043cfdddca28c8874a7b4a4 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 1 Oct 2024 14:21:17 +0300 Subject: [PATCH 2/5] TW-1548 Some refactoring --- e2e/src/page-objects/pages/general-settings.page.ts | 2 -- src/app/layouts/Dialogs.tsx | 2 +- src/app/templates/ConfirmationModal/ConfirmationModal.tsx | 4 +--- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/e2e/src/page-objects/pages/general-settings.page.ts b/e2e/src/page-objects/pages/general-settings.page.ts index 6affeefcb3..a432fd5a07 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/src/app/layouts/Dialogs.tsx b/src/app/layouts/Dialogs.tsx index a3cf9f26b5..c1e0c6da20 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 { ConfirmationModal } from 'app/templates/ConfirmationModal/ConfirmationModal'; import { dispatchAlertClose, dispatchConfirmClose, useModalsParams } from 'lib/ui/dialog'; const Dialogs: FC = () => { diff --git a/src/app/templates/ConfirmationModal/ConfirmationModal.tsx b/src/app/templates/ConfirmationModal/ConfirmationModal.tsx index 2b695fc474..db5b587b59 100644 --- a/src/app/templates/ConfirmationModal/ConfirmationModal.tsx +++ b/src/app/templates/ConfirmationModal/ConfirmationModal.tsx @@ -16,7 +16,7 @@ export interface ConfirmationModalProps extends ActionModalProps { onConfirm: EmptyFn; } -const ConfirmationModal = memo( +export const ConfirmationModal = memo( ({ onClose, isOpen, @@ -53,5 +53,3 @@ const ConfirmationModal = memo( ) : null ); - -export default ConfirmationModal; From 151862b2f3c40c311bba76761e4f593b3855010b Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 1 Oct 2024 14:26:22 +0300 Subject: [PATCH 3/5] TW-1548 Remove old EnablingSetting component --- src/app/templates/EnablingSetting.tsx | 44 --------------------------- 1 file changed, 44 deletions(-) delete mode 100644 src/app/templates/EnablingSetting.tsx diff --git a/src/app/templates/EnablingSetting.tsx b/src/app/templates/EnablingSetting.tsx deleted file mode 100644 index 0816bb26a9..0000000000 --- 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) => ( - <> -
- - - - - - - -
- - - -); From 714529fcb88b9cc5186deeb2174335087f0f6ae9 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 1 Oct 2024 14:31:13 +0300 Subject: [PATCH 4/5] TW-1548 Remove unused exports --- src/app/atoms/FormCheckbox.tsx | 2 +- src/app/atoms/index.ts | 1 - src/lib/i18n/index.ts | 2 +- src/lib/i18n/react.tsx | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/atoms/FormCheckbox.tsx b/src/app/atoms/FormCheckbox.tsx index 02e30d8925..97e2a84849 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/index.ts b/src/app/atoms/index.ts index 0997b28489..522350af8b 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/lib/i18n/index.ts b/src/lib/i18n/index.ts index ae18de2bb0..aadbc536d6 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 5049acab70..ff8e8f5f35 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; From 1e163b3733b95beef4c779fdd88e0985a622c570 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 1 Oct 2024 14:37:21 +0300 Subject: [PATCH 5/5] TW-1548 Refactoring according to comments --- src/app/atoms/PageModal/index.tsx | 4 +-- .../partners-promotion-settings.tsx | 2 +- .../referral-links-settings.tsx | 2 +- src/app/templates/DialogBody.tsx | 6 ++-- .../components/notifications-settings.tsx | 2 +- .../components/popup-settings.tsx | 2 +- src/app/templates/enabling-setting.tsx | 33 ++++++++++--------- 7 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/app/atoms/PageModal/index.tsx b/src/app/atoms/PageModal/index.tsx index 7ef18c6959..179525d139 100644 --- a/src/app/atoms/PageModal/index.tsx +++ b/src/app/atoms/PageModal/index.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, ReactNode, memo } from 'react'; +import React, { PropsWithChildren, memo } from 'react'; import clsx from 'clsx'; import Modal from 'react-modal'; @@ -15,7 +15,7 @@ import { IconBase } from '../IconBase'; import ModStyles from './styles.module.css'; interface Props extends TestIDProps { - title: ReactNode; + title: string; opened: boolean; shouldShowBackButton?: boolean; onRequestClose: EmptyFn; diff --git a/src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx b/src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx index fa60e94e60..5f1bf6baf2 100644 --- a/src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx +++ b/src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx @@ -54,7 +54,7 @@ export const PartnersPromotionSettings = memo(() => { return ( } + titleI18nKey="partnersPromoSettings" description={} enabled={shouldShowPartnersPromo} onChange={togglePartnersPromotion} diff --git a/src/app/templates/AdvancedFeatures/referral-links-settings.tsx b/src/app/templates/AdvancedFeatures/referral-links-settings.tsx index 7db488bdaf..e7e656864a 100644 --- a/src/app/templates/AdvancedFeatures/referral-links-settings.tsx +++ b/src/app/templates/AdvancedFeatures/referral-links-settings.tsx @@ -74,7 +74,7 @@ export const ReferralLinksSettings = memo(() => { return ( } + titleI18nKey="referralLinks" description={} enabled={referralLinksEnabled} onChange={toggleReferralLinks} diff --git a/src/app/templates/DialogBody.tsx b/src/app/templates/DialogBody.tsx index 0403b18cb9..e44078ae91 100644 --- a/src/app/templates/DialogBody.tsx +++ b/src/app/templates/DialogBody.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, memo } from 'react'; +import React, { FC, ReactNode } from 'react'; import { ActionModalBodyContainer } from 'app/atoms/action-modal'; @@ -6,9 +6,9 @@ interface DialogBodyProps { description?: ReactNode | ReactNode[]; } -export const DialogBody = memo>(({ children, description }) => ( +export const DialogBody: FC> = ({ children, description }) => ( {description &&

{description}

} {children} -)); +); diff --git a/src/app/templates/SettingsGeneral/components/notifications-settings.tsx b/src/app/templates/SettingsGeneral/components/notifications-settings.tsx index 4e538f7271..c5e7196cf2 100644 --- a/src/app/templates/SettingsGeneral/components/notifications-settings.tsx +++ b/src/app/templates/SettingsGeneral/components/notifications-settings.tsx @@ -20,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 e899700d5e..a6bcf1472b 100644 --- a/src/app/templates/SettingsGeneral/components/popup-settings.tsx +++ b/src/app/templates/SettingsGeneral/components/popup-settings.tsx @@ -21,7 +21,7 @@ export const PopupSettings = memo(() => { return ( } + titleI18nKey="popupSettings" description={} enabled={popupEnabled} onChange={handlePopupModeChange} diff --git a/src/app/templates/enabling-setting.tsx b/src/app/templates/enabling-setting.tsx index dead0ea074..7c54073fb8 100644 --- a/src/app/templates/enabling-setting.tsx +++ b/src/app/templates/enabling-setting.tsx @@ -3,26 +3,29 @@ 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 { - title: ReactNode; + titleI18nKey: TID; enabled: boolean; description: ReactNode; onChange: (newValue: boolean, event: React.ChangeEvent) => void; testID: string; } -export const EnablingSetting = memo(({ title, enabled, description, onChange, testID }: EnablingSettingProps) => ( - - - - - - {null} - - -)); +export const EnablingSetting = memo( + ({ titleI18nKey, enabled, description, onChange, testID }: EnablingSettingProps) => ( + + }> + + + + {null} + + + ) +);