@jobber/components-native 0.40.1 → 0.41.0

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

@@ -0,0 +1,65 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  overlay: {
+    backgroundColor: tokens["color-overlay--dimmed"],
+  },
+  overlayError: {
+    backgroundColor: tokens["color-overlay--dimmed"],
+    borderColor: tokens["color-critical"],
+    borderWidth: tokens["border-base"],
+  },
+  iconCenter: {
+    marginBottom: tokens["space-large"],
+  },
+  fileBackground: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+  },
+  fileBackgroundGrid: {
+    height: "100%",
+  },
+  fileBackgroundFlat: {
+    justifyContent: "center",
+    height: tokens["space-extravagant"],
+  },
+  fileIconGrid: {
+    top: tokens["space-small"],
+  },
+  fileIconFlat: {
+    top: tokens["space-smaller"],
+  },
+  fileNameError: {
+    alignItems: "center",
+    borderTopColor: tokens["color-border"],
+    borderTopWidth: tokens["space-minuscule"],
+    width: "100%",
+    marginTop: tokens["space-base"],
+  },
+  fileName: {
+    alignItems: "center",
+    borderTopColor: tokens["color-border"],
+    borderTopWidth: tokens["space-minuscule"],
+    width: "100%",
+  },
+  fileNameGrid: {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  fileNameFlat: {
+    top: tokens["space-small"],
+  },
+  fileOverlay: {
+    position: "absolute",
+    justifyContent: "center",
+    right: 0,
+    bottom: 0,
+    left: 0,
+    height: "100%",
+    paddingHorizontal: tokens["space-small"],
+  },
+});

package/src/FormatFile/components/FileView/FileView.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { IconNames } from "@jobber/design";
+import { styles } from "./FileView.style";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+import { FormattedFile, StatusCode } from "../../types";
+import { computeA11yLabel } from "../../utils";
+import { ProgressBar } from "../ProgressBar";
+import { ErrorIcon } from "../ErrorIcon";
+
+interface FileViewProps {
+  accessibilityLabel?: string;
+  showOverlay: boolean;
+  showError: boolean;
+  file: FormattedFile;
+  styleInGrid: boolean;
+  onUploadComplete: () => void;
+}
+
+export function FileView({
+  accessibilityLabel,
+  styleInGrid,
+  file,
+  showOverlay,
+  showError,
+  onUploadComplete,
+}: FileViewProps): JSX.Element {
+  const { formatMessage } = useIntl();
+  const a11yLabel = computeA11yLabel({
+    accessibilityLabel,
+    showOverlay,
+    showError,
+    formatMessage,
+  });
+
+  const freezeProgressBar =
+    file.status !== StatusCode.Completed && file.progress >= 0.9;
+  return (
+    <View
+      style={[
+        styles.fileBackground,
+        styleInGrid ? styles.fileBackgroundGrid : styles.fileBackgroundFlat,
+      ]}
+      accessible={true}
+      accessibilityLabel={a11yLabel}
+    >
+      <View
+        style={[
+          styles.fileBackground,
+          styleInGrid ? styles.fileIconGrid : styles.fileIconFlat,
+        ]}
+        testID={"test-file"}
+      >
+        {(styleInGrid || !showError) && file.showFileTypeIndicator && (
+          <Icon
+            size={"large"}
+            name={mapFileTypeToIconName({
+              fileName: file.name,
+              fileType: file.type,
+            })}
+          />
+        )}
+      </View>
+      <View
+        style={[
+          showError && styleInGrid ? styles.fileNameError : styles.fileName,
+          styleInGrid ? styles.fileNameGrid : styles.fileNameFlat,
+        ]}
+      >
+        <Text level="textSupporting" variation="subdued" maxLines="single">
+          {file.name}
+        </Text>
+      </View>
+      {!showError && showOverlay && (
+        <View
+          style={[styles.fileBackground, styles.overlay, styles.fileOverlay]}
+          testID="format-file-progress-bar-container"
+        >
+          <ProgressBar
+            status={file.status}
+            progress={freezeProgressBar ? 0.9 : file.progress}
+            onComplete={onUploadComplete}
+          />
+        </View>
+      )}
+      {showError && (
+        <View
+          style={[
+            styles.fileBackground,
+            styles.overlayError,
+            styles.fileOverlay,
+          ]}
+          testID="format-file-error-container"
+        >
+          <View style={!styleInGrid ? styles.iconCenter : undefined}>
+            <ErrorIcon />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+interface FileTypeToIconNameParams {
+  fileName?: string;
+  fileType?: string;
+}
+function mapFileTypeToIconName({
+  fileName,
+  fileType,
+}: FileTypeToIconNameParams): IconNames {
+  if (!fileName && !fileType) {
+    return "alert";
+  }
+  if (fileType?.includes("pdf") || fileName?.match(/~*.pdf$/)) {
+    return "pdf";
+  } else if (
+    fileType?.includes("ms-word") ||
+    fileName?.match(/~*.doc$|docx$/)
+  ) {
+    return "word";
+  } else if (
+    fileType?.includes("ms-excel") ||
+    fileName?.match(/~*.xls$|xlsx$/)
+  ) {
+    return "excel";
+  } else if (fileType?.includes("video") || fileName?.match(/~*.mp4$|mp4$/)) {
+    return "video";
+  } else {
+    return "file";
+  }
+}

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

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

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.test.tsx

@@ -0,0 +1,108 @@
+import React, { createRef } from "react";
+import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
+import { Host } from "react-native-portalize";
+import { useIntl } from "react-intl";
+import { act } from "react-test-renderer";
+import {
+  BottomSheetOptionsSuffix,
+  FormatFileBottomSheet,
+} from "./FormatFileBottomSheet";
+import { messages } from "./messages";
+import { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
+
+let Platform: { OS: "ios" | "android" };
+const onRemove = jest.fn();
+const onPreview = jest.fn();
+const bottomSheetRef = createRef<BottomSheetRef>();
+
+beforeEach(() => {
+  Platform = require("react-native").Platform;
+});
+
+const renderBottomSheet = (
+  bottomSheetOptionsSuffix: BottomSheetOptionsSuffix,
+) => {
+  return render(
+    <Host>
+      <FormatFileBottomSheet
+        onPreviewPress={onPreview}
+        onRemovePress={onRemove}
+        bottomSheetRef={bottomSheetRef}
+        bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
+      />
+    </Host>,
+  );
+};
+
+const basicRenderTestWithValue = () => {
+  describe.each([["image"], ["receipt"], ["file"], ["video"]])(
+    "when FormatFileBottomSheet for %s is opened",
+    bottomSheetOptionsSuffix => {
+      const { formatMessage } = useIntl();
+      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
+        bottomSheetOptionsSuffix,
+      });
+      const removeLabel = formatMessage(messages.removeButton, {
+        bottomSheetOptionsSuffix,
+      });
+      let tree: RenderAPI;
+
+      beforeEach(() => {
+        tree = renderBottomSheet(
+          bottomSheetOptionsSuffix as BottomSheetOptionsSuffix,
+        );
+        act(() => {
+          bottomSheetRef.current?.open();
+        });
+      });
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
+
+      describe("onPreviewPress", () => {
+        it("renders the preview option", () => {
+          const { getByLabelText } = tree;
+
+          expect(getByLabelText(previewLabel)).toBeDefined();
+        });
+
+        it("is called when pressed", () => {
+          const { getByLabelText } = tree;
+          fireEvent.press(getByLabelText(previewLabel));
+          expect(onPreview).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      describe("onRemovePress", () => {
+        it("renders the remove option", () => {
+          const { getByLabelText } = tree;
+
+          expect(getByLabelText(removeLabel)).toBeDefined();
+        });
+
+        it("is called when pressed", () => {
+          const { getByLabelText } = tree;
+          fireEvent.press(getByLabelText(removeLabel));
+
+          expect(onRemove).toHaveBeenCalledTimes(1);
+        });
+      });
+    },
+  );
+};
+
+describe("ios", () => {
+  beforeEach(() => {
+    Platform.OS = "ios";
+  });
+
+  basicRenderTestWithValue();
+});
+
+describe("android", () => {
+  beforeEach(() => {
+    Platform.OS = "android";
+  });
+
+  basicRenderTestWithValue();
+});

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.tsx

@@ -0,0 +1,56 @@
+import React, { RefObject } from "react";
+import { Portal } from "react-native-portalize";
+import { useIntl } from "react-intl";
+import { messages } from "./messages";
+import { BottomSheet, BottomSheetRef } from "../../../BottomSheet/BottomSheet";
+import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
+
+export type BottomSheetOptionsSuffix = "receipt" | "image" | "file" | "video";
+
+interface FormatFileBottomSheetProps {
+  bottomSheetRef: RefObject<BottomSheetRef>;
+  onPreviewPress?: () => void;
+  onRemovePress?: () => void;
+  bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
+}
+
+export const FormatFileBottomSheet = ({
+  bottomSheetRef,
+  onPreviewPress,
+  onRemovePress,
+  bottomSheetOptionsSuffix,
+}: FormatFileBottomSheetProps): JSX.Element => {
+  const { formatMessage } = useIntl();
+
+  const handlePress = (onPressAction: () => void) => {
+    onPressAction();
+
+    bottomSheetRef.current?.close();
+  };
+
+  return (
+    <Portal>
+      <BottomSheet ref={bottomSheetRef}>
+        {onPreviewPress ? (
+          <BottomSheetOption
+            icon={"eye"}
+            text={formatMessage(messages.lightBoxPreviewButton, {
+              bottomSheetOptionsSuffix,
+            })}
+            onPress={() => handlePress(onPreviewPress)}
+          />
+        ) : undefined}
+        {onRemovePress ? (
+          <BottomSheetOption
+            icon={"trash"}
+            destructive={true}
+            text={formatMessage(messages.removeButton, {
+              bottomSheetOptionsSuffix,
+            })}
+            onPress={() => handlePress(onRemovePress)}
+          />
+        ) : undefined}
+      </BottomSheet>
+    </Portal>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { FormatFileBottomSheet } from "./FormatFileBottomSheet";
+export type { BottomSheetOptionsSuffix } from "./FormatFileBottomSheet";

package/src/FormatFile/components/FormatFileBottomSheet/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  lightBoxPreviewButton: {
+    id: "lightBoxPreviewButton",
+    defaultMessage: "Preview {bottomSheetOptionsSuffix}",
+    description: "Label for button when preview the file",
+  },
+  removeButton: {
+    id: "removeButton",
+    defaultMessage: "Remove {bottomSheetOptionsSuffix}",
+    description: "Label for button when remove the file",
+  },
+});

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

@@ -0,0 +1,28 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  imageBackground: {
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  imageBackgroundFlat: {
+    aspectRatio: 375 / 150,
+  },
+  imageBackgroundGrid: {
+    height: "100%",
+  },
+  overlay: {
+    height: "100%",
+    backgroundColor: tokens["color-overlay--dimmed"],
+    paddingHorizontal: tokens["space-small"],
+  },
+  overlayError: {
+    height: "100%",
+    backgroundColor: tokens["color-overlay--dimmed"],
+    paddingHorizontal: tokens["space-small"],
+    borderColor: tokens["color-critical"],
+    borderWidth: tokens["border-base"],
+  },
+});

package/src/FormatFile/components/MediaView/MediaView.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import { ImageBackground, View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./MediaView.style";
+import { FormattedFile, StatusCode } from "../../types";
+import { computeA11yLabel } from "../../utils";
+import { ActivityIndicator } from "../../../ActivityIndicator";
+import { Icon } from "../../../Icon";
+import { ProgressBar } from "../ProgressBar";
+import { ErrorIcon } from "../ErrorIcon";
+import { useAtlantisFormatFileContext } from "../../context/FormatFileContext";
+
+interface MediaViewProps {
+  accessibilityLabel?: string;
+  showOverlay: boolean;
+  showError: boolean;
+  file: FormattedFile;
+  styleInGrid: boolean;
+  onUploadComplete: () => void;
+}
+
+export function MediaView({
+  accessibilityLabel,
+  showOverlay,
+  showError,
+  file,
+  styleInGrid,
+  onUploadComplete,
+}: MediaViewProps): JSX.Element {
+  const { formatMessage } = useIntl();
+  const { useCreateThumbnail } = useAtlantisFormatFileContext();
+  const { thumbnail, error } = useCreateThumbnail(file);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const a11yLabel = computeA11yLabel({
+    accessibilityLabel,
+    showOverlay,
+    showError,
+    formatMessage,
+  });
+
+  const hasError = showError || error;
+  const uri = thumbnail || file.thumbnailUrl || file.source;
+
+  return (
+    <View accessible={true} accessibilityLabel={a11yLabel}>
+      <ImageBackground
+        style={[
+          styles.imageBackground,
+          styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
+        ]}
+        resizeMode={styleInGrid ? "cover" : "contain"}
+        source={{ uri }}
+        testID={"test-image"}
+        onLoadStart={() => setIsLoading(true)}
+        onLoadEnd={() => setIsLoading(false)}
+      >
+        <Overlay
+          isLoading={isLoading}
+          showOverlay={showOverlay}
+          hasError={hasError}
+          file={file}
+          onUploadComplete={onUploadComplete}
+        />
+      </ImageBackground>
+    </View>
+  );
+}
+
+interface OverlayProps {
+  isLoading: boolean;
+  showOverlay: boolean;
+  hasError: boolean;
+  file: FormattedFile;
+  onUploadComplete: () => void;
+}
+
+function Overlay({
+  isLoading,
+  showOverlay,
+  hasError,
+  file,
+  onUploadComplete,
+}: OverlayProps) {
+  if (isLoading) return <ActivityIndicator />;
+
+  if (hasError) return <ErrorOverlay />;
+
+  if (showOverlay) {
+    return (
+      <ProgressOverlay
+        status={file.status}
+        progress={file.progress}
+        onUploadComplete={onUploadComplete}
+      />
+    );
+  }
+
+  if (isVideo(file.type) && file.showFileTypeIndicator) {
+    return <Icon name="video" color="white" />;
+  }
+
+  return <></>;
+}
+
+interface ProgressOverlayProps {
+  status: StatusCode;
+  progress: number;
+  onUploadComplete: () => void;
+}
+
+function ProgressOverlay({
+  status,
+  progress,
+  onUploadComplete,
+}: ProgressOverlayProps) {
+  const freezeProgressBar = status !== StatusCode.Completed && progress >= 0.9;
+  return (
+    <View
+      style={[styles.imageBackground, styles.overlay]}
+      testID="format-file-progress-bar-container"
+    >
+      <ProgressBar
+        status={status}
+        progress={freezeProgressBar ? 0.9 : progress}
+        onComplete={onUploadComplete}
+      />
+    </View>
+  );
+}
+
+function ErrorOverlay() {
+  return (
+    <View
+      style={[styles.imageBackground, styles.overlayError]}
+      testID="format-file-error-container"
+    >
+      <ErrorIcon />
+    </View>
+  );
+}
+
+function isVideo(fileType = ""): boolean {
+  return fileType.includes("video");
+}

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

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

package/src/FormatFile/components/ProgressBar/ProgressBar.style.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    height: 8,
+    borderRadius: tokens["radius-circle"],
+    overflow: "hidden",
+    backgroundColor: tokens["color-surface--background"],
+  },
+  progress: {
+    height: "100%",
+    backgroundColor: tokens["color-green"],
+  },
+});

package/src/FormatFile/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, View } from "react-native";
+import { styles } from "./ProgressBar.style";
+import { StatusCode } from "../../types";
+
+interface ProgressBarProps {
+  /**
+   * Upload progress value from 0 to 1
+   */
+  progress: number;
+  /**
+   * Upload status
+   */
+  status: StatusCode;
+  /**
+   * Function to be called when the progress is finished
+   */
+  onComplete?: () => void;
+}
+
+export const ProgressBar = ({
+  progress,
+  status,
+  onComplete,
+}: ProgressBarProps): JSX.Element => {
+  const barWidth = useRef(new Animated.Value(0)).current;
+  const progressPercentage = barWidth.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0%", `100%`],
+  });
+
+  useEffect(() => {
+    Animated.timing(barWidth, {
+      toValue: progress,
+      duration: 500,
+      useNativeDriver: false,
+    }).start(({ finished }) => {
+      if (status === StatusCode.Completed && finished && onComplete) {
+        onComplete();
+      }
+    });
+  }, [progress, barWidth, onComplete, status]);
+
+  return (
+    <View testID="format-file-progress-bar" style={styles.container}>
+      <Animated.View
+        testID={"format-file-inner-progress-bar"}
+        style={[
+          styles.progress,
+          {
+            width: progressPercentage,
+          },
+        ]}
+      />
+    </View>
+  );
+};

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

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