@jobber/components-native 0.40.0 → 0.41.0

package/src/FormatFile/FormatFile.test.tsx

@@ -0,0 +1,333 @@
+import React from "react";
+import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
+import { Host } from "react-native-portalize";
+import { Alert } from "react-native";
+import { useIntl } from "react-intl";
+import { File, FormatFile } from ".";
+import {
+  FILE_MOCK_FILE,
+  FILE_MOCK_IMAGE,
+  FILE_MOCK_PDF,
+  FILE_MOCK_VIDEO,
+  FILE_UPLOAD_MOCK_FILE,
+  FILE_UPLOAD_MOCK_IMAGE,
+  FILE_UPLOAD_MOCK_PDF,
+} from "./components/_mocks/mockFiles";
+import { messages } from "./components/FormatFileBottomSheet/messages";
+import { messages as formatFileMessages } from "./messages";
+import { BottomSheetOptionsSuffix } from "./components/FormatFileBottomSheet";
+import { FileUpload, StatusCode } from "./types";
+import { tokens } from "../utils/design";
+
+let Platform: { OS: "ios" | "android" };
+
+const onRemove = jest.fn();
+const mockOnPreview = jest.fn();
+const mockCreateThumbnail = jest.fn(async () => ({
+  thumbnail: "thumbnail",
+  error: false,
+}));
+
+beforeEach(() => {
+  Platform = require("react-native").Platform;
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+const renderFormatFile = (
+  file: FileUpload | File,
+  bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix,
+  showFileTypeIndicator?: boolean,
+) => {
+  return render(
+    <Host>
+      <FormatFile
+        file={file}
+        accessibilityLabel="Custom Label"
+        accessibilityHint="Custom Hint Text"
+        onTap={() => Alert.alert("alert")}
+        onRemove={onRemove}
+        bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
+        showFileTypeIndicator={showFileTypeIndicator}
+        onPreviewPress={mockOnPreview}
+        createThumbnail={mockCreateThumbnail}
+      />
+    </Host>,
+  );
+};
+
+function basicRenderTestWithValue() {
+  const progressBarAnimationTime = 500;
+
+  it.each([
+    [
+      "file",
+      FILE_UPLOAD_MOCK_FILE({ progress: 1, status: StatusCode.Completed }),
+    ],
+    [
+      "image",
+      FILE_UPLOAD_MOCK_IMAGE({ progress: 1, status: StatusCode.Completed }),
+    ],
+  ])(
+    "renders a %s with custom label and hint",
+    (bottomSheetOptionsSuffix, file) => {
+      const { getByLabelText, getByHintText } = renderFormatFile(
+        file,
+        bottomSheetOptionsSuffix as BottomSheetOptionsSuffix,
+      );
+      expect(getByLabelText("Custom Label")).toBeDefined();
+      expect(getByHintText("Custom Hint Text")).toBeDefined();
+    },
+  );
+
+  describe.each([
+    ["file", FILE_UPLOAD_MOCK_FILE({ progress: 0.9 })],
+    ["image", FILE_UPLOAD_MOCK_IMAGE({ progress: 0.9 })],
+  ])("when a local %s is being uploaded", (testIdType, file) => {
+    const testId = `test-${testIdType}`;
+    it("renders ProgressBar state when upload status is not completed", () => {
+      const { getByTestId } = renderFormatFile(file);
+      expect(getByTestId("format-file-progress-bar")).toBeDefined();
+    });
+
+    it("renders a helpful accessibility label", () => {
+      const tree = renderFormatFile(file);
+      expect(
+        tree.getByLabelText(
+          formatFileMessages.inProgressAccessibilityLabel.defaultMessage,
+        ),
+      ).toBeDefined();
+    });
+
+    it("renders an overlay on the image when upload status is not completed", () => {
+      const { getByTestId } = renderFormatFile(file);
+      const progressBarContainer = getByTestId(
+        "format-file-progress-bar-container",
+      );
+      const overlayStyles = progressBarContainer.props.style;
+
+      // The container needs to have a height and color in order to show the overlay
+      expect(overlayStyles).toEqual(
+        expect.arrayContaining([expect.objectContaining({ height: "100%" })]),
+      );
+      expect(overlayStyles).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: tokens["color-overlay--dimmed"],
+          }),
+        ]),
+      );
+    });
+
+    it("renders ProgressBar state advancing with the upload percentage", () => {
+      jest.useFakeTimers();
+      const { getByTestId } = renderFormatFile(file);
+      jest.advanceTimersByTime(progressBarAnimationTime);
+      const formatFileInnerProgressBar = getByTestId(
+        "format-file-inner-progress-bar",
+      );
+      const innerProgressBarWidth = parseInt(
+        formatFileInnerProgressBar.props.style.width,
+        10,
+      );
+      expect(innerProgressBarWidth).toBeGreaterThan(20);
+    });
+
+    it("shows an alert for on tap", () => {
+      const { getByTestId } = renderFormatFile(file);
+      const spy = jest.spyOn(Alert, "alert");
+      fireEvent.press(getByTestId(testId));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe.each([
+    [
+      "file",
+      {
+        ...FILE_UPLOAD_MOCK_FILE({ progress: 0.9, status: StatusCode.Failed }),
+        status: StatusCode.Failed,
+      },
+    ],
+    [
+      "image",
+      {
+        ...FILE_UPLOAD_MOCK_IMAGE({ progress: 0.9, status: StatusCode.Failed }),
+        status: StatusCode.Failed,
+      },
+    ],
+  ])("when a local %s upload has failed", (testIdType, file) => {
+    it("renders an error icon", () => {
+      const tree = renderFormatFile(file);
+      expect(tree.getByTestId("format-file-error-icon")).toBeDefined();
+    });
+
+    it("renders a helpful accessibility label", () => {
+      const tree = renderFormatFile(file);
+      expect(
+        tree.getByLabelText(
+          formatFileMessages.errorAccessibilityLabel.defaultMessage,
+        ),
+      ).toBeDefined();
+    });
+
+    it("does not render an overlay", () => {
+      const tree = renderFormatFile(file);
+      expect(
+        tree.queryByTestId("format-file-progress-bar-container"),
+      ).toBeNull();
+    });
+
+    it("shows an alert for on tap", () => {
+      const testId = `test-${testIdType}`;
+      const tree = renderFormatFile(file);
+      const spy = jest.spyOn(Alert, "alert");
+      fireEvent.press(tree.getByTestId(testId));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe.each([
+    [
+      "local file",
+      "test-file",
+      FILE_UPLOAD_MOCK_FILE({ progress: 1, status: StatusCode.Completed }),
+    ],
+    [
+      "local image",
+      "test-image",
+      FILE_UPLOAD_MOCK_IMAGE({ progress: 1, status: StatusCode.Completed }),
+    ],
+    ["external file", "test-file", FILE_MOCK_FILE],
+    ["external image", "test-image", FILE_MOCK_IMAGE],
+  ])(
+    "when a uploaded %s is being used",
+    (bottomSheetOptionsSuffix, testId, file) => {
+      let tree: RenderAPI;
+      const { formatMessage } = useIntl();
+      const removeLabel = formatMessage(messages.removeButton, {
+        bottomSheetOptionsSuffix: bottomSheetOptionsSuffix,
+      });
+
+      beforeEach(() => {
+        jest.clearAllMocks();
+        jest.useFakeTimers();
+        tree = renderFormatFile(
+          file,
+          bottomSheetOptionsSuffix as BottomSheetOptionsSuffix,
+        );
+        jest.advanceTimersByTime(progressBarAnimationTime);
+      });
+
+      it("shows a BottomSheet with a remove option when tapped", () => {
+        const { getByTestId, getByLabelText } = tree;
+        fireEvent.press(getByTestId(testId));
+        expect(getByLabelText(removeLabel)).toBeDefined();
+      });
+
+      describe("when the BottomSheet remove option is tapped", () => {
+        it("calls the onRemove action", () => {
+          const { getByTestId, getByLabelText } = tree;
+          fireEvent.press(getByTestId(testId));
+          fireEvent.press(getByLabelText(removeLabel));
+          expect(onRemove).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      it("creates a thumbnail when a media file is used", () => {
+        const expectedCalls = testId.includes("image") ? 2 : 0;
+        expect(mockCreateThumbnail).toHaveBeenCalledTimes(expectedCalls);
+      });
+    },
+  );
+
+  describe("when the preview option is tapped", () => {
+    const { formatMessage } = useIntl();
+
+    it("calls onPreview with a valid image", () => {
+      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
+        bottomSheetOptionsSuffix: "image",
+      });
+      const { getByTestId, getByLabelText } = renderFormatFile(
+        FILE_UPLOAD_MOCK_IMAGE({ progress: 1, status: StatusCode.Completed }),
+        "image",
+      );
+      fireEvent.press(getByTestId("test-image"));
+      fireEvent.press(getByLabelText(previewLabel));
+      expect(mockOnPreview).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onPreview with a valid pdf file", () => {
+      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
+        bottomSheetOptionsSuffix: "file",
+      });
+      const { getByTestId, getByLabelText } = renderFormatFile(
+        FILE_UPLOAD_MOCK_PDF({ progress: 1, status: StatusCode.Completed }),
+        "file",
+      );
+      fireEvent.press(getByTestId("test-file"));
+      fireEvent.press(getByLabelText(previewLabel));
+      expect(mockOnPreview).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onPreview with a valid external PDF file", () => {
+      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
+        bottomSheetOptionsSuffix: "file",
+      });
+      const { getByTestId, getByLabelText } = renderFormatFile(
+        FILE_MOCK_PDF,
+        "file",
+      );
+      fireEvent.press(getByTestId("test-file"));
+      fireEvent.press(getByLabelText(previewLabel));
+      expect(mockOnPreview).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not show the preview option with an unaccepted file", () => {
+      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
+        bottomSheetOptionsSuffix: "file",
+      });
+      const { getByTestId, queryByLabelText } = renderFormatFile(
+        FILE_UPLOAD_MOCK_FILE({ progress: 1, status: StatusCode.Completed }),
+        "file",
+      );
+
+      fireEvent.press(getByTestId("test-file"));
+      expect(queryByLabelText(previewLabel)).toBeNull();
+    });
+  });
+
+  describe("when an uploaded video is being viewed", () => {
+    it("shows the play icon if the file type indicator is not specified", () => {
+      const { getByTestId } = renderFormatFile(FILE_MOCK_VIDEO, "video");
+      expect(getByTestId("video")).toBeDefined();
+    });
+
+    it("does not show the play icon if the file type indicator is set to false", () => {
+      const { queryByTestId } = renderFormatFile(
+        FILE_MOCK_VIDEO,
+        "video",
+        false,
+      );
+      expect(queryByTestId("video")).toBeNull();
+    });
+  });
+}
+
+describe("ios", () => {
+  beforeEach(() => {
+    Platform.OS = "ios";
+  });
+
+  basicRenderTestWithValue();
+});
+
+describe("android", () => {
+  beforeEach(() => {
+    Platform.OS = "android";
+  });
+
+  basicRenderTestWithValue();
+});

package/src/FormatFile/FormatFile.tsx

@@ -0,0 +1,300 @@
+import React, { createRef, useCallback, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { useIntl } from "react-intl";
+import { messages } from "./messages";
+import { styles } from "./FormatFile.style";
+import { MediaView } from "./components/MediaView";
+import {
+  BottomSheetOptionsSuffix,
+  FormatFileBottomSheet,
+} from "./components/FormatFileBottomSheet";
+import { FileView } from "./components/FileView";
+import { acceptedExtensions, videoExtensions } from "./constants";
+import {
+  CreateThumbnail,
+  File,
+  FileUpload,
+  FormattedFile,
+  StatusCode,
+} from "./types";
+import { AtlantisFormatFileContext } from "./context/FormatFileContext";
+import { createUseCreateThumbnail } from "./utils/createUseCreateThumbnail";
+import { BottomSheetRef } from "../BottomSheet/BottomSheet";
+
+export interface FormatFileProps<T> {
+  /**
+   * File upload details object. Can be a File or a FileUpload
+   */
+  file: T;
+
+  /**
+   * Accessibility label
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Accessibility hint
+   */
+  readonly accessibilityHint?: string;
+  /**
+   * A function which handles the onTap event.
+   */
+  onTap?: (file: T) => void;
+  /**
+   * A function to be called on "Remove" Bottom Sheet Option press
+   */
+  onRemove?: () => void;
+
+  /**
+   * Handler for the "Preview" Bottom Sheet Option press
+   */
+  onPreviewPress?: (formattedFile: FormattedFile) => void;
+  /**
+   * A file type to show at Bottom Sheet options
+   */
+  bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
+
+  /**
+   * Uses a grid layout when multi-file upload is supported
+   */
+  styleInGrid?: boolean;
+
+  /**
+   * A reference to the element in the rendered output
+   */
+  readonly testID?: string;
+
+  /**
+   * Set false to hide the filetype icon
+   */
+  readonly showFileTypeIndicator?: boolean;
+
+  readonly createThumbnail?: CreateThumbnail;
+}
+
+type FormatFileInternalProps = Omit<
+  FormatFileProps<File | FileUpload>,
+  "file" | "onTap"
+> & {
+  file: FormattedFile;
+  onTap: () => void;
+};
+
+interface FormatFileContentProps {
+  accessibilityLabel?: string;
+  file: FormattedFile;
+  showOverlay: boolean;
+  styleInGrid: boolean;
+  onUploadComplete: () => void;
+  isMedia: boolean;
+}
+
+function FormatFileContent({
+  accessibilityLabel,
+  file,
+  showOverlay,
+  styleInGrid,
+  onUploadComplete,
+  isMedia,
+}: FormatFileContentProps): JSX.Element {
+  return (
+    <View
+      style={[
+        styles.thumbnailContainer,
+        styleInGrid && styles.thumbnailContainerGrid,
+      ]}
+    >
+      {isMedia ? (
+        <MediaView
+          accessibilityLabel={accessibilityLabel}
+          file={file}
+          showOverlay={showOverlay}
+          showError={file.error}
+          styleInGrid={styleInGrid}
+          onUploadComplete={onUploadComplete}
+        />
+      ) : (
+        <FileView
+          accessibilityLabel={accessibilityLabel}
+          file={file}
+          showOverlay={showOverlay}
+          showError={file.error}
+          styleInGrid={styleInGrid}
+          onUploadComplete={onUploadComplete}
+        />
+      )}
+    </View>
+  );
+}
+
+const FormatFileInternalMemoized = React.memo(FormatFileInternal);
+
+function isMediaFile(fileType: string): boolean {
+  return fileType.includes("image") || fileType.includes("video");
+}
+
+function isVideo(fileName: string): boolean {
+  const extension = fileName.substring(fileName.lastIndexOf(".") + 1);
+
+  return videoExtensions.some(({ type }) => type === extension.toLowerCase());
+}
+
+function getContentType(fileName = "", fileType = "unknown"): string {
+  if (isVideo(fileName)) {
+    return "video";
+  }
+
+  return fileType;
+}
+
+function isAcceptedExtension(file: FormattedFile): boolean {
+  return acceptedExtensions.some(extension =>
+    // type property may return undefined on M1 Systems running iOS Simulator
+    (file.type || "").includes(extension.name),
+  );
+}
+
+function parseFile(
+  file: File | FileUpload,
+  showFileTypeIndicator: boolean,
+): FormattedFile {
+  let formattedFile: FormattedFile;
+
+  if ("progress" in file) {
+    formattedFile = {
+      source: file.sourcePath,
+      name: file.name,
+      size: file.size,
+      external: false,
+      progress: file.progress,
+      status: file.status,
+      error: file.status === StatusCode.Failed,
+      type: file.type || file.key,
+      isMedia: false,
+      showPreview: false,
+      showFileTypeIndicator: showFileTypeIndicator,
+    };
+  } else {
+    formattedFile = {
+      source: file.url,
+      thumbnailUrl: file.thumbnailUrl,
+      name: file.fileName,
+      size: file.fileSize,
+      external: true,
+      progress: 1,
+      status: StatusCode.Completed,
+      error: false,
+      type: getContentType(file.fileName, file.contentType),
+      isMedia: false,
+      showPreview: false,
+      showFileTypeIndicator: showFileTypeIndicator,
+    };
+  }
+
+  formattedFile.isMedia = isMediaFile(formattedFile.type || "");
+  formattedFile.showPreview =
+    formattedFile.isMedia || isAcceptedExtension(formattedFile);
+
+  return formattedFile;
+}
+
+export function FormatFile<T extends File | FileUpload>({
+  file,
+  accessibilityLabel,
+  accessibilityHint,
+  onTap,
+  onRemove,
+  bottomSheetOptionsSuffix,
+  styleInGrid = false,
+  testID,
+  showFileTypeIndicator = true,
+  createThumbnail,
+  onPreviewPress,
+}: FormatFileProps<T>): JSX.Element {
+  const onTapModified = onTap ? () => onTap(file) : () => undefined;
+
+  const formattedFile = parseFile(file, showFileTypeIndicator);
+
+  return (
+    <FormatFileInternalMemoized
+      file={formattedFile}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      onTap={onTapModified}
+      onRemove={onRemove}
+      bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
+      styleInGrid={styleInGrid}
+      testID={testID}
+      createThumbnail={createThumbnail}
+      onPreviewPress={onPreviewPress}
+    />
+  );
+}
+
+function FormatFileInternal({
+  file,
+  accessibilityLabel,
+  accessibilityHint,
+  onTap,
+  onRemove,
+  bottomSheetOptionsSuffix,
+  styleInGrid = false,
+  onPreviewPress,
+  testID,
+  createThumbnail: createThumbnailProp,
+}: FormatFileInternalProps): JSX.Element {
+  const [showOverlay, setShowOverlay] = useState<boolean>(
+    file.status !== StatusCode.Completed,
+  );
+
+  const { formatMessage } = useIntl();
+  const bottomSheetRef = createRef<BottomSheetRef>();
+
+  const handlePreviewPress = useCallback(() => {
+    onPreviewPress?.(file);
+  }, [file, onPreviewPress]);
+  const createThumbnail = createThumbnailProp
+    ? createThumbnailProp
+    : async () => ({ error: false, thumbnail: "" });
+  const { useCreateThumbnail } = createUseCreateThumbnail(createThumbnail);
+
+  return (
+    <AtlantisFormatFileContext.Provider value={{ useCreateThumbnail }}>
+      <View>
+        <TouchableOpacity
+          accessibilityRole="imagebutton"
+          accessibilityHint={
+            accessibilityHint ??
+            formatMessage(messages.defaultAccessibilityHint)
+          }
+          onPress={handleOnPress}
+          testID={testID}
+        >
+          <FormatFileContent
+            accessibilityLabel={accessibilityLabel}
+            file={file}
+            onUploadComplete={() => setShowOverlay(false)}
+            isMedia={!!file.isMedia}
+            styleInGrid={styleInGrid}
+            showOverlay={showOverlay}
+          />
+        </TouchableOpacity>
+        <FormatFileBottomSheet
+          bottomSheetRef={bottomSheetRef}
+          onRemovePress={onRemove}
+          bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
+          onPreviewPress={file.showPreview ? handlePreviewPress : undefined}
+        />
+      </View>
+    </AtlantisFormatFileContext.Provider>
+  );
+
+  function handleOnPress() {
+    if (showOverlay || !onRemove) {
+      onTap();
+      return;
+    }
+
+    bottomSheetRef.current?.open();
+  }
+}

package/src/FormatFile/components/ErrorIcon/ErrorIcon.style.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  circle: {
+    width: tokens["space-large"],
+    height: tokens["space-large"],
+    borderRadius: tokens["radius-circle"],
+    backgroundColor: tokens["color-surface"],
+  },
+});

package/src/FormatFile/components/ErrorIcon/ErrorIcon.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ErrorIcon.style";
+import { Icon } from "../../../Icon";
+
+export function ErrorIcon(): JSX.Element {
+  return (
+    <View testID="format-file-error-icon" style={styles.circle}>
+      <Icon name="alert" color="critical" />
+    </View>
+  );
+}

package/src/FormatFile/components/ErrorIcon/index.ts

@@ -0,0 +1 @@
+export { ErrorIcon } from "./ErrorIcon";