@licklist/design 0.73.0 → 0.74.0-dev.0

package/src/header/Header.stories.tsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import StyledButton from '../static/StyledButton'
-import BookeditHeader from './BookeditHeader'
-import CompanySelector from './elements/CompanySelector'
-import { NavigationItem } from './Header'
-
-const providerNavItems: NavigationItem[] = [
-  { href: `/profile`, label: 'profile', pathname: [] },
-  { href: `/events`, label: 'events', pathname: [] },
-  { href: `/sales`, label: 'salesAndEnquiries', pathname: [] },
-  { href: `/product-sets`, label: 'productSets', pathname: [] },
-  { href: `/affiliates`, label: 'affiliates', pathname: [] },
-  { href: `/product-groups`, label: 'productGroups', pathname: [] },
-  { href: '/#', label: 'loyalty', pathname: [] },
-  { href: '/#', label: 'emailAndSms', pathname: [] },
-  { href: '/#', label: 'followersAndProfiles', pathname: [] },
-]
-
-export default {
-  title: 'Header',
-}
-
-export const Bookedit = () => (
-  <BookeditHeader navItems={providerNavItems}>
-    <StyledButton size='sm' className='rounded-pill mr-2'>
-      Login
-    </StyledButton>
-    <StyledButton
-      size='sm'
-      className='rounded-pill'
-      variant='outline-secondary'
-    >
-      Sign up
-    </StyledButton>
-  </BookeditHeader>
-)
-
-Bookedit.story = {
-  parameters: {
-    info: `
-      Bookedit header component
-    `,
-  },
-}
-
-export const BookeditWithElements = () => (
-  <BookeditHeader
-    leftNavs={
-      <div className='header-elements'>
-        <CompanySelector
-          value={1}
-          list={[
-            { id: 1, title: 'Company #1' },
-            { id: 2, title: 'Company #2' },
-          ]}
-          onChange={() => null}
-        />
-      </div>
-    }
-    navItems={providerNavItems}
-  />
-)
-
-BookeditWithElements.story = {
-  name: 'Bookedit with elements',
-
-  parameters: {
-    info: `
-      Bookedit header component
-    `,
-  },
-}

package/src/header/Header.tsx

@@ -1,107 +0,0 @@
-import { Accordion } from '@mantine/core'
-import { ReactNode } from 'react'
-import Nav from 'react-bootstrap/Nav'
-import Navbar from 'react-bootstrap/Navbar'
-import { NavLink } from 'react-router-dom'
-
-export type NavigationItem =
-  | {
-      href: string
-      label: string
-      pathname: string[]
-    }
-  | {
-      label: string
-      links: {
-        href: string
-        label: string
-        pathname: string[]
-      }[]
-    }
-
-type Props = {
-  children?: ReactNode | ReactNode[]
-  href?: string
-  logo?: ReactNode
-  leftNavs?: ReactNode | ReactNode[]
-  navItems?: NavigationItem[]
-  renderMobileNavigation?: (navigationItems: NavigationItem[]) => ReactNode
-}
-
-function Header({
-  children,
-  href,
-  logo,
-  leftNavs,
-  navItems,
-  renderMobileNavigation,
-}: Props) {
-  return (
-    <Navbar
-      className='header'
-      variant='light'
-      collapseOnSelect
-      expand={false}
-      bg='none'
-    >
-      <div className='header-logo-container'>
-        <Navbar.Brand href={href} className='p-0'>
-          {logo}
-        </Navbar.Brand>
-        {navItems?.length && (
-          <>
-            <Navbar.Toggle
-              aria-controls='header-navbar-nav'
-              className='d-block d-md-none ml-2 border-0'
-            />
-          </>
-        )}
-      </div>
-      <Nav className='mr-auto my-auto'>{leftNavs}</Nav>
-      <div className='user-section ml-3 my-auto'>{children}</div>
-      {navItems?.length && (
-        <Navbar.Collapse id='header-navbar-nav'>
-          {renderMobileNavigation ? (
-            renderMobileNavigation(navItems)
-          ) : (
-            <Nav className='mr-auto'>
-              {navItems.map((item) => {
-                if ('links' in item) {
-                  return (
-                    <Accordion defaultValue='Apples'>
-                      <Accordion.Item value={item.label}>
-                        <Accordion.Control>{item.label}</Accordion.Control>
-                        {item.links.map((subItem) => (
-                          <Accordion.Panel key={subItem.href + subItem.label}>
-                            <Nav.Item key={`${subItem.label}-${subItem.href}`}>
-                              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                              {/* @ts-ignore */}
-                              <NavLink
-                                exact
-                                to={subItem.href}
-                                className='nav-link'
-                              >
-                                {subItem.label}
-                              </NavLink>
-                            </Nav.Item>
-                          </Accordion.Panel>
-                        ))}
-                      </Accordion.Item>
-                    </Accordion>
-                  )
-                }
-                return (
-                  <Nav.Link href={item.href} key={`${item.href}${item.label}`}>
-                    {item.label}
-                  </Nav.Link>
-                )
-              })}
-            </Nav>
-          )}
-        </Navbar.Collapse>
-      )}
-    </Navbar>
-  )
-}
-
-export default Header

package/src/header/elements/CompanySelector.tsx

@@ -1,47 +0,0 @@
-import { isEmpty } from 'lodash'
-import { Form } from 'react-bootstrap'
-
-export interface CompanySelectorProps {
-  value: number
-  list: { id: number; title: string }[]
-  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void
-}
-
-function CompanySelector({ value, list, onChange }: CompanySelectorProps) {
-  const hasItems = !isEmpty(list)
-  const hasOneItem = list.length === 1
-
-  return (
-    <div className='header-company-selector-container'>
-      {hasOneItem && (
-        <span className='company-selector-item company-selector-item__disabled'>
-          {list[0].title}
-        </span>
-      )}
-
-      {hasItems && !hasOneItem && (
-        <Form.Group className='m-0'>
-          <Form.Control
-            className='header-company-selector'
-            defaultValue={value}
-            as='select'
-            onChange={onChange}
-          >
-            {hasItems &&
-              list.map((item) => (
-                <option
-                  className='company-selector-item'
-                  key={item.id}
-                  value={item.id}
-                >
-                  {item.title}
-                </option>
-              ))}
-          </Form.Control>
-        </Form.Group>
-      )}
-    </div>
-  )
-}
-
-export default CompanySelector

package/src/header/elements/Elements.stories.tsx

@@ -1,33 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-import {
-  CompanySelectorProps,
-  default as CompanySelectorComponent,
-} from './CompanySelector'
-
-export default {
-  title: 'Header/Elements',
-} as Meta
-
-export const CompanySelector: Story<CompanySelectorProps> = (args) => {
-  return <CompanySelectorComponent {...args} />
-}
-CompanySelector.args = {
-  value: 1,
-  list: [
-    { id: 1, title: 'Company #1' },
-    { id: 2, title: 'Company #2' },
-    { id: 3, title: 'Company #3' },
-  ],
-  onChange: (e) => console.info(e),
-}
-
-export const CompanySelectorWithOneItem: Story<CompanySelectorProps> = (
-  args,
-) => {
-  return <CompanySelectorComponent {...args} />
-}
-CompanySelectorWithOneItem.args = {
-  value: 1,
-  list: [{ id: 1, title: 'Company #1' }],
-  onChange: (e) => console.info(e),
-}

package/src/header/elements/index.ts

@@ -1,3 +0,0 @@
-import CompanySelector from './CompanySelector'
-
-export { CompanySelector }

package/src/header/index.ts

@@ -1,7 +0,0 @@
-import BookeditHeader from './BookeditHeader'
-import Header from './Header'
-
-export * from './elements'
-
-export { BookeditHeader, Header }
-export type { NavigationItem } from './Header'

package/src/setting/admin/AdminSetting.stories.tsx

@@ -1,52 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-import { FormProvider, useForm } from 'react-hook-form'
-import Container from 'react-bootstrap/Container'
-
-import {
-  PaymentFeeForm,
-  PaymentFeeFormFieldValues,
-  PaymentFeeFormProps,
-} from './PaymentFeeForm'
-import { AdminSettingForm, AdminSettingFormProps } from './AdminSettingForm'
-
-export default {
-  title: 'Setting/Admin',
-} as Meta
-
-export const SettingFormComponent: Story<AdminSettingFormProps> = (args) => (
-  <Container>
-    <AdminSettingForm {...args} />
-  </Container>
-)
-
-export const PaymentFeeFormComponent: Story<PaymentFeeFormProps> = (args) => {
-  const form = useForm<PaymentFeeFormFieldValues>({
-    defaultValues: args.defaultValues,
-  })
-  return (
-    <FormProvider {...form}>
-      <PaymentFeeForm {...args} />
-    </FormProvider>
-  )
-}
-
-PaymentFeeFormComponent.args = {
-  isLoading: false,
-  defaultValues: {
-    feeInPercent: NaN,
-    minFeeInPounds: NaN,
-    maxFeeInPounds: NaN,
-    vatInPercent: NaN,
-    fixedFee: NaN,
-  },
-}
-
-SettingFormComponent.args = {
-  isLoading: false,
-  onSubmit: (data) => console.log('onSubmit', data),
-  hasPermission: true,
-  defaultValues: {
-    warningOnNumberOfPeople: '',
-    ...PaymentFeeFormComponent.args.defaultValues,
-  },
-}

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>
-  )
-}