@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx

@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import {
+  DefaultContent,
+  DefaultFooter,
+  DefaultTextFormFields,
+  DefaultHeader,
+} from '../../common';
+import { useFieldValues } from '../../hooks';
+
+import { DefaultConfirmSignUpComponent } from '../types';
+
+const COMPONENT_NAME = 'ConfirmSignUp';
+
+const {
+  getDeliveryMethodText,
+  getDeliveryMessageText,
+  getConfirmingText,
+  getConfirmText,
+  getResendCodeText,
+} = authenticatorTextUtil;
+
+const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
+  codeDeliveryDetails,
+  fields,
+  handleBlur,
+  handleChange,
+  handleSubmit,
+  isPending,
+  resendCode,
+  ...rest
+}) => {
+  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    componentName: COMPONENT_NAME,
+    fields,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+  });
+
+  const headerText = getDeliveryMethodText(codeDeliveryDetails);
+  const bodyText = getDeliveryMessageText(codeDeliveryDetails);
+  const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
+  const secondaryButtonText = getResendCodeText();
+
+  const buttons = useMemo(
+    () => ({
+      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      secondary: { children: secondaryButtonText, onPress: resendCode },
+    }),
+    [handleFormSubmit, primaryButtonText, resendCode, secondaryButtonText]
+  );
+
+  return (
+    <DefaultContent
+      {...rest}
+      body={bodyText}
+      buttons={buttons}
+      headerText={headerText}
+      fields={fieldsWithHandlers}
+      isPending={isPending}
+    />
+  );
+};
+
+ConfirmSignUp.FormFields = DefaultTextFormFields;
+ConfirmSignUp.Footer = DefaultFooter;
+ConfirmSignUp.Header = DefaultHeader;
+
+ConfirmSignUp.displayName = COMPONENT_NAME;
+export default ConfirmSignUp;

package/src/Authenticator/Defaults/ConfirmSignUp/__tests__/ConfirmSignUp.spec.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { ConfirmSignUp } from '..';
+
+const props = {
+  codeDeliveryDetails: {
+    AttributeName: 'email',
+    DeliveryMedium: 'EMAIL',
+    Destination: 'a***@e***.com',
+  },
+  fields: [],
+  Footer: ConfirmSignUp.Footer,
+  FormFields: ConfirmSignUp.FormFields,
+  handleBlur: jest.fn(),
+  handleChange: jest.fn(),
+  handleSubmit: jest.fn(),
+  Header: ConfirmSignUp.Header,
+  isPending: false,
+  resendCode: jest.fn(),
+  socialProviders: undefined,
+};
+
+const { getConfirmingText, getDeliveryMethodText, getResendCodeText } =
+  authenticatorTextUtil;
+
+describe('ConfirmSignUp', () => {
+  it('renders as expected', () => {
+    const { toJSON } = render(<ConfirmSignUp {...props} />);
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getDeliveryMethodText(props.codeDeliveryDetails)).toBeDefined();
+  });
+
+  it('resends the code', () => {
+    const { getByText } = render(<ConfirmSignUp {...props} />);
+    const button = getByText(getResendCodeText());
+
+    fireEvent.press(button);
+    expect(props.resendCode).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders as expected with an error', () => {
+    const error = 'An error!';
+    const { getByRole, getByText, toJSON } = render(
+      <ConfirmSignUp {...props} error={error} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByRole('alert')).toBeDefined();
+    expect(getByText(error)).toBeDefined();
+  });
+
+  it('renders as expected when isPending is true', () => {
+    const { toJSON, getByText } = render(
+      <ConfirmSignUp {...props} isPending />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByText(getConfirmingText())).toBeDefined();
+  });
+});

package/src/Authenticator/Defaults/ConfirmSignUp/__tests__/__snapshots__/ConfirmSignUp.spec.tsx.snap

@@ -0,0 +1,528 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmSignUp renders as expected 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    We Emailed You
+  </Text>,
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 16,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Your code is on the way. To log in, enter the code we emailed to a***@e***.com. It may take a minute to arrive.
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  />,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Confirm
+    </Text>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "borderColor": "hsl(210, 8%, 55%)",
+          "borderWidth": 1,
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Resend Code
+    </Text>
+  </View>,
+]
+`;
+
+exports[`ConfirmSignUp renders as expected when isPending is true 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    We Emailed You
+  </Text>,
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 16,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Your code is on the way. To log in, enter the code we emailed to a***@e***.com. It may take a minute to arrive.
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  />,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Confirming
+    </Text>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "borderColor": "hsl(210, 8%, 55%)",
+          "borderWidth": 1,
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Resend Code
+    </Text>
+  </View>,
+]
+`;
+
+exports[`ConfirmSignUp renders as expected with an error 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    We Emailed You
+  </Text>,
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 16,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Your code is on the way. To log in, enter the code we emailed to a***@e***.com. It may take a minute to arrive.
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  />,
+  <View
+    accessibilityRole="alert"
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "hsl(0, 75%, 85%)",
+          "flexDirection": "row",
+          "paddingHorizontal": 8,
+          "paddingVertical": 32,
+        },
+        Object {
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Image
+      accessibilityRole="image"
+      source={
+        Object {
+          "testUri": "../../../src/assets/icons/error.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 20,
+            "resizeMode": "contain",
+            "tintColor": undefined,
+            "width": 20,
+          },
+          Object {
+            "margin": 8,
+          },
+        ]
+      }
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 100%, 20%)",
+            "flex": 1,
+            "paddingHorizontal": 8,
+          },
+          Object {},
+        ]
+      }
+    >
+      An error!
+    </Text>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Confirm
+    </Text>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "borderColor": "hsl(210, 8%, 55%)",
+          "borderWidth": 1,
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Resend Code
+    </Text>
+  </View>,
+]
+`;

package/src/Authenticator/Defaults/ConfirmSignUp/index.ts

@@ -0,0 +1 @@
+export { default as ConfirmSignUp } from './ConfirmSignUp';