Remove legacy CopyButtonComponent

pagopa · Nov 29, 2024 · 873fde1 · 873fde1
1 parent 783867d
commit 873fde1
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 121 deletions.
diff --git a/ts/components/CopyButtonComponent.tsx b/ts/components/CopyButtonComponent.tsx
diff --git a/ts/features/design-system/core/DSLegacyButtons.tsx b/ts/features/design-system/core/DSLegacyButtons.tsx
@@ -6,16 +6,13 @@ import {
 } 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;
 
@@ -29,11 +26,6 @@ export const DSLegacyButtons = () => {
           <H4 color={theme["textHeading-default"]}>Block Buttons</H4>
           {renderBlockButtons()}
         </VStack>
-
-        <VStack space={sectionTitleMargin}>
-          <H4 color={theme["textHeading-default"]}>Specific buttons</H4>
-          {renderSpecificButtons()}
-        </VStack>
       </VStack>
     </DesignSystemScreen>
   );
@@ -118,11 +110,3 @@ const renderBlockButtons = () => (
     />
   </VStack>
 );
-
-const renderSpecificButtons = () => (
-  <VStack space={componentMargin}>
-    <DSComponentViewerBox name="CopyButtonComponent">
-      <CopyButtonComponent textToCopy={"Copied text by CopyButton"} />
-    </DSComponentViewerBox>
-  </VStack>
-);
diff --git 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")}
         </Body>
       </View>
-      <View style={styles.detailRow}>
-        <Body style={{ flex: 1 }}>
-          {I18n.t(
-            "idpay.initiative.operationDetails.discount.details.labels.transactionID"
-          )}
-        </Body>
-        <HSpacer size={16} />
-        <View style={[IOStyles.flex, IOStyles.row]}>
-          <Body
-            weight="Semibold"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            style={IOStyles.flex}
-          >
-            {transaction.operationId}
-          </Body>
-          <HSpacer size={8} />
-          <CopyButtonComponent textToCopy={transaction.operationId} />
-        </View>
-      </View>
+      <ListItemInfoCopy
+        label={I18n.t(
+          "idpay.initiative.operationDetails.discount.details.labels.transactionID"
+        )}
+        value={transaction.operationId}
+        onPress={() => {
+          clipboardSetStringWithFeedback(transaction.operationId);
+        }}
+      />
     </View>
   );
 };

diff --git a/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx b/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx
@@ -3,7 +3,7 @@ import {
   Alert,
   Badge,
   Body,
-  HSpacer,
+  ListItemInfoCopy,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import { CommonActions } from "@react-navigation/native";
@@ -14,12 +14,11 @@ 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 { 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";
@@ -124,22 +123,13 @@ const TimelineRefundDetailsComponent = (props: Props) => {
           {format(refund.operationDate, "DD MMM YYYY, HH:mm")}
         </Body>
       </View>
-      <View style={styles.detailRow}>
-        <Body>CRO</Body>
-        <HSpacer size={16} />
-        <View style={[IOStyles.flex, IOStyles.row]}>
-          <Body
-            weight="Semibold"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            style={IOStyles.flex}
-          >
-            {refund.cro}
-          </Body>
-          <HSpacer size={8} />
-          <CopyButtonComponent textToCopy={refund.cro || ""} />
-        </View>
-      </View>
+      <ListItemInfoCopy
+        label={"CRO"}
+        value={refund.cro}
+        onPress={() => {
+          clipboardSetStringWithFeedback(refund.cro || "");
+        }}
+      />
     </>
   );
 };

diff --git 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)}
         </Body>
       </View>
-      <View style={styles.detailRow}>
-        <Body>
-          {I18n.t("idpay.initiative.operationDetails.transaction.acquirerId")}
-        </Body>
-        <HSpacer size={16} />
-        <View style={[IOStyles.flex, IOStyles.row]}>
-          <Body
-            weight="Semibold"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            style={IOStyles.flex}
-          >
-            {idTrxAcquirer}
-          </Body>
-          <HSpacer size={8} />
-          <CopyButtonComponent textToCopy={idTrxAcquirer} />
-        </View>
-      </View>
-      <View style={styles.detailRow}>
-        <Body style={{ flex: 1 }}>
-          {I18n.t("idpay.initiative.operationDetails.transaction.issuerId")}
-        </Body>
-        <HSpacer size={16} />
-        <View style={[IOStyles.flex, IOStyles.row]}>
-          <Body
-            weight="Semibold"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            style={IOStyles.flex}
-          >
-            {idTrxIssuer}
-          </Body>
-          <HSpacer size={8} />
-          <CopyButtonComponent textToCopy={idTrxIssuer} />
-        </View>
-      </View>
+      <ListItemInfoCopy
+        label={I18n.t(
+          "idpay.initiative.operationDetails.transaction.acquirerId"
+        )}
+        value={idTrxAcquirer}
+        onPress={() => {
+          clipboardSetStringWithFeedback(idTrxAcquirer);
+        }}
+      />
+      <ListItemInfoCopy
+        label={I18n.t("idpay.initiative.operationDetails.transaction.issuerId")}
+        value={idTrxIssuer}
+        onPress={() => {
+          clipboardSetStringWithFeedback(idTrxIssuer);
+        }}
+      />
     </View>
   );
 };