feat: Add hideSubmitButton prop to templates

app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import TemplateConfirmation, {
+  TemplateConfirmationProps,
+} from './TemplateConfirmation';
+import { ApprovalTypes } from '../../../../../../core/RPCMethods/RPCMethodMiddleware';
+import { getTemplateValues } from './Templates';
+
+jest.mock('./Templates', () => ({
+  getTemplateValues: jest.fn(),
+}));
+
+const CONTENT_MOCK = 'CONTENT_MOCK';
+const CANCEL_TEXT_MOCK = 'CANCEL_TEXT_MOCK';
+const CONFIRM_TEXT_MOCK = 'CONFIRM_TEXT_MOCK';
+
+describe('TemplateConfirmation', () => {
+  const mockProps: TemplateConfirmationProps = {
+    approvalRequest: {
+      id: 'mocked',
+      origin: 'metamask',
+      requestData: {
+        data: '123',
+      },
+      // Add props here in order to satisfy the type
+      type: ApprovalTypes.RESULT_SUCCESS,
+      expectsResult: false,
+      requestState: null,
+      time: 123456,
+    },
+    onConfirm: jest.fn(),
+    onCancel: jest.fn(),
+  };
+
+  it('renders content and actions', () => {
+    (getTemplateValues as jest.Mock).mockReturnValue({
+      content: [CONTENT_MOCK],
+      cancelText: CANCEL_TEXT_MOCK,
+      confirmText: CONFIRM_TEXT_MOCK,
+    });
+    const wrapper = render(<TemplateConfirmation {...mockProps} />);
+
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.queryByText(CONTENT_MOCK)).toBeDefined();
+    expect(wrapper.queryByText(CANCEL_TEXT_MOCK)).toBeDefined();
+    expect(wrapper.queryByText(CONFIRM_TEXT_MOCK)).toBeDefined();
+  });
+
+  it('renders content without actions', () => {
+    (getTemplateValues as jest.Mock).mockReturnValue({
+      content: [CONTENT_MOCK],
+      cancelText: CANCEL_TEXT_MOCK,
+      confirmText: CONFIRM_TEXT_MOCK,
+      hideSubmitButton: true,
+      hideCancelButton: true,
+    });
+    const wrapper = render(<TemplateConfirmation {...mockProps} />);
+
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.queryByText(CONTENT_MOCK)).toBeDefined();
+    expect(wrapper.queryByText(CANCEL_TEXT_MOCK)).toBeNull();
+    expect(wrapper.queryByText(CONFIRM_TEXT_MOCK)).toBeNull();
+  });
+});

app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.tsx

@@ -61,16 +61,18 @@ const TemplateConfirmation = ({
     };
   }, [templatedValues.onCancel, onCancel, templatedValues]);
 
-  const buttons = [
-    {
+  const buttons = [];
+
+  if (!templatedValues.hideSubmitButton) {
+    buttons.push({
       variant: ButtonVariants.Primary,
       label: templatedValues.confirmText ?? strings('template_confirmation.ok'),
       size: ButtonSize.Lg,
       onPress: templatedValues.onConfirm ?? onConfirm,
-    },
-  ];
+    });
+  }
 
-  if (!templatedValues.onlyConfirmButton) {
+  if (!templatedValues.hideCancelButton) {
     buttons.push({
       variant: ButtonVariants.Secondary,
       label:
@@ -83,12 +85,14 @@ const TemplateConfirmation = ({
   return (
     <View style={styles.root}>
       <TemplateRenderer sections={templatedValues.content} />
-      <View style={styles.actionContainer}>
-        <BottomSheetFooter
-          buttonsAlignment={ButtonsAlignment.Horizontal}
-          buttonPropsArray={buttons}
-        />
-      </View>
+      {buttons.length > 0 && (
+        <View style={styles.actionContainer}>
+          <BottomSheetFooter
+            buttonsAlignment={ButtonsAlignment.Horizontal}
+            buttonPropsArray={buttons}
+          />
+        </View>
+      )}
     </View>
   );
 };

app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/ApprovalResult.ts

@@ -114,7 +114,7 @@ function getValues(
     ],
     confirmText: strings('approval_result.ok'),
     onConfirm: actions.onConfirm,
-    onlyConfirmButton: true,
+    hideCancelButton: true,
   };
 }
 

app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/index.ts

@@ -10,9 +10,10 @@ export interface ConfirmationTemplateValues {
   cancelText?: string;
   confirmText?: string;
   content: TemplateRendererInput;
+  hideCancelButton?: boolean;
+  hideSubmitButton?: boolean;
   onCancel?: () => void;
   onConfirm?: (opts?: AcceptOptions) => void;
-  onlyConfirmButton?: boolean;
   loadingText?: string;
 }
 
@@ -37,9 +38,10 @@ const ALLOWED_TEMPLATE_KEYS: string[] = [
   'cancelText',
   'confirmText',
   'content',
+  'hideCancelButton',
+  'hideSubmitButton',
   'onCancel',
   'onConfirm',
-  'onlyConfirmButton',
   'loadingText',
 ];
 

app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TemplateConfirmation renders content and actions 1`] = `
+<View
+  collapsable={false}
+  forwardedRef={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "borderTopLeftRadius": 20,
+      "borderTopRightRadius": 20,
+      "minHeight": 200,
+      "paddingBottom": 20,
+      "paddingTop": 24,
+    }
+  }
+>
+  <Text
+    accessibilityRole="text"
+    style={
+      Object {
+        "color": "#24272A",
+        "fontFamily": "Euclid Circular B",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+      }
+    }
+  >
+    CONTENT_MOCK
+  </Text>
+  <View
+    collapsable={false}
+    forwardedRef={[Function]}
+    style={
+      Object {
+        "flex": 0,
+        "justifyContent": "center",
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "flexDirection": "row",
+          "paddingHorizontal": 8,
+          "paddingVertical": 4,
+        }
+      }
+      testID="bottomsheetfooter"
+    >
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessible={true}
+        activeOpacity={1}
+        onPress={[MockFunction]}
+        onPressIn={[Function]}
+        onPressOut={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "backgroundColor": "#0376C9",
+            "borderRadius": 24,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 48,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+          }
+        }
+        testID="bottomsheetfooter-button"
+        variant="Primary"
+      >
+        <Text
+          accessibilityRole="text"
+          style={
+            Object {
+              "color": "#FFFFFF",
+              "fontFamily": "Euclid Circular B",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 22,
+            }
+          }
+        >
+          CONFIRM_TEXT_MOCK
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessible={true}
+        activeOpacity={1}
+        onPress={[MockFunction]}
+        onPressIn={[Function]}
+        onPressOut={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "backgroundColor": "transparent",
+            "borderColor": "#0376C9",
+            "borderRadius": 24,
+            "borderWidth": 1,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 48,
+            "justifyContent": "center",
+            "marginLeft": 16,
+            "marginTop": 0,
+            "paddingHorizontal": 16,
+          }
+        }
+        testID="bottomsheetfooter-button-subsequent"
+        variant="Secondary"
+      >
+        <Text
+          accessibilityRole="text"
+          style={
+            Object {
+              "color": "#0376C9",
+              "fontFamily": "Euclid Circular B",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 22,
+            }
+          }
+        >
+          CANCEL_TEXT_MOCK
+        </Text>
+      </TouchableOpacity>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`TemplateConfirmation renders content without actions 1`] = `
+<View
+  collapsable={false}
+  forwardedRef={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "borderTopLeftRadius": 20,
+      "borderTopRightRadius": 20,
+      "minHeight": 200,
+      "paddingBottom": 20,
+      "paddingTop": 24,
+    }
+  }
+>
+  <Text
+    accessibilityRole="text"
+    style={
+      Object {
+        "color": "#24272A",
+        "fontFamily": "Euclid Circular B",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+      }
+    }
+  >
+    CONTENT_MOCK
+  </Text>
+</View>
+`;