payment-kit 1.13.23 → 1.13.25

package/api/src/store/models/index.ts

@@ -11,13 +11,14 @@ import { PaymentIntent, TPaymentIntent } from './payment-intent';
 import { PaymentLink, TPaymentLink } from './payment-link';
 import { PaymentMethod, TPaymentMethod } from './payment-method';
 import { Price, TPrice } from './price';
+import { PricingTable, TPricingTable } from './pricing-table';
 import { Product, TProduct } from './product';
 import { PromotionCode } from './promotion-code';
 import { SetupIntent, TSetupIntent } from './setup-intent';
 import { Subscription, TSubscription } from './subscription';
 import { SubscriptionItem, TSubscriptionItem } from './subscription-item';
 import { SubscriptionSchedule } from './subscription-schedule';
-import type { LineItem } from './types';
+import type { LineItem, PricingTableItem } from './types';
 import { TUsageRecord, UsageRecord } from './usage-record';
 import { TWebhookAttempt, WebhookAttempt } from './webhook-attempt';
 import { TWebhookEndpoint, WebhookEndpoint } from './webhook-endpoint';
@@ -35,6 +36,7 @@ const models = {
   PaymentLink,
   PaymentMethod,
   Price,
+  PricingTable,
   Product,
   PromotionCode,
   SetupIntent,
@@ -71,6 +73,7 @@ export * from './payment-intent';
 export * from './payment-link';
 export * from './payment-method';
 export * from './price';
+export * from './pricing-table';
 export * from './product';
 export * from './promotion-code';
 export * from './setup-intent';
@@ -187,3 +190,13 @@ export type TUsageRecordSummary = {
 export type TSetupIntentExpanded = TSetupIntent & {
   object: 'setup_intent';
 };
+
+export type TPricingTableItem = PricingTableItem & {
+  price: TPrice;
+  product: TProduct;
+};
+
+export type TPricingTableExpanded = TPricingTable & {
+  items: TPricingTableItem[];
+  currency: TPaymentCurrency;
+};

package/api/src/store/models/pricing-table.ts

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/lines-between-class-members */
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
+import type { LiteralUnion } from 'type-fest';
+
+import { createEvent } from '../../libs/audit';
+import { createIdGenerator } from '../../libs/util';
+import type { BrandSettings, PricingTableItem } from './types';
+
+const nextId = createIdGenerator('prctbl', 24);
+
+// @link https://stripe.com/docs/api/payment_links/payment_links
+export class PricingTable extends Model<InferAttributes<PricingTable>, InferCreationAttributes<PricingTable>> {
+  // Unique identifier for the object.
+  declare id: CreationOptional<string>;
+
+  // Whether the PricingTable is currently available for purchase.
+  declare active: boolean;
+  declare livemode: boolean;
+  declare locked: boolean;
+
+  declare name: string;
+
+  // The items representing what is being sold. Each line item represents an item being sold. Up to 20 line items are supported.
+  declare items: PricingTableItem[];
+
+  declare branding_settings: BrandSettings;
+
+  declare metadata?: Record<string, any>;
+
+  declare created_at: CreationOptional<Date>;
+  declare created_via: LiteralUnion<'api' | 'dashboard' | 'portal', string>;
+  declare updated_at: CreationOptional<Date>;
+
+  public static readonly GENESIS_ATTRIBUTES = {
+    id: {
+      type: DataTypes.STRING(42),
+      primaryKey: true,
+      allowNull: false,
+      defaultValue: nextId,
+    },
+    active: {
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+    },
+    livemode: {
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+    },
+    locked: {
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+    },
+    name: {
+      type: DataTypes.STRING(255),
+      allowNull: true,
+    },
+    items: {
+      type: DataTypes.JSON,
+      defaultValue: [],
+    },
+    branding_settings: {
+      type: DataTypes.JSON,
+      allowNull: false,
+    },
+    metadata: {
+      type: DataTypes.JSON,
+      allowNull: true,
+    },
+    created_at: {
+      type: DataTypes.DATE,
+      defaultValue: DataTypes.NOW,
+      allowNull: false,
+    },
+    created_via: {
+      type: DataTypes.ENUM('api', 'dashboard', 'portal'),
+    },
+    updated_at: {
+      type: DataTypes.DATE,
+      defaultValue: DataTypes.NOW,
+      allowNull: false,
+    },
+  };
+
+  public static initialize(sequelize: any) {
+    this.init(PricingTable.GENESIS_ATTRIBUTES, {
+      sequelize,
+      modelName: 'PricingTable',
+      tableName: 'pricing_tables',
+      createdAt: 'created_at',
+      updatedAt: 'updated_at',
+      hooks: {
+        afterCreate: (model: PricingTable, options) =>
+          createEvent('PricingTable', 'pricing_table.created', model, options).catch(console.error),
+        afterUpdate: (model: PricingTable, options) =>
+          createEvent('PricingTable', 'pricing_table.updated', model, options).catch(console.error),
+        afterDestroy: (model: PricingTable, options) =>
+          createEvent('PricingTable', 'pricing_table.deleted', model, options).catch(console.error),
+      },
+    });
+  }
+
+  public static associate() {
+    // Do nothing
+  }
+}
+
+export type TPricingTable = InferAttributes<PricingTable>;

package/api/src/store/models/types.ts

@@ -262,6 +262,59 @@ export type PaymentDetails = {
   };
 };
 
+// Very similar to PaymentLink
+export type PricingTableItem = {
+  price_id: string;
+  product_id: string;
+
+  adjustable_quantity: {
+    enabled: boolean;
+    maximum: number;
+    minimum: number;
+  };
+
+  // The specified behavior after the purchase is complete.
+  after_completion?: AfterPayment;
+
+  // Enables user redeemable promotion codes.
+  allow_promotion_codes: boolean;
+
+  // Configuration for collecting the customer’s billing address.
+  billing_address_collection?: LiteralUnion<'auto' | 'required', string>;
+
+  is_highlight: boolean;
+  highlight_text?: LiteralUnion<'deal' | 'popular' | 'recommended', string>;
+
+  consent_collection?: {
+    promotions?: LiteralUnion<'auto' | 'none', string>;
+    terms_of_service?: LiteralUnion<'required' | 'none', string>;
+  };
+
+  // Collect additional information from your customer using custom fields. Up to 2 fields are supported.
+  custom_fields: CustomField[];
+
+  // Controls phone number collection settings during checkout.
+  phone_number_collection?: {
+    enabled: boolean;
+  };
+
+  // Describes the type of transaction being performed in order to customize relevant text
+  submit_type: LiteralUnion<'auto' | 'book' | 'donate' | 'pay', string>;
+
+  // When creating a subscription, the specified configuration data will be used.
+  subscription_data?: {
+    description: string;
+    trial_period_days: number;
+  };
+};
+
+export type BrandSettings = {
+  background_color: string;
+  border_style: string;
+  button_color: string;
+  font_family: string;
+};
+
 export type EventType = LiteralUnion<
   | 'account.application.authorized'
   | 'account.application.deauthorized'

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.23
+version: 1.13.25
 logo: logo.png
 files:
   - dist
@@ -40,7 +40,7 @@ payment:
 timeout:
   start: 60
 requirements:
-  server: '>=1.16.15'
+  server: '>=1.16.10'
   os: '*'
   cpu: '*'
 scripts:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.23",
+  "version": "1.13.25",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -64,6 +64,7 @@
     "axios": "^0.27.2",
     "body-parser": "^1.20.2",
     "cookie-parser": "^1.4.6",
+    "copy-to-clipboard": "^3.3.3",
     "cors": "^2.8.5",
     "dayjs": "^1.11.10",
     "dotenv-flow": "^3.3.0",
@@ -100,7 +101,7 @@
   "devDependencies": {
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.23",
+    "@did-pay/types": "1.13.25",
     "@types/cookie-parser": "^1.4.4",
     "@types/cors": "^2.8.14",
     "@types/dotenv-flow": "^3.3.1",
@@ -137,5 +138,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "a4ba80b4e2d020c912361af6fd555f8bfc52f54f"
+  "gitHead": "4032a368047c93d3fc52ecbaa4cf37221924f45c"
 }

package/src/app.tsx

@@ -36,7 +36,7 @@ function App() {
         <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
           <Suspense
             fallback={
-              <Center relative="parent">
+              <Center>
                 <CircularProgress />
               </Center>
             }>

package/src/components/blockchain/tx.tsx

@@ -38,6 +38,14 @@ const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
 };
 
 export default function TxLink(props: { details: PaymentDetails; method: TPaymentMethod }) {
+  if (!props.details) {
+    return (
+      <Typography component="small" color="text.secondary">
+        None
+      </Typography>
+    );
+  }
+
   const { text, link } = getTxLink(props.method, props.details);
   return (
     <Link href={link} target="_blank" rel="noopener noreferrer">

package/src/components/payment-link/actions.tsx

@@ -2,7 +2,9 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TPaymentLinkExpanded } from '@did-pay/types';
 import { useSetState } from 'ahooks';
+import Copy from 'copy-to-clipboard';
 import type { LiteralUnion } from 'type-fest';
+import { joinURL } from 'ufo';
 
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
@@ -54,7 +56,7 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
       setState({ loading: false, action: '' });
     }
   };
-  const noRemove = async () => {
+  const onRemove = async () => {
     try {
       setState({ loading: true });
       await api.delete(`/api/payment-links/${data.id}`).then((res) => res.data);
@@ -67,18 +69,27 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
       setState({ loading: false, action: '' });
     }
   };
+  const onCopyLink = () => {
+    Copy(joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pay/${data.id}`));
+    Toast.success(t('common.copied'));
+  };
 
   return (
     <ClickBoundary>
       <Actions
         variant={variant}
         actions={[
-          // {
-          //   label: t('admin.paymentLink.edit'),
-          //   handler: () => setState({ action: 'edit' }),
-          //   color: 'primary',
-          //   divider: true,
-          // },
+          {
+            label: t('admin.paymentLink.edit'),
+            handler: () => setState({ action: 'edit' }),
+            color: 'primary',
+            disabled: true,
+          },
+          {
+            label: t('admin.paymentLink.copyLink'),
+            handler: onCopyLink,
+            color: 'primary',
+          },
           { label: t('admin.paymentLink.rename'), handler: () => setState({ action: 'rename' }), color: 'primary' },
           { label: t('admin.paymentLink.archive'), handler: () => setState({ action: 'archive' }), color: 'primary' },
           { label: t('admin.paymentLink.remove'), handler: () => setState({ action: 'remove' }), color: 'error' },
@@ -86,7 +97,7 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
       />
       {state.action === 'rename' && (
         <RenamePaymentLink
-          paymentLink={data}
+          data={data}
           loading={state.loading}
           onSave={onUpdate}
           onCancel={() => setState({ action: '' })}
@@ -103,7 +114,7 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
       )}
       {state.action === 'remove' && (
         <ConfirmDialog
-          onConfirm={noRemove}
+          onConfirm={onRemove}
           onCancel={() => setState({ action: '' })}
           title={t('admin.paymentLink.remove')}
           message={t('admin.paymentLink.removeTip')}

package/src/components/payment-link/chrome.tsx

@@ -1,7 +1,11 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/system';
 
-const Chrome = styled(Box)`
+export default function Chrome({ children, ...props }: any) {
+  return <Root {...props}>{children}</Root>;
+}
+
+const Root = styled(Box)`
   background-color: #fcfeff;
   border-radius: 8px;
   margin-top: 40px;
@@ -9,5 +13,3 @@ const Chrome = styled(Box)`
   overflow: hidden;
   box-shadow: 0 20px 44px #32325d1f, 0 -1px 32px #32325d0f, 0 3px 12px #00000014;
 `;
-
-export default Chrome;

package/src/components/payment-link/preview.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unsafe-optional-chaining */
 import { Box } from '@mui/material';
 import { useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
@@ -13,15 +14,17 @@ export default function PaymentLinkPreview({ id, version }: { id: string; versio
   const ref = useRef(null);
   const size = useSize(ref);
   return (
-    <Chrome ref={ref}>
-      <Box sx={{ width: '100%' }}>&nbsp;</Box>
+    <Chrome>
+      <Box ref={ref} sx={{ width: '100%' }}>
+        &nbsp;
+      </Box>
       <IframeResizer
         style={{
-          width: '1px',
-          minWidth: size?.width,
+          // @ts-ignore
+          minWidth: size?.width / 0.8,
           minHeight: '64vh',
           transform: 'scale(0.8)',
-          transformOrigin: 'center',
+          transformOrigin: 'top left',
           border: 'none',
         }}
         src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}

package/src/components/payment-link/rename.tsx

@@ -8,12 +8,12 @@ import { FormProvider, useForm } from 'react-hook-form';
 import TextInput from '../input';
 
 export default function RenamePaymentLink({
-  paymentLink,
+  data,
   loading,
   onSave,
   onCancel,
 }: {
-  paymentLink: TPaymentLink;
+  data: TPaymentLink;
   loading: boolean;
   onSave: EventHandler<any>;
   onCancel: EventHandler<any>;
@@ -21,7 +21,7 @@ export default function RenamePaymentLink({
   const { t } = useLocaleContext();
   const methods = useForm<TPaymentLink>({
     defaultValues: {
-      name: paymentLink.name,
+      name: data.name,
     },
   });
 

package/src/components/price/form.tsx

@@ -125,7 +125,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
         <Controller
           name={getFieldName('unit_amount')}
           control={control}
-          rules={{ required: t('admin.price.unit_amount.required'), min: t('admin.price.unit_amount.positive') }}
+          rules={{
+            required: t('admin.price.unit_amount.required'),
+            validate: (v) => (Number(v) > 0 ? true : t('admin.price.unit_amount.positive')),
+          }}
           disabled={isLocked}
           render={({ field }) => (
             <Box>

package/src/components/pricing-table/actions.tsx

@@ -0,0 +1,126 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPricingTableExpanded } from '@did-pay/types';
+import { useSetState } from 'ahooks';
+import Copy from 'copy-to-clipboard';
+import type { LiteralUnion } from 'type-fest';
+import { joinURL } from 'ufo';
+
+import api from '../../libs/api';
+import { formatError } from '../../libs/util';
+import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
+import ConfirmDialog from '../confirm';
+import RenamePricingTable from './rename';
+
+type Props = {
+  data: TPricingTableExpanded;
+  onChange: (action: string) => void;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+};
+
+PricingTableActions.defaultProps = {
+  variant: 'compact',
+};
+
+export default function PricingTableActions({ data, variant, onChange }: Props) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onUpdate = async (updates: TPricingTableExpanded) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/pricing-tables/${data.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onArchive = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/pricing-tables/${data.id}/archive`).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onRemove = async () => {
+    try {
+      setState({ loading: true });
+      await api.delete(`/api/pricing-tables/${data.id}`).then((res) => res.data);
+      Toast.success(t('common.removed'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onCopyLink = () => {
+    Copy(joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pricing-table/${data.id}`));
+    Toast.success(t('common.copied'));
+  };
+
+  return (
+    <ClickBoundary>
+      <Actions
+        variant={variant}
+        actions={[
+          {
+            label: t('admin.pricingTable.edit'),
+            handler: () => setState({ action: 'edit' }),
+            color: 'primary',
+            disabled: true,
+          },
+          {
+            label: t('admin.pricingTable.copyLink'),
+            handler: onCopyLink,
+            color: 'primary',
+          },
+          { label: t('admin.pricingTable.rename'), handler: () => setState({ action: 'rename' }), color: 'primary' },
+          { label: t('admin.pricingTable.archive'), handler: () => setState({ action: 'archive' }), color: 'primary' },
+          { label: t('admin.pricingTable.remove'), handler: () => setState({ action: 'remove' }), color: 'error' },
+        ]}
+      />
+      {state.action === 'rename' && (
+        <RenamePricingTable
+          data={data}
+          loading={state.loading}
+          onSave={onUpdate}
+          onCancel={() => setState({ action: '' })}
+        />
+      )}
+      {state.action === 'archive' && (
+        <ConfirmDialog
+          onConfirm={onArchive}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.pricingTable.archive')}
+          message={t('admin.pricingTable.archiveTip')}
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'remove' && (
+        <ConfirmDialog
+          onConfirm={onRemove}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.pricingTable.remove')}
+          message={t('admin.pricingTable.removeTip')}
+          loading={state.loading}
+        />
+      )}
+    </ClickBoundary>
+  );
+}

package/src/components/pricing-table/customer-settings.tsx

@@ -0,0 +1,17 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Stack, Typography } from '@mui/material';
+
+export default function PricingTableCustomerSettings() {
+  const { t } = useLocaleContext();
+
+  return (
+    <Stack spacing={2} alignItems="flex-start">
+      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+        {t('admin.pricingTable.customer')}
+      </Typography>
+      <Stack spacing={2} sx={{ width: '100%' }}>
+        FIXME
+      </Stack>
+    </Stack>
+  );
+}