@jobber/components-native 0.38.0 → 0.40.0

package/src/Form/components/FormMask/FormMask.style.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  mask: {
+    zIndex: tokens["elevation-modal"],
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    backgroundColor: tokens["color-overlay--dimmed"],
+    padding: tokens["space-base"],
+    justifyContent: "center",
+  },
+});

package/src/Form/components/FormMask/FormMask.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./FormMask.style";
+import { ActivityIndicator } from "../../../ActivityIndicator";
+import { messages } from "../../messages";
+
+export function FormMask(): JSX.Element {
+  const { formatMessage } = useIntl();
+
+  return (
+    <View
+      style={styles.mask}
+      accessibilityLabel={formatMessage(messages.loadingA11YLabel)}
+    >
+      <ActivityIndicator />
+    </View>
+  );
+}

package/src/Form/components/FormMask/index.ts

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

package/src/Form/components/FormMessage/FormMessage.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { FormMessage } from ".";
+
+describe("FormMessage", () => {
+  it("should render null when there are no message to show", () => {
+    const view = render(<FormMessage />);
+    expect(view.toJSON()).toMatchInlineSnapshot(`null`);
+  });
+
+  it("should show the message", () => {
+    const { getByText } = render(<FormMessage />);
+
+    const description = "🔥";
+    FormMessage.show({ description });
+    expect(getByText(description)).toBeDefined();
+  });
+
+  it("should close the message", () => {
+    const { getByText, queryByText } = render(<FormMessage />);
+
+    const description = "🌚";
+    FormMessage.show({ description });
+    expect(getByText(description)).toBeDefined();
+
+    FormMessage.close();
+    expect(queryByText(description)).toBeNull();
+  });
+
+  describe("Opening another message through a message", () => {
+    const firstMessage = "I am the first message";
+    const secondMessage = "Second message here";
+
+    const showMessage = () =>
+      FormMessage.show({
+        description: firstMessage,
+        primaryAction: {
+          label: "Click me",
+          onPress: () => FormMessage.show({ description: secondMessage }),
+        },
+      });
+
+    it("should show the most recent message", () => {
+      const { getByText, queryByText, getByLabelText } = render(
+        <FormMessage />,
+      );
+
+      showMessage();
+
+      expect(getByText(firstMessage)).toBeDefined();
+      expect(queryByText(secondMessage)).toBeNull();
+
+      fireEvent.press(getByLabelText("Click me"));
+
+      expect(getByText(secondMessage)).toBeDefined();
+      expect(queryByText(firstMessage)).toBeNull();
+    });
+
+    it("should close the most recent message", () => {
+      const { getByText, queryByText, getByLabelText } = render(
+        <FormMessage />,
+      );
+
+      showMessage();
+      fireEvent.press(getByLabelText("Click me"));
+      FormMessage.close();
+
+      expect(getByText(firstMessage)).toBeDefined();
+      expect(queryByText(secondMessage)).toBeNull();
+    });
+  });
+});

package/src/Form/components/FormMessage/FormMessage.tsx

@@ -0,0 +1,63 @@
+import React, { useCallback, useState } from "react";
+import { InternalFormMessage } from "./components/InternalFormMessage";
+import { EmptyStateProps } from "../../../EmptyState";
+
+type FormMessageData = EmptyStateProps;
+
+let open: ((messageData: FormMessageData) => void) | undefined;
+let close: (() => void) | undefined;
+
+/**
+ * Show a message that takes over the whole screen to the user. This provides a
+ * more urgent feedback when the user does an action that requires attention
+ * their full attention.
+ *
+ * By default, rendering `<FormMessage />` on a screen won't show any messages
+ * because it's only a container. Use `FormMessage.open(...)`. to show a
+ * message to the user. Use `FormMessage.close()` to close the most
+ * recent message.
+ */
+export const FormMessage = (): JSX.Element => {
+  const [data, setData] = useState<FormMessageData[]>([]);
+
+  open = useCallback(
+    (messageData: FormMessageData) => {
+      setData([...data, messageData]);
+    },
+    [data],
+  );
+
+  close = useCallback(() => {
+    const newValue = data.slice(0, -1);
+    setData(newValue);
+  }, [data]);
+
+  if (data.length === 0) {
+    return <></>;
+  }
+
+  const lastMessage = data[data.length - 1];
+  return <InternalFormMessage data={lastMessage} onRequestClose={close} />;
+};
+
+FormMessage.show = (messageData: FormMessageData) => {
+  if (open) {
+    open(messageData);
+  } else {
+    warnOnUndefinedFunctions("show");
+  }
+};
+
+FormMessage.close = () => {
+  if (close) {
+    close();
+  } else {
+    warnOnUndefinedFunctions("close");
+  }
+};
+
+function warnOnUndefinedFunctions(method: string) {
+  console.warn(
+    `Could not ${method} "FormMessage". Either you're calling this method before the component mounts or you're using this without the "<Form />" component. If you're using "FormMessage" without the "Form", include "<FormMessage />" on your component to start using it.`,
+  );
+}

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.style.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../../../utils/design";
+
+export const styles = StyleSheet.create({
+  wrapper: {
+    backgroundColor: tokens["color-surface"],
+    flex: 1,
+    justifyContent: "center",
+  },
+  closeAction: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  scrollWrapper: { height: "100%" },
+  scrollWrapperContent: { flexGrow: 1, justifyContent: "center" },
+});

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Modal, StatusBar, View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { useIntl } from "react-intl";
+import { styles } from "./InternalFormMessage.style";
+import { messages } from "./messages";
+import { EmptyState, EmptyStateProps } from "../../../../../EmptyState";
+
+interface FormMessageProps {
+  readonly data: EmptyStateProps;
+  readonly onRequestClose: () => void;
+}
+
+export function InternalFormMessage({
+  data,
+  onRequestClose,
+}: FormMessageProps): JSX.Element {
+  const { formatMessage } = useIntl();
+  const emptyStateData: EmptyStateProps = useMemo(() => {
+    if (data.secondaryAction) {
+      return data;
+    } else {
+      return {
+        ...data,
+        secondaryAction: {
+          label: formatMessage(messages.goBackButton),
+          onPress: onRequestClose,
+        },
+      };
+    }
+  }, [data, formatMessage, onRequestClose]);
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={true}
+      onRequestClose={onRequestClose}
+    >
+      <View style={styles.wrapper}>
+        <StatusBar barStyle="dark-content" />
+        <SafeAreaView>
+          <ScrollView
+            style={styles.scrollWrapper}
+            contentContainerStyle={styles.scrollWrapperContent}
+            centerContent={true}
+          >
+            <EmptyState {...emptyStateData} />
+          </ScrollView>
+        </SafeAreaView>
+      </View>
+    </Modal>
+  );
+}

package/src/Form/components/FormMessage/components/InternalFormMessage/index.ts

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

package/src/Form/components/FormMessage/components/InternalFormMessage/messages.ts

@@ -0,0 +1,10 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  goBackButton: {
+    id: "goBackButton",
+    defaultMessage: "Go Back",
+    description:
+      "The label for the fallback secondary button when it doesn't exist",
+  },
+});

package/src/Form/components/FormMessage/index.ts

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

package/src/Form/components/FormMessageBanner/FormMessageBanner.test.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { FormMessageBanner } from "./FormMessageBanner";
+import { FormBannerMessageType } from "../../types";
+
+const noticeMessage = {
+  messageType: FormBannerMessageType.NoticeMessage,
+  message: "Take note of this information.",
+};
+
+const warningMessage = {
+  messageType: FormBannerMessageType.WarningMessage,
+  message: "Caution is warranted in this case.",
+};
+
+describe("FormMessageBanner", () => {
+  it.each([
+    [FormBannerMessageType.NoticeMessage, noticeMessage],
+    [FormBannerMessageType.WarningMessage, warningMessage],
+  ])("should render a %s", async (_messageType, message) => {
+    const { getByText } = render(
+      <FormMessageBanner bannerMessages={[message]} />,
+    );
+
+    expect(getByText(message.message)).toBeDefined();
+  });
+});

package/src/Form/components/FormMessageBanner/FormMessageBanner.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { FormBannerMessage, FormBannerMessageType } from "../../types";
+import { Banner, BannerTypes } from "../../../Banner";
+
+interface FormMessageBannerProps {
+  bannerMessages?: FormBannerMessage[];
+}
+
+export function FormMessageBanner({
+  bannerMessages,
+}: FormMessageBannerProps): JSX.Element {
+  return (
+    <>
+      {bannerMessages?.map((message, index) => (
+        <Banner
+          key={index}
+          text={message.message}
+          type={getBannerType(message.messageType)}
+        />
+      ))}
+    </>
+  );
+}
+
+function getBannerType(messageType: FormBannerMessageType): BannerTypes {
+  switch (messageType) {
+    case FormBannerMessageType.WarningMessage:
+      return "warning";
+    case FormBannerMessageType.NoticeMessage:
+    default:
+      return "notice";
+  }
+}

package/src/Form/components/FormMessageBanner/index.ts

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

package/src/Form/components/FormSaveButton/FormSaveButton.test.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { Host } from "react-native-portalize";
+import { IconNames } from "@jobber/design";
+import { FormSaveButton } from "./FormSaveButton";
+import { messages } from "./messages";
+import { messages as buttonGroupMessage } from "../../../ButtonGroup/messages";
+
+interface TestSecondaryActionProp {
+  label: string;
+  icon?: IconNames | undefined;
+  handleAction: {
+    onBeforeSubmit?: jest.Mock;
+    onSubmit: () => Promise<void>;
+    onSubmitError?: () => void;
+    resetFormOnSubmit?: boolean;
+  };
+  destructive?: boolean;
+}
+interface TestFormSaveButtonProps {
+  primaryAction: () => Promise<void>;
+  loading: boolean;
+  label?: string;
+  secondaryAction?: TestSecondaryActionProp[];
+  setSecondaryActionLoading: (bool: boolean) => void;
+}
+jest.mock("react-hook-form", () => ({
+  ...jest.requireActual("react-hook-form"),
+  useFormContext: () => ({
+    reset: () => jest.fn(),
+  }),
+}));
+
+function ButtonGroupForTest(props: TestFormSaveButtonProps) {
+  return (
+    <Host>
+      <FormSaveButton
+        primaryAction={props.primaryAction}
+        loading={props.loading}
+        label={props.label}
+        setSecondaryActionLoading={props.setSecondaryActionLoading}
+        secondaryActions={props.secondaryAction}
+      />
+    </Host>
+  );
+}
+
+describe("the form save button is enabled", () => {
+  const loading = false;
+  it("renders the form save button with default label", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <ButtonGroupForTest
+        primaryAction={pressHandler}
+        loading={loading}
+        setSecondaryActionLoading={jest.fn()}
+      />,
+    );
+    const saveButton = getByLabelText("Save");
+    expect(saveButton).toBeTruthy();
+  });
+
+  it("renders a save button and calls the onPress handler when pressed", () => {
+    const pressHandler = jest.fn();
+    const saveButtonText = messages.saveButton.defaultMessage;
+    const { getByLabelText } = render(
+      <ButtonGroupForTest
+        primaryAction={pressHandler}
+        loading={loading}
+        setSecondaryActionLoading={jest.fn()}
+      />,
+    );
+
+    fireEvent.press(getByLabelText(saveButtonText));
+    expect(pressHandler).toHaveBeenCalled();
+  });
+
+  it("renders a save button with a custom label if provided", () => {
+    const pressHandler = jest.fn();
+    const saveButtonText = "MySave";
+    const { getByLabelText } = render(
+      <ButtonGroupForTest
+        primaryAction={pressHandler}
+        loading={loading}
+        setSecondaryActionLoading={jest.fn()}
+        label={saveButtonText}
+      />,
+    );
+    const saveButton = getByLabelText(saveButtonText);
+    expect(saveButton).toBeTruthy();
+  });
+});
+
+describe("the form save button is loading", () => {
+  const loading = true;
+  it("renders the form save button as loading", () => {
+    const pressHandler = jest.fn();
+    const { getByTestId, getByRole } = render(
+      <ButtonGroupForTest
+        primaryAction={pressHandler}
+        loading={loading}
+        setSecondaryActionLoading={jest.fn()}
+      />,
+    );
+    expect(getByTestId("loadingImage")).toBeDefined();
+    expect(getByRole("button", { busy: true })).toBeDefined();
+  });
+});
+
+describe("when a secondaryActions is passed in", () => {
+  it("renders a secondaryAction element", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <ButtonGroupForTest
+        primaryAction={pressHandler}
+        loading={false}
+        setSecondaryActionLoading={jest.fn()}
+        secondaryAction={[
+          { label: "hi", handleAction: { onSubmit: jest.fn() } },
+        ]}
+      />,
+    );
+
+    expect(
+      getByLabelText(buttonGroupMessage.more.defaultMessage),
+    ).toBeDefined();
+  });
+
+  it("renders a secondaryAction element with and fires the onSubmit and beforeSubmit if available", async () => {
+    const pressHandler = jest.fn(() => Promise.resolve());
+    const beforeSubmitMock = jest.fn().mockImplementation(() => {
+      return Promise.resolve(true);
+    });
+    const { getByLabelText } = render(
+      <ButtonGroupForTest
+        primaryAction={pressHandler}
+        loading={false}
+        setSecondaryActionLoading={jest.fn()}
+        secondaryAction={[
+          {
+            icon: "trash",
+            label: "hi",
+            handleAction: {
+              onSubmit: pressHandler,
+              onBeforeSubmit: beforeSubmitMock,
+            },
+          },
+        ]}
+      />,
+    );
+    fireEvent.press(getByLabelText(buttonGroupMessage.more.defaultMessage));
+    expect(getByLabelText("hi")).toBeDefined();
+    fireEvent.press(getByLabelText("hi"));
+    expect(beforeSubmitMock).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(pressHandler).toHaveBeenCalled();
+    });
+  });
+});

package/src/Form/components/FormSaveButton/FormSaveButton.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { useFormContext } from "react-hook-form";
+import { messages } from "./messages";
+import { FormSaveButtonProps, SecondaryActionProp } from "../../types";
+import {
+  ButtonGroup,
+  ButtonGroupSecondaryActionProps,
+} from "../../../ButtonGroup";
+
+export function FormSaveButton({
+  primaryAction,
+  loading,
+  label,
+  secondaryActions,
+  setSecondaryActionLoading,
+  onOpenBottomSheet,
+  onCloseBottomSheet,
+}: FormSaveButtonProps): JSX.Element {
+  const { formatMessage } = useIntl();
+  const formContext = useFormContext();
+  const buttonActions = useButtonGroupAction(secondaryActions);
+
+  return (
+    <>
+      <ButtonGroup
+        onOpenBottomSheet={onOpenBottomSheet}
+        onCloseBottomSheet={onCloseBottomSheet}
+        allowTapWhenOffline={true}
+      >
+        {buttonActions.map((action, index) => {
+          if (index === 0) {
+            return (
+              <ButtonGroup.PrimaryAction
+                key={index}
+                onPress={primaryAction}
+                label={label ?? formatMessage(messages.saveButton)}
+                loading={loading}
+              />
+            );
+          } else {
+            return (
+              <ButtonGroup.SecondaryAction
+                key={index}
+                label={action.label}
+                icon={action.icon}
+                onPress={action.onPress}
+                destructive={action.destructive}
+              />
+            );
+          }
+        })}
+      </ButtonGroup>
+    </>
+  );
+
+  function useButtonGroupAction(
+    array: SecondaryActionProp[] | undefined,
+  ): ButtonGroupSecondaryActionProps[] {
+    const buttonGroupActionProps: ButtonGroupSecondaryActionProps[] = array
+      ? array.map(arr => {
+          return {
+            label: arr.label,
+            onPress: () => internalOnPress(arr.handleAction),
+            destructive: arr.destructive,
+            icon: arr.icon,
+          };
+        })
+      : [];
+
+    buttonGroupActionProps.unshift({
+      label: label ?? formatMessage(messages.saveButton),
+      onPress: primaryAction,
+      loading: loading,
+      icon: undefined,
+    });
+
+    return buttonGroupActionProps;
+  }
+
+  async function internalOnPress(
+    handleAction: SecondaryActionProp["handleAction"],
+  ) {
+    let performSubmit = true;
+    if (handleAction.onBeforeSubmit) {
+      performSubmit = await handleAction.onBeforeSubmit();
+    }
+
+    if (performSubmit) {
+      setSecondaryActionLoading?.(true);
+      handleAction
+        .onSubmit(primaryAction)
+        .then(() => {
+          handleAction.resetFormOnSubmit && formContext.reset();
+          handleAction.onSubmitSuccess?.();
+        })
+        .catch(handleAction.onSubmitError)
+        .finally(() => {
+          setSecondaryActionLoading?.(false);
+        });
+    }
+  }
+}

package/src/Form/components/FormSaveButton/index.ts

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

package/src/Form/components/FormSaveButton/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  saveButton: {
+    id: "saveButton",
+    defaultMessage: "Save",
+    description: "The label for the save button",
+  },
+});

package/src/Form/constants.ts

@@ -0,0 +1,2 @@
+export const KEYBOARD_TOP_PADDING_AUTO_SCROLL = 20;
+export const KEYBOARD_SAVE_BUTTON_DISTANCE = 1;

package/src/Form/context/AtlantisFormContext.test.tsx

@@ -0,0 +1,45 @@
+import React, { PropsWithChildren } from "react";
+import { renderHook } from "@testing-library/react-hooks";
+import { AtlantisFormContextProps } from "./types";
+import {
+  AtlantisFormContext,
+  defaultValues,
+  useAtlantisFormContext,
+} from "./AtlantisFormContext";
+
+const useConfirmBeforeBackMock = jest.fn();
+const useInternalFormLocalCacheMock = jest.fn();
+
+const providerValues: AtlantisFormContextProps = {
+  useConfirmBeforeBack: useConfirmBeforeBackMock,
+  useInternalFormLocalCache: useInternalFormLocalCacheMock,
+  headerHeight: 50,
+};
+
+describe("AtlantisFormContext", () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  describe("No Provider", () => {
+    it("should get the default values", () => {
+      const { result } = renderHook(() => useAtlantisFormContext());
+
+      expect(result.current).toMatchObject(defaultValues);
+    });
+  });
+
+  describe("With Provider", () => {
+    it("should get the provider values", () => {
+      const { result } = renderHook(() => useAtlantisFormContext(), {
+        wrapper: ({ children }: PropsWithChildren) => (
+          <AtlantisFormContext.Provider value={providerValues}>
+            {children}
+          </AtlantisFormContext.Provider>
+        ),
+      });
+
+      expect(result.current).toMatchObject(providerValues);
+    });
+  });
+});

package/src/Form/context/AtlantisFormContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext, useRef } from "react";
+import { AtlantisFormContextProps } from "./types";
+
+export const defaultValues = {
+  useConfirmBeforeBack: () => {
+    const ref = useRef(() => undefined);
+    return ref;
+  },
+  useInternalFormLocalCache: () => ({
+    setLocalCache: () => undefined,
+    removeLocalCache: () => undefined,
+  }),
+  headerHeight: 0,
+};
+
+export const AtlantisFormContext =
+  createContext<AtlantisFormContextProps>(defaultValues);
+
+export function useAtlantisFormContext(): AtlantisFormContextProps {
+  return useContext(AtlantisFormContext);
+}

package/src/Form/context/index.ts

@@ -0,0 +1,5 @@
+export {
+  AtlantisFormContext,
+  useAtlantisFormContext,
+} from "./AtlantisFormContext";
+export type { AtlantisFormContextProps } from "./types";