@licklist/design 0.68.7-dev.1 → 0.69.0

package/src/sales/notes/note-form/NoteForm.tsx

@@ -31,15 +31,15 @@ export const NoteForm = ({
 
   return (
     <form
-      className='mt-1 notes-form'
+      className="mt-1 notes-form"
       onSubmit={handleSubmit(({ note }) => onSubmit(note))}
     >
-      <Form.Group controlId='exampleForm.ControlTextarea1'>
+      <Form.Group controlId="exampleForm.ControlTextarea1">
         <Form.Label>
           {t(defaultValues.note ? 'editNote' : 'addANote')}
         </Form.Label>
         <Form.Control
-          as='textarea'
+          as="textarea"
           rows={5}
           isInvalid={!!errors.note}
           placeholder={t('writeYourNoteHere')}
@@ -50,24 +50,24 @@ export const NoteForm = ({
             },
           })}
         />
-        <Form.Control.Feedback type='invalid'>
+        <Form.Control.Feedback type="invalid">
           {errors.note?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
-      <footer className='d-flex'>
-        <Button type='submit'>{t('save')}</Button>
+      <footer className="d-flex">
+        <Button type="submit">{t('save')}</Button>
         <Button
-          type='submit'
-          variant='outline-secondary'
-          className='ml-auto'
+          type="submit"
+          variant="outline-secondary"
+          className="ml-auto"
           onClick={onClose}
         >
           {t('close')}
         </Button>
         <Button
-          variant='danger'
-          className='ml-2'
+          variant="danger"
+          className="ml-2"
           onClick={() => setValue('note', '')}
         >
           {t('delete')}

package/src/sales/payment-form/SalePaymentForm.tsx

@@ -124,8 +124,8 @@ export const SalePaymentForm = forwardRef<
             <Form.Group>
               <Form.Label>{t('paymentType')}</Form.Label>
               <Form.Control
-                className='payment-type'
-                as='select'
+                className="payment-type"
+                as="select"
                 {...register('orderPaymentType')}
                 isInvalid={!!errors?.orderPaymentType}
               >
@@ -159,7 +159,7 @@ export const SalePaymentForm = forwardRef<
                 )}
               </Form.Control>
               {orderPaymentTypeError && (
-                <div className='error-message'>{orderPaymentTypeError}</div>
+                <div className="error-message">{orderPaymentTypeError}</div>
               )}
             </Form.Group>
           </Col>
@@ -198,7 +198,7 @@ export const SalePaymentForm = forwardRef<
               <Form.Group>
                 <Form.Label>{t('Design:expirationDate')}</Form.Label>
                 <Form.Control
-                  type='datetime-local'
+                  type="datetime-local"
                   placeholder={t('Design:date')}
                   value={currentFormValues.paymentLinkExpireDate}
                   {...register('paymentLinkExpireDate', {
@@ -228,7 +228,7 @@ export const SalePaymentForm = forwardRef<
                     DateTime.now().minus({ minutes: 1 }),
                   )}
                 />
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {errors?.paymentLinkExpireDate?.message}
                 </Form.Control.Feedback>
               </Form.Group>

package/src/sales/payment-form/components/RyftPayment/RyftPayment.tsx

@@ -20,31 +20,31 @@ export const RyftPayment = ({
   return (
     <>
       {!isLoading && !isError && !ryftInitFailure && (
-        <div className='input-label margin-top-2-rem mb-3'>
+        <div className="input-label margin-top-2-rem mb-3">
           {t('Design:paymentDetails')}
         </div>
       )}
       {isLoading && (
-        <div className='mt-5 pt-5'>
+        <div className="mt-5 pt-5">
           <BlockLoader />
         </div>
       )}
       {isError && (
-        <div className='mt-5 ryft-init-failure'>
-          <Alert key='danger' variant='danger'>
+        <div className="mt-5 ryft-init-failure">
+          <Alert key="danger" variant="danger">
             <h5>{t('App:errorMessage')}</h5>
             {t('noPaymentProviderFound')}
           </Alert>
         </div>
       )}
       {ryftInitFailure && (
-        <div className='mt-5 ryft-init-failure'>
-          <Alert key='danger' variant='danger'>
+        <div className="mt-5 ryft-init-failure">
+          <Alert key="danger" variant="danger">
             <h5>{t('App:errorMessage')}</h5>
             {t('initFailureMessage')}
-            <div className='flex flex-column align-items-center mt-4'>
+            <div className="flex flex-column align-items-center mt-4">
               <Button
-                variant='primary'
+                variant="primary"
                 onClick={() => {
                   history.go(0)
                 }}
@@ -55,7 +55,7 @@ export const RyftPayment = ({
           </Alert>
         </div>
       )}
-      <form id='ryft-pay-form' noValidate className='ryft-payment-form' />
+      <form id="ryft-pay-form" noValidate className="ryft-payment-form" />
     </>
   )
 }

package/src/sales/sales-and-views/SalesAndViewsChart.tsx

@@ -61,18 +61,18 @@ function SalesAndViewsChart({
   }: TooltipProps<ValueType, NameType>) => {
     if (active && payload && payload.length) {
       return (
-        <div className='tooltip-container'>
+        <div className="tooltip-container">
           <p
-            className='tooltip-item'
+            className="tooltip-item"
             style={{
               display: activePeriod === 'pastDay' ? 'none' : 'inline',
             }}
           >
             {labelFormatter(label)}
           </p>
-          <p className='tooltip-item'>sales: {payload[0]?.payload.sales}</p>
+          <p className="tooltip-item">sales: {payload[0]?.payload.sales}</p>
           {payload[0]?.payload?.amount && (
-            <p className='tooltip-item'>
+            <p className="tooltip-item">
               {formatNumber(payload[0]?.payload?.amount, {
                 style: 'currency',
                 currency: 'GBP',
@@ -87,9 +87,9 @@ function SalesAndViewsChart({
   const legendRenderer = () => (
     <>
       <div
-        className='legend'
+        className="legend"
         onClick={() => setChartType('sales')}
-        role='button'
+        role="button"
         tabIndex={0}
       >
         <div
@@ -101,9 +101,9 @@ function SalesAndViewsChart({
         {t('sales')}
       </div>
       <div
-        className='legend'
+        className="legend"
         onClick={() => setChartType('views')}
-        role='button'
+        role="button"
         tabIndex={0}
       >
         <div
@@ -118,10 +118,10 @@ function SalesAndViewsChart({
   )
 
   return (
-    <div className='sales-and-views'>
-      <div className='sales-and-views__header'>{t('salesAndViews')}</div>
-      <div className='sales-and-views__charts'>
-        <ResponsiveContainer width='100%' height='100%'>
+    <div className="sales-and-views">
+      <div className="sales-and-views__header">{t('salesAndViews')}</div>
+      <div className="sales-and-views__charts">
+        <ResponsiveContainer width="100%" height="100%">
           <ComposedChart
             data={data}
             margin={{
@@ -154,20 +154,20 @@ function SalesAndViewsChart({
                 }}
                 axisLine={false}
                 tickLine={false}
-                dataKey='date'
+                dataKey="date"
                 tickFormatter={(tick) => moment(tick).format('DD/MM')}
               />
             )}
             <Legend
-              iconType='circle'
+              iconType="circle"
               wrapperStyle={{ top: -20, left: 39 }}
-              layout='vertical'
-              verticalAlign='top'
+              layout="vertical"
+              verticalAlign="top"
               content={legendRenderer}
             />
             <Bar
               radius={[5, 5, 5, 5]}
-              dataKey='sales'
+              dataKey="sales"
               barSize={32}
               style={{ zIndex: 1 }}
             >
@@ -183,7 +183,7 @@ function SalesAndViewsChart({
             {chartType === 'views' && (
               <Line
                 strokeWidth={3}
-                type='monotone'
+                type="monotone"
                 dataKey={chartType}
                 activeDot
                 dot={false}
@@ -192,7 +192,7 @@ function SalesAndViewsChart({
           </ComposedChart>
         </ResponsiveContainer>
       </div>
-      <ul className='sales-and-views__filter-menu'>
+      <ul className="sales-and-views__filter-menu">
         {filterValues.map(({ period, id }) => (
           <li
             key={id}

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,24 +69,23 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                   </InputGroup.Prepend>
 
                   <Form.Control
-                    type='number'
+                    type="number"
                     min={0}
                     max={100}
-                    step='1'
-                    placeholder='0'
-                    onWheel={(event) => event.currentTarget.blur()}
+                    step="1"
+                    placeholder="0"
                     {...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', {
@@ -124,18 +123,17 @@ 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'
-                    onWheel={(event) => event.currentTarget.blur()}
+                    step="0.01"
+                    placeholder="0,00"
                     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', {
@@ -170,18 +168,17 @@ 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'
-                    onWheel={(event) => event.currentTarget.blur()}
+                    step="0.01"
+                    placeholder="0,00"
                     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', {
@@ -228,18 +225,17 @@ 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'
-                    onWheel={(event) => event.currentTarget.blur()}
+                    step="1"
+                    placeholder="0"
                     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', {
@@ -274,18 +270,17 @@ 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'
-                    onWheel={(event) => event.currentTarget.blur()}
+                    step="0.01"
+                    placeholder="0,00"
                     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,8 +177,7 @@ export const DashboardSettingForm = ({
             <Form.Group controlId={metaPixelId}>
               <Form.Label>{t('metaPixelId')}</Form.Label>
               <Form.Control
-                type='number'
-                onWheel={(event) => event.currentTarget.blur()}
+                type="number"
                 {...register('metaPixelId', {
                   minLength: {
                     value: 15,
@@ -191,7 +190,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>
@@ -201,14 +200,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}
               >
@@ -221,7 +220,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>
@@ -244,24 +243,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')}