@licklist/design 0.69.1 → 0.69.2

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,7 @@ export const DashboardSettingForm = ({
             <Form.Group controlId={metaPixelId}>
               <Form.Label>{t('metaPixelId')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('metaPixelId', {
                   minLength: {
                     value: 15,
@@ -190,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>
@@ -200,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}
               >
@@ -220,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>
@@ -243,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')}

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

package/src/setting/dashboard/components/IpInput.tsx

@@ -98,7 +98,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
 
   return (
     <FormProvider {...form}>
-      <InputGroup className="mb-2" hasValidation>
+      <InputGroup className='mb-2' hasValidation>
         {IpDischargeFieldNames.map((name, i, arr) => {
           const { onChange, ...field } = register(name, {
             required: t('Validation:fieldRequired', {
@@ -125,12 +125,12 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
                 isInvalid={Boolean(formState.errors[name])}
               />
               {i !== arr.length - 1 && (
-                <InputGroup.Text className="ip-divider">.</InputGroup.Text>
+                <InputGroup.Text className='ip-divider'>.</InputGroup.Text>
               )}
             </Fragment>
           )
         })}
-        <InputGroup.Text className="ip-divider">:</InputGroup.Text>
+        <InputGroup.Text className='ip-divider'>:</InputGroup.Text>
         <FormControl
           {...register('ipPort', {
             validate: (value) =>
@@ -145,19 +145,19 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
           onPaste={handlePaste}
           isInvalid={Boolean(formState.errors.ipPort)}
         />
-        <InputGroup.Text className="ip-divider border-right">
+        <InputGroup.Text className='ip-divider border-right'>
           <Button
-            variant="light-outline"
-            size="sm"
-            className="btn-icon-popover rounded-circle d-inline-flex align-self-center pb-0"
-            aria-label="Remove IP address"
+            variant='light-outline'
+            size='sm'
+            className='btn-icon-popover rounded-circle d-inline-flex align-self-center pb-0'
+            aria-label='Remove IP address'
             disabled={!isRemovable}
             onClick={onRemove}
           >
-            <FaTimes size={14} color="red" />
+            <FaTimes size={14} color='red' />
           </Button>
         </InputGroup.Text>
-        <FormControl.Feedback type="invalid">
+        <FormControl.Feedback type='invalid'>
           {Object.values(formState.errors)[0]?.message}
         </FormControl.Feedback>
       </InputGroup>

package/src/setting/dashboard/payments/payments-form/PaymentsForm.tsx

@@ -24,23 +24,23 @@ export function PaymentsForm({
       }}
       onSubmit={form.handleSubmit(onSubmit)}
     >
-      <div className="d-flex justify-content-between mb-4">
+      <div className='d-flex justify-content-between mb-4'>
         <h5>Ryft Pay</h5>
         {accountId && <Form.Label>{accountId}</Form.Label>}
       </div>
       <Button
         disabled={isLoading}
-        type="submit"
-        className="mt-3 d-flex align-items-center"
+        type='submit'
+        className='mt-3 d-flex align-items-center'
       >
         {accountId ? t('Design:sync') : t('Design:connect')}
         {isLoading && (
           <Spinner
-            animation="border"
-            size="sm"
-            role="status"
-            aria-hidden="true"
-            className="ml-3"
+            animation='border'
+            size='sm'
+            role='status'
+            aria-hidden='true'
+            className='ml-3'
           />
         )}
       </Button>

package/src/setting/dashboard/payments/payments-modal/PaymentsModal.tsx

@@ -31,10 +31,10 @@ export function PaymentsModal({
       {/* @ts-expect-error TS2345 */}
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <Modal.Body>
-          <Form.Group className="mb-3" controlId={emailId}>
+          <Form.Group className='mb-3' controlId={emailId}>
             <Form.Control
-              type="email"
-              placeholder="licklist@example.com"
+              type='email'
+              placeholder='licklist@example.com'
               {...register('email')}
               autoFocus
             />
@@ -42,7 +42,7 @@ export function PaymentsModal({
         </Modal.Body>
 
         <Modal.Footer>
-          <Button type="submit" variant="primary">
+          <Button type='submit' variant='primary'>
             {t('Design:connect')}
           </Button>
         </Modal.Footer>

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.tsx

@@ -22,13 +22,13 @@ export function SnippetTemplateCard({
   const { t } = useTranslation('Design')
 
   return (
-    <div className="snippet-template-card">
-      <div className="snippet-template-card-header">
+    <div className='snippet-template-card'>
+      <div className='snippet-template-card-header'>
         <Link to={href}>{name}</Link>
         {hasPermission && !isDefault && (
           <button
-            type="button"
-            className="snippet-template-card-button"
+            type='button'
+            className='snippet-template-card-button'
             onClick={onRemove}
           >
             <FaTrashAlt />
@@ -36,16 +36,16 @@ export function SnippetTemplateCard({
         )}
       </div>
       {isDefault && (
-        <div className="mt-4">
-          <p className="mb-1">{t('Design:default')}</p>
+        <div className='mt-4'>
+          <p className='mb-1'>{t('Design:default')}</p>
         </div>
       )}
-      <div className="snippet-template-card-color-container mt-5">
+      <div className='snippet-template-card-color-container mt-5'>
         {colors?.map((color, i) => (
           <div
             key={i}
             style={{ backgroundColor: color }}
-            className="snippet-template-card-color-block"
+            className='snippet-template-card-color-block'
           />
         ))}
       </div>

package/src/setting/dashboard/snippets/card/SnippetCard.tsx

@@ -31,22 +31,22 @@ export function SnippetCard({
 
   return (
     <div
-      className="border-0 product-set-card-wrapper w-100 pb-0"
-      role="button"
+      className='border-0 product-set-card-wrapper w-100 pb-0'
+      role='button'
       tabIndex={0}
       onClick={() => RouteService.redirectTo(href)}
       onKeyUp={() => RouteService.redirectTo(href)}
     >
-      <div className="product-set-card">
-        <div className="product-set-card-link">{name}</div>
-        <div className="d-flex align-items-center">
-          {isDefault && <div className="mr-4">{t('Design:default')}</div>}
-          <div className="product-set-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+      <div className='product-set-card'>
+        <div className='product-set-card-link'>{name}</div>
+        <div className='d-flex align-items-center'>
+          {isDefault && <div className='mr-4'>{t('Design:default')}</div>}
+          <div className='product-set-card-menu-eye-container'>
+            <FaEye color='#0E8CE2' size={20} />
           </div>
           <OverlayTrigger
-            trigger="click"
-            placement="bottom"
+            trigger='click'
+            placement='bottom'
             rootClose
             overlay={
               <Popover
@@ -58,10 +58,10 @@ export function SnippetCard({
               >
                 <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 function SnippetCard({
                           }}
                           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 function SnippetCard({
             }
           >
             <button
-              type="button"
-              className="product-set-card-menu-button"
+              type='button'
+              className='product-set-card-menu-button'
               disabled={!isDeletingAllowed}
               onClick={(e) => {
                 e.stopPropagation()

package/src/setting/system/SystemSettingForm.tsx

@@ -32,7 +32,7 @@ export function SystemSettingForm(props: SystemSettingFormProps) {
 
   return (
     <Form
-      className="d-flex flex-column"
+      className='d-flex flex-column'
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
@@ -41,17 +41,17 @@ export function SystemSettingForm(props: SystemSettingFormProps) {
       </FormProvider>
       {hasPermission && (
         <Button
-          type="submit"
+          type='submit'
           disabled={isLoading}
-          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/sidebar/elements/Elements.stories.tsx

@@ -8,7 +8,7 @@ export default {
 export const ReturnBack: Story<ReturnBackProps> = (args) => {
   return (
     <>
-      <div className="mb-2" style={{ width: 200 }}>
+      <div className='mb-2' style={{ width: 200 }}>
         <ReturnBackComponent {...args} />
       </div>
       <div style={{ width: 350 }}>

package/src/sidebar/elements/ReturnBack.tsx

@@ -10,10 +10,10 @@ function ReturnBack({ onClick }: ReturnBackProps) {
   const { t } = useTranslation(['Design'])
 
   return (
-    <div className="sidebar-return-back-container">
-      <Button onClick={onClick} variant="outline-primary">
+    <div className='sidebar-return-back-container'>
+      <Button onClick={onClick} variant='outline-primary'>
         <FaChevronLeft />
-        <span className="sidebar-return-back__title">{t('backToCompany')}</span>
+        <span className='sidebar-return-back__title'>{t('backToCompany')}</span>
       </Button>
     </div>
   )

package/src/slide-curtain/SlideCurtain.stories.tsx

@@ -9,7 +9,7 @@ export default {
 export const Default: Story = () => {
   return (
     <SlideCurtain>
-      <button className="hello">Click</button>
+      <button className='hello'>Click</button>
     </SlideCurtain>
   )
 }