@licklist/design 0.68.7-dev.1 → 0.69.0

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

package/src/slide-curtain/SlideCurtain.tsx

@@ -41,20 +41,20 @@ export function SlideCurtain({ children }) {
 
   return (
     <div
-      className='slide-form'
+      className="slide-form"
       ref={formBodyRef}
       style={{
         bottom: expanded ? 0 : bottomOffset,
       }}
     >
       <div
-        className='slide-form__swipe-trigger'
+        className="slide-form__swipe-trigger"
         {...handlers}
         ref={passRefToSwieable}
       >
-        <FaEllipsisH size={24} className='slide-form__swipe-trigger__icon' />
+        <FaEllipsisH size={24} className="slide-form__swipe-trigger__icon" />
       </div>
-      <div className='slide-form__content'>{children}</div>
+      <div className="slide-form__content">{children}</div>
     </div>
   )
 }

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -44,16 +44,16 @@ export function SnippetTemplate({
         <SnippetTemplateViewContextProvider>
           <div
             ref={containerRef}
-            className='d-flex flex-column-reverse flex-sm-row overflow-auto'
+            className="d-flex flex-column-reverse flex-sm-row overflow-auto"
           >
-            <div className='d-flex flex-grow-1'>
+            <div className="d-flex flex-grow-1">
               <Preview
                 onSettingClick={onSettingClick}
                 providerHasMap={providerHasMap}
               />
             </div>
 
-            <div className='d-flex flex-column flex-grow-0 mx-4 mb-4'>
+            <div className="d-flex flex-column flex-grow-0 mx-4 mb-4">
               <SnippetTemplateForm
                 isLoading={isLoading}
                 onSubmit={onSubmit}

package/src/snippet/snippet-template/context/snippetTemplate.tsx

@@ -58,7 +58,7 @@ export function SnippetTemplateContextProvider({
       value={{ template, actions: actionsRef.current }}
     >
       <div
-        className='w-100 h-100'
+        className="w-100 h-100"
         style={
           {
             '--snippet-page-background-color': template?.backgroundColor,
@@ -181,7 +181,7 @@ export function SnippetTemplateContextProvider({
               template?.activePointFontColor,
           } as React.CSSProperties
         }
-        id='snippet-template-context'
+        id="snippet-template-context"
       >
         {children}
       </div>

package/src/snippet/snippet-template/control/PropertyControl.tsx

@@ -59,10 +59,10 @@ export function PropertyControl<T>({
   }
 
   return (
-    <Form.Group className='position-relative color-picker'>
-      <Form.Label className='mt-2'>{label}</Form.Label>
+    <Form.Group className="position-relative color-picker">
+      <Form.Label className="mt-2">{label}</Form.Label>
 
-      <div className='position-relative'>
+      <div className="position-relative">
         <Form.Control
           {...register(item, {
             required: {
@@ -79,18 +79,18 @@ export function PropertyControl<T>({
         />
 
         <div
-          className='color-picker__color'
+          className="color-picker__color"
           style={{ backgroundColor: String(value) ?? '' }}
         />
       </div>
 
       {isActive && (
-        <div className='color-picker__popover'>
+        <div className="color-picker__popover">
           <div
-            className='color-picker__cover vh-100 vw-100'
+            className="color-picker__cover vh-100 vw-100"
             onClick={toggleIsActive}
             onKeyPress={toggleIsActive}
-            role='button'
+            role="button"
             tabIndex={0}
           />
           <TwitterPicker
@@ -103,7 +103,7 @@ export function PropertyControl<T>({
           />
         </div>
       )}
-      <Form.Control.Feedback type='invalid'>
+      <Form.Control.Feedback type="invalid">
         {HookFormService.getErrors<T>(item, errors)}
       </Form.Control.Feedback>
     </Form.Group>