payment-kit 1.13.15

package/src/pages/admin/payments/intents/detail.tsx

@@ -0,0 +1,205 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPaymentIntentExpanded } from '@did-pay/types';
+import { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { fromUnitToToken } from '@ocap/util';
+import { useRequest, useSetState } from 'ahooks';
+import { isEmpty } from 'lodash';
+import { Link } from 'react-router-dom';
+
+import TxLink from '../../../../components/blockchain/tx';
+import PaymentAmount from '../../../../components/checkout/amount';
+import Copyable from '../../../../components/copyable';
+import Currency from '../../../../components/currency';
+import EventList from '../../../../components/event/list';
+import InfoMetric from '../../../../components/info-metric';
+import InfoRow from '../../../../components/info-row';
+import MetadataEditor from '../../../../components/metadata/editor';
+import PaymentIntentActions from '../../../../components/payment-intent/actions';
+import SectionHeader from '../../../../components/section/header';
+import Status from '../../../../components/status';
+import api from '../../../../libs/api';
+import { formatError, formatTime, getPaymentIntentStatusColor } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TPaymentIntentExpanded> => {
+  return api.get(`/api/payment-intents/${id}`).then((res) => res.data);
+};
+
+export default function PaymentIntentDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    adding: {
+      price: false,
+    },
+    editing: {
+      metadata: false,
+      product: false,
+    },
+    loading: {
+      metadata: false,
+      price: false,
+      product: false,
+    },
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const createUpdater = (key: string) => async (updates: TPaymentIntentExpanded) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/payment-intents/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+    }
+  };
+
+  const onUpdateMetadata = createUpdater('metadata');
+
+  const currency = data.paymentCurrency;
+  const amount = [fromUnitToToken(data?.amount, currency.decimal), currency.symbol].join(' ');
+
+  return (
+    <Root direction="column" spacing={4} mb={4}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/payments/intents">
+            <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('admin.payments')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="row" alignItems="center">
+              <PaymentAmount amount={amount} sx={{ my: 0, fontSize: '2rem', lineHeight: '1rem' }} />
+              <Status label={data.status} color={getPaymentIntentStatusColor(data.status)} sx={{ ml: 2 }} />
+            </Stack>
+            <PaymentIntentActions data={data} variant="normal" />
+          </Stack>
+          <Stack
+            className="section-body"
+            direction="row"
+            spacing={3}
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
+            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider />
+            <InfoMetric
+              label={t('common.customer')}
+              value={<Link to={`/admin/customers/${data.customer.id}`}>{data.customer.name}</Link>}
+            />
+          </Stack>
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.details')} />
+        <Stack>
+          <InfoRow label={t('common.amount')} value={amount} />
+          <InfoRow
+            label={t('common.status')}
+            value={<Status label={data.status} color={getPaymentIntentStatusColor(data.status)} />}
+          />
+          <InfoRow label={t('common.description')} value={data.description} />
+          <InfoRow label={t('common.statementDescriptor')} value={data.statement_descriptor} />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+          <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.paymentMethod.name')} />
+        <Stack>
+          <InfoRow label={t('common.id')} value={data.paymentMethod.id} />
+          <InfoRow label={t('admin.paymentMethod.type')} value={data.paymentMethod.type} />
+          <InfoRow
+            label={t('admin.paymentMethod.name')}
+            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
+          />
+          <InfoRow
+            label={t('admin.paymentCurrency.name')}
+            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+          />
+          <InfoRow
+            label={t('common.txHash')}
+            value={<TxLink hash={data.payment_details?.tx_hash || data.metadata?.txHash} method={data.paymentMethod} />}
+          />
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('common.metadata.label')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            disabled={state.editing.metadata}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.metadata.edit')}
+          </Button>
+        </SectionHeader>
+        <Box className="section-body">
+          {!state.editing.metadata &&
+            (isEmpty(data.metadata) ? (
+              <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
+            ) : (
+              Object.keys(data.metadata || {}).map((key) => (
+                // @ts-ignore
+                <InfoRow key={key} label={key} value={data.metadata[key]} />
+              ))
+            ))}
+          {state.editing.metadata && (
+            <MetadataEditor
+              data={data}
+              loading={state.loading.metadata}
+              onSave={onUpdateMetadata}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+            />
+          )}
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.connections')} />
+        <Stack>
+          <InfoRow
+            label={t('admin.subscription.name')}
+            value={
+              data.subscription ? <Link to={`/admin/billing/${data.subscription.id}`}>{data.subscription.id}</Link> : ''
+            }
+          />
+          <InfoRow
+            label={t('admin.invoice.name')}
+            value={data.invoice_id ? <Link to={`/admin/billing/${data.invoice_id}`}>{data.invoice_id}</Link> : ''}
+          />
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.events')} />
+        <Box className="section-body">
+          <EventList features={{ toolbar: false }} object_id={data.id} />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/admin/payments/intents/index.tsx

@@ -0,0 +1,5 @@
+import PaymentList from '../../../../components/payment-intent/list';
+
+export default function PaymentsList() {
+  return <PaymentList />;
+}

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

@@ -0,0 +1,141 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { InferFormType, TPaymentLink } from '@did-pay/types';
+import { AddOutlined } from '@mui/icons-material';
+import { Button, Stack, Typography } from '@mui/material';
+import { useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+
+import DrawerForm from '../../../../components/drawer-form';
+import AfterPay from '../../../../components/payment-link/after-pay';
+import BeforePay from '../../../../components/payment-link/before-pay';
+import { ProductsProvider } from '../../../../contexts/products';
+import { useSettingsContext } from '../../../../contexts/settings';
+import api from '../../../../libs/api';
+import { formatError } from '../../../../libs/util';
+
+type PaymentLink = InferFormType<TPaymentLink> & {
+  include_free_trial: boolean;
+};
+
+export default function CreatePaymentLink() {
+  const { t } = useLocaleContext();
+  const [current, setCurrent] = useState('beforePay');
+  const { settings } = useSettingsContext();
+
+  const methods = useForm<PaymentLink>({
+    shouldUnregister: false,
+    defaultValues: {
+      name: '',
+      line_items: [],
+      currency_id: settings.baseCurrency.id,
+      after_completion: {
+        type: 'hosted_confirmation',
+        hosted_confirmation: {
+          custom_message: '',
+        },
+        redirect: {
+          url: '',
+        },
+      },
+      allow_promotion_codes: false,
+      customer_creation: 'always',
+      consent_collection: {
+        promotions: 'none',
+        terms_of_service: 'none',
+      },
+      invoice_creation: {
+        enabled: false,
+      },
+      phone_number_collection: {
+        enabled: false,
+      },
+      billing_address_collection: 'auto',
+      include_free_trial: false,
+      subscription_data: {
+        description: '',
+        trial_period_days: 0,
+      },
+      metadata: [], // FIXME:
+      custom_fields: [], // FIXME:
+      submit_type: 'pay', // FIXME:
+    },
+  });
+
+  const tabs = [
+    { label: t('admin.paymentLink.beforePay'), value: 'beforePay', component: BeforePay },
+    { label: t('admin.paymentLink.afterPay'), value: 'afterPay', component: AfterPay },
+  ];
+  const TabComponent = tabs.find((x) => x.value === current)?.component || BeforePay;
+
+  const onSubmit = (data: TPaymentLink) => {
+    if (data.line_items.length === 0) {
+      Toast.error(t('admin.paymentLink.noProducts'));
+      return;
+    }
+    if (data.after_completion?.type === 'redirect' && !data.after_completion?.redirect?.url) {
+      Toast.error(t('admin.paymentLink.noRedirectUrl'));
+      return;
+    }
+    // @ts-ignore
+    if (data.include_free_trial && data.subscription_data?.trial_period_days === 0) {
+      Toast.error(t('admin.paymentLink.noSubscriptionTrialDays'));
+      return;
+    }
+
+    api
+      .post('/api/payment-links', data)
+      .then(() => {
+        Toast.success(t('admin.paymentLink.saved'));
+        methods.reset();
+        dispatch('drawer.submitted');
+        dispatch('paymentLink.created');
+      })
+      .catch((err) => {
+        console.error(err);
+        Toast.error(formatError(err));
+      });
+  };
+
+  return (
+    <DrawerForm
+      icon={<AddOutlined />}
+      text={t('admin.paymentLink.add')}
+      maxWidth={1280}
+      addons={
+        // @ts-ignore
+        <Button variant="contained" size="small" onClick={methods.handleSubmit(onSubmit)}>
+          {t('admin.paymentLink.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <Stack spacing={3} direction="row" alignItems="flex-start">
+          <Stack spacing={2} flex={1} alignItems="flex-start">
+            <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+              {t('common.setup')}
+            </Typography>
+            <Tabs
+              tabs={tabs}
+              current={current}
+              onChange={(v: string) => setCurrent(v)}
+              style={{ width: '100%' }}
+              scrollButtons="auto"
+            />
+            <ProductsProvider>
+              <TabComponent />
+            </ProductsProvider>
+          </Stack>
+          <Stack flex={2}>
+            <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+              {t('common.preview')}
+            </Typography>
+            <pre>FIXME</pre>
+          </Stack>
+        </Stack>
+      </FormProvider>
+    </DrawerForm>
+  );
+}

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

@@ -0,0 +1,318 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TLineItemExpanded, TPaymentLinkExpanded, TPrice, TProduct } from '@did-pay/types';
+import { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest, useSetState } from 'ahooks';
+import IframeResizer from 'iframe-resizer-react';
+import { isEmpty } from 'lodash';
+import { Link, useNavigate } from 'react-router-dom';
+import { joinURL } from 'ufo';
+
+import Copyable from '../../../../components/copyable';
+import EventList from '../../../../components/event/list';
+import InfoCard from '../../../../components/info-card';
+import InfoRow from '../../../../components/info-row';
+import MetadataEditor from '../../../../components/metadata/editor';
+import PaymentLinkActions from '../../../../components/payment-link/actions';
+import AddPrice from '../../../../components/product/add-price';
+import SectionHeader from '../../../../components/section/header';
+import Table from '../../../../components/table';
+import { useSettingsContext } from '../../../../contexts/settings';
+import api from '../../../../libs/api';
+import { formatError, formatPaymentLinkPricing, formatProductPrice, formatTime } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TPaymentLinkExpanded> => {
+  return api.get(`/api/payment-links/${id}`).then((res) => res.data);
+};
+
+export default function PaymentLinkDetail(props: { id: string }) {
+  const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
+  const { settings } = useSettingsContext();
+  const [state, setState] = useSetState({
+    adding: {
+      price: false,
+    },
+    editing: {
+      metadata: false,
+      product: false,
+    },
+    loading: {
+      metadata: false,
+      price: false,
+      product: false,
+    },
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const createUpdater = (key: string) => async (updates: TProduct) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/payment-links/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+    }
+  };
+
+  const onAddPrice = async (price: TPrice) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, price: true } }));
+      await api.post('/api/prices', { ...price, product_id: props.id });
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, price: false } }));
+    }
+  };
+
+  const onUpdateMetadata = createUpdater('metadata');
+  const onChange = (action: string) => {
+    if (action === 'remove') {
+      navigate('/admin/payments/links');
+    } else {
+      runAsync();
+    }
+  };
+
+  const result = formatPaymentLinkPricing(data, settings.baseCurrency);
+
+  return (
+    <Grid container spacing={4} sx={{ mb: 4 }}>
+      <Grid item md={12}>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/payments/links">
+            <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('admin.paymentLinks')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="column" alignItems="flex-start">
+              <Stack direction="row" alignItems="center" mb={1}>
+                <Typography variant="h5" sx={{ color: 'text.primary', fontWeight: 600 }}>
+                  {data.name}
+                </Typography>
+                <Typography sx={{ mx: 1, color: 'text.secondary' }}>for</Typography>
+                <Typography variant="h6" sx={{ color: 'text.primary', fontWeight: 500 }}>
+                  {[result.amount, result.then].filter(Boolean).join(', ')}
+                </Typography>
+              </Stack>
+              <Copyable text={joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pay/${data.id}`)}>
+                <Typography variant="h6" sx={{ color: 'text.secondary', mr: 1 }}>
+                  {joinURL(window.blocklet.prefix, `/checkout/pay/${data.id}`)}
+                </Typography>
+              </Copyable>
+            </Stack>
+            <PaymentLinkActions data={data} onChange={onChange} variant="normal" />
+          </Stack>
+        </Box>
+      </Grid>
+      <Grid item xs={12} md={5}>
+        <Div direction="column" spacing={4}>
+          <Box className="section">
+            <SectionHeader title={t('admin.products')} />
+            <Box className="section-body">
+              <Table
+                className="link-products-table"
+                toolbar={false}
+                footer={false}
+                locale={locale}
+                data={data.line_items}
+                columns={[
+                  {
+                    label: t('common.name'),
+                    name: 'name',
+                    options: {
+                      sort: false,
+                      customBodyRenderLite: (_: any, index: number) => {
+                        const item = data.line_items[index] as TLineItemExpanded;
+                        return (
+                          <Link to={`/admin/products/${item.price.product_id}`}>
+                            <InfoCard
+                              name={item.price.product.name}
+                              description={formatProductPrice(
+                                // @ts-ignore
+                                { ...item.price.product, prices: [item.price] },
+                                settings.baseCurrency
+                              )}
+                              logo={item.price.product.images[0]}
+                            />
+                          </Link>
+                        );
+                      },
+                    },
+                  },
+                  {
+                    label: t('common.quantity'),
+                    name: 'quantity',
+                  },
+                  {
+                    label: t('admin.paymentLink.adjustable'),
+                    name: 'price_id',
+                    options: {
+                      customBodyRenderLite: (_: any, index: number) => {
+                        const item = data.line_items[index];
+                        if (item?.adjustable_quantity?.enabled) {
+                          return `${t('common.yes')} (${item.adjustable_quantity.minimum} - ${
+                            item.adjustable_quantity.maximum
+                          })`;
+                        }
+
+                        return t('common.no');
+                      },
+                    },
+                  },
+                ]}
+                options={{
+                  count: data.line_items.length,
+                  page: 0,
+                  rowsPerPage: 20,
+                }}
+              />
+              {state.adding.price && (
+                <AddPrice
+                  loading={state.loading.price}
+                  onSave={onAddPrice}
+                  onCancel={() => setState((prev) => ({ adding: { ...prev.adding, price: false } }))}
+                />
+              )}
+            </Box>
+          </Box>
+          <Box className="section">
+            <SectionHeader title={t('admin.details')}>
+              <Button
+                variant="outlined"
+                color="inherit"
+                size="small"
+                onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
+                <Edit fontSize="small" sx={{ mr: 0.5 }} />
+                {t('common.edit')}
+              </Button>
+            </SectionHeader>
+            <Stack>
+              <InfoRow
+                label={t('admin.paymentLink.allowPromotionCodes')}
+                value={data.allow_promotion_codes ? 'Yes' : 'No'}
+              />
+              <InfoRow
+                label={t('admin.paymentLink.requireBillingAddress')}
+                value={data.billing_address_collection ? 'Yes' : 'No'}
+              />
+              <InfoRow
+                label={t('admin.paymentLink.requirePhoneNumber')}
+                value={data.phone_number_collection?.enabled ? 'Yes' : 'No'}
+              />
+              <InfoRow
+                label={t('admin.paymentLink.includeFreeTrail')}
+                value={data.subscription_data?.trial_period_days ? 'Yes' : 'No'}
+              />
+              <InfoRow label={t('admin.paymentLink.showConfirmPage')} value={data.after_completion?.type} />
+              <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+              <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+            </Stack>
+          </Box>
+          <Box className="section">
+            <SectionHeader title={t('common.metadata.label')}>
+              <Button
+                variant="outlined"
+                color="inherit"
+                size="small"
+                disabled={state.editing.metadata}
+                onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
+                <Edit fontSize="small" sx={{ mr: 0.5 }} />
+                {t('common.metadata.edit')}
+              </Button>
+            </SectionHeader>
+            <Box className="section-body">
+              {!state.editing.metadata &&
+                (isEmpty(data.metadata) ? (
+                  <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
+                ) : (
+                  <Grid container>
+                    <Grid item xs={12} md={6}>
+                      {Object.keys(data.metadata || {}).map((key) => (
+                        // @ts-ignore
+                        <InfoRow key={key} label={key} value={data.metadata[key]} />
+                      ))}
+                    </Grid>
+                  </Grid>
+                ))}
+              {state.editing.metadata && (
+                <MetadataEditor
+                  data={data}
+                  loading={state.loading.metadata}
+                  onSave={onUpdateMetadata}
+                  onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+                />
+              )}
+            </Box>
+          </Box>
+          <Box className="section">
+            <SectionHeader title={t('admin.events')} />
+            <Box className="section-body">
+              <EventList features={{ toolbar: false }} object_id={data.id} />
+            </Box>
+          </Box>
+        </Div>
+      </Grid>
+      <Grid item xs={12} md={7}>
+        <Div>
+          <Box className="section">
+            <SectionHeader title={t('common.preview')} />
+            <Box className="section-body">
+              <Chrome>
+                <IframeResizer
+                  style={{
+                    width: '1px',
+                    minWidth: '840px',
+                    minHeight: '840px',
+                    transform: 'scale(0.65)',
+                    transformOrigin: '20% 10%',
+                    border: 'none',
+                  }}
+                  src={`${window.blocklet.prefix}checkout/pay/${data.id}?preview=1`}
+                />
+              </Chrome>
+            </Box>
+          </Box>
+        </Div>
+      </Grid>
+    </Grid>
+  );
+}
+
+const Div = styled(Stack)``;
+
+const Chrome = styled(Box)`
+  background-color: #fcfeff;
+  border-radius: 8px;
+  margin-top: 40px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 20px 44px #32325d1f, 0 -1px 32px #32325d0f, 0 3px 12px #00000014;
+`;