saleor-dashboard/src/misc.ts

import { FetchResult, MutationFunction, MutationResult } from "@apollo/client";
import {
  AddressInput,
  CountryCode,
  DateRangeInput,
  OrderStatus,
  PaymentChargeStatusEnum,
} from "@dashboard/graphql";
import { Node, SlugNode } from "@dashboard/types";
import { ConfirmButtonTransitionState, ThemeType } from "@saleor/macaw-ui";
import { DefaultTheme, ThemeTokensValues } from "@saleor/macaw-ui/next";
import uniqBy from "lodash/uniqBy";
import moment from "moment-timezone";
import { IntlShape } from "react-intl";

import { MultiAutocompleteChoiceType } from "./components/MultiAutocompleteSelectField";
import { AddressType, AddressTypeInput } from "./customers/types";
import {
  commonStatusMessages,
  errorMessages,
  orderStatusMessages,
  paymentStatusMessages,
} from "./intl";
import {
  MutationResultAdditionalProps,
  PartialMutationProviderOutput,
  StatusType,
  UserError,
} from "./types";

export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
  T,
  Exclude<keyof T, Keys>
> &
  { [K in Keys]-?: Required<Pick<T, K>> }[Keys];

export type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<
  T,
  Exclude<keyof T, Keys>
> &
  {
    [K in Keys]-?: Required<Pick<T, K>> &
      Partial<Record<Exclude<Keys, K>, undefined>>;
  }[Keys];

export function renderCollection<T>(
  collection: T[] | undefined,
  renderItem: (
    item: T | undefined,
    index: number | undefined,
    collection: T[] | undefined,
  ) => any,
  renderEmpty?: (collection: T[]) => any,
) {
  if (collection === undefined) {
    return renderItem(undefined, undefined, collection);
  }
  if (collection.length === 0) {
    return !!renderEmpty ? renderEmpty(collection) : null;
  }
  return collection.map(renderItem);
}

export function decimal(value: string | number) {
  if (typeof value === "string") {
    return value === "" ? null : value;
  }
  return value;
}

export function weight(value: string) {
  return value === "" ? null : parseFloat(value);
}

export const removeDoubleSlashes = (url: string) =>
  url.replace(/([^:]\/)\/+/g, "$1");

export const transformPaymentStatus = (
  status: string,
  intl: IntlShape,
): { localized: string; status: StatusType } => {
  switch (status) {
    case PaymentChargeStatusEnum.PARTIALLY_CHARGED:
      return {
        localized: intl.formatMessage(paymentStatusMessages.partiallyPaid),
        status: StatusType.ERROR,
      };
    case PaymentChargeStatusEnum.FULLY_CHARGED:
      return {
        localized: intl.formatMessage(paymentStatusMessages.paid),
        status: StatusType.SUCCESS,
      };
    case PaymentChargeStatusEnum.PARTIALLY_REFUNDED:
      return {
        localized: intl.formatMessage(paymentStatusMessages.partiallyRefunded),
        status: StatusType.INFO,
      };
    case PaymentChargeStatusEnum.FULLY_REFUNDED:
      return {
        localized: intl.formatMessage(paymentStatusMessages.refunded),
        status: StatusType.INFO,
      };
    case PaymentChargeStatusEnum.PENDING:
      return {
        localized: intl.formatMessage(paymentStatusMessages.pending),
        status: StatusType.WARNING,
      };
    case PaymentChargeStatusEnum.REFUSED:
      return {
        localized: intl.formatMessage(paymentStatusMessages.refused),
        status: StatusType.ERROR,
      };
    case PaymentChargeStatusEnum.CANCELLED:
      return {
        localized: intl.formatMessage(commonStatusMessages.cancelled),
        status: StatusType.ERROR,
      };
    case PaymentChargeStatusEnum.NOT_CHARGED:
      return {
        localized: intl.formatMessage(paymentStatusMessages.unpaid),
        status: StatusType.ERROR,
      };
  }
  return {
    localized: status,
    status: StatusType.ERROR,
  };
};

export const transformOrderStatus = (
  status: string,
  intl: IntlShape,
): { localized: string; status: StatusType } => {
  switch (status) {
    case OrderStatus.FULFILLED:
      return {
        localized: intl.formatMessage(orderStatusMessages.fulfilled),
        status: StatusType.SUCCESS,
      };
    case OrderStatus.PARTIALLY_FULFILLED:
      return {
        localized: intl.formatMessage(orderStatusMessages.partiallyFulfilled),
        status: StatusType.WARNING,
      };
    case OrderStatus.UNFULFILLED:
      return {
        localized: intl.formatMessage(orderStatusMessages.unfulfilled),
        status: StatusType.ERROR,
      };
    case OrderStatus.CANCELED:
      return {
        localized: intl.formatMessage(commonStatusMessages.cancelled),
        status: StatusType.ERROR,
      };
    case OrderStatus.DRAFT:
      return {
        localized: intl.formatMessage(orderStatusMessages.draft),
        status: StatusType.INFO,
      };
    case OrderStatus.UNCONFIRMED:
      return {
        localized: intl.formatMessage(orderStatusMessages.unconfirmed),
        status: StatusType.INFO,
      };
    case OrderStatus.PARTIALLY_RETURNED:
      return {
        localized: intl.formatMessage(orderStatusMessages.partiallyReturned),
        status: StatusType.INFO,
      };
    case OrderStatus.RETURNED:
      return {
        localized: intl.formatMessage(orderStatusMessages.returned),
        status: StatusType.INFO,
      };
  }
  return {
    localized: status,
    status: StatusType.ERROR,
  };
};

export const transformAddressToForm = (data?: AddressType) => ({
  city: data?.city || "",
  cityArea: data?.cityArea || "",
  companyName: data?.companyName || "",
  country: data?.country?.code || "",
  countryArea: data?.countryArea || "",
  firstName: data?.firstName || "",
  lastName: data?.lastName || "",
  phone: data?.phone || "",
  postalCode: data?.postalCode || "",
  streetAddress1: data?.streetAddress1 || "",
  streetAddress2: data?.streetAddress2 || "",
});

export function maybe<T>(exp: () => T): T | undefined;
export function maybe<T>(exp: () => T, d: T): T;
export function maybe(exp: any, d?: any) {
  try {
    const result = exp();
    return result === undefined ? d : result;
  } catch {
    return d;
  }
}

export function only<T>(obj: T, key: keyof T): boolean {
  return Object.keys(obj).every(objKey =>
    objKey === key ? obj[key] !== undefined : obj[key] === undefined,
  );
}

export function empty(obj: {}): boolean {
  return Object.keys(obj).every(key => obj[key] === undefined);
}

export function hasErrors(errorList: UserError[] | null): boolean {
  return !(
    errorList === undefined ||
    errorList === null ||
    errorList.length === 0
  );
}

export function getMutationState(
  called: boolean,
  loading: boolean,
  ...errorList: any[][]
): ConfirmButtonTransitionState {
  if (loading) {
    return "loading";
  }
  if (called) {
    return errorList.map(hasErrors).reduce((acc, curr) => acc || curr, false)
      ? "error"
      : "success";
  }
  return "default";
}

export interface SaleorMutationResult {
  errors?: any[];
}

type InferPromiseResult<T> = T extends Promise<infer V> ? V : never;

export const extractMutationErrors = async <
  TData extends InferPromiseResult<TPromise>,
  TPromise extends Promise<FetchResult<TData>>,
  TErrors extends ReturnType<typeof getMutationErrors>,
>(
  submitPromise: TPromise,
): Promise<TErrors> => {
  const result = await submitPromise;

  const e = getMutationErrors(result);

  return e as TErrors;
};

export const hasMutationErrors = (result: FetchResult): boolean => {
  if (!result?.data) {
    return false;
  }
  return Object.values(result.data).some(
    ({ errors }: SaleorMutationResult) => errors.length > 0,
  );
};

export const getMutationErrors = <
  T extends FetchResult<any>,
  TData extends T["data"],
  TErrors extends TData[keyof TData]["errors"],
>(
  result: T,
): TErrors[] => {
  if (!result?.data) {
    return [] as TErrors;
  }
  return Object.values(result.data).reduce(
    (acc: TErrors[], mut: TData) => [
      ...acc,
      ...(mut.errors || []),
      ...(mut?.results?.flatMap(res => res.errors) || []),
    ],
    [] as TErrors[],
  ) as TErrors;
};

export function getMutationStatus<
  TData extends Record<string, SaleorMutationResult | any>,
>(opts: MutationResult<TData>): ConfirmButtonTransitionState {
  const errors = getMutationErrors(opts);

  return getMutationState(opts.called, opts.loading, errors);
}

export function getMutationProviderData<TData, TVariables>(
  mutateFn: MutationFunction<TData, TVariables>,
  opts: MutationResult<TData> & MutationResultAdditionalProps,
): PartialMutationProviderOutput<TData, TVariables> {
  return {
    mutate: variables => mutateFn({ variables }),
    opts,
  };
}

export const parseLogMessage = ({
  intl,
  code,
  field,
}: {
  intl: IntlShape;
  code: string;
  field?: string;
}) =>
  intl.formatMessage(errorMessages.baseCodeErrorMessage, {
    errorCode: code,
    fieldError:
      field &&
      intl.formatMessage(errorMessages.codeErrorFieldMessage, {
        fieldName: field,
      }),
  });

interface User {
  email: string;
  firstName?: string;
  lastName?: string;
}

export function getUserName(user?: User, returnEmail?: boolean) {
  return user && (user.email || (user.firstName && user.lastName))
    ? user.firstName && user.lastName
      ? [user.firstName, user.lastName].join(" ")
      : returnEmail
      ? user.email
      : user.email.split("@")[0]
    : undefined;
}

export function getUserInitials(user?: User) {
  const hasName = user?.firstName && user?.lastName;
  const hasEmail = !!user?.email;

  if (hasName) {
    return `${user.firstName[0] + user.lastName[0]}`.toUpperCase();
  }

  if (hasEmail) {
    return user.email.slice(0, 2).toUpperCase();
  }

  return undefined;
}

interface AnyEventWithPropagation {
  stopPropagation: () => void;
}
export function stopPropagation<T extends AnyEventWithPropagation>(
  cb: (event?: T) => void,
) {
  return (event: T) => {
    event.stopPropagation();
    cb(event);
  };
}

interface AnyEventWithPreventDefault {
  preventDefault: () => void;
}
export function preventDefault<T extends AnyEventWithPreventDefault>(
  cb: (event?: T) => void,
) {
  return (event: T) => {
    event.preventDefault();
    cb(event);
  };
}

export interface DateTime {
  date: string;
  time: string;
}

export function joinDateTime(date: string, time?: string) {
  if (!date) {
    return null;
  }
  const setTime = time || "00:00";
  const dateTime = moment(date + " " + setTime).format();
  return dateTime;
}

export function splitDateTime(dateTime: string) {
  if (!dateTime) {
    return {
      date: "",
      time: "",
    };
  }
  // Default html input format YYYY-MM-DD HH:mm
  const splitDateTime = moment(dateTime).format("YYYY-MM-DD HH:mm").split(" ");
  return {
    date: splitDateTime[0],
    time: splitDateTime[1],
  };
}

export function generateCode(charNum: number) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  for (let i = 0; i < charNum; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}

export function isInEnum<TEnum extends {}>(needle: string, haystack: TEnum) {
  return Object.keys(haystack).includes(needle);
}

export function findInEnum<TEnum extends {}>(needle: string, haystack: TEnum) {
  const match = Object.keys(haystack).find(key => key === needle);
  if (!!match) {
    return haystack[needle as keyof TEnum];
  }

  throw new Error(`Key ${needle} not found in enum`);
}

export function findValueInEnum<TEnum extends {}>(
  needle: string,
  haystack: TEnum,
): TEnum[keyof TEnum] {
  const match = Object.entries(haystack).find(([_, value]) => value === needle);

  if (!match) {
    throw new Error(`Value ${needle} not found in enum`);
  }

  return needle as unknown as TEnum[keyof TEnum];
}

export function parseBoolean(
  a: string | undefined,
  defaultValue: boolean,
): boolean {
  if (a === undefined) {
    return defaultValue;
  }
  return a === "true";
}

export function capitalize(s: string) {
  return s.charAt(0).toLocaleUpperCase() + s.slice(1);
}

export function transformFormToAddressInput<T>(
  address: T & AddressTypeInput,
): T & AddressInput {
  return {
    ...address,
    country: findInEnum(address.country, CountryCode),
  };
}

export function getStringOrPlaceholder(
  s: string | undefined,
  placeholder?: string,
): string {
  return s || placeholder || "...";
}

export const getDatePeriod = (days: number): DateRangeInput => {
  if (days < 1) {
    return {};
  }

  const end = moment().startOf("day");
  const start = end.subtract(days - 1);
  const format = "YYYY-MM-DD";

  return {
    gte: start.format(format),
    lte: end.format(format),
  };
};

export const isDarkTheme = (themeType: ThemeType) => themeType === "dark";

export const transformAddressToAddressInput = (data?: AddressType) => ({
  city: data?.city || "",
  cityArea: data?.cityArea || "",
  companyName: data?.companyName || "",
  country: findInEnum(data?.country?.code || "", CountryCode),
  countryArea: data?.countryArea || "",
  firstName: data?.firstName || "",
  lastName: data?.lastName || "",
  phone: data?.phone || "",
  postalCode: data?.postalCode || "",
  streetAddress1: data?.streetAddress1 || "",
  streetAddress2: data?.streetAddress2 || "",
});

export function getFullName<T extends { firstName: string; lastName: string }>(
  data: T,
) {
  if (!data || !data.firstName || !data.lastName) {
    return "";
  }

  return `${data.firstName} ${data.lastName}`;
}
export const flatten = (obj: unknown) => {
  // Be cautious that repeated keys are overwritten

  const result = {};

  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      Object.assign(result, flatten(obj[key]));
    } else {
      result[key] = obj[key];
    }
  });

  return result;
};

export function PromiseQueue() {
  let queue = Promise.resolve();

  function add<T>(operation: (value: T | void) => PromiseLike<T>) {
    return new Promise((resolve, reject) => {
      queue = queue.then(operation).then(resolve).catch(reject);
    });
  }

  return { queue, add };
}

export const combinedMultiAutocompleteChoices = (
  selected: MultiAutocompleteChoiceType[],
  choices: MultiAutocompleteChoiceType[],
) => uniqBy([...selected, ...choices], "value");

export type WithOptional<T, K extends keyof T> = Omit<T, K> &
  Partial<Pick<T, K>>;

export const getBySlug = (slugToCompare: string) => (obj: SlugNode) =>
  obj.slug === slugToCompare;

export const getById = (idToCompare: string) => (obj: Node) =>
  obj.id === idToCompare;

export const getByUnmatchingId =
  (idToCompare: string) => (obj: { id: string }) =>
    obj.id !== idToCompare;

export const findById = <T extends Node>(id: string, list?: T[]) =>
  list?.find(getById(id));

const COLOR_WARNING = "#FBE5AC";
const COLOR_WARNING_DARK = "#3E2F0A";
type CustomWarningColor = typeof COLOR_WARNING | typeof COLOR_WARNING_DARK;

export const getStatusColor = (
  status: "error" | "warning" | "info" | "success" | "generic",
  currentTheme?: DefaultTheme,
): keyof ThemeTokensValues["colors"]["background"] | CustomWarningColor => {
  switch (status) {
    case "error":
      return "surfaceCriticalDepressed";
    case "info":
      return "surfaceBrandDepressed";
    case "success":
      return "decorativeSurfaceSubdued2";
    case "warning":
      // TODO: use color from new macaw theme when will be ready
      return currentTheme === "defaultDark"
        ? COLOR_WARNING_DARK
        : COLOR_WARNING;
    case "generic":
      return "surfaceBrandSubdued";
    default:
      return "surfaceBrandSubdued";
  }
};

export const isFirstColumn = (column: number) => [-1, 0].includes(column);

const getAllRemovedRowsBeforeRowIndex = (
  rowIndex: number,
  removedRowsIndexs: number[],
) => removedRowsIndexs.filter(r => r <= rowIndex);

export const getDatagridRowDataIndex = (
  rowIndex: number,
  removedRowsIndexs: number[],
) =>
  rowIndex +
  getAllRemovedRowsBeforeRowIndex(rowIndex, removedRowsIndexs).length;