@licklist/design 0.69.1 → 0.69.2

package/src/sales/notes/NotesTable.tsx

@@ -46,14 +46,14 @@ export const NotesTable = ({
   }
 
   return (
-    <div className="notes pb-4 pt-4">
-      <div className="d-flex mb-3 align-items-center justify-content-between">
+    <div className='notes pb-4 pt-4'>
+      <div className='d-flex mb-3 align-items-center justify-content-between'>
         <h2>{heading}</h2>
         {!isFormView && <AddNoteButton onClick={() => setIsFormView(true)} />}
       </div>
 
       {!isFormView && (
-        <Table bordered size="sm">
+        <Table bordered size='sm'>
           <thead>
             <tr>
               <th>{t('notes')}</th>
@@ -101,8 +101,8 @@ const AddNoteButton = ({ onClick }: { onClick: () => void }) => {
   const { t } = useTranslation('Design')
 
   return (
-    <Button onClick={onClick} className="show-form-button">
-      {t('addNew')} <FaPlusCircle size={16} className="ml-2" />
+    <Button onClick={onClick} className='show-form-button'>
+      {t('addNew')} <FaPlusCircle size={16} className='ml-2' />
     </Button>
   )
 }

package/src/sales/notes/NotesTableRow.tsx

@@ -34,19 +34,19 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
 
   return (
     <tr onClick={onClick}>
-      <td className="note-content">{note.note}</td>
-      <td className="note-author">
+      <td className='note-content'>{note.note}</td>
+      <td className='note-author'>
         {capitalize(note.user.firstName)} {capitalize(note.user.lastName)}
       </td>
-      <td className="text-nowrap">{date}</td>
+      <td className='text-nowrap'>{date}</td>
       <td>
-        <div className="controls">
-          <span className="btn btn-sm eye">
+        <div className='controls'>
+          <span className='btn btn-sm eye'>
             <FaEye size={20} />
           </span>
           <OverlayTrigger
-            trigger="click"
-            placement="bottom"
+            trigger='click'
+            placement='bottom'
             rootClose
             overlay={
               <Popover
@@ -58,10 +58,10 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
               >
                 <Popover.Content
                   as={ListGroup}
-                  className="product-set-card-menu"
-                  variant="flush"
+                  className='product-set-card-menu'
+                  variant='flush'
                 >
-                  <ListGroup.Item action className="text-danger" as="div">
+                  <ListGroup.Item action className='text-danger' as='div'>
                     <ConfirmModal>
                       {(confirm) => (
                         <MenuButton
@@ -71,7 +71,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                           }}
                           name={t('remove')}
                           icon={<FaTrashAlt size={12} />}
-                          className="product-set-card-menu-item-text d-flex w-100 align-items-center"
+                          className='product-set-card-menu-item-text d-flex w-100 align-items-center'
                           rightIcon
                         />
                       )}
@@ -82,8 +82,8 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
             }
           >
             <button
-              type="button"
-              className="product-set-card-menu-button"
+              type='button'
+              className='product-set-card-menu-button'
               onClick={(e) => {
                 e.stopPropagation()
                 setIsOverlayVisible(true)

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,23 +69,23 @@ 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'
                     {...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 +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"
+                    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', {
@@ -168,17 +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"
+                    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', {
@@ -225,17 +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"
+                    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', {
@@ -270,17 +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"
+                    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', {