Merge branch 'main' into IOAPPX-288-add-markdown-typograhic-scale

pagopa · Apr 15, 2024 · b5205c2 · b5205c2
2 parents d72252a + e33638a
commit b5205c2
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 50 deletions.
diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
@@ -117,6 +117,16 @@ const renderModuleCheckout = () => (
         onPress={modulePress}
       />
     </ComponentViewerBox>
+    <ComponentViewerBox name="ModuleCheckout, default, with image">
+      <ModuleCheckout
+        image={{
+          uri: "https://assets.cdn.platform.pagopa.it/apm/bancomatpay.png"
+        }}
+        title="Paga con Bancomat PAY"
+        ctaText="Modifica"
+        onPress={modulePress}
+      />
+    </ComponentViewerBox>
     <ComponentViewerBox name="ModuleCheckout, no description">
       <ModuleCheckout
         paymentLogo="amex"

diff --git a/src/components/modules/ModuleCheckout.tsx b/src/components/modules/ModuleCheckout.tsx
@@ -1,8 +1,15 @@
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
+import {
+  Image,
+  ImageSourcePropType,
+  ImageURISource,
+  StyleSheet,
+  View
+} from "react-native";
 import Placeholder from "rn-placeholder";
 import {
   IOModuleStyles,
+  IOSelectionListItemVisualParams,
   IOSpacingScale,
   IOStyles,
   useIOTheme
@@ -13,69 +20,72 @@ import { HSpacer, VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
 import { PressableModuleBase } from "./PressableModuleBase";
 
-// ---------------- types ----------------
-
-type ModuleCheckoutPartialProps =
-  | {
-      isLoading?: false;
-      paymentLogo?: IOLogoPaymentType;
-      title: string;
-      subtitle?: string;
-      onPress: () => void;
-    }
-  | {
-      isLoading: true;
-      paymentLogo?: never;
-      title?: never;
-      subtitle?: never;
-      onPress?: never;
-    };
-
-export type ModuleCheckoutProps = ModuleCheckoutPartialProps & {
+type LoadingProps = {
+  isLoading: true;
   ctaText?: string;
 };
 
-type ActionOnlyProps = { text?: string };
+type ImageProps =
+  | { paymentLogo: IOLogoPaymentType; image?: never }
+  | { paymentLogo?: never; image: ImageURISource | ImageSourcePropType }
+  | { paymentLogo?: never; image?: never };
 
-// ---------------- component ----------------
+type BaseProps = {
+  isLoading?: false;
+  paymentLogo?: IOLogoPaymentType;
+  title: string;
+  subtitle?: string;
+  ctaText?: string;
+  onPress: () => void;
+} & ImageProps;
+
+export type ModuleCheckoutProps = LoadingProps | BaseProps;
 
 export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   const theme = useIOTheme();
 
   if (props.isLoading) {
-    return <LoadingVersion text={props.ctaText} />;
+    return <LoadingVersion {...props} />;
   }
 
-  const paymentLogoEndMargin: IOSpacingScale = 12;
+  const { paymentLogo, image } = props;
 
-  const ModuleBaseContent = () => (
-    <View style={styles.rowCenter}>
-      {/*
-          we don't want to let the `space-between`
-          handle spacing for the logo/text section,
-          so we use a row and a marginEnd on the logo
-        */}
-      {props.paymentLogo && (
-        <View style={{ marginEnd: paymentLogoEndMargin }}>
-          <LogoPayment name={props.paymentLogo} />
+  const imageComponent = (
+    <>
+      {paymentLogo && (
+        <View style={styles.imageWrapper}>
+          <LogoPayment name={paymentLogo} />
         </View>
       )}
-      <View style={IOStyles.flex}>
+      {image && (
+        <Image
+          source={image}
+          style={[styles.imageWrapper, styles.image]}
+          accessibilityIgnoresInvertColors={true}
+        />
+      )}
+    </>
+  );
+
+  const ModuleBaseContent = () => (
+    <>
+      {imageComponent}
+      <View style={styles.content}>
         <H6>{props.title}</H6>
         {props.subtitle && (
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
             {props.subtitle}
           </LabelSmall>
         )}
       </View>
-    </View>
+    </>
   );
 
   if (props.ctaText) {
     return (
       <PressableModuleBase onPress={props.onPress}>
         <ModuleBaseContent />
-        {props.ctaText && <ModuleAction text={props.ctaText} />}
+        {props.ctaText && <ModuleAction ctaText={props.ctaText} />}
       </PressableModuleBase>
     );
   }
@@ -87,21 +97,19 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   );
 };
 
-// ---------------- sub-components----------------
-
-const ModuleAction = ({ text }: ActionOnlyProps) => (
+const ModuleAction = ({ ctaText }: Pick<ModuleCheckoutProps, "ctaText">) => (
   <View pointerEvents="none">
     <ButtonLink
-      label={text ?? ""}
-      accessibilityLabel={text}
+      label={ctaText ?? ""}
+      accessibilityLabel={ctaText}
       onPress={() => null}
     />
   </View>
 );
 
-const LoadingVersion = ({ text }: ActionOnlyProps) => (
+const LoadingVersion = ({ ctaText }: LoadingProps) => (
   <View style={IOModuleStyles.button}>
-    <View style={styles.rowCenter}>
+    <View style={[IOStyles.row, IOStyles.alignCenter]}>
       <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
       <HSpacer size={8} />
       <View>
@@ -110,16 +118,23 @@ const LoadingVersion = ({ text }: ActionOnlyProps) => (
         <Placeholder.Box animate="fade" radius={8} height={16} width={116} />
       </View>
     </View>
-    <ModuleAction text={text} />
+    <ModuleAction ctaText={ctaText} />
   </View>
 );
 
-// ---------------- styles ----------------
+const imageMarginRight: IOSpacingScale = 12;
 
 const styles = StyleSheet.create({
-  rowCenter: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1
+  imageWrapper: {
+    marginRight: imageMarginRight
+  },
+  image: {
+    width: IOSelectionListItemVisualParams.iconSize,
+    height: IOSelectionListItemVisualParams.iconSize,
+    resizeMode: "contain"
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1
   }
 });