@blocklet/payment-react 1.13.113

package/src/payment/success.tsx

@@ -0,0 +1,186 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Grow, Link, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { joinURL } from 'ufo';
+
+import { usePaymentContext } from '../contexts/payment';
+
+type Props = {
+  message: string;
+  action: string;
+  payee: string;
+};
+
+export default function PaymentSuccess({ message, action, payee }: Props) {
+  const { t } = useLocaleContext();
+  const { prefix } = usePaymentContext();
+  return (
+    <Grow in>
+      <Stack direction="column" alignItems="center" justifyContent="center" sx={{ height: 360 }}>
+        <Div>
+          <div className="check-icon">
+            <span className="icon-line line-tip" />
+            <span className="icon-line line-long" />
+            <div className="icon-circle" />
+            <div className="icon-fix" />
+          </div>
+        </Div>
+        <Typography variant="h5" color="text.primary" mb={3}>
+          {message}
+        </Typography>
+        <Typography variant="body1" color="text.secondary" textAlign="center">
+          {t('payment.checkout.completed.tip', { payee })}
+        </Typography>
+        {['subscription', 'setup'].includes(action) && (
+          <Typography textAlign="center" sx={{ mt: 2 }}>
+            <Link href={joinURL(prefix, '/customer')}>{t('payment.checkout.portal', { payee })}</Link>
+          </Typography>
+        )}
+      </Stack>
+    </Grow>
+  );
+}
+
+const Div = styled('div')`
+  width: 80px;
+  height: 115px;
+
+  .check-icon {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    border-radius: 50%;
+    box-sizing: content-box;
+    border: 4px solid ${(props) => props.theme.palette.success.main};
+  }
+  .check-icon::before {
+    top: 3px;
+    left: -2px;
+    width: 30px;
+    transform-origin: 100% 50%;
+    border-radius: 100px 0 0 100px;
+  }
+  .check-icon::after {
+    top: 0;
+    left: 30px;
+    width: 60px;
+    transform-origin: 0 50%;
+    border-radius: 0 100px 100px 0;
+    animation: rotate-circle 4.25s ease-in;
+  }
+  .check-icon::before,
+  .check-icon::after {
+    content: '';
+    height: 100px;
+    position: absolute;
+    background: #ffffff;
+    transform: rotate(-45deg);
+  }
+  .check-icon .icon-line {
+    height: 5px;
+    background-color: ${(props) => props.theme.palette.success.main};
+    display: block;
+    border-radius: 2px;
+    position: absolute;
+    z-index: 10;
+  }
+  .check-icon .icon-line.line-tip {
+    top: 46px;
+    left: 14px;
+    width: 25px;
+    transform: rotate(45deg);
+    animation: icon-line-tip 0.75s;
+  }
+  .check-icon .icon-line.line-long {
+    top: 38px;
+    right: 8px;
+    width: 47px;
+    transform: rotate(-45deg);
+    animation: icon-line-long 0.75s;
+  }
+  .check-icon .icon-circle {
+    top: -4px;
+    left: -4px;
+    z-index: 10;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: content-box;
+    border: 4px solid rgba(76, 175, 80, 0.5);
+  }
+  .check-icon .icon-fix {
+    top: 8px;
+    width: 5px;
+    left: 26px;
+    z-index: 1;
+    height: 85px;
+    position: absolute;
+    transform: rotate(-45deg);
+    background-color: #ffffff;
+  }
+
+  @keyframes rotate-circle {
+    0% {
+      transform: rotate(-45deg);
+    }
+    5% {
+      transform: rotate(-45deg);
+    }
+    12% {
+      transform: rotate(-405deg);
+    }
+    100% {
+      transform: rotate(-405deg);
+    }
+  }
+  @keyframes icon-line-tip {
+    0% {
+      width: 0;
+      left: 1px;
+      top: 19px;
+    }
+    54% {
+      width: 0;
+      left: 1px;
+      top: 19px;
+    }
+    70% {
+      width: 50px;
+      left: -8px;
+      top: 37px;
+    }
+    84% {
+      width: 17px;
+      left: 21px;
+      top: 48px;
+    }
+    100% {
+      width: 25px;
+      left: 14px;
+      top: 45px;
+    }
+  }
+  @keyframes icon-line-long {
+    0% {
+      width: 0;
+      right: 46px;
+      top: 54px;
+    }
+    65% {
+      width: 0;
+      right: 46px;
+      top: 54px;
+    }
+    84% {
+      width: 55px;
+      right: 0px;
+      top: 35px;
+    }
+    100% {
+      width: 47px;
+      right: 8px;
+      top: 38px;
+    }
+  }
+`;

package/src/payment/summary.tsx

@@ -0,0 +1,198 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import { LoadingButton } from '@mui/lab';
+import { Fade, Grow, Stack, Typography, keyframes } from '@mui/material';
+import { useRequest, useSetState } from 'ahooks';
+import noop from 'lodash/noop';
+import useBus from 'use-bus';
+
+import api from '../api';
+import Status from '../components/status';
+import { formatCheckoutHeadlines } from '../util';
+import PaymentAmount from './amount';
+import ProductItem from './product-item';
+
+const shake = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(2deg);
+  }
+  50% {
+    transform: rotate(0eg);
+  }
+  75% {
+    transform: rotate(-2deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`;
+
+type Props = {
+  checkoutSession: TCheckoutSessionExpanded;
+  currency: TPaymentCurrency;
+  onUpsell: Function;
+  onDownsell: Function;
+  onApplyCrossSell: Function;
+  onCancelCrossSell: Function;
+};
+
+async function fetchCrossSell(id: string) {
+  try {
+    const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell`);
+    if (!data.error) {
+      return data;
+    }
+
+    return null;
+  } catch (err) {
+    return null;
+  }
+}
+
+export default function PaymentSummary({
+  checkoutSession,
+  currency,
+  onUpsell,
+  onDownsell,
+  onApplyCrossSell,
+  onCancelCrossSell,
+}: Props) {
+  const { t, locale } = useLocaleContext();
+  const [state, setState] = useSetState({ loading: false, shake: false });
+  const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
+  const headlines = formatCheckoutHeadlines(checkoutSession, currency, locale);
+
+  useBus(
+    'error.REQUIRE_CROSS_SELL',
+    () => {
+      setState({ shake: true });
+      setTimeout(() => {
+        setState({ shake: false });
+      }, 1000);
+    },
+    []
+  );
+
+  const handleUpsell = async (from: string, to: string) => {
+    await onUpsell(from, to);
+    runAsync();
+  };
+
+  const handleDownsell = async (from: string) => {
+    await onDownsell(from);
+    runAsync();
+  };
+
+  const handleApplyCrossSell = async () => {
+    if (data) {
+      try {
+        setState({ loading: true });
+        await onApplyCrossSell(data.id);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setState({ loading: false });
+      }
+    }
+  };
+
+  const handleCancelCrossSell = async () => {
+    try {
+      setState({ loading: true });
+      await onCancelCrossSell();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setState({ loading: false });
+    }
+  };
+
+  return (
+    <Fade in>
+      <Stack
+        className="cko-product"
+        direction="column"
+        sx={{
+          mt: 8,
+        }}>
+        <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: 4 }}>
+          <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
+            {headlines.action}
+          </Typography>
+          <PaymentAmount amount={headlines.amount} />
+          {headlines.then && (
+            <Typography sx={{ fontSize: '0.9rem', color: 'text.secondary' }}>{headlines.then}</Typography>
+          )}
+        </Stack>
+        <Stack spacing={2}>
+          {checkoutSession.line_items.map((x: TLineItemExpanded) => (
+            <ProductItem
+              key={x.price_id}
+              item={x}
+              session={checkoutSession}
+              currency={currency}
+              onUpsell={handleUpsell}
+              onDownsell={handleDownsell}>
+              {x.cross_sell && (
+                <LoadingButton
+                  size="small"
+                  loadingPosition="end"
+                  color="error"
+                  variant="text"
+                  loading={state.loading}
+                  onClick={handleCancelCrossSell}>
+                  {t('payment.checkout.cross_sell.remove')}
+                </LoadingButton>
+              )}
+            </ProductItem>
+          ))}
+        </Stack>
+        {data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && (
+          <Grow in>
+            <Stack
+              direction="column"
+              alignItems="flex-end"
+              spacing={0.5}
+              sx={{
+                border: '1px solid #eee',
+                borderRadius: 1,
+                padding: 1,
+                animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : 'none',
+                mt: {
+                  xs: 4,
+                  md: 8,
+                },
+              }}>
+              <ProductItem
+                item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
+                session={checkoutSession}
+                currency={currency}
+                onUpsell={noop}
+                onDownsell={noop}
+              />
+              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
+                <Typography>
+                  {checkoutSession.cross_sell_behavior === 'required' && (
+                    <Status label={t('payment.checkout.required')} color="info" variant="outlined" sx={{ mr: 1 }} />
+                  )}
+                </Typography>
+                <LoadingButton
+                  size="small"
+                  loadingPosition="end"
+                  color={checkoutSession.cross_sell_behavior === 'required' ? 'info' : 'info'}
+                  variant={checkoutSession.cross_sell_behavior === 'required' ? 'text' : 'text'}
+                  loading={state.loading}
+                  onClick={handleApplyCrossSell}>
+                  {t('payment.checkout.cross_sell.add')}
+                </LoadingButton>
+              </Stack>
+            </Stack>
+          </Grow>
+        )}
+      </Stack>
+    </Fade>
+  );
+}

package/src/theme.ts

@@ -0,0 +1,18 @@
+import { createTheme } from '@arcblock/ux/lib/Theme';
+import merge from 'lodash/merge';
+
+export default function create(settings: any = {}) {
+  return createTheme(
+    merge(
+      {
+        typography: {
+          fontSize: 14,
+          allVariants: {
+            textTransform: 'none',
+          },
+        },
+      },
+      settings
+    )
+  );
+}

package/src/types/index.ts

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import type {
+  TCheckoutSessionExpanded,
+  TCustomer,
+  TPaymentIntent,
+  TPaymentLink,
+  TPaymentMethodExpanded,
+} from '@blocklet/payment-types';
+import { LiteralUnion } from 'type-fest';
+
+export type CheckoutContext = {
+  checkoutSession: TCheckoutSessionExpanded;
+  paymentMethods: TPaymentMethodExpanded[];
+  paymentLink?: TPaymentLink;
+  paymentIntent?: TPaymentIntent;
+  customer?: TCustomer;
+  mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+};
+
+export type CheckoutProps = Partial<CheckoutCallbacks> & {
+  id: string;
+  extraParams?: Record<string, any>;
+  mode?: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+};
+
+export type CheckoutCallbacks = {
+  onPaid: (res: CheckoutContext) => void;
+  onError: (err: Error) => void;
+};

package/src/types/shims.d.ts

@@ -0,0 +1,18 @@
+declare module '@arcblock/ux/*';
+declare module '@arcblock/did-connect/*';
+
+declare module '*.png';
+
+declare module 'google-libphonenumber';
+
+declare module 'flat';
+
+declare module '@arcblock/*';
+
+declare module '@blocklet/*';
+
+declare module 'pretty-ms-i18n';
+
+declare interface Window {
+  blocklet: any;
+}