@licklist/design 0.69.0 → 0.69.1-dev.1

package/src/sales/source-of-sales/SourceOfSalesChart.tsx

@@ -59,7 +59,7 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
             entry.payload.name === IFRAME ? WEBSITE : entry.payload.name
 
           return (
-            <div className="legend" key={`item-${entry.payload.source}`}>
+            <div className='legend' key={`item-${entry.payload.source}`}>
               <div
                 className={`bullet-point colors-${
                   entry.payload?.name === AFFILIATES ? 'pink' : index % 4
@@ -83,17 +83,17 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
   }, [extendedData])
 
   return (
-    <div className="source-of-sales">
-      <div className="source-of-sales__header">{t('sourceOfSales')}</div>
-      <div className="source-of-sales__pie-chart">
+    <div className='source-of-sales'>
+      <div className='source-of-sales__header'>{t('sourceOfSales')}</div>
+      <div className='source-of-sales__pie-chart'>
         {!!data.length && (
-          <ResponsiveContainer debounce={100} width="100%" height="100%">
+          <ResponsiveContainer debounce={100} width='100%' height='100%'>
             <PieChart>
               <Legend
-                iconType="circle"
+                iconType='circle'
                 wrapperStyle={{ left: 170, top: 20 }}
-                layout="vertical"
-                verticalAlign="top"
+                layout='vertical'
+                verticalAlign='top'
                 content={legendRenderer}
               />
               <Pie
@@ -102,7 +102,7 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
                 cy={defaultCYPosition}
                 innerRadius={40}
                 outerRadius={48}
-                dataKey="percentage"
+                dataKey='percentage'
               >
                 {data.map(({ source }: PieChartData, index) => (
                   <Cell

package/src/sales/statistics-chart/StatisticsChart.tsx

@@ -20,15 +20,15 @@ function StatisticsChart({
   ]
 
   return (
-    <div className="statistics">
-      <ResponsiveContainer width="100%" height="100%">
+    <div className='statistics'>
+      <ResponsiveContainer width='100%' height='100%'>
         <PieChart>
           <Pie
             data={chartData}
             startAngle={-270}
             innerRadius={20}
             outerRadius={28}
-            dataKey="value"
+            dataKey='value'
             {...chartStyles}
           >
             {chartData.map(({ id, name }) => (
@@ -37,7 +37,7 @@ function StatisticsChart({
           </Pie>
         </PieChart>
       </ResponsiveContainer>
-      {children && <div className="statistics__label">{children}</div>}
+      {children && <div className='statistics__label'>{children}</div>}
     </div>
   )
 }

package/src/setting/admin/AdminSettingForm.tsx

@@ -63,7 +63,7 @@ export const AdminSettingForm = ({
 
   return (
     <Form
-      className="d-flex flex-column"
+      className='d-flex flex-column'
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
@@ -87,10 +87,10 @@ export const AdminSettingForm = ({
 
         <PaymentFeeForm isLoading={isLoading} />
 
-        <Form.Label className="mt-5">{t('defaultVenueCurrency')}</Form.Label>
+        <Form.Label className='mt-5'>{t('defaultVenueCurrency')}</Form.Label>
         <Form.Control
           {...register('currency_id')}
-          as="select"
+          as='select'
           disabled={isLoading}
         >
           {currencies?.map((currency) => (
@@ -102,11 +102,11 @@ export const AdminSettingForm = ({
 
         <Row>
           <Col xs={12}>
-            <h5 className="mt-5">{t('advanced')}</h5>
+            <h5 className='mt-5'>{t('advanced')}</h5>
           </Col>
         </Row>
 
-        <Card className="mb-3">
+        <Card className='mb-3'>
           <Card.Body>
             <Row>
               <Col xs={12}>
@@ -138,7 +138,7 @@ export const AdminSettingForm = ({
                     <Form.Check.Label>
                       {t('additionalPaymentMethodsEnabled')}
                     </Form.Check.Label>
-                    <Form.Control.Feedback type="invalid">
+                    <Form.Control.Feedback type='invalid'>
                       {HookFormService.hasError(
                         errors.additionalPaymentMethodsEnabled,
                         'validate',
@@ -146,7 +146,7 @@ export const AdminSettingForm = ({
                         <>
                           {t('noCountryIsProvided')}
                           <Link
-                            role="button"
+                            role='button'
                             to={`/provider/${providerMetadata?.providerType}/${providerMetadata?.providableId}/update`}
                           >
                             {t('here')}
@@ -171,17 +171,17 @@ export const AdminSettingForm = ({
       </FormProvider>
       {hasPermission && (
         <Button
-          type="submit"
+          type='submit'
           disabled={isLoading || !isValid}
-          className="d-flex align-items-center align-self-end mt-5"
+          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"
+              animation='border'
+              size='sm'
+              role='status'
+              aria-hidden='true'
+              className='mr-2'
             />
           )}
           {t('update')}

package/src/setting/admin/PaymentFeeForm.tsx

@@ -44,15 +44,15 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
     <>
       <Row>
         <Col xs={12}>
-          <h5 className="mt-5">{t('paymentFee')}</h5>
+          <h5 className='mt-5'>{t('paymentFee')}</h5>
         </Col>
       </Row>
 
-      <Card className="mb-3">
+      <Card className='mb-3'>
         <Card.Body>
           <Row>
             <Col xs={12}>
-              <div className="mb-4">{t('paymentFeeDescription')}</div>
+              <div className='mb-4'>{t('paymentFeeDescription')}</div>
             </Col>
           </Row>
 
@@ -69,23 +69,24 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                   </InputGroup.Prepend>
 
                   <Form.Control
-                    type="number"
+                    type='number'
                     min={0}
                     max={100}
-                    step="1"
-                    placeholder="0"
+                    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"
+                    name='feeInPercent'
                     isInvalid={Boolean(errors.feeInPercent)}
                     disabled={isLoading}
                   />
 
-                  <Form.Control.Feedback type="invalid">
+                  <Form.Control.Feedback type='invalid'>
                     {errors.feeInPercent?.message}
                     {errors.feeInPercent?.type === 'moreThan' &&
                       t('Validation:fieldMinNumber', {
@@ -123,17 +124,18 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                         lessThan: (v) => (v ? v <= 999999.99 : true),
                       },
                     })}
-                    name="minFeeInPounds"
-                    type="number"
+                    name='minFeeInPounds'
+                    type='number'
                     min={0}
                     max={999999.99}
-                    step="0.01"
-                    placeholder="0,00"
+                    step='0.01'
+                    placeholder='0,00'
+                    onWheel={(event) => event.currentTarget.blur()}
                     isInvalid={Boolean(errors.minFeeInPounds)}
                     disabled={isLoading}
                   />
 
-                  <Form.Control.Feedback type="invalid">
+                  <Form.Control.Feedback type='invalid'>
                     {errors.minFeeInPounds?.message}
                     {errors.minFeeInPounds?.type === 'moreThan' &&
                       t('Validation:fieldMinNumber', {
@@ -168,17 +170,18 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                         lessThan: (v) => (v ? v <= 999999.99 : true),
                       },
                     })}
-                    name="maxFeeInPounds"
-                    type="number"
+                    name='maxFeeInPounds'
+                    type='number'
                     min={0}
                     max={999999.99}
-                    step="0.01"
-                    placeholder="0,00"
+                    step='0.01'
+                    placeholder='0,00'
+                    onWheel={(event) => event.currentTarget.blur()}
                     isInvalid={Boolean(errors.maxFeeInPounds)}
                     disabled={isLoading}
                   />
 
-                  <Form.Control.Feedback type="invalid">
+                  <Form.Control.Feedback type='invalid'>
                     {errors.maxFeeInPounds?.message}
                     {errors.maxFeeInPounds?.type === 'moreThan' &&
                       t('Validation:fieldMinNumber', {
@@ -225,17 +228,18 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                         lessThan: (v) => (v ? v <= 100 : true),
                       },
                     })}
-                    name="vatInPercent"
-                    type="number"
+                    name='vatInPercent'
+                    type='number'
                     min={0}
                     max={100}
-                    step="1"
-                    placeholder="0"
+                    step='1'
+                    placeholder='0'
+                    onWheel={(event) => event.currentTarget.blur()}
                     isInvalid={Boolean(errors.vatInPercent)}
                     disabled={isLoading}
                   />
 
-                  <Form.Control.Feedback type="invalid">
+                  <Form.Control.Feedback type='invalid'>
                     {errors.vatInPercent?.message}
                     {errors.vatInPercent?.type === 'moreThan' &&
                       t('Validation:fieldMinNumber', {
@@ -270,17 +274,18 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                         lessThan: (v) => (v ? v <= 999999.99 : true),
                       },
                     })}
-                    name="fixedFee"
-                    type="number"
+                    name='fixedFee'
+                    type='number'
                     min={0}
                     max={999999.99}
-                    step="0.01"
-                    placeholder="0,00"
+                    step='0.01'
+                    placeholder='0,00'
+                    onWheel={(event) => event.currentTarget.blur()}
                     isInvalid={Boolean(errors.fixedFee)}
                     disabled={isLoading}
                   />
 
-                  <Form.Control.Feedback type="invalid">
+                  <Form.Control.Feedback type='invalid'>
                     {errors.fixedFee?.message}
                     {errors.fixedFee?.type === 'moreThan' &&
                       t('Validation:fieldMinNumber', {

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -92,7 +92,7 @@ export const DashboardSettingForm = ({
 
   return (
     <Form
-      className="d-flex flex-column"
+      className='d-flex flex-column'
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
@@ -102,7 +102,7 @@ export const DashboardSettingForm = ({
             <Form.Group controlId={notificationOnEachOrderId}>
               <Form.Label>
                 {t('notificationOnEachOrder')}{' '}
-                <HelpPopover variant="info">
+                <HelpPopover variant='info'>
                   {t('notificationOnEachOrderHelp')}
                 </HelpPopover>
               </Form.Label>
@@ -123,7 +123,7 @@ export const DashboardSettingForm = ({
             <Form.Group controlId={orderReportOnEventStartId}>
               <Form.Label>
                 {t('orderReportOnEventStart')}{' '}
-                <HelpPopover variant="info">
+                <HelpPopover variant='info'>
                   {t('orderReportOnEventStartHelp')}
                 </HelpPopover>
               </Form.Label>
@@ -177,7 +177,8 @@ export const DashboardSettingForm = ({
             <Form.Group controlId={metaPixelId}>
               <Form.Label>{t('metaPixelId')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register('metaPixelId', {
                   minLength: {
                     value: 15,
@@ -190,7 +191,7 @@ export const DashboardSettingForm = ({
                 isInvalid={Boolean(errors.metaPixelId)}
                 disabled={isLoading}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.metaPixelId?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -200,14 +201,14 @@ export const DashboardSettingForm = ({
             <Form.Group controlId={orderReportFormatId}>
               <Form.Label>{t('orderReportFormat')}</Form.Label>
               <Form.Control
-                as="select"
+                as='select'
                 {...register('orderReportFormat', {
                   required: t('Validation:fieldRequired', {
                     attribute: t('orderReportFormat'),
                   }) as string,
                   valueAsNumber: true,
                 })}
-                name="orderReportFormat"
+                name='orderReportFormat'
                 isInvalid={Boolean(errors.orderReportFormat)}
                 disabled={isLoading}
               >
@@ -220,7 +221,7 @@ export const DashboardSettingForm = ({
                   </option>
                 ))}
               </Form.Control>
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.orderReportFormat?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -243,24 +244,24 @@ export const DashboardSettingForm = ({
             isInvalid={Boolean(errors.eventDeadlineErrorMessage)}
             disabled={isLoading}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.eventDeadlineErrorMessage?.message}
           </Form.Control.Feedback>
         </Form.Group>
       </FormProvider>
       {hasPermission && (
         <Button
-          type="submit"
+          type='submit'
           disabled={isLoading || !isValid || !isDirty}
-          className="d-flex align-items-center align-self-end"
+          className='d-flex align-items-center align-self-end'
         >
           {isLoading && (
             <Spinner
-              animation="border"
-              size="sm"
-              role="status"
-              aria-hidden="true"
-              className="mr-2"
+              animation='border'
+              size='sm'
+              role='status'
+              aria-hidden='true'
+              className='mr-2'
             />
           )}
           {t('update')}

package/src/setting/dashboard/EventSettingForm.tsx

@@ -29,7 +29,7 @@ export function EventSettingForm({ isLoading = false }: EventSettingFormProps) {
   return (
     <Row>
       <Col xs={12}>
-        <h5 className="mt-5">{t('eventDefaults')}</h5>
+        <h5 className='mt-5'>{t('eventDefaults')}</h5>
       </Col>
 
       <Col xs={12}>
@@ -44,10 +44,10 @@ export function EventSettingForm({ isLoading = false }: EventSettingFormProps) {
                   {/* <ExampleToggle {...props.toggle} /> */}
                 </Form.Label>
                 <Form.Control
-                  as="textarea"
+                  as='textarea'
                   rows={5}
                   {...register('termsAndConditions')}
-                  name="termsAndConditions"
+                  name='termsAndConditions'
                   disabled={isLoading}
                 />
                 {/*  TODO: add Terms and conditions view example on request from client */}

package/src/setting/dashboard/FinancialDataForm.tsx

@@ -35,7 +35,7 @@ export function FinancialDataForm({
   return (
     <Row>
       <Col xs={12}>
-        <h5 className="mt-5">{t('financialData')}</h5>
+        <h5 className='mt-5'>{t('financialData')}</h5>
       </Col>
 
       <Col xs={12} sm={6}>
@@ -86,12 +86,12 @@ export function FinancialDataForm({
                   }) as string,
                 },
               })}
-              name="accountNumber"
+              name='accountNumber'
               isInvalid={Boolean(errors.accountNumber)}
               disabled={isLoading}
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.accountNumber?.message}
             </Form.Control.Feedback>
           </InputGroup>
@@ -132,12 +132,12 @@ export function FinancialDataForm({
                   }) as string,
                 },
               })}
-              name="sortCode"
+              name='sortCode'
               isInvalid={Boolean(errors.sortCode)}
               disabled={isLoading}
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.sortCode?.message}
             </Form.Control.Feedback>
           </InputGroup>

package/src/setting/dashboard/OtherSettingForm.tsx

@@ -39,35 +39,35 @@ export function OtherSettingForm({ isLoading = false }: OtherSettingFormProps) {
   return (
     <Row>
       <Col xs={12}>
-        <h5 className="mt-5">{t('otherSettings')}</h5>
+        <h5 className='mt-5'>{t('otherSettings')}</h5>
       </Col>
 
       <Col xs={12}>
-        <Card border="light" className="mb-3 shadow-sm">
+        <Card border='light' className='mb-3 shadow-sm'>
           <Card.Body>
             <Form.Group controlId={specialNotesInCheckoutId}>
               <Form.Label>
                 {t('specialNotesInCheckout')}{' '}
-                <HelpPopover variant="info">
+                <HelpPopover variant='info'>
                   {t('specialNotesInCheckoutHelp')}
                 </HelpPopover>
               </Form.Label>
               <div>
                 <Form.Check
                   inline
-                  type="radio"
-                  value="1"
+                  type='radio'
+                  value='1'
                   {...register('specialNotesInCheckout')}
-                  name="specialNotesInCheckout"
+                  name='specialNotesInCheckout'
                   label={t('yes')}
                   disabled={isLoading}
                 />
                 <Form.Check
                   inline
-                  type="radio"
-                  value="0"
+                  type='radio'
+                  value='0'
                   {...register('specialNotesInCheckout')}
-                  name="specialNotesInCheckout"
+                  name='specialNotesInCheckout'
                   label={t('no')}
                   disabled={isLoading}
                 />
@@ -86,31 +86,31 @@ export function OtherSettingForm({ isLoading = false }: OtherSettingFormProps) {
       </Col>
 
       <Col xs={12}>
-        <Card border="light" className="mb-3 shadow-sm">
+        <Card border='light' className='mb-3 shadow-sm'>
           <Card.Body>
             <Form.Group controlId={smsOnOrderIsProcessingId}>
               <Form.Label>
                 {t('smsOnOrderIsProcessing')}{' '}
-                <HelpPopover variant="info">
+                <HelpPopover variant='info'>
                   {t('smsOnOrderIsProcessingHelp')}
                 </HelpPopover>
               </Form.Label>
               <div>
                 <Form.Check
                   inline
-                  type="radio"
-                  value="1"
+                  type='radio'
+                  value='1'
                   {...register('smsOnOrderIsProcessing')}
-                  name="smsOnOrderIsProcessing"
+                  name='smsOnOrderIsProcessing'
                   label={t('yes')}
                   disabled={isLoading}
                 />
                 <Form.Check
                   inline
-                  type="radio"
-                  value="0"
+                  type='radio'
+                  value='0'
                   {...register('smsOnOrderIsProcessing')}
-                  name="smsOnOrderIsProcessing"
+                  name='smsOnOrderIsProcessing'
                   label={t('no')}
                   disabled={isLoading}
                 />
@@ -128,11 +128,11 @@ export function OtherSettingForm({ isLoading = false }: OtherSettingFormProps) {
                     }) as string,
                   },
                 })}
-                name="smsOnOrderIsProcessingText"
+                name='smsOnOrderIsProcessingText'
                 isInvalid={Boolean(errors.smsOnOrderIsProcessingText)}
                 disabled={isLoading}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.smsOnOrderIsProcessingText?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -141,31 +141,31 @@ export function OtherSettingForm({ isLoading = false }: OtherSettingFormProps) {
       </Col>
 
       <Col xs={12}>
-        <Card border="light" className="mb-3 shadow-sm">
+        <Card border='light' className='mb-3 shadow-sm'>
           <Card.Body>
             <Form.Group controlId={smsOnOrderIsActionedId}>
               <Form.Label>
                 {t('smsOnOrderIsActioned')}{' '}
-                <HelpPopover variant="info">
+                <HelpPopover variant='info'>
                   {t('smsOnOrderIsActionedHelp')}
                 </HelpPopover>
               </Form.Label>
               <div>
                 <Form.Check
                   inline
-                  type="radio"
-                  value="1"
+                  type='radio'
+                  value='1'
                   {...register('smsOnOrderIsActioned')}
-                  name="smsOnOrderIsActioned"
+                  name='smsOnOrderIsActioned'
                   label={t('yes')}
                   disabled={isLoading}
                 />
                 <Form.Check
                   inline
-                  type="radio"
-                  value="0"
+                  type='radio'
+                  value='0'
                   {...register('smsOnOrderIsActioned')}
-                  name="smsOnOrderIsActioned"
+                  name='smsOnOrderIsActioned'
                   label={t('no')}
                   disabled={isLoading}
                 />
@@ -183,11 +183,11 @@ export function OtherSettingForm({ isLoading = false }: OtherSettingFormProps) {
                     }) as string,
                   },
                 })}
-                name="smsOnOrderIsActionedText"
+                name='smsOnOrderIsActionedText'
                 isInvalid={Boolean(errors.smsOnOrderIsActionedText)}
                 disabled={isLoading}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.smsOnOrderIsActionedText?.message}
               </Form.Control.Feedback>
             </Form.Group>

package/src/setting/dashboard/ProviderSettingForm.tsx

@@ -57,7 +57,7 @@ export const ProviderSettingForm = ({
     <>
       <Row>
         <Col xs={12}>
-          <h5 className="mt-5">{t('providerSettings')}</h5>
+          <h5 className='mt-5'>{t('providerSettings')}</h5>
         </Col>
 
         <Col>
@@ -122,7 +122,7 @@ export const ProviderSettingForm = ({
                 isInvalid={Boolean(errors.phoneOnVenueCheckoutPage)}
                 disabled={isLoading}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.phoneOnVenueCheckoutPage?.message}
               </Form.Control.Feedback>
             </InputGroup>
@@ -135,7 +135,7 @@ export const ProviderSettingForm = ({
           <Form.Group controlId={defaultVenueCurrencyId}>
             <Form.Label>{t('defaultVenueCurrency')}</Form.Label>
             <Form.Control
-              as="select"
+              as='select'
               {...register('defaultVenueCurrency')}
               disabled={isLoading}
             >