payment-kit 1.13.18 → 1.13.19

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

@@ -4,7 +4,7 @@ import type { LiteralUnion } from 'type-fest';
 export type Pagination<T = any> = T & {
   // offset based
   page?: number;
-  size?: number;
+  pageSize?: number;
   // TODO: cursor based
   limit?: number;
   starting_after?: string;
@@ -31,7 +31,13 @@ export type PriceRecurring = {
   interval_count: number;
   aggregate_usage?: LiteralUnion<'sum' | 'last_during_period' | 'max' | 'last_ever', string>;
   usage_type?: LiteralUnion<'licensed' | 'metered', string>;
-  metered?: boolean;
+};
+
+export type PriceCurrency = {
+  currency_id: string;
+  unit_amount: string;
+  tiers: PriceTier[] | null;
+  custom_unit_amount: CustomUnitAmount | null;
 };
 
 export type CustomUnitAmount = {
@@ -202,11 +208,59 @@ export type PaymentMethodOptions = {
   };
 };
 
+export type PaymentMethodSettings = {
+  stripe?: {
+    publishable_key: string;
+    secret_key: string;
+    webhook_signing_secret: string;
+  };
+  arcblock?: {
+    chain_id: string;
+    api_host: string;
+    explorer_host: string;
+  };
+  ethereum?: {
+    chain_id: number;
+    api_host: string;
+    explorer_host: string;
+  };
+  bitcoin?: {
+    chain_id: number;
+    api_host: string;
+    explorer_host: string;
+  };
+};
+
 export type PaymentSettings = {
   payment_method_options: PaymentMethodOptions;
   payment_method_types: string[];
 };
 
+export type PaymentDetails = {
+  arcblock?: {
+    tx_hash: string;
+    payer: string;
+  };
+  stripe?: {
+    payment_intent_id?: string;
+    setup_intent_id?: string;
+    subscription_id?: string;
+    customer_id?: string;
+  };
+  ethereum?: {
+    tx_hash: string;
+    payer: string;
+    block_height: number;
+    confirmations: number;
+  };
+  bitcoin?: {
+    tx_hash: string;
+    payer: string;
+    block_height: number;
+    confirmations: number;
+  };
+};
+
 export type EventType = LiteralUnion<
   | 'account.application.authorized'
   | 'account.application.deauthorized'

package/api/third.d.ts

@@ -24,5 +24,7 @@ namespace Express {
     doc?: any;
     customer?: any;
     currency: any;
+    stripeEvent?: any;
+    stripeClient?: any;
   }
 }

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.18
+version: 1.13.19
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.18",
+  "version": "1.13.19",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -58,8 +58,11 @@
     "@ocap/mcrypto": "^1.18.92",
     "@ocap/util": "^1.18.92",
     "@ocap/wallet": "^1.18.92",
+    "@stripe/react-stripe-js": "^2.3.1",
+    "@stripe/stripe-js": "^2.1.7",
     "ahooks": "^3.7.8",
     "axios": "^0.27.2",
+    "body-parser": "^1.20.2",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dayjs": "^1.11.10",
@@ -69,31 +72,35 @@
     "express-history-api-fallback": "^2.2.1",
     "fastq": "^1.15.0",
     "flat": "^5.0.2",
+    "google-libphonenumber": "^3.2.33",
     "iframe-resizer-react": "^1.1.0",
     "joi": "^17.11.0",
     "json-stable-stringify": "^1.0.2",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
-    "nanoid": "3.3.6",
-    "p-wait-for": "^5.0.2",
+    "nanoid": "3",
+    "p-wait-for": "3",
     "pretty-ms-i18n": "^1.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.47.0",
+    "react-international-phone": "^3.1.2",
     "react-router-dom": "^6.16.0",
     "rimraf": "^3.0.2",
     "sequelize": "^6.33.0",
     "sqlite3": "^5.1.6",
+    "stripe": "^13.10.0",
     "typewriter-effect": "^2.21.0",
     "ufo": "^1.3.1",
     "umzug": "^3.3.1",
-    "use-bus": "^2.5.2"
+    "use-bus": "^2.5.2",
+    "validator": "^13.11.0"
   },
   "devDependencies": {
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.18",
+    "@did-pay/types": "1.13.19",
     "@types/cookie-parser": "^1.4.4",
     "@types/cors": "^2.8.14",
     "@types/dotenv-flow": "^3.3.1",
@@ -130,5 +137,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "0ead128fae75087e5d817d6315b94c3378d7e5e9"
+  "gitHead": "ffc58582731d2f1c1057346cee8127b26266ccd8"
 }

package/src/components/checkout/form/address.tsx

@@ -1,5 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Fade, Stack, Typography } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
+import { CountrySelector } from 'react-international-phone';
 
 import FormInput from '../../input';
 
@@ -9,24 +11,98 @@ type Props = {
 
 export default function AddressForm({ mode }: Props) {
   const { t } = useLocaleContext();
+  const { control, setValue } = useFormContext();
+
+  if (mode === 'required') {
+    return (
+      <Fade in>
+        <Stack className="cko-payment-address cko-payment-form">
+          <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
+            {t(`checkout.billing.${mode}`)}
+          </Typography>
+          <Stack direction="column" className="cko-payment-form" spacing={0}>
+            <Stack direction="row" spacing={0}>
+              <Controller
+                name="billing_address.country"
+                control={control}
+                render={({ field }) => (
+                  <CountrySelector
+                    selectedCountry={field.value}
+                    onSelect={({ iso2 }) => setValue(field.name, iso2)}
+                    buttonStyle={{
+                      width: '64px',
+                      height: '40px',
+                      border: '1px solid #ccc',
+                      marginLeft: -1,
+                      marginTop: -1,
+                    }}
+                  />
+                )}
+              />
+              <FormInput
+                name="billing_address.postal_code"
+                rules={{ required: t('checkout.required') }}
+                errorPosition="right"
+                variant="outlined"
+                placeholder={t('checkout.billing.postal_code')}
+              />
+            </Stack>
+            <FormInput
+              name="billing_address.state"
+              rules={{ required: t('checkout.required') }}
+              errorPosition="right"
+              variant="outlined"
+              placeholder={t('checkout.billing.state')}
+            />
+            <FormInput
+              name="billing_address.line1"
+              rules={{ required: t('checkout.required') }}
+              errorPosition="right"
+              variant="outlined"
+              placeholder={t('checkout.billing.line1')}
+            />
+            <Stack direction="row" spacing={0}>
+              <FormInput
+                name="billing_address.city"
+                rules={{ required: t('checkout.required') }}
+                errorPosition="right"
+                variant="outlined"
+                placeholder={t('checkout.billing.city')}
+              />
+            </Stack>
+          </Stack>
+        </Stack>
+      </Fade>
+    );
+  }
+
   return (
     <Fade in>
       <Stack className="cko-payment-address cko-payment-form">
         <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>{t(`checkout.billing.${mode}`)}</Typography>
         <Stack direction="column" className="cko-payment-form" spacing={0}>
-          <FormInput name="billing_address.country" variant="outlined" placeholder={t('checkout.billing.country')} />
-          {mode === 'required' && (
-            <FormInput name="billing_address.state" variant="outlined" placeholder={t('checkout.billing.state')} />
-          )}
-          {mode === 'required' && (
-            <FormInput name="billing_address.line1" variant="outlined" placeholder={t('checkout.billing.line1')} />
-          )}
           <Stack direction="row" spacing={0}>
-            {mode === 'required' && (
-              <FormInput name="billing_address.city" variant="outlined" placeholder={t('checkout.billing.city')} />
-            )}
+            <Controller
+              name="billing_address.country"
+              control={control}
+              render={({ field }) => (
+                <CountrySelector
+                  selectedCountry={field.value}
+                  onSelect={({ iso2 }) => setValue(field.name, iso2)}
+                  buttonStyle={{
+                    width: '64px',
+                    height: '40px',
+                    border: '1px solid #ccc',
+                    marginLeft: -1,
+                    marginTop: -1,
+                  }}
+                />
+              )}
+            />
             <FormInput
               name="billing_address.postal_code"
+              rules={{ required: t('checkout.required') }}
+              errorPosition="right"
               variant="outlined"
               placeholder={t('checkout.billing.postal_code')}
             />