@jobber/components-native 0.40.0 → 0.41.0

package/src/FormatFile/components/_mocks/mockFiles.ts

@@ -0,0 +1,105 @@
+import { v4 } from "react-native-uuid";
+import { File, FileUpload, StatusCode } from "../../types";
+
+export const FILE_UPLOAD_MOCK_FILE = ({
+  progress,
+  status = StatusCode.InProgress,
+}: {
+  progress: number;
+  status?: StatusCode;
+}): FileUpload => ({
+  batchContext: {
+    batchCount: 1,
+    batchId: "FILES",
+  },
+  uuid: v4(),
+  key: "path/test.txt",
+  name: "test.txt",
+  size: 1,
+  type: "application/txt",
+  progress: progress,
+  status: status,
+  sourcePath: "path/test.txt",
+  uploadUrl: "uploadUrl",
+  cancel: jest.fn(),
+});
+
+export const FILE_UPLOAD_MOCK_IMAGE = ({
+  progress,
+  size,
+  status = StatusCode.InProgress,
+}: {
+  progress: number;
+  size?: number;
+  status?: StatusCode;
+}): FileUpload => ({
+  batchContext: {
+    batchCount: 1,
+    batchId: "IMAGES",
+  },
+  uuid: v4(),
+  key: "path/test.png",
+  name: "test.png",
+  size: size || 1,
+  type: "image/png",
+  progress: progress,
+  status: status,
+  sourcePath: "path/test.png",
+  uploadUrl: "uploadUrl",
+  cancel: jest.fn(),
+});
+
+export const FILE_UPLOAD_MOCK_PDF = ({
+  progress,
+  status = StatusCode.InProgress,
+}: {
+  progress: number;
+  status?: StatusCode;
+}): FileUpload => ({
+  batchContext: {
+    batchCount: 1,
+    batchId: "FILES",
+  },
+  uuid: v4(),
+  key: "path/test.pdf",
+  name: "test.pdf",
+  size: 1,
+  type: "file/pdf",
+  progress: progress,
+  status: status,
+  sourcePath: "path/test.pdf",
+  uploadUrl: "uploadUrl",
+  cancel: jest.fn(),
+});
+
+export const FILE_MOCK_PDF: File = {
+  fileName: "some_file.pdf",
+  fileSize: 1,
+  contentType: "pdf",
+  url: "https://path/to/file.pdf",
+  thumbnailUrl: "https://path/to/fileThumbnail.pdf",
+};
+
+export const FILE_MOCK_VIDEO: File = {
+  fileName: "some_file.mp4",
+  fileSize: 1,
+  contentType: "video",
+  url: undefined, //undefined to prevent thumbnail errors
+  thumbnailUrl: "path/to/fileThumbnail.mp4",
+};
+
+export const FILE_MOCK_FILE: File = {
+  fileName: "some_file.txt",
+  fileSize: 1,
+  contentType: "file",
+  url: "https://path/to/file",
+  thumbnailUrl: "https://path/to/fileThumbnail",
+};
+
+export const FILE_MOCK_IMAGE: File = {
+  fileName: "some_image.jpg",
+  fileSize: 1,
+  contentType: "image/jpg",
+  url: "https://path/to/image",
+  thumbnailUrl: "https://path/to/imageThumbnail",
+};

package/src/FormatFile/constants.ts

@@ -0,0 +1,15 @@
+export const acceptedExtensions = [
+  { name: "video" },
+  { name: "pdf" },
+  { name: "mov" },
+  { name: "mp4" },
+  { name: "docx" },
+  { name: "xlsx" },
+];
+
+export const videoExtensions = [
+  { type: "mov" },
+  { type: "mp4" },
+  { type: "3gpp" },
+  { type: "hevc" },
+];

package/src/FormatFile/context/FormatFileContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+import { AtlantisFormatFileContextProps } from "./types";
+
+export const formatFileContextDefaultValues = {
+  useCreateThumbnail: () => ({ thumbnail: undefined, error: false }),
+};
+
+export const AtlantisFormatFileContext =
+  createContext<AtlantisFormatFileContextProps>(formatFileContextDefaultValues);
+
+export function useAtlantisFormatFileContext(): AtlantisFormatFileContextProps {
+  return useContext(AtlantisFormatFileContext);
+}

package/src/FormatFile/context/types.ts

@@ -0,0 +1,12 @@
+import { FormattedFile } from "../types";
+
+export interface UseCreateThumbnailResponse {
+  readonly thumbnail: string | undefined;
+  readonly error: boolean;
+}
+export type UseCreateThumbnail = (
+  formattedFile: FormattedFile,
+) => UseCreateThumbnailResponse;
+export interface AtlantisFormatFileContextProps {
+  useCreateThumbnail: UseCreateThumbnail;
+}

package/src/FormatFile/index.ts

@@ -0,0 +1,13 @@
+export { FormatFile, FormatFileProps } from "./FormatFile";
+export type {
+  FormattedFile,
+  File,
+  CreateThumbnail,
+  CreateThumbnailResponse,
+  FileUpload,
+  StatusCode,
+} from "./types";
+export type {
+  UseCreateThumbnail,
+  UseCreateThumbnailResponse,
+} from "./context/types";

package/src/FormatFile/messages.ts

@@ -0,0 +1,24 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  defaultAccessibilityLabel: {
+    id: "defaultAccessibilityLabel",
+    defaultMessage: "Attachment Preview",
+    description: "The default accessibility label",
+  },
+  defaultAccessibilityHint: {
+    id: "defaultAccessibilityHint",
+    defaultMessage: "Select for more options",
+    description: "The default accessibility hint",
+  },
+  errorAccessibilityLabel: {
+    id: "errorAccessibilityLabel",
+    defaultMessage: "Failed upload",
+    description: "The accessibility label for error states",
+  },
+  inProgressAccessibilityLabel: {
+    id: "inProgress",
+    defaultMessage: "Upload in progress",
+    description: "The accessibility label for in-progress states",
+  },
+});

package/src/FormatFile/types.ts

@@ -0,0 +1,126 @@
+export enum StatusCode {
+  Pending,
+  Started,
+  InProgress,
+  Completed,
+  Failed,
+}
+
+export interface FileUpload {
+  /**
+   * File Identifier
+   */
+  key?: string;
+
+  /**
+   * Universally unique identifier
+   */
+  readonly uuid: string;
+
+  /**
+   * The name of the file.
+   */
+  readonly name: string;
+
+  /**
+   * The [MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) type of the file
+   */
+  readonly type: string;
+
+  /**
+   * The size of the file in bytes.
+   */
+  readonly size: number;
+
+  /**
+   * The progress of a file upload between 0 and 1.
+   * - `0` represents Upload just started.
+   * - `1` represents a complete upload.
+   */
+  readonly progress: number;
+
+  /**
+   * The upload status of the file
+   */
+
+  status: StatusCode;
+
+  /**
+   * Represents the width and height for images
+   */
+  readonly dimension?: {
+    width: number;
+    height: number;
+  };
+
+  /**
+   * Provides context about multi-file upload batch
+   */
+  readonly batchContext: {
+    /**
+     * Batch id
+     */
+    readonly batchId: string;
+
+    /**
+     * Number of files in batch
+     */
+    readonly batchCount: number;
+  };
+
+  /**
+   * Url file was uploaded to, used to send in mutation to JO
+   */
+  uploadUrl?: string;
+
+  /**
+   * The url of the file.
+   */
+  sourcePath: string;
+
+  /**
+   * Cancel uploading this file
+   */
+  cancel: () => void;
+
+  /**
+   * Number of retries to upload
+   */
+  retries?: number;
+
+  /**
+   * Error message when upload fails
+   */
+  errorMessage?: string;
+}
+
+export interface File {
+  contentType?: string;
+  fileName?: string;
+  thumbnailUrl?: string;
+  url?: string;
+  fileSize: number;
+}
+
+export interface FormattedFile {
+  showPreview: boolean;
+  source?: string;
+  thumbnailUrl?: string;
+  name?: string;
+  size: number;
+  external: boolean;
+  progress: number;
+  status: StatusCode;
+  error: boolean;
+  type?: string;
+  isMedia?: boolean;
+  showFileTypeIndicator: boolean;
+}
+
+export interface CreateThumbnailResponse {
+  readonly thumbnail: string | undefined;
+  readonly error: boolean;
+}
+export type CreateThumbnail = (
+  formattedFile: FormattedFile,
+) => Promise<CreateThumbnailResponse>;

package/src/FormatFile/utils/computeA11yLabel.ts

@@ -0,0 +1,26 @@
+import { MessageDescriptor } from "react-intl";
+import { messages } from "../messages";
+
+interface params {
+  accessibilityLabel?: string;
+  showOverlay: boolean;
+  showError: boolean;
+  formatMessage: (message: MessageDescriptor) => string;
+}
+
+export function computeA11yLabel({
+  accessibilityLabel,
+  showOverlay,
+  showError,
+  formatMessage,
+}: params): string {
+  if (!showError && showOverlay) {
+    return formatMessage(messages.inProgressAccessibilityLabel);
+  } else if (showError) {
+    return formatMessage(messages.errorAccessibilityLabel);
+  } else {
+    return (
+      accessibilityLabel || formatMessage(messages.defaultAccessibilityLabel)
+    );
+  }
+}

package/src/FormatFile/utils/createUseCreateThumbnail.ts

@@ -0,0 +1,33 @@
+import { useIsMounted } from "@jobber/hooks/useIsMounted";
+import { useCallback, useEffect, useState } from "react";
+import { UseCreateThumbnail } from "../context/types";
+import { CreateThumbnail, FormattedFile } from "../types";
+
+export function createUseCreateThumbnail(createThumbnail: CreateThumbnail): {
+  useCreateThumbnail: UseCreateThumbnail;
+} {
+  const useCreateThumbnail = useCallback(
+    (file: FormattedFile) => {
+      const [thumbnail, setThumbnail] = useState<string | undefined>(undefined);
+      const [error, setError] = useState<boolean>(false);
+
+      const { current } = useIsMounted();
+
+      useEffect(() => {
+        createThumbnail(file)
+          .then(({ thumbnail: newThumbnail, error: newError }) => {
+            setThumbnail(newThumbnail);
+            setError(newError);
+          })
+          .catch(() => {
+            setError(true);
+            setThumbnail(undefined);
+          });
+      }, [current, file]);
+
+      return { thumbnail, error };
+    },
+    [createThumbnail],
+  );
+  return { useCreateThumbnail };
+}

package/src/FormatFile/utils/index.ts

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

package/src/InputCurrency/InputCurrency.tsx

@@ -54,7 +54,7 @@ export const getInternalValue = (
   props: InputCurrencyProps,
   field: ControllerRenderProps<FieldValues, string>,
   formatNumber: (
-    value: number | bigint,
+    value: number,
     opts?: FormatNumberOptions | undefined,
   ) => string,
 ): string => {

package/src/InputText/InputText.tsx

@@ -267,6 +267,7 @@ function InputTextInternal(
   ref: Ref<InputTextRef>,
 ) {
   const isAndroid = Platform.OS === "android";
+  const isIOS = Platform.OS === "ios";
 
   const {
     input: inputTransform = identity,
@@ -419,7 +420,13 @@ function InputTextInternal(
   );
 
   function handleChangeText(value: string) {
-    const newValue = outputTransform(value);
+    /**
+     * Replacing the U+FFFC character because it's duplicating text
+     * when dictating on iOS 16.
+     * https://github.com/facebook/react-native/issues/36521#issuecomment-1555421134
+     */
+    const removedIOSCharValue = isIOS ? value.replace(/\uFFFC/g, "") : value;
+    const newValue = outputTransform(removedIOSCharValue);
     setHasMiniLabel(Boolean(newValue));
     onChangeText?.(newValue);
     field.onChange(newValue);

package/src/index.ts

@@ -16,6 +16,7 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./FormatFile";
 export * from "./Form";
 export * from "./FormField";
 export * from "./Heading";

package/src/utils/test/wait.ts

@@ -10,7 +10,9 @@ import { act } from "react-test-renderer";
  * @param milliseconds time to wait in milliseconds
  */
 export async function wait(milliseconds = 0): Promise<void> {
-  await new Promise(resolve => setTimeout(resolve, milliseconds));
+  await new Promise((resolve: (value?: unknown) => void) =>
+    setTimeout(resolve, milliseconds),
+  );
 }
 
 /**