@licklist/design 0.72.72-dev.0 → 0.72.72-dev.1

package/src/setting/admin/AdminSettingForm.tsx

@@ -1,196 +0,0 @@
-import { useId } from '@react-aria/utils'
-import { Button, Spinner, Form } from 'react-bootstrap'
-import InputGroup from 'react-bootstrap/InputGroup'
-import { FormProvider, useForm } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
-
-import Card from 'react-bootstrap/Card'
-import Row from 'react-bootstrap/Row'
-import Col from 'react-bootstrap/Col'
-import { Link } from 'react-router-dom'
-import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-import { ProvidableType } from '@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper'
-import { FaCommentAlt } from 'react-icons/fa'
-import { PaymentFeeForm, PaymentFeeFormFieldValues } from './PaymentFeeForm'
-import { Currency } from '../../types/currency'
-
-export type AdminSettingFormFieldValues = {
-  warningOnNumberOfPeople: string
-  currency_id?: number
-  providerHasMap: null | boolean
-  hasBookingManagement: null | boolean
-  additionalPaymentMethodsEnabled: null | boolean
-  externalPaymentLinkEnabled: null | boolean
-} & PaymentFeeFormFieldValues
-
-export interface AdminSettingFormProps extends HasPermissionProp {
-  isLoading: boolean
-  onSubmit?: (data: AdminSettingFormFieldValues) => void
-  defaultValues?: Partial<AdminSettingFormFieldValues>
-  currencies?: Array<Currency>
-  providerMetadata: {
-    country?: string
-    providableId?: number
-    providerType?: ProvidableType
-  }
-}
-
-export const AdminSettingForm = ({
-  isLoading = false,
-  defaultValues = {},
-  onSubmit,
-  currencies = [],
-  hasPermission = true,
-  providerMetadata,
-}: AdminSettingFormProps) => {
-  const form = useForm<AdminSettingFormFieldValues>({
-    mode: 'onChange',
-    defaultValues,
-  })
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isValid },
-  } = form
-  const { t } = useTranslation('Design')
-
-  const warningOnNumberOfPeopleId = useId()
-  const providerHasMapId = useId()
-  const hasBookingManagement = useId()
-  const additionalPaymentMethodsEnabledId = useId()
-  const externalPaymentLinkEnabledId = useId()
-
-  return (
-    <Form
-      className='d-flex flex-column'
-      noValidate
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <FormProvider {...form}>
-        <Form.Group controlId={warningOnNumberOfPeopleId}>
-          <Form.Label>{t('warningOnNumberOfPeople')}</Form.Label>
-
-          <InputGroup>
-            <InputGroup.Prepend>
-              <InputGroup.Text>
-                <FaCommentAlt size={16} />
-              </InputGroup.Text>
-            </InputGroup.Prepend>
-
-            <Form.Control
-              {...register('warningOnNumberOfPeople')}
-              disabled={isLoading}
-            />
-          </InputGroup>
-        </Form.Group>
-
-        <PaymentFeeForm isLoading={isLoading} />
-
-        <Form.Label className='mt-5'>{t('defaultVenueCurrency')}</Form.Label>
-        <Form.Control
-          {...register('currency_id')}
-          as='select'
-          disabled={isLoading}
-        >
-          {currencies?.map((currency) => (
-            <option value={currency.id} key={currency.id}>
-              {currency.title}
-            </option>
-          ))}
-        </Form.Control>
-
-        <Row>
-          <Col xs={12}>
-            <h5 className='mt-5'>{t('advanced')}</h5>
-          </Col>
-        </Row>
-
-        <Card className='mb-3'>
-          <Card.Body>
-            <Row>
-              <Col xs={12}>
-                <Form.Group controlId={providerHasMapId}>
-                  <Form.Check
-                    {...register('providerHasMap')}
-                    disabled={isLoading}
-                    label={t('providerHasMap')}
-                  />
-                </Form.Group>
-
-                <Form.Group controlId={hasBookingManagement}>
-                  <Form.Check
-                    {...register('hasBookingManagement')}
-                    disabled={isLoading}
-                    label={t('hasBookingManagement')}
-                  />
-                </Form.Group>
-                <Form.Group controlId={additionalPaymentMethodsEnabledId}>
-                  <Form.Check>
-                    <Form.Check.Input
-                      {...register('additionalPaymentMethodsEnabled', {
-                        validate: (value) =>
-                          !value || Boolean(providerMetadata?.country),
-                      })}
-                      disabled={isLoading}
-                      isInvalid={!!errors?.additionalPaymentMethodsEnabled}
-                    />
-                    <Form.Check.Label>
-                      {t('additionalPaymentMethodsEnabled')}
-                    </Form.Check.Label>
-                    <Form.Control.Feedback type='invalid'>
-                      {HookFormService.hasError(
-                        errors.additionalPaymentMethodsEnabled,
-                        'validate',
-                      ) && (
-                        <>
-                          {t('noCountryIsProvided')}
-                          {/* TODO fix issue react router types
-      @ts-expect-error */}
-                          <Link
-                            role='button'
-                            to={`/provider/${providerMetadata?.providerType}/${providerMetadata?.providableId}/update`}
-                          >
-                            {/* TODO fix issue react router types
-      @ts-expect-error */}
-                            {t('here')}
-                          </Link>
-                        </>
-                      )}
-                    </Form.Control.Feedback>
-                  </Form.Check>
-                </Form.Group>
-
-                <Form.Group controlId={externalPaymentLinkEnabledId}>
-                  <Form.Check
-                    {...register('externalPaymentLinkEnabled')}
-                    disabled={isLoading}
-                    label={t('externalPaymentLinkEnabled')}
-                  />
-                </Form.Group>
-              </Col>
-            </Row>
-          </Card.Body>
-        </Card>
-      </FormProvider>
-      {hasPermission && (
-        <Button
-          type='submit'
-          disabled={isLoading || !isValid}
-          className='d-flex align-items-center align-self-end mt-5'
-        >
-          {isLoading && (
-            <Spinner
-              animation='border'
-              size='sm'
-              role='status'
-              aria-hidden='true'
-              className='mr-2'
-            />
-          )}
-          {t('update')}
-        </Button>
-      )}
-    </Form>
-  )
-}

package/src/setting/admin/PaymentFeeForm.tsx

@@ -1,309 +0,0 @@
-import { useId } from '@react-aria/utils'
-import Card from 'react-bootstrap/Card'
-import Col from 'react-bootstrap/Col'
-import Form from 'react-bootstrap/Form'
-import InputGroup from 'react-bootstrap/InputGroup'
-import Row from 'react-bootstrap/Row'
-import { useFormContext } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import { FaPercentage, FaPoundSign } from 'react-icons/fa'
-import { WarningMessage } from '../../static'
-
-export type PaymentFeeFormFieldValues = {
-  feeInPercent: number
-  minFeeInPounds: number
-  maxFeeInPounds: number
-  vatInPercent: number
-  fixedFee: number
-}
-
-export type PaymentFeeFormProps = {
-  isLoading: boolean
-  defaultValues?: Partial<PaymentFeeFormFieldValues>
-}
-
-export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
-  const {
-    register,
-    formState: { errors },
-    watch,
-  } = useFormContext<PaymentFeeFormFieldValues>()
-  const { t } = useTranslation('Design')
-
-  const feeInPercentId = useId()
-  const minFeeInPoundsId = useId()
-  const maxFeeInPoundsId = useId()
-  const vatInPercentId = useId()
-  const fixedFeeId = useId()
-
-  const minFee = watch('minFeeInPounds')
-  const maxFee = watch('maxFeeInPounds')
-  const percentFee = watch('feeInPercent')
-
-  return (
-    <>
-      <Row>
-        <Col xs={12}>
-          <h5 className='mt-5'>{t('paymentFee')}</h5>
-        </Col>
-      </Row>
-
-      <Card className='mb-3'>
-        <Card.Body>
-          <Row>
-            <Col xs={12}>
-              <div className='mb-4'>{t('paymentFeeDescription')}</div>
-            </Col>
-          </Row>
-
-          <Row>
-            <Col xs={12} sm={4} lg={2}>
-              <Form.Group controlId={feeInPercentId}>
-                <Form.Label>{t('feeInPercent')}</Form.Label>
-
-                <InputGroup hasValidation>
-                  <InputGroup.Prepend>
-                    <InputGroup.Text>
-                      <FaPercentage size={10} />
-                    </InputGroup.Text>
-                  </InputGroup.Prepend>
-
-                  <Form.Control
-                    type='number'
-                    min={0}
-                    max={100}
-                    step='1'
-                    placeholder='0'
-                    onWheel={(event) => event.currentTarget.blur()}
-                    {...register('feeInPercent', {
-                      validate: {
-                        moreThan: (v) => (v ? v >= 0 : true),
-                        lessThan: (v) => (v ? v <= 100 : true),
-                      },
-                    })}
-                    name='feeInPercent'
-                    isInvalid={Boolean(errors.feeInPercent)}
-                    disabled={isLoading}
-                  />
-
-                  <Form.Control.Feedback type='invalid'>
-                    {errors.feeInPercent?.message}
-                    {errors.feeInPercent?.type === 'moreThan' &&
-                      t('Validation:fieldMinNumber', {
-                        attribute: t('feeInPercent'),
-                        min: 0,
-                      })}
-                    {errors.feeInPercent?.type === 'lessThan' &&
-                      t('Validation:fieldMaxNumber', {
-                        attribute: t('feeInPercent'),
-                        max: 100,
-                      })}
-                  </Form.Control.Feedback>
-                </InputGroup>
-              </Form.Group>
-              {percentFee && minFee && maxFee ? (
-                <WarningMessage message={t('Validation:fieldPercentFee')} />
-              ) : null}
-            </Col>
-
-            <Col xs={12} sm={4} lg={2}>
-              <Form.Group controlId={minFeeInPoundsId}>
-                <Form.Label>{t('minFeeInPounds')}</Form.Label>
-
-                <InputGroup hasValidation>
-                  <InputGroup.Prepend>
-                    <InputGroup.Text>
-                      <FaPoundSign size={10} />
-                    </InputGroup.Text>
-                  </InputGroup.Prepend>
-
-                  <Form.Control
-                    {...register('minFeeInPounds', {
-                      validate: {
-                        moreThan: (v) => (v ? v >= 0 : true),
-                        lessThan: (v) => (v ? v <= 999999.99 : true),
-                      },
-                    })}
-                    name='minFeeInPounds'
-                    type='number'
-                    min={0}
-                    max={999999.99}
-                    step='0.01'
-                    placeholder='0,00'
-                    onWheel={(event) => event.currentTarget.blur()}
-                    isInvalid={Boolean(errors.minFeeInPounds)}
-                    disabled={isLoading}
-                  />
-
-                  <Form.Control.Feedback type='invalid'>
-                    {errors.minFeeInPounds?.message}
-                    {errors.minFeeInPounds?.type === 'moreThan' &&
-                      t('Validation:fieldMinNumber', {
-                        attribute: t('minFeeInPounds'),
-                        min: 0,
-                      })}
-                    {errors.minFeeInPounds?.type === 'lessThan' &&
-                      t('Validation:fieldMaxNumber', {
-                        attribute: t('minFeeInPounds'),
-                        max: 999999.99,
-                      })}
-                  </Form.Control.Feedback>
-                </InputGroup>
-              </Form.Group>
-            </Col>
-
-            <Col xs={12} sm={4} lg={3}>
-              <Form.Group controlId={maxFeeInPoundsId}>
-                <Form.Label>{t('maxFeeInPounds')}</Form.Label>
-
-                <InputGroup hasValidation>
-                  <InputGroup.Prepend>
-                    <InputGroup.Text>
-                      <FaPoundSign size={10} />
-                    </InputGroup.Text>
-                  </InputGroup.Prepend>
-
-                  <Form.Control
-                    {...register('maxFeeInPounds', {
-                      validate: {
-                        moreThan: (v) => (v ? v >= 0 : true),
-                        lessThan: (v) => (v ? v <= 999999.99 : true),
-                      },
-                    })}
-                    name='maxFeeInPounds'
-                    type='number'
-                    min={0}
-                    max={999999.99}
-                    step='0.01'
-                    placeholder='0,00'
-                    onWheel={(event) => event.currentTarget.blur()}
-                    isInvalid={Boolean(errors.maxFeeInPounds)}
-                    disabled={isLoading}
-                  />
-
-                  <Form.Control.Feedback type='invalid'>
-                    {errors.maxFeeInPounds?.message}
-                    {errors.maxFeeInPounds?.type === 'moreThan' &&
-                      t('Validation:fieldMinNumber', {
-                        attribute: t('maxFeeInPounds'),
-                        min: 0,
-                      })}
-                    {errors.maxFeeInPounds?.type === 'lessThan' &&
-                      t('Validation:fieldMaxNumber', {
-                        attribute: t('maxFeeInPounds'),
-                        max: 999999.99,
-                      })}
-                  </Form.Control.Feedback>
-                </InputGroup>
-              </Form.Group>
-              {minFee > maxFee ? (
-                <WarningMessage
-                  message={t('Validation:fieldMaxNumber', {
-                    attribute: t('Min Fee'),
-                    max: 'Max Fee',
-                  })}
-                />
-              ) : null}
-            </Col>
-
-            <Col
-              xs={12}
-              sm={{ span: 4, offset: 2 }}
-              lg={{ span: 2, offset: 0 }}
-            >
-              <Form.Group controlId={vatInPercentId}>
-                <Form.Label>{t('vatInPercent')}</Form.Label>
-
-                <InputGroup hasValidation>
-                  <InputGroup.Prepend>
-                    <InputGroup.Text>
-                      <FaPercentage size={10} />
-                    </InputGroup.Text>
-                  </InputGroup.Prepend>
-
-                  <Form.Control
-                    {...register('vatInPercent', {
-                      validate: {
-                        moreThan: (v) => (v ? v >= 0 : true),
-                        lessThan: (v) => (v ? v <= 100 : true),
-                      },
-                    })}
-                    name='vatInPercent'
-                    type='number'
-                    min={0}
-                    max={100}
-                    step='1'
-                    placeholder='0'
-                    onWheel={(event) => event.currentTarget.blur()}
-                    isInvalid={Boolean(errors.vatInPercent)}
-                    disabled={isLoading}
-                  />
-
-                  <Form.Control.Feedback type='invalid'>
-                    {errors.vatInPercent?.message}
-                    {errors.vatInPercent?.type === 'moreThan' &&
-                      t('Validation:fieldMinNumber', {
-                        attribute: t('vatInPercent'),
-                        min: 0,
-                      })}
-                    {errors.vatInPercent?.type === 'lessThan' &&
-                      t('Validation:fieldMaxNumber', {
-                        attribute: t('vatInPercent'),
-                        max: 100,
-                      })}
-                  </Form.Control.Feedback>
-                </InputGroup>
-              </Form.Group>
-            </Col>
-
-            <Col xs={12} sm={4} lg={3}>
-              <Form.Group controlId={fixedFeeId}>
-                <Form.Label>{t('fixedFee')}</Form.Label>
-
-                <InputGroup hasValidation>
-                  <InputGroup.Prepend>
-                    <InputGroup.Text>
-                      <FaPoundSign size={10} />
-                    </InputGroup.Text>
-                  </InputGroup.Prepend>
-
-                  <Form.Control
-                    {...register('fixedFee', {
-                      validate: {
-                        moreThan: (v) => (v ? v >= 0 : true),
-                        lessThan: (v) => (v ? v <= 999999.99 : true),
-                      },
-                    })}
-                    name='fixedFee'
-                    type='number'
-                    min={0}
-                    max={999999.99}
-                    step='0.01'
-                    placeholder='0,00'
-                    onWheel={(event) => event.currentTarget.blur()}
-                    isInvalid={Boolean(errors.fixedFee)}
-                    disabled={isLoading}
-                  />
-
-                  <Form.Control.Feedback type='invalid'>
-                    {errors.fixedFee?.message}
-                    {errors.fixedFee?.type === 'moreThan' &&
-                      t('Validation:fieldMinNumber', {
-                        attribute: t('fixedFee'),
-                        min: 0,
-                      })}
-                    {errors.fixedFee?.type === 'lessThan' &&
-                      t('Validation:fieldMaxNumber', {
-                        attribute: t('fixedFee'),
-                        max: 999999.99,
-                      })}
-                  </Form.Control.Feedback>
-                </InputGroup>
-              </Form.Group>
-            </Col>
-          </Row>
-        </Card.Body>
-      </Card>
-    </>
-  )
-}

package/src/setting/admin/index.ts

@@ -1 +0,0 @@
-export * from './AdminSettingForm'

package/src/setting/system/SystemSetting.stories.tsx

@@ -1,26 +0,0 @@
-import { Meta } from '@storybook/react'
-import Container from 'react-bootstrap/Container'
-import { SystemSettingForm } from './SystemSettingForm'
-
-export default {
-  title: 'Setting/System',
-} as Meta
-
-export function Default() {
-  return (
-    <Container>
-      <SystemSettingForm
-        isLoading={false}
-        onSubmit={(data) => console.log('onSubmit', data)}
-        defaultValues={{
-          feeInPercent: NaN,
-          minFeeInPounds: NaN,
-          maxFeeInPounds: NaN,
-          vatInPercent: NaN,
-          fixedFee: NaN,
-        }}
-        hasPermission
-      />
-    </Container>
-  )
-}

package/src/setting/system/SystemSettingForm.tsx

@@ -1,62 +0,0 @@
-import { Button, Spinner } from 'react-bootstrap'
-import Form from 'react-bootstrap/Form'
-import { FormProvider, useForm } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
-import {
-  PaymentFeeForm,
-  PaymentFeeFormFieldValues,
-} from '../admin/PaymentFeeForm'
-
-export type SystemSettingFormFieldValues = PaymentFeeFormFieldValues
-
-export interface SystemSettingFormProps extends HasPermissionProp {
-  isLoading: boolean
-  onSubmit?: (data: SystemSettingFormFieldValues) => void
-  defaultValues?: Partial<SystemSettingFormFieldValues>
-}
-
-export function SystemSettingForm(props: SystemSettingFormProps) {
-  const {
-    isLoading = false,
-    defaultValues = {},
-    onSubmit,
-    hasPermission = true,
-  } = props
-  const form = useForm<SystemSettingFormFieldValues>({
-    mode: 'onChange',
-    defaultValues,
-  })
-  const { handleSubmit } = form
-  const { t } = useTranslation('Design')
-
-  return (
-    <Form
-      className='d-flex flex-column'
-      noValidate
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <FormProvider {...form}>
-        <PaymentFeeForm {...props} />
-      </FormProvider>
-      {hasPermission && (
-        <Button
-          type='submit'
-          disabled={isLoading}
-          className='d-flex align-items-center align-self-end mt-5'
-        >
-          {isLoading && (
-            <Spinner
-              animation='border'
-              size='sm'
-              role='status'
-              aria-hidden='true'
-              className='mr-2'
-            />
-          )}
-          {t('update')}
-        </Button>
-      )}
-    </Form>
-  )
-}

package/src/setting/system/index.ts

@@ -1 +0,0 @@
-export * from './SystemSettingForm'

package/src/types/currency.ts

@@ -1,4 +0,0 @@
-export type Currency = {
-  id: number
-  title: string
-}