payment-kit 1.15.1 → 1.15.3

package/src/components/subscription/actions/cancel.tsx

@@ -36,7 +36,8 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
       setValue('cancel.refund', 'none');
     }
   }, [cancelAt, cancelTime]); // eslint-disable-line
-
+  const stakingDisabled = !staking || staking?.return_amount === '0';
+  const refundDisabled = !refund || refund.total === '0';
   const isCustom = cancelAt === 'custom';
   const { decimal, symbol } = data.paymentCurrency;
 
@@ -95,15 +96,15 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
           <RadioGroup>
             <FormControlLabel
               value="none"
-              disabled={loading || !refund}
-              onClick={() => !(loading || !refund) && setValue('cancel.refund', 'none')}
+              disabled={loading || refundDisabled}
+              onClick={() => !(loading || refundDisabled) && setValue('cancel.refund', 'none')}
               control={<Radio checked={refundType === 'none'} />}
               label={t('admin.subscription.cancel.refund.none')}
             />
             <FormControlLabel
               value="last"
-              disabled={loading || !refund}
-              onClick={() => !(loading || !refund) && setValue('cancel.refund', 'last')}
+              disabled={loading || refundDisabled}
+              onClick={() => !(loading || refundDisabled) && setValue('cancel.refund', 'last')}
               control={<Radio checked={refundType === 'last'} />}
               label={t('admin.subscription.cancel.refund.last', {
                 symbol,
@@ -112,8 +113,8 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
             />
             <FormControlLabel
               value="proration"
-              disabled={loading || !refund}
-              onClick={() => !(loading || !refund) && setValue('cancel.refund', 'proration')}
+              disabled={loading || refundDisabled}
+              onClick={() => !(loading || refundDisabled) && setValue('cancel.refund', 'proration')}
               control={<Radio checked={refundType === 'proration'} />}
               label={t('admin.subscription.cancel.refund.proration', {
                 symbol,
@@ -132,15 +133,15 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
             <RadioGroup>
               <FormControlLabel
                 value="none"
-                disabled={loading || !staking}
-                onClick={() => !(loading || !staking) && setValue('cancel.staking', 'none')}
+                disabled={loading || stakingDisabled}
+                onClick={() => !(loading || stakingDisabled) && setValue('cancel.staking', 'none')}
                 control={<Radio checked={stakingType === 'none'} />}
                 label={t('admin.subscription.cancel.staking.none')}
               />
               <FormControlLabel
                 value="proration"
-                disabled={loading || !staking}
-                onClick={() => !(loading || !staking) && setValue('cancel.staking', 'proration')}
+                disabled={loading || stakingDisabled}
+                onClick={() => !(loading || stakingDisabled) && setValue('cancel.staking', 'proration')}
                 control={<Radio checked={stakingType === 'proration'} />}
                 label={t('admin.subscription.cancel.staking.proration', {
                   unused: formatAmount(staking?.return_amount || '0', decimal),
@@ -149,8 +150,8 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
               />
               <FormControlLabel
                 value="slash"
-                disabled={loading || !staking}
-                onClick={() => !(loading || !staking) && setValue('cancel.staking', 'slash')}
+                disabled={loading || stakingDisabled}
+                onClick={() => !(loading || stakingDisabled) && setValue('cancel.staking', 'slash')}
                 control={<Radio checked={stakingType === 'slash'} />}
                 label={t('admin.subscription.cancel.staking.slash', {
                   unused: formatAmount(staking?.slash_amount || '0', decimal),
@@ -159,6 +160,33 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
               />
             </RadioGroup>
           </Stack>
+          {stakingType === 'slash' && (
+            <Controller
+              name="cancel.slashReason"
+              control={control}
+              rules={{
+                required: t('common.required'),
+                validate: (value) => value.trim() !== '' || t('common.required'),
+              }}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  variant="outlined"
+                  size="small"
+                  fullWidth
+                  multiline
+                  minRows={2}
+                  maxRows={4}
+                  placeholder={t('admin.subscription.cancel.staking.slashReason')}
+                  error={!!(formState.errors as any)?.cancel?.slashReason}
+                  helperText={(formState.errors as any)?.cancel?.slashReason?.message}
+                  inputProps={{
+                    maxLength: 200,
+                  }}
+                />
+              )}
+            />
+          )}
         </>
       )}
     </Root>

package/src/components/subscription/actions/index.tsx

@@ -12,6 +12,7 @@ import Actions from '../../actions';
 import ClickBoundary from '../../click-boundary';
 import SubscriptionCancelForm from './cancel';
 import SubscriptionPauseForm from './pause';
+import SlashStakeForm from './slash-stake';
 
 type Props = {
   data: TSubscriptionExpanded;
@@ -30,7 +31,7 @@ const fetchStakingData = (id: string, time: string): Promise<{ return_amount: st
 function SubscriptionActionsInner({ data, variant, onChange }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
-  const { reset, getValues, setError } = useFormContext();
+  const { reset, getValues, setError, handleSubmit } = useFormContext();
   const [state, setState] = useSetState({
     action: '',
     loading: false,
@@ -69,7 +70,8 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
 
       try {
         setState({ loading: true });
-        await api.put(`/api/subscriptions/${data.id}/${action}`, values[action] || {}).then((res) => res.data);
+        const key = action === 'slash-stake' ? 'slashStake' : action;
+        await api.put(`/api/subscriptions/${data.id}/${action}`, values[key] || {}).then((res) => res.data);
         Toast.success(t('common.saved'));
         onChange(state.action);
       } catch (err) {
@@ -148,7 +150,7 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
       <Actions variant={variant} actions={actions} onOpenCallback={fetchStakeResultAsync} />
       {state.action === 'cancel' && (
         <ConfirmDialog
-          onConfirm={createHandler('cancel')}
+          onConfirm={handleSubmit(createHandler('cancel'))}
           onCancel={handleCancel}
           title={t('admin.subscription.cancel.title')}
           message={<SubscriptionCancelForm data={data} />}
@@ -175,13 +177,10 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
       )}
       {state.action === 'slashStake' && (
         <ConfirmDialog
-          onConfirm={createHandler('slash-stake')}
+          onConfirm={handleSubmit(createHandler('slash-stake'))}
           onCancel={handleCancel}
           title={t('admin.subscription.cancel.staking.slashTitle')}
-          message={t('admin.subscription.cancel.staking.slashTip', {
-            unused: stakeValue,
-            symbol: data.paymentCurrency?.symbol,
-          })}
+          message={<SlashStakeForm data={data} stakeValue={stakeValue} />}
           loading={state.loading}
         />
       )}
@@ -197,12 +196,16 @@ export default function SubscriptionActions(props: Props) {
         time: '',
         refund: 'none',
         staking: 'none',
+        slashReason: '',
       },
       pause: {
         type: 'never',
         resumesAt: '',
         behavior: 'void',
       },
+      slashStake: {
+        slashReason: '',
+      },
     },
   });
 

package/src/components/subscription/actions/slash-stake.tsx

@@ -0,0 +1,52 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+import { Box, TextField, styled } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
+
+export default function SlashStakeForm({ data, stakeValue }: { data: TSubscriptionExpanded; stakeValue: string }) {
+  const { t } = useLocaleContext();
+  const { control, formState } = useFormContext();
+
+  return (
+    <Root sx={{ width: 400 }}>
+      {t('admin.subscription.cancel.staking.slashTip', {
+        unused: stakeValue,
+        symbol: data.paymentCurrency?.symbol,
+      })}
+      <Controller
+        name="slashStake.slashReason"
+        control={control}
+        rules={{
+          required: t('common.required'),
+          validate: (value) => {
+            return value.trim() !== '' || t('common.required');
+          },
+        }}
+        render={({ field }) => (
+          <TextField
+            {...field}
+            variant="outlined"
+            size="small"
+            fullWidth
+            multiline
+            minRows={2}
+            maxRows={4}
+            placeholder={t('admin.subscription.cancel.staking.slashReason')}
+            error={!!(formState.errors as any)?.slashStake?.slashReason}
+            helperText={(formState.errors as any)?.slashStake?.slashReason?.message}
+            inputProps={{
+              maxLength: 200,
+            }}
+            sx={{ mt: 1 }}
+          />
+        )}
+      />
+    </Root>
+  );
+}
+
+const Root = styled(Box)`
+  .form-title {
+    width: 60px;
+  }
+`;

package/src/locales/en.tsx

@@ -469,6 +469,7 @@ export default flat({
           none: 'No return or slash',
           proration: 'Return Remaining Stake {unused}{symbol}',
           slash: 'Slash Remaining Stake {unused}{symbol}',
+          slashReason: 'Slash Reason',
           slashTip:
             'The remaining stake of this subscription {unused}{symbol} will be slashed, please confirm to continue?',
           slashTitle: 'Slash stake',

package/src/locales/zh.tsx

@@ -459,6 +459,7 @@ export default flat({
           none: '不退还 / 罚没质押',
           proration: '退还剩余部分 {unused}{symbol}',
           slash: '罚没剩余部分 {unused}{symbol}',
+          slashReason: '罚没原因',
           slashTip: '该订阅剩余的质押部分 {unused}{symbol} 将被罚没, 请确认是否继续？',
           slashTitle: '罚没质押',
         },

package/src/pages/admin/billing/invoices/detail.tsx

@@ -289,7 +289,7 @@ export default function InvoiceDetail(props: { id: string }) {
               />
               <InfoRow
                 label={t('admin.paymentMethod._name')}
-                value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
+                value={<Currency logo={data.paymentMethod?.logo} name={data.paymentMethod?.name} />}
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />
@@ -298,7 +298,7 @@ export default function InvoiceDetail(props: { id: string }) {
                 value={
                   <Currency
                     logo={data.paymentCurrency.logo}
-                    name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
+                    name={`${data.paymentCurrency.symbol} (${data.paymentMethod?.name})`}
                   />
                 }
                 direction={InfoDirection}

package/src/pages/customer/refund/list.tsx

@@ -95,7 +95,7 @@ const RefundTable = memo(({ invoice_id }: Props) => {
     {
       label: t('common.type'),
       name: 'type',
-      width: 60,
+      width: 80,
       options: {
         filter: true,
         customBodyRenderLite: (_: string, index: number) => {

package/src/pages/customer/subscription/detail.tsx

@@ -201,7 +201,7 @@ export default function CustomerSubscriptionDetail() {
           />
           <InfoRow
             label={t('admin.paymentMethod._name')}
-            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
+            value={<Currency logo={data.paymentMethod?.logo} name={data.paymentMethod?.name} />}
             alignItems={InfoAlignItems}
             direction={InfoDirection}
           />