@blocklet/payment-react 1.13.113

package/src/util.ts

@@ -0,0 +1,543 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable @typescript-eslint/indent */
+import type {
+  PriceCurrency,
+  PriceRecurring,
+  TCheckoutSessionExpanded,
+  TLineItemExpanded,
+  TPaymentCurrency,
+  TPaymentMethodExpanded,
+  TPrice,
+  TSubscriptionExpanded,
+} from '@blocklet/payment-types';
+import { BN, fromUnitToToken } from '@ocap/util';
+import { defaultCountries } from 'react-international-phone';
+
+import dayjs from './dayjs';
+import { t } from './locales/index';
+
+export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
+
+export const getPrefix = () => {
+  const componentId = (window.blocklet.componentId || '').split('/').pop();
+  if (componentId === PAYMENT_KIT_DID) {
+    return window.blocklet.prefix;
+  }
+  const component = (window.blocklet.componentMountPoints || []).find((x: any) => x.did === PAYMENT_KIT_DID);
+  if (component) {
+    return component.mountPoint;
+  }
+
+  return window.blocklet.prefix;
+};
+
+export function formatToDate(date: Date | string | number, locale = 'en') {
+  if (!date) {
+    return '-';
+  }
+
+  return dayjs(date).locale(formatLocale(locale)).format('YYYY-MM-DD HH:mm:ss');
+}
+
+export function formatToDatetime(date: Date | string | number, locale = 'en') {
+  if (!date) {
+    return '-';
+  }
+
+  return dayjs(date).locale(formatLocale(locale)).format('lll');
+}
+
+export function formatTime(date: Date | string | number, format = 'YYYY-MM-DD HH:mm:ss', locale = 'en') {
+  if (!date) {
+    return '-';
+  }
+
+  return dayjs(date).locale(formatLocale(locale)).format(format);
+}
+
+export function formatDateTime(date: Date | string | number, locale = 'en') {
+  return dayjs(date).locale(formatLocale(locale)).format('YYYY-MM-DD HH:mm');
+}
+
+export const formatLocale = (locale = 'en') => {
+  if (locale === 'tw') {
+    return 'zh';
+  }
+
+  return locale;
+};
+
+export const formatPrettyMsLocale = (locale: string) => (locale === 'zh' ? 'zh_CN' : 'en_US');
+
+export const formatError = (err: any) => {
+  const { details, errors, response } = err;
+
+  // graphql error
+  if (Array.isArray(errors)) {
+    return errors.map((x) => x.message).join('\n');
+  }
+
+  // joi validate error
+  if (Array.isArray(details)) {
+    const formatted = details.map((e) => {
+      const errorMessage = e.message.replace(/["]/g, "'");
+      const errorPath = e.path.join('.');
+      return `${errorPath}: ${errorMessage}`;
+    });
+
+    return `Validate failed: ${formatted.join(';')}`;
+  }
+
+  // axios error
+  if (response) {
+    return response.data.error || `${err.message}: ${JSON.stringify(response.data)}`;
+  }
+
+  return err.message;
+};
+
+export const formatPrice = (
+  price: TPrice,
+  currency: TPaymentCurrency,
+  unit_label?: string,
+  quantity: number = 1,
+  bn: boolean = true,
+  locale: string = 'en'
+) => {
+  const unit = getPriceUintAmountByCurrency(price, currency);
+  const amount = bn
+    ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
+    : +unit * quantity;
+  if (price?.type === 'recurring' && price.recurring) {
+    const recurring = formatRecurring(price.recurring, false, 'slash', locale);
+
+    if (unit_label) {
+      return `${amount} ${currency.symbol} / ${unit_label} ${recurring}`;
+    }
+    if (price.recurring.usage_type === 'metered') {
+      return `${amount} ${currency.symbol} / unit ${recurring}`;
+    }
+
+    return `${amount} ${currency.symbol} ${recurring}`;
+  }
+
+  return `${amount} ${currency.symbol}`;
+};
+
+export const formatPriceAmount = (
+  price: TPrice,
+  currency: TPaymentCurrency,
+  unit_label?: string,
+  quantity: number = 1,
+  bn: boolean = true
+) => {
+  const unit = getPriceUintAmountByCurrency(price, currency);
+  const amount = bn
+    ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
+    : +unit * quantity;
+  if (price?.type === 'recurring' && price.recurring) {
+    if (unit_label) {
+      return `${amount} ${currency.symbol} / ${unit_label}`;
+    }
+    if (price.recurring.usage_type === 'metered') {
+      return `${amount} ${currency.symbol} / unit`;
+    }
+
+    return `${amount} ${currency.symbol}`;
+  }
+
+  return `${amount} ${currency.symbol}`;
+};
+
+export function getStatementDescriptor(items: any[]) {
+  for (const item of items) {
+    if (item.price?.product?.statement_descriptor) {
+      return item.price?.product?.statement_descriptor;
+    }
+  }
+
+  return window.blocklet.appName;
+}
+
+export function formatRecurring(
+  recurring: PriceRecurring,
+  translate: boolean = true,
+  separator: string = 'per',
+  locale: string = 'en'
+) {
+  const intervals = {
+    hour: 'hourly',
+    day: 'daily',
+    week: 'weekly',
+    month: 'monthly',
+    year: 'yearly',
+  };
+
+  if (+recurring.interval_count === 1) {
+    const interval = t(`common.${recurring.interval}`, locale);
+    // @ts-ignore
+    return translate ? t(`common.${intervals[recurring.interval]}`, locale) : separator ? t(`common.${separator}`, locale, { interval }) : interval; // prettier-ignore
+  }
+
+  return t('common.recurring', locale, {
+    count: recurring.interval_count,
+    interval: t(`common.${recurring.interval}s`, locale),
+  });
+}
+
+export function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency) {
+  const options = getPriceCurrencyOptions(price);
+  const option = options.find((x) => x.currency_id === currency.id);
+  if (option) {
+    return option.unit_amount;
+  }
+
+  return price.unit_amount;
+}
+
+export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
+  if (Array.isArray(price.currency_options)) {
+    return price.currency_options;
+  }
+
+  return [{ currency_id: price.currency_id, unit_amount: price.unit_amount, tiers: null, custom_unit_amount: null }];
+}
+
+export function formatLineItemPricing(
+  item: TLineItemExpanded,
+  currency: TPaymentCurrency,
+  trial: number,
+  locale: string = 'en'
+): { primary: string; secondary?: string; quantity: string } {
+  const price = item.upsell_price || item.price;
+
+  let quantity = t('common.qty', locale, { count: item.quantity });
+  if (price.recurring?.usage_type === 'metered' || +item.quantity === 1) {
+    quantity = '';
+  }
+
+  const total = `${fromUnitToToken(
+    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(item.quantity)),
+    currency.decimal
+  )} ${currency.symbol}`;
+  const unit = `${fromUnitToToken(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+
+  const appendUnit = (v: string, alt: string) => {
+    if (price.product.unit_label) {
+      return `${v}/${price.product.unit_label}`;
+    }
+    if (price.recurring?.usage_type === 'metered' || item.quantity === 1) {
+      return alt;
+    }
+
+    return quantity ? t('common.each', locale, { unit }) : '';
+  };
+
+  if (price.type === 'recurring' && price.recurring) {
+    if (trial > 0) {
+      return {
+        primary: t('common.trial', locale, { count: trial }),
+        secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, 'slash', locale)}`,
+        quantity,
+      };
+    }
+
+    return {
+      primary: total,
+      secondary: appendUnit(total, ''),
+      quantity,
+    };
+  }
+
+  return {
+    primary: total,
+    secondary: appendUnit(total, ''),
+    quantity,
+  };
+}
+
+export function getCheckoutAmount(
+  items: TLineItemExpanded[],
+  currency: TPaymentCurrency,
+  includeFreeTrial = false,
+  upsell = true
+) {
+  let renew = new BN(0);
+
+  const total = items
+    .reduce((acc, x) => {
+      const price = upsell ? x.upsell_price || x.price : x.price;
+      if (price.type === 'recurring') {
+        renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+
+        if (includeFreeTrial) {
+          return acc;
+        }
+        if (price.recurring?.usage_type === 'metered') {
+          return acc;
+        }
+      }
+      return acc.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+    }, new BN(0))
+    .toString();
+
+  return { subtotal: total, total, renew: renew.toString(), discount: '0', shipping: '0', tax: '0' };
+}
+
+export function getRecurringPeriod(recurring: PriceRecurring) {
+  const { interval } = recurring;
+  const count = +recurring.interval_count || 1;
+  const dayInMs = 24 * 60 * 60 * 1000;
+
+  switch (interval) {
+    case 'hour':
+      return 60 * 60 * 1000;
+    case 'day':
+      return count * dayInMs;
+    case 'week':
+      return count * 7 * dayInMs;
+    case 'month':
+      return count * 30 * dayInMs;
+    case 'year':
+      return count * 365 * dayInMs;
+    default:
+      throw new Error(`Unsupported recurring interval: ${interval}`);
+  }
+}
+
+export function formatUpsellSaving(session: TCheckoutSessionExpanded, currency: TPaymentCurrency) {
+  const items = session.line_items as TLineItemExpanded[];
+  if (items[0]?.upsell_price_id) {
+    return '0';
+  }
+  if (!items[0]?.price.upsell?.upsells_to) {
+    return '0';
+  }
+
+  const from = getCheckoutAmount(items, currency, false, false);
+  const to = getCheckoutAmount(
+    items.map((x) => ({
+      ...x,
+      upsell_price_id: x.price.upsell?.upsells_to_id,
+      upsell_price: x.price.upsell?.upsells_to,
+    })) as TLineItemExpanded[],
+    currency,
+    false,
+    true
+  );
+
+  const fromRecurring = items[0].price?.recurring as PriceRecurring;
+  const toRecurring = items[0].price?.upsell?.upsells_to?.recurring as PriceRecurring;
+  if (!fromRecurring || !toRecurring) {
+    return '0';
+  }
+
+  const factor = Math.floor(getRecurringPeriod(toRecurring) / getRecurringPeriod(fromRecurring));
+
+  const before = new BN(from.total).mul(new BN(factor));
+  const after = new BN(to.total);
+
+  return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
+}
+
+export function formatCheckoutHeadlines(
+  session: TCheckoutSessionExpanded,
+  currency: TPaymentCurrency,
+  locale: string = 'en'
+): {
+  action: string;
+  amount: string;
+  then?: string;
+  secondary?: string;
+} {
+  const items = session.line_items as TLineItemExpanded[];
+  const trial = session.subscription_data?.trial_period_days || 0;
+
+  const brand = getStatementDescriptor(items);
+  const { total } = getCheckoutAmount(items, currency, !!trial);
+  const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
+
+  // empty
+  if (items.length === 0) {
+    return {
+      action: t('payment.checkout.empty', locale),
+      amount: '0',
+      then: '',
+    };
+  }
+
+  const { name } = items[0]?.price.product || { name: '' };
+
+  // all one time
+  if (items.every((x) => x.price.type === 'one_time')) {
+    const action = t('payment.checkout.pay', locale, { payee: brand });
+    if (items.length > 1) {
+      return { action, amount };
+    }
+
+    return { action, amount, then: '' };
+  }
+
+  const item = items.find((x) => x.price.type === 'recurring');
+  const recurring = formatRecurring(
+    (item?.upsell_price || item?.price)?.recurring as PriceRecurring,
+    false,
+    'per',
+    locale
+  );
+
+  // all recurring
+  if (items.every((x) => x.price.type === 'recurring')) {
+    const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
+    const subscription = [
+      hasMetered ? t('payment.checkout.least', locale) : '',
+      fromUnitToToken(
+        items.reduce((acc, x) => {
+          if (x.price.recurring?.usage_type === 'metered') {
+            return acc;
+          }
+          return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+        }, new BN(0)),
+        currency.decimal
+      ),
+      currency.symbol,
+    ]
+      .filter(Boolean)
+      .join(' ');
+    if (items.length > 1) {
+      if (trial > 0) {
+        return {
+          action: t('payment.checkout.try2', locale, { name, count: items.length - 1 }),
+          amount: t('payment.checkout.free', locale, { count: trial }),
+          then: t('payment.checkout.then', locale, { subscription, recurring }),
+        };
+      }
+
+      return {
+        action: t('payment.checkout.sub2', locale, { name, count: items.length - 1 }),
+        amount,
+        then: recurring,
+      };
+    }
+
+    if (trial > 0) {
+      return {
+        action: t('payment.checkout.try1', locale, { name }),
+        amount: t('payment.checkout.free', locale, { count: trial }),
+        then: t('payment.checkout.then', locale, { subscription, recurring }),
+      };
+    }
+
+    return {
+      action: t('payment.checkout.sub1', locale, { name }),
+      amount,
+      then: recurring,
+    };
+  }
+
+  // mixed
+  const subscription = fromUnitToToken(
+    items
+      .filter((x) => x.price.type === 'recurring')
+      .reduce((acc, x) => {
+        if (x.price.recurring?.usage_type === 'metered') {
+          return acc;
+        }
+        return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+      }, new BN(0)),
+    currency.decimal
+  );
+
+  return {
+    action: t('payment.checkout.pay', locale, { payee: brand }),
+    amount,
+    then: t('payment.checkout.then', locale, { subscription: `${subscription} ${currency.symbol}`, recurring }),
+  };
+}
+
+export function formatAmount(amount: string, decimals: number) {
+  return fromUnitToToken(amount, decimals);
+}
+
+export function findCurrency(methods: TPaymentMethodExpanded[], currencyId: string) {
+  for (const method of methods) {
+    for (const currency of method.payment_currencies) {
+      if (currency.id === currencyId) {
+        return currency;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function isValidCountry(code: string) {
+  return defaultCountries.some((x) => x[1] === code);
+}
+
+export function stopEvent(e: React.SyntheticEvent<any>) {
+  try {
+    e.stopPropagation();
+    e.preventDefault();
+    // eslint-disable-next-line no-empty
+  } catch {
+    // Do nothing
+  }
+}
+
+export function sleep(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded) => {
+  const lines = [`Started on ${formatToDate(subscription.start_date * 1000)}`];
+  if (subscription.status === 'active' || subscription.status === 'trialing') {
+    if (subscription.cancel_at) {
+      lines.push(`will cancel on ${formatToDate(subscription.cancel_at * 1000)}`);
+    } else if (subscription.cancel_at_period_end) {
+      lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1000)}`);
+    } else {
+      lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1000)}`);
+    }
+  } else if (subscription.status === 'past_due') {
+    lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1000)}`);
+  } else if (subscription.status === 'canceled') {
+    lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1000)}`);
+  }
+
+  return lines.join(', ');
+};
+
+export const getSubscriptionAction = (subscription: TSubscriptionExpanded) => {
+  if (subscription.status !== 'canceled' && subscription.cancel_at_period_end) {
+    return { action: 'recover', variant: 'contained', color: 'primary' };
+  }
+
+  if (subscription.status === 'active' || subscription.status === 'trialing') {
+    if (subscription.cancel_at) {
+      return null;
+    }
+    if (subscription.cancel_at_period_end) {
+      return { action: 'recover', variant: 'contained', color: 'primary' };
+    }
+
+    return { action: 'cancel', variant: 'outlined', color: 'inherit' };
+  }
+
+  if (subscription.status === 'past_due') {
+    return { action: 'pastDue', variant: 'contained', color: 'primary' };
+  }
+
+  return null;
+};
+
+export const mergeExtraParams = (extra: Record<string, any> = {}) => {
+  const params = new URLSearchParams(window.location.search);
+  Object.keys(extra).forEach((key) => {
+    params.set(key, extra[key]);
+  });
+
+  return params.toString();
+};