@licklist/design 0.68.6-dev.2 → 0.68.6

package/src/sales/modals/payment-modal/PaymentModal.tsx

@@ -48,16 +48,16 @@ export const PaymentModal = ({
 
   return (
     <Modal
-      size='lg'
+      size="lg"
       centered
       show={isVisible}
       onHide={onHide}
-      className='p-3 border-0'
+      className="p-3 border-0"
       animation={false}
-      contentClassName='rounded'
+      contentClassName="rounded"
     >
-      <ModalHeader className='align-items-center border-0'>
-        <ModalTitle as='h5'>
+      <ModalHeader className="align-items-center border-0">
+        <ModalTitle as="h5">
           {t('Design:newPayment')}
           {!!remainingToPay && (
             <>
@@ -72,7 +72,7 @@ export const PaymentModal = ({
           )}
         </ModalTitle>
 
-        <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
+        <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
           <FaTimes size={20} />
         </Button>
       </ModalHeader>
@@ -85,13 +85,13 @@ export const PaymentModal = ({
           showAmountField
         />
       </Modal.Body>
-      <Modal.Footer className='border-0'>
-        <Button variant='secondary' onClick={onHide} disabled={isLoading}>
+      <Modal.Footer className="border-0">
+        <Button variant="secondary" onClick={onHide} disabled={isLoading}>
           {t('cancel')}
         </Button>
         <Button
-          variant='primary'
-          type='button'
+          variant="primary"
+          type="button"
           disabled={isLoading || isSubmitDisabled}
           onClick={onModalSubmit}
         >

package/src/sales/modals/refund-modal/RefundModal.stories.tsx

@@ -27,7 +27,7 @@ export const Default: Story<RefundModalProps> = () => {
         isVisible={isVisible}
         onSubmit={onSubmit}
         onHide={() => setIsVisible(false)}
-        paymentType='cash'
+        paymentType="cash"
         isFullRefund={isFullRefund}
         isLoading={isLoading}
         defaultValue={defaultValue}

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -54,21 +54,21 @@ export const RefundModal = ({
 
   return (
     <Modal
-      size='lg'
+      size="lg"
       centered
       show={isVisible}
       onHide={onHide}
-      className='p-3 border-0'
+      className="p-3 border-0"
       animation={false}
-      contentClassName='rounded'
+      contentClassName="rounded"
     >
       <Form onSubmit={handleSubmit(onModalSubmit)}>
-        <ModalHeader className='align-items-center border-0'>
-          <ModalTitle as='h5'>
+        <ModalHeader className="align-items-center border-0">
+          <ModalTitle as="h5">
             {t(isFullRefund ? 'Design:fullRefund' : 'Design:partialRefund')}
           </ModalTitle>
 
-          <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
+          <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
             <FaTimes size={20} />
           </Button>
         </ModalHeader>
@@ -79,7 +79,7 @@ export const RefundModal = ({
               <FormGroup>
                 <Form.Label>{t('Design:paymentType')}</Form.Label>
                 <Form.Control
-                  type='text'
+                  type="text"
                   placeholder={t('Design:paymentType')}
                   value={String(
                     t(
@@ -114,18 +114,18 @@ export const RefundModal = ({
                   isInvalid={!!errors.amount}
                   min={0}
                 />
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {errors.amount?.message}
                 </Form.Control.Feedback>
               </FormGroup>
             </Col>
           </Row>
         </Modal.Body>
-        <Modal.Footer className='border-0'>
-          <Button variant='secondary' onClick={onHide} disabled={isLoading}>
+        <Modal.Footer className="border-0">
+          <Button variant="secondary" onClick={onHide} disabled={isLoading}>
             {t('cancel')}
           </Button>
-          <Button variant='primary' type='submit' disabled={isLoading}>
+          <Button variant="primary" type="submit" disabled={isLoading}>
             {t('confirm')}
           </Button>
         </Modal.Footer>

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