payment-kit 1.13.38 → 1.13.40

package/src/components/product/cross-sell.tsx

@@ -0,0 +1,83 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TProductExpanded } from '@did-pay/types';
+import { DeleteOutlineOutlined } from '@mui/icons-material';
+import { CircularProgress, Grid, IconButton, Stack } from '@mui/material';
+import { useSetState } from 'ahooks';
+
+import { ProductsProvider } from '../../contexts/products';
+import { useSettingsContext } from '../../contexts/settings';
+import api from '../../libs/api';
+import { formatError, formatProductPrice } from '../../libs/util';
+import InfoCard from '../info-card';
+import InfoRow from '../info-row';
+import CrossSellSelect from './cross-sell-select';
+
+export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onChange: Function }) {
+  const { settings } = useSettingsContext();
+  const [state, setState] = useSetState({
+    loading: false,
+  });
+
+  const onRemoveUpsell = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/products/${data.id}`, { cross_sell: { cross_sells_to_id: '' } }).then((res) => res.data);
+      setState({ loading: false });
+      onChange();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+      setState({ loading: false });
+    }
+  };
+
+  const onSelectUpsell = async (id: string) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/products/${data.id}`, { cross_sell: { cross_sells_to_id: id } }).then((res) => res.data);
+      setState({ loading: false });
+      onChange();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+      setState({ loading: false });
+    }
+  };
+
+  if (state.loading) {
+    return <CircularProgress />;
+  }
+
+  if (data.cross_sell?.cross_sells_to_id) {
+    const to = data.cross_sell.cross_sells_to;
+    return (
+      <Stack spacing={1} direction="row" alignItems="center">
+        <InfoCard
+          name={to.name}
+          description={formatProductPrice(to as any, settings.baseCurrency)}
+          logo={to.images[0]}
+        />
+        <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>
+          <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+        </IconButton>
+      </Stack>
+    );
+  }
+
+  return <CrossSellSelect data={data} onSelect={onSelectUpsell} />;
+}
+
+export default function ProductCrossSell({ data, onChange }: { data: TProductExpanded; onChange: Function }) {
+  const { t } = useLocaleContext();
+
+  return (
+    <ProductsProvider>
+      <Grid container>
+        <Grid item xs={12} md={6}>
+          <InfoRow label={t('admin.product.cross_sell.to')} value={<CrossSellForm data={data} onChange={onChange} />} />
+        </Grid>
+      </Grid>
+    </ProductsProvider>
+  );
+}

package/src/locales/en.tsx

@@ -97,6 +97,7 @@ export default flat({
       additional: 'Additional options',
       edit: 'Edit product',
       pricing: 'Pricing',
+      find: 'Find a product',
       archive: 'Archive product',
       archiveTip: 'Archiving will hide this product from new purchases. Are you sure you want to archive this product?',
       unarchive: 'Unarchive product',
@@ -134,6 +135,11 @@ export default flat({
         label: 'Unit label',
         placeholder: 'Seat',
       },
+      cross_sell: {
+        title: 'Cross-sells',
+        to: 'Cross-sells to',
+        tip: '',
+      },
     },
     price: {
       name: 'Price',
@@ -221,6 +227,7 @@ export default flat({
       requireBillingAddress: 'Collect customers billing addresses',
       requirePhoneNumber: 'Collect customers phone numbers',
       allowPromotionCodes: 'Allow promotion codes',
+      requireCrossSell: 'Require cross sell products selected if eligible',
       includeFreeTrail: 'Include a free trial',
       includeCustomFields: 'Add custom fields',
       confirmPage: 'Confirmation Page',
@@ -521,6 +528,10 @@ export default flat({
       revert: 'Switch to {recurring} billing',
       off: '{saving}% off',
     },
+    cross_sell: {
+      add: 'Add to order',
+      remove: 'Remove from order',
+    },
     expired: {
       title: 'Expired Link',
       description:

package/src/locales/zh.tsx

@@ -97,6 +97,7 @@ export default flat({
       additional: '附加选项',
       edit: '编辑产品',
       pricing: '定价',
+      find: '选择产品',
       archive: '存档产品',
       archiveTip: '存档将隐藏此产品不再允许新购买。确定要存档此产品吗？',
       unarchive: '取消存档产品',
@@ -133,6 +134,11 @@ export default flat({
         label: '单位标签',
         placeholder: '座位',
       },
+      cross_sell: {
+        title: '交叉销售',
+        to: '交叉销售',
+        tip: '',
+      },
     },
     price: {
       name: '价格',
@@ -221,6 +227,7 @@ export default flat({
       allowPromotionCodes: '允许促销代码',
       includeFreeTrail: '包含免费试用',
       includeCustomFields: '添加自定义字段',
+      requireCrossSell: '用户必须选择交叉销售的商品（如果有的话）',
       confirmPage: '确认页面',
       showConfirmPage: '显示确认页面',
       customMessage: '用自定义消息替换默认消息',
@@ -520,6 +527,10 @@ export default flat({
       title: '结账已完成',
       description: '此结账会话已完成。这意味着您的付款已成功处理完成。',
     },
+    cross_sell: {
+      add: '添加到订单',
+      remove: '从订单移除',
+    },
   },
   customer: {
     subscriptions: '当前订阅',

package/src/pages/admin/payments/links/create.tsx

@@ -69,6 +69,7 @@ export default function CreatePaymentLink() {
         enabled: false,
         factory: '',
       },
+      cross_sell_behavior: 'auto',
       metadata: [], // FIXME:
       custom_fields: [], // FIXME:
       submit_type: 'auto', // FIXME:

package/src/pages/admin/products/products/detail.tsx

@@ -16,6 +16,7 @@ import InfoRow from '../../../../components/info-row';
 import MetadataEditor from '../../../../components/metadata/editor';
 import ProductActions from '../../../../components/product/actions';
 import AddPrice from '../../../../components/product/add-price';
+import ProductCrossSell from '../../../../components/product/cross-sell';
 import EditProduct from '../../../../components/product/edit';
 import SectionHeader from '../../../../components/section/header';
 import { useSettingsContext } from '../../../../contexts/settings';
@@ -204,6 +205,12 @@ export default function ProductDetail(props: { id: string }) {
           )}
         </Box>
       </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.product.cross_sell.title')} />
+        <Box className="section-body">
+          <ProductCrossSell data={data} onChange={runAsync} />
+        </Box>
+      </Box>
       <Box className="section">
         <SectionHeader title={t('common.metadata.label')}>
           <Button

package/src/pages/checkout/pay.tsx

@@ -24,8 +24,8 @@ type PageData = {
   customer?: TCustomer;
 };
 
-const startFromPaymentLink = async (id: string, preview: string, redirect: string = ''): Promise<PageData> => {
-  const { data } = await api.post(`/api/checkout-sessions/start/${id}?preview=${preview}&redirect=${redirect}`);
+const startFromPaymentLink = async (id: string, params: string): Promise<PageData> => {
+  const { data } = await api.post(`/api/checkout-sessions/start/${id}?${params}`);
   return data;
 };
 
@@ -42,9 +42,7 @@ export default function Payment({ id }: Props) {
   const [state, setState] = useSetState({ completed: false, appError: null });
 
   const { error: apiError, data } = useRequest(() =>
-    type === 'paymentLink'
-      ? startFromPaymentLink(id, params.get('preview') || '', params.get('redirect') || '')
-      : fetchCheckoutSession(id)
+    type === 'paymentLink' ? startFromPaymentLink(id, params.toString()) : fetchCheckoutSession(id)
   );
 
   useEffect(() => {

package/src/pages/checkout/pricing-table.tsx

@@ -125,7 +125,7 @@ export default function PricingTable({ id }: Props) {
   const onStartCheckoutSession = (priceId: string) => {
     setState({ loading: priceId });
     api
-      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?redirect=${params.get('redirect') || ''}`)
+      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${params.toString()}`)
       .then((res) => {
         window.location.href = res.data.url;
       })