diff --git a/ts/components/CopyButtonComponent.tsx b/ts/components/CopyButtonComponent.tsx deleted file mode 100644 index d777ca3fa84..00000000000 --- a/ts/components/CopyButtonComponent.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from "react"; -import { IconButton } from "@pagopa/io-app-design-system"; -import I18n from "../i18n"; -import { clipboardSetStringWithFeedback } from "../utils/clipboard"; - -type Props = Readonly<{ - textToCopy: string; -}>; - -const CopyButtonComponent: React.FunctionComponent = (props: Props) => { - const handlePress = () => { - clipboardSetStringWithFeedback(props.textToCopy); - }; - - return ( - - ); -}; - -export default CopyButtonComponent; diff --git a/ts/components/SectionStatus/StatusContent.tsx b/ts/components/SectionStatus/StatusContent.tsx deleted file mode 100644 index fabf129a958..00000000000 --- a/ts/components/SectionStatus/StatusContent.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React, { ComponentProps, forwardRef } from "react"; -import { AccessibilityRole, StyleSheet, View } from "react-native"; -import { - IOColors, - IOFontSize, - IOIcons, - Icon, - Label -} from "@pagopa/io-app-design-system"; -import { WithTestID } from "../../types/WithTestID"; -import { LevelEnum } from "../../../definitions/content/SectionStatus"; - -const iconSize = 24; - -const styles = StyleSheet.create({ - container: { - flexDirection: "row", - width: "100%", - paddingLeft: 24, - paddingRight: 24, - paddingBottom: 8, - paddingTop: 8, - alignItems: "flex-start", - alignContent: "center" - }, - alignCenter: { alignSelf: "center" }, - text: { marginLeft: 16, flex: 1 } -}); - -type Props = WithTestID<{ - accessible?: boolean; - accessibilityHint?: string; - accessibilityLabel?: string; - accessibilityRole?: AccessibilityRole; - backgroundColor: IOColors; - iconName: IOIcons; - fontSize?: IOFontSize; - foregroundColor: ComponentProps["color"]; - labelPaddingVertical?: number; -}>; - -export const statusColorMap: Record = { - [LevelEnum.normal]: "aqua", - [LevelEnum.critical]: "red", - [LevelEnum.warning]: "orange" -}; - -export const statusIconMap: Record = { - [LevelEnum.normal]: "ok", - [LevelEnum.critical]: "notice", - [LevelEnum.warning]: "info" -}; - -// map the text background color with the relative text color -export const getStatusTextColor = (level: LevelEnum): "grey-700" | "white" => - level === LevelEnum.normal ? "grey-700" : "white"; - -const StatusContent = forwardRef>( - ( - { - accessible = true, - backgroundColor, - children, - iconName, - fontSize, - foregroundColor, - labelPaddingVertical, - ...rest - }, - ref - ) => ( - - - - - - - ) -); - -export default StatusContent; diff --git a/ts/components/SectionStatus/__tests__/SectionStatusContent.test.tsx b/ts/components/SectionStatus/__tests__/SectionStatusContent.test.tsx deleted file mode 100644 index 64d88674bd4..00000000000 --- a/ts/components/SectionStatus/__tests__/SectionStatusContent.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import { View } from "react-native"; -import { render } from "@testing-library/react-native"; - -import StatusContent from "../StatusContent"; - -describe("StatusContent", () => { - it("should match the snapshot", () => { - const viewRef = React.createRef(); - const component = render( - - ); - expect(component.toJSON()).toMatchSnapshot(); - }); -}); diff --git a/ts/components/SectionStatus/__tests__/__snapshots__/SectionStatusContent.test.tsx.snap b/ts/components/SectionStatus/__tests__/__snapshots__/SectionStatusContent.test.tsx.snap deleted file mode 100644 index 133af5f36d6..00000000000 --- a/ts/components/SectionStatus/__tests__/__snapshots__/SectionStatusContent.test.tsx.snap +++ /dev/null @@ -1,159 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StatusContent should match the snapshot 1`] = ` - - - - - - - - - - - - - -`; diff --git a/ts/components/core/IOBadge.tsx b/ts/components/core/IOBadge.tsx deleted file mode 100644 index 6d4281b5727..00000000000 --- a/ts/components/core/IOBadge.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React from "react"; -import { View, Text, StyleSheet, PixelRatio, Platform } from "react-native"; -import { IOColors } from "@pagopa/io-app-design-system"; -import { makeFontStyleObject } from "./fonts"; - -export type IOBadgeOutlineColors = Extract< - IOColors, - "blue" | "white" | "grey" | "red" | "orange" ->; -export type IOBadgeSolidColors = Extract< - IOColors, - "blue" | "white" | "grey" | "aqua" | "red" ->; - -type IOBadgeCommonProps = { - text: string; - small?: boolean; - labelColor?: Extract; - testID?: string; - labelTestID?: string; -}; - -type IOBadgeConditionalProps = - | { - variant: "solid"; - color: IOBadgeSolidColors; - } - | { - variant: "outline"; - color: IOBadgeOutlineColors; - }; - -export type IOBadge = IOBadgeCommonProps & IOBadgeConditionalProps; - -type SolidVariantProps = { - background: IOColors; - text: IOColors; -}; - -const mapOutlineColor: Record, IOColors> = { - blue: "blue", - white: "white", - grey: "bluegreyDark", - red: "red", - orange: "orange" -}; - -const mapSolidColor: Record< - NonNullable, - SolidVariantProps -> = { - blue: { - background: "blue", - text: "white" - }, - white: { - background: "white", - text: "bluegrey" - }, - aqua: { - background: "aqua", - text: "bluegreyDark" - }, - grey: { - background: "grey", - text: "white" - }, - red: { - background: "red", - text: "white" - } -}; - -const defaultVariant: IOBadge["variant"] = "solid"; -const defaultColor: IOBadge["color"] = "blue"; - -const styles = StyleSheet.create({ - badge: { - alignItems: "center", - justifyContent: "center", - ...Platform.select({ - android: { - textAlignVertical: "center" - } - }), - // Visual parameters based on the FontScale - // ~20 = Small size height - // ~24 = Default size height - paddingVertical: PixelRatio.getFontScale() * 1.25, - paddingHorizontal: PixelRatio.getFontScale() * 10, - borderRadius: PixelRatio.getFontScale() * 25 - }, - label: { - alignSelf: "center", - ...makeFontStyleObject("Semibold") - }, - labelSizeDefault: { - fontSize: 14, - lineHeight: 20 - }, - labelSizeSmall: { - fontSize: 11, - lineHeight: 16 - } -}); - -/** - * Official badge component -@deprecated("Use the new Badge component instead") - */ -export const IOBadge = ({ - text, - variant = defaultVariant, - color = defaultColor, - small, - testID, - labelTestID -}: IOBadge) => ( - - {/* TODO: Enable bolder text using `isBoldTextEnabled` RN API - (not yet released at the time I am writing this comment). */} - - {text} - - -); diff --git a/ts/components/screens/ListItemComponent.tsx b/ts/components/screens/ListItemComponent.tsx index d9625e022b6..408ed1bd8ab 100644 --- a/ts/components/screens/ListItemComponent.tsx +++ b/ts/components/screens/ListItemComponent.tsx @@ -1,28 +1,28 @@ -import * as React from "react"; -import { - Text, - View, - AccessibilityRole, - StyleProp, - StyleSheet, - ViewStyle, - AccessibilityState, - Pressable -} from "react-native"; import { + Badge, + Body, + Divider, + HSpacer, Icon, IOColors, IOIcons, IOIconSizeScale, - HSpacer, - Divider, - VSpacer, NativeSwitch, - Body + VSpacer } from "@pagopa/io-app-design-system"; +import * as React from "react"; +import { + AccessibilityRole, + AccessibilityState, + Pressable, + StyleProp, + StyleSheet, + Text, + View, + ViewStyle +} from "react-native"; import customVariables from "../../theme/variables"; import { makeFontStyleObject } from "../core/fonts"; -import { IOBadge } from "../core/IOBadge"; import { IOStyles } from "../core/variables/IOStyles"; import { BadgeComponent } from "./BadgeComponent"; @@ -141,12 +141,7 @@ export default class ListItemComponent extends React.Component { {/* Use marginTop to align the badge to the text. TODO: Replace it with a more robust approach. */} - + )} diff --git a/ts/components/ui/CustomBadge.tsx b/ts/components/ui/CustomBadge.tsx deleted file mode 100644 index f2aab20fcba..00000000000 --- a/ts/components/ui/CustomBadge.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React, { memo } from "react"; -import { Text, StyleSheet, View } from "react-native"; -import { IOColors } from "@pagopa/io-app-design-system"; -import variables from "../../theme/variables"; -import { isTestEnv } from "../../utils/environment"; -import { makeFontStyleObject } from "../core/fonts"; - -type Props = { - badgeValue?: number; -}; - -const BADGE_SIZE = 20; - -const styles = StyleSheet.create({ - textStyle: { - color: IOColors.white, - fontSize: 10, - textAlign: "center", - ...makeFontStyleObject("Bold") - }, - badgeStyle: { - width: BADGE_SIZE, - height: BADGE_SIZE, - borderRadius: BADGE_SIZE / 2, - alignSelf: "flex-start", - justifyContent: "center", - alignContent: "center", - backgroundColor: variables.brandPrimary, - borderColor: IOColors.white, - borderWidth: 2, - position: "absolute", - left: 12, - bottom: 10, - paddingLeft: 0, - paddingRight: 0 - } -}); - -const MAX_BADGE_VALUE = 99; -const multiplierFallback = 1.4; -// map the digits to display within the badge with the relative width multiplier factor -// (the badge displays value below MAX_BADGE_VALUE) -const multiplierMap: Record = { - 1: 1, - 2: 1.2 -}; -// get the width multiplier relative to the count of digits to display -const getWidthMultiplier = (text: string): number => { - const digits = text.length; - return multiplierMap[digits] ?? multiplierFallback; -}; - -/** - * A simple round badge to display a positive number - * Display all numbers less or equal of MAX_BADGE_VALUE - * otherwise ${MAX_BADGE_VALUE}"+" will be displayed - * - * if badgeValue is nullish or negative, null element will be returned - */ -const CustomBadge = (props: Props) => { - const badgeValue = props.badgeValue ?? 0; - if (badgeValue <= 0) { - return null; - } - const badge = `${Math.min(badgeValue, MAX_BADGE_VALUE)}${ - badgeValue > MAX_BADGE_VALUE ? "+" : "" - }`; - return ( - - - {badge} - - - ); -}; - -export default memo( - CustomBadge, - (prev, next) => prev.badgeValue === next.badgeValue -); - -// to ensure right code encapsulation we export functions/variables just for tests purposes -export const customBadgeTestable = isTestEnv - ? { getWidthMultiplier, styles } - : undefined; diff --git a/ts/components/ui/TabIconComponent.tsx b/ts/components/ui/TabIconComponent.tsx index 7cfaa88abf4..7194c7586ff 100644 --- a/ts/components/ui/TabIconComponent.tsx +++ b/ts/components/ui/TabIconComponent.tsx @@ -1,14 +1,12 @@ import { ColorValue, View } from "react-native"; import React from "react"; import { AnimatedIcon, IONavIcons } from "@pagopa/io-app-design-system"; -import CustomBadge from "./CustomBadge"; type TabIconComponent = { focused: boolean; iconName: IONavIcons; iconNameFocused: IONavIcons; color?: ColorValue; - badgeValue?: number; }; /** @@ -16,13 +14,7 @@ type TabIconComponent = { */ export const TabIconComponent = React.memo( - ({ - focused, - iconName, - iconNameFocused, - color, - badgeValue - }: TabIconComponent) => ( + ({ focused, iconName, iconNameFocused, color }: TabIconComponent) => ( // accessibilityLabel={""} in order to read the font icon, without modify the library element - {badgeValue && } ) ); diff --git a/ts/components/ui/__test__/CustomBadge.test.tsx b/ts/components/ui/__test__/CustomBadge.test.tsx deleted file mode 100644 index c49c27b1a88..00000000000 --- a/ts/components/ui/__test__/CustomBadge.test.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { render } from "@testing-library/react-native"; -import React from "react"; -import CustomBadge, { customBadgeTestable } from "../CustomBadge"; - -const testID = "badgeTestID"; -describe("CustomBadge component", () => { - jest.useFakeTimers(); - it(`match snapshot for 0`, () => { - const component = render(); - expect(component).toMatchSnapshot(); - }); - - it(`match snapshot for 10`, () => { - const component = render(); - expect(component).toMatchSnapshot(); - }); - - it(`match snapshot for 100`, () => { - const component = render(); - expect(component).toMatchSnapshot(); - }); - - it(`should be defined for 1 as badge value`, () => { - const component = render().queryByTestId( - testID - ); - expect(component).toBeDefined(); - }); - - it(`should be not defined for 0 as badge value`, () => { - const component = render().queryByTestId( - testID - ); - expect(component).toBeNull(); - }); - - it(`should be not defined for undefined as badge value`, () => { - const component = render( - - ).queryByTestId(testID); - expect(component).toBeNull(); - }); - - it(`should have a specific with for 1 digits`, () => { - const digits = [1, 10, 50, 80, 99, 100, 200, 1000]; - digits.forEach(digit => { - const component = render( - - ).queryByTestId(testID); - - expect(component).toBeDefined(); - if (component) { - expect(component).toHaveStyle({ - width: - customBadgeTestable!.styles.badgeStyle.width * - customBadgeTestable!.getWidthMultiplier(digit.toString()) - }); - } - }); - }); -}); diff --git a/ts/components/ui/__test__/__snapshots__/CustomBadge.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/CustomBadge.test.tsx.snap deleted file mode 100644 index c2c73c6a392..00000000000 --- a/ts/components/ui/__test__/__snapshots__/CustomBadge.test.tsx.snap +++ /dev/null @@ -1,95 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CustomBadge component match snapshot for 0 1`] = `null`; - -exports[`CustomBadge component match snapshot for 10 1`] = ` - - - 10 - - -`; - -exports[`CustomBadge component match snapshot for 100 1`] = ` - - - 99+ - - -`; diff --git a/ts/features/bonus/cdc/components/CdcServiceCTA.tsx b/ts/features/bonus/cdc/components/CdcServiceCTA.tsx index 195073b0ff1..641d0c2b57e 100644 --- a/ts/features/bonus/cdc/components/CdcServiceCTA.tsx +++ b/ts/features/bonus/cdc/components/CdcServiceCTA.tsx @@ -1,4 +1,5 @@ import { + Alert, ButtonOutline, ButtonSolid, VSpacer @@ -12,7 +13,6 @@ import { StatoBeneficiarioEnum } from "../../../../../definitions/cdc/StatoBenef import { BonusVisibilityEnum } from "../../../../../definitions/content/BonusVisibility"; import { fold } from "../../../../common/model/RemoteValue"; import SectionStatusComponent from "../../../../components/SectionStatus"; -import StatusContent from "../../../../components/SectionStatus/StatusContent"; import ActivityIndicator from "../../../../components/ui/ActivityIndicator"; import I18n from "../../../../i18n"; import { useIONavigation } from "../../../../navigation/params/AppParamsList"; @@ -84,17 +84,13 @@ const ErrorButton = (props: ErrorButtonProp) => { return ( - - {I18n.t("bonus.cdc.serviceCta.error.status")} - + variant="warning" + content={I18n.t("bonus.cdc.serviceCta.error.status")} + accessibilityHint={I18n.t("global.accessibility.alert")} + testID={"errorAlert"} + /> { expect(activityIndicator).toBeDefined(); }); - it("Should show the errorStatusComponent and the retryButton button if the cdcBonusRequestList is in failure state", () => { - const store: Store = createStore( - appReducer, - globalState as any - ); - store.dispatch(loadAvailableBonuses.success([mockBonus])); - const component = renderComponent(store); - store.dispatch(cdcRequestBonusList.failure(getTimeoutError())); - const errorStatusComponent = component.getByTestId( - "SectionStatusContent" - ); - const retryButton = component.getByTestId("retryButton"); - - expect(errorStatusComponent).toBeDefined(); - expect(retryButton).toBeDefined(); - }); }); it("Should show the activityIndicator if the allAvailableBonusTypes is potNoneLoading or potSomeLoading", () => { const store: Store = createStore( diff --git a/ts/features/bonus/cgn/components/merchants/CgnDiscountValueBox.tsx b/ts/features/bonus/cgn/components/merchants/CgnDiscountValueBox.tsx deleted file mode 100644 index 0c25dcd6d62..00000000000 --- a/ts/features/bonus/cgn/components/merchants/CgnDiscountValueBox.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { H6, IOColors } from "@pagopa/io-app-design-system"; -import * as React from "react"; -import { StyleSheet, View } from "react-native"; -import { normalizedDiscountPercentage } from "./utils"; - -type ValueBoxProps = { - value: number; - small?: true; -}; - -const BADGE_SIZE_SMALL = 40; -const BADGE_SIZE_DEFAULT = 48; - -const styles = StyleSheet.create({ - percentage: { textAlign: "center", lineHeight: 30 }, - smallValueBox: { - alignSelf: "center", - borderRadius: BADGE_SIZE_SMALL / 4, - paddingVertical: 4, - width: BADGE_SIZE_SMALL, - textAlign: "center", - backgroundColor: IOColors.antiqueFuchsia - }, - discountValueBox: { - alignSelf: "center", - borderRadius: BADGE_SIZE_DEFAULT / 4, - paddingVertical: 8, - width: BADGE_SIZE_DEFAULT, - backgroundColor: IOColors.antiqueFuchsia - } -}); - -const PERCENTAGE_SYMBOL = "%"; -const MINUS_SYMBOL = "-"; - -const CgnDiscountValueBox = ({ value, small }: ValueBoxProps) => { - const percentage =
{PERCENTAGE_SYMBOL}
; - return ( - -
- {MINUS_SYMBOL} - {normalizedDiscountPercentage(value)} - {percentage} -
- - ); -}; - -export default CgnDiscountValueBox; diff --git a/ts/features/bonus/common/components/AvailableBonusItem.tsx b/ts/features/bonus/common/components/AvailableBonusItem.tsx index 31a7bab780e..aebfa021166 100644 --- a/ts/features/bonus/common/components/AvailableBonusItem.tsx +++ b/ts/features/bonus/common/components/AvailableBonusItem.tsx @@ -1,14 +1,12 @@ -import { Body, H6, HSpacer } from "@pagopa/io-app-design-system"; +import { Badge, Body, H6, HSpacer } from "@pagopa/io-app-design-system"; import * as React from "react"; import { Image, Pressable, StyleSheet, View } from "react-native"; import { BonusAvailable } from "../../../../../definitions/content/BonusAvailable"; import { BonusAvailableContent } from "../../../../../definitions/content/BonusAvailableContent"; +import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; import { getRemoteLocale } from "../../../messages/utils/messages"; -import { IOBadge } from "../../../../components/core/IOBadge"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; - export type AvailableBonusItemState = "incoming" | "active" | "completed"; type Props = { @@ -42,16 +40,19 @@ const styles = StyleSheet.create({ } }); -const BonusBadge = (props: { caption: string }) => ( - -); - const renderBadge = (state: AvailableBonusItemState) => { switch (state) { case "incoming": - return ; + return ( + + ); case "completed": - return ; + return ( + + ); case "active": return null; } diff --git a/ts/features/design-system/core/DSLegacyAlert.tsx b/ts/features/design-system/core/DSLegacyAlert.tsx deleted file mode 100644 index 03a49f1daa8..00000000000 --- a/ts/features/design-system/core/DSLegacyAlert.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { VSpacer } from "@pagopa/io-app-design-system"; -import * as React from "react"; -import StatusContent, { - statusColorMap, - getStatusTextColor, - statusIconMap -} from "../../../components/SectionStatus/StatusContent"; -import { DSFullWidthComponent } from "../components/DSFullWidthComponent"; - -/* Types */ -import { LevelEnum } from "../../../../definitions/content/SectionStatus"; -import { DesignSystemScreen } from "../components/DesignSystemScreen"; - -export const DSLegacyAlert = () => ( - - - - { - "L’invio dei Certificati Verdi è in corso e potrebbe richiedere diversi giorni." - } - - - - - - {"La sezione Messaggi è in manutenzione, tornerà operativa a breve"} - - - - - - { - "I nostri sistemi potrebbero rispondere con lentezza, ci scusiamo per il disagio." - } - - - -); diff --git a/ts/features/design-system/core/DSLegacyBadges.tsx b/ts/features/design-system/core/DSLegacyBadges.tsx deleted file mode 100644 index 1976abf2703..00000000000 --- a/ts/features/design-system/core/DSLegacyBadges.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { - H4, - H6, - HSpacer, - IOColors, - IOStyles, - VSpacer -} from "@pagopa/io-app-design-system"; -import * as React from "react"; -import { StyleSheet, View } from "react-native"; - -import { DesignSystemScreen } from "../components/DesignSystemScreen"; -import CgnDiscountValueBox from "../../bonus/cgn/components/merchants/CgnDiscountValueBox"; -import CustomBadge from "../../../components/ui/CustomBadge"; -import { IOBadge } from "../../../components/core/IOBadge"; - -const styles = StyleSheet.create({ - fakeNavItem: { - aspectRatio: 1, - width: 25, - backgroundColor: IOColors.greyLight - } -}); - -export const DSLegacyBadges = () => ( - -
IOBadge
- {renderIOBadge()} - - - -
DiscountValueBox (CGN)
- - - - - - - - - -

Notifications

- -
CustomBadge
- - - - - - - - - - - -); - -const renderIOBadge = () => ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/ts/features/design-system/core/DSLegacyButtons.tsx b/ts/features/design-system/core/DSLegacyButtons.tsx deleted file mode 100644 index 69b6fff67a6..00000000000 --- a/ts/features/design-system/core/DSLegacyButtons.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { - BlockButtons, - H4, - VStack, - useIOTheme -} from "@pagopa/io-app-design-system"; -import * as React from "react"; -import { Alert } from "react-native"; -import CopyButtonComponent from "../../../components/CopyButtonComponent"; -import { DSComponentViewerBox } from "../components/DSComponentViewerBox"; -import { DesignSystemScreen } from "../components/DesignSystemScreen"; - -const onButtonPress = () => { - Alert.alert("Alert", "Action triggered"); -}; - -const componentInnerMargin = 16; -const componentMargin = 24; -const sectionTitleMargin = 16; -const blockMargin = 40; - -export const DSLegacyButtons = () => { - const theme = useIOTheme(); - - return ( - - - -

Block Buttons

- {renderBlockButtons()} - - - -

Specific buttons

- {renderSpecificButtons()} - - - - ); -}; - -const renderBlockButtons = () => ( - - - - - - -); - -const renderSpecificButtons = () => ( - - - - - -); diff --git a/ts/features/design-system/navigation/navigator.tsx b/ts/features/design-system/navigation/navigator.tsx index 094c1ea9fc3..9e0a78cb878 100644 --- a/ts/features/design-system/navigation/navigator.tsx +++ b/ts/features/design-system/navigation/navigator.tsx @@ -52,9 +52,6 @@ import { DSIcons } from "../core/DSIcons"; import { DSIridescentTrustmark } from "../core/DSIridescentTrustmark"; import { DSLayout } from "../core/DSLayout"; import { DSLegacyAdvice } from "../core/DSLegacyAdvice"; -import { DSLegacyAlert } from "../core/DSLegacyAlert"; -import { DSLegacyBadges } from "../core/DSLegacyBadges"; -import { DSLegacyButtons } from "../core/DSLegacyButtons"; import { DSLegacyListItems } from "../core/DSLegacyListItems"; import { DSLegacyTextFields } from "../core/DSLegacyTextFields"; import { DSListItems } from "../core/DSListItems"; @@ -586,14 +583,6 @@ export const DesignSystemNavigator = () => { {/* LEGACY */} - - { }} /> - - - - { dismiss(); }; - const cancelButtonProps: ButtonSolidProps = { - testID: "FciStopAbortingSignatureTestID", - onPress: () => dismiss(), - label: I18n.t("features.fci.abort.confirm"), - accessibilityLabel: I18n.t("features.fci.abort.confirm") - }; - const continueButtonProps: ButtonSolidProps = { - onPress: () => abortSignatureFlow(), - color: "danger", - label: I18n.t("features.fci.abort.cancel"), - accessibilityLabel: I18n.t("features.fci.abort.cancel") - }; - const { present: presentBs, bottomSheet, @@ -61,13 +46,19 @@ export const useFciAbortSignatureFlow = () => { ), snapPoint: [280], footer: ( - - - + dismiss(), + testID: "FciStopAbortingSignatureTestID" + }} + endAction={{ + color: "danger", + label: I18n.t("features.fci.abort.cancel"), + onPress: () => abortSignatureFlow() + }} + /> ) }); diff --git a/ts/features/idpay/timeline/components/TimelineDiscountTransactionDetailsComponent.tsx b/ts/features/idpay/timeline/components/TimelineDiscountTransactionDetailsComponent.tsx index d8b869f0eba..9bea069faea 100644 --- a/ts/features/idpay/timeline/components/TimelineDiscountTransactionDetailsComponent.tsx +++ b/ts/features/idpay/timeline/components/TimelineDiscountTransactionDetailsComponent.tsx @@ -3,6 +3,7 @@ import { Body, H6, HSpacer, + ListItemInfoCopy, VSpacer } from "@pagopa/io-app-design-system"; import * as O from "fp-ts/lib/Option"; @@ -13,10 +14,10 @@ import { TransactionDetailDTO, StatusEnum as TransactionStatusEnum } from "../../../../../definitions/idpay/TransactionDetailDTO"; -import CopyButtonComponent from "../../../../components/CopyButtonComponent"; import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; +import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard"; import { format } from "../../../../utils/dates"; import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder"; @@ -127,26 +128,15 @@ const TimelineDiscountTransactionDetailsComponent = (props: Props) => { {format(transaction.operationDate, "DD MMM YYYY, HH:mm")} - - - {I18n.t( - "idpay.initiative.operationDetails.discount.details.labels.transactionID" - )} - - - - - {transaction.operationId} - - - - - + { + clipboardSetStringWithFeedback(transaction.operationId); + }} + /> ); }; diff --git a/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx b/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx index 7f109b4c6a0..d9a7f1bc60a 100644 --- a/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx +++ b/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx @@ -1,5 +1,11 @@ import { useBottomSheet } from "@gorhom/bottom-sheet"; -import { Alert, Body, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; +import { + Alert, + Badge, + Body, + ListItemInfoCopy, + VSpacer +} from "@pagopa/io-app-design-system"; import { CommonActions } from "@react-navigation/native"; import { format } from "date-fns"; import * as O from "fp-ts/lib/Option"; @@ -8,17 +14,15 @@ import React from "react"; import { StyleSheet, View } from "react-native"; import { RefundDetailDTO } from "../../../../../definitions/idpay/RefundDetailDTO"; import { OperationTypeEnum } from "../../../../../definitions/idpay/RefundOperationDTO"; -import CopyButtonComponent from "../../../../components/CopyButtonComponent"; -import { IOBadge } from "../../../../components/core/IOBadge"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; import NavigationService from "../../../../navigation/NavigationService"; import { useIOSelector } from "../../../../store/hooks"; import themeVariables from "../../../../theme/variables"; +import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard"; import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder"; +import { IdPayConfigurationRoutes } from "../../configuration/navigation/routes"; import { idpayInitiativeIdSelector } from "../../details/store"; import { getRefundPeriodDateString } from "../utils/strings"; -import { IdPayConfigurationRoutes } from "../../configuration/navigation/routes"; type Props = { refund: RefundDetailDTO; @@ -94,19 +98,15 @@ const TimelineRefundDetailsComponent = (props: Props) => { {I18n.t("idpay.initiative.operationDetails.refund.resultLabel")} {refund.operationType === OperationTypeEnum.REJECTED_REFUND ? ( - ) : ( - { {format(refund.operationDate, "DD MMM YYYY, HH:mm")} - - CRO - - - - {refund.cro} - - - - - + { + clipboardSetStringWithFeedback(refund.cro || ""); + }} + /> ); }; diff --git a/ts/features/idpay/timeline/components/TimelineTransactionDetailsComponent.tsx b/ts/features/idpay/timeline/components/TimelineTransactionDetailsComponent.tsx index 6652739baf0..ef9085d4130 100644 --- a/ts/features/idpay/timeline/components/TimelineTransactionDetailsComponent.tsx +++ b/ts/features/idpay/timeline/components/TimelineTransactionDetailsComponent.tsx @@ -1,23 +1,24 @@ -import * as O from "fp-ts/lib/Option"; -import { pipe } from "fp-ts/lib/function"; -import React from "react"; -import { StyleSheet, View } from "react-native"; import { Alert, Body, H6, HSpacer, + ListItemInfoCopy, VSpacer } from "@pagopa/io-app-design-system"; +import * as O from "fp-ts/lib/Option"; +import { pipe } from "fp-ts/lib/function"; +import React from "react"; +import { StyleSheet, View } from "react-native"; import { TransactionDetailDTO, OperationTypeEnum as TransactionTypeEnum } from "../../../../../definitions/idpay/TransactionDetailDTO"; -import CopyButtonComponent from "../../../../components/CopyButtonComponent"; import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import { LogoPaymentWithFallback } from "../../../../components/ui/utils/components/LogoPaymentWithFallback"; import I18n from "../../../../i18n"; +import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard"; import { format } from "../../../../utils/dates"; import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder"; import { getLabelForCircuitType } from "../../common/labels"; @@ -118,42 +119,22 @@ const TimelineTransactionDetailsComponent = (props: Props) => { {getLabelForCircuitType(transaction.circuitType)} - - - {I18n.t("idpay.initiative.operationDetails.transaction.acquirerId")} - - - - - {idTrxAcquirer} - - - - - - - - {I18n.t("idpay.initiative.operationDetails.transaction.issuerId")} - - - - - {idTrxIssuer} - - - - - + { + clipboardSetStringWithFeedback(idTrxAcquirer); + }} + /> + { + clipboardSetStringWithFeedback(idTrxIssuer); + }} + /> ); };