Merge remote-tracking branch 'origin/master' into PC-93

# Conflicts:
#	app/javascript/components/shared/constants.js
#	app/javascript/components/ui/PcDropdownSelect.jsx

Author: vb-cmd

app/assets/images/icons/cross.svg

@@ -50,9 +50,12 @@ textarea {
 
 .rbt-menu.dropdown-menu.show {
   margin-top: 5px;
-  border: 1px solid $primary;
+  outline: 1px solid $primary;
+  border-inline: 5px solid $white !important;
+  border-block: none !important;
   width: calc(100% + 2px) !important;
-  margin-left: -1px;
+  margin-left: -2px;
+  max-height: 185px !important;
 }
 
 .rbt-highlight-text {
@@ -70,16 +73,21 @@ textarea {
  **/
 .pc-typeahead-customer-info {
   .pc-icon-reserve-place {
-    padding-right: 26px;
-    background-color: $white;
+    padding-right: 60px;
   }
 
-  .pc-typeahead-toggle {
-    width: 26px;
-    cursor: pointer;
+  .pc-typeahead-controls {
+    width: 60px;
+  }
+
+  .pc-typeahead-button {
+    width: 24px;
   }
 }
 
+/**
+ *** LOGO UPLOADER ***
+ **/
 .pc-logo-uploader {
   width: 136px;
   height: 117px;

app/assets/stylesheets/application/input.scss

@@ -46,6 +46,8 @@ export const CustomerForm = () => {
   }
 
   const handleCompanyInputChange = (text) => {
+    text = text.trimStart()
+
     if (text) {
       setIsNextDisabled(false)
       setErrors((prev) => ({...prev, company_name: ''}))
@@ -114,7 +116,6 @@ export const CustomerForm = () => {
       setIsNextDisabled(true)
       setErrors((prev) => ({...prev, logo: logoErrors.join('\n')}))
     } else {
-      setIsNextDisabled(false)
       setCustomer((prev) => ({ ...prev, logo_url: URL.createObjectURL(file) }))
       setErrors((prev) => ({ ...prev, logo: '' }))
     }
@@ -150,6 +151,11 @@ export const CustomerForm = () => {
     }
   }
 
+  const handleClearInput = () => {
+    setCustomer(prev => ({ ...prev, company_name: '' }))
+    setIsNextDisabled(true)
+  }
+
   return (
     <Form onSubmit={handleNext} className={'d-flex flex-column w-100 align-items-center'}>
       <div className="border rounded border-primary customer-form bg-light w-100 mb-7">
@@ -180,6 +186,7 @@ export const CustomerForm = () => {
                     error={errors.company_name}
                     onChange={handleCompanyChange}
                     onInputChange={handleCompanyInputChange}
+                    onClearInput={handleClearInput}
                     hasIcon={true}
                   />
                 </Col>

app/javascript/components/shared/CustomerForm.jsx

@@ -23,8 +23,8 @@ export const STEPS = {
 // STEPS_DATA is for PcProgressBar component
 export const STEPS_DATA = [
   // step_id must be a number
-  {step_id: 1, step: ROUTES.CUSTOMER_INFO, title: 'Customer Information'},
-  {step_id: 2, step: ROUTES.ITEM_PRICING, title: 'Items & Pricing'},
+  { step_id: 1, step: ROUTES.CUSTOMER_INFO, title: 'Customer Information' },
+  { step_id: 2, step: ROUTES.ITEM_PRICING, title: 'Items & Pricing' },
 ]
 
 // Centralized storage for image assets
@@ -47,6 +47,9 @@ import trashDangerUrl from '../../../assets/images/icons/trash-danger.svg'
 import trashTwoUrl from '../../../assets/images/icons/trash-default.svg'
 import trashDefaultUrl from '../../../assets/images/icons/trash-default.svg'
 import trashUrl from '../../../assets/images/icons/trash.svg'
+import dropdownArrowDownUrl from '../../../assets/images/icons/arrow-down.svg'
+import dropdownArrowUpUrl from '../../../assets/images/icons/arrow-up.svg'
+import crossUrl from '../../../assets/images/icons/cross.svg'
 
 export const IMAGE_ASSETS = {
   ICONS: {
@@ -68,7 +71,10 @@ export const IMAGE_ASSETS = {
     trashDefault: trashDefaultUrl,
     trashDanger: trashDangerUrl,
     arrowDownLight: arrowDownLightUrl,
-    arrowUpLight: arrowUpLightUrl
+    arrowUpLight: arrowUpLightUrl,
+    dropdownArrowDown: dropdownArrowDownUrl,
+    dropdownArrowUp: dropdownArrowUpUrl,
+    cross: crossUrl,
   },
   // future asset files can be added here
 }
@@ -82,12 +88,12 @@ export const EMPTY_ENTITIES = {
     address: '',
     notes: '',
     logo_url: null,
-  }
+  },
   // future empty entities can be added here
 }
 
 export const INPUT_VALIDATORS = {
-  emailFormat:/^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  emailFormat: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
   maxSizeFile: 2 * 1024 * 1024,
   allowedFileTypes: ['image/jpeg', 'image/png'],
   // future validation rules can be added here

app/javascript/components/shared/constants.js

@@ -5,19 +5,19 @@ import { normalizeName } from '../utils'
 import { PcIcon } from './PcIcon'
 
 export const PcDropdownSelect = ({
-  id,
-  options,
-  placeholder,
-  height,
-  value,
-  label,
-  error,
-  maxResults = 5,
-  hasIcon = false,
-  onChange,
-  onInputChange,
-  ...props
-}) => {
+                                   id,
+                                   options,
+                                   placeholder,
+                                   height,
+                                   value,
+                                   label,
+                                   error,
+                                   hasIcon = false,
+                                   onChange,
+                                   onInputChange,
+                                   onClearInput,
+                                   ...props
+                                 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
 
   const selectedOption =
@@ -40,27 +40,39 @@ export const PcDropdownSelect = ({
     setIsMenuOpen(false)
   }
 
-  const handleChenge = (selected) => {
+  const handleChange = (selected) => {
     onChange(selected)
 
     if (selected.length !== 0) setIsMenuOpen(false)
   }
 
   const handleInputChange = (t, e) => {
     onInputChange(t, e)
+
     if (t) setIsMenuOpen(true)
   }
 
-  const DropdownToggleIcon = () => (
-    <div className="pc-typeahead-toggle position-absolute end-0 top-0 h-100" onClick={handleOpenMenu}>
-      <div className={'d-flex justify-content-start align-items-center h-100'}>
+  const handleClick = (e) => {
+    setIsMenuOpen(true)
+  }
+
+  const TransparentButton = ({ children, className, ...props }) =>
+    (<button className={`bg-transparent rounded-0 border-0 p-0 m-0 ${className}`} {...props}>
+      {children}
+    </button>)
+
+  const TypeaheadControls = () =>
+    (<div className="pc-typeahead-controls position-absolute end-0 top-0 h-100 d-flex flex-row">
+      <TransparentButton onClick={onClearInput} className={'pc-typeahead-button'}>
+        <PcIcon name={'cross'} alt={'Cross'} className={'pc-icon-cross'} />
+      </TransparentButton>
+      <TransparentButton onClick={handleOpenMenu} className={'pc-typeahead-button'}>
         <PcIcon
           name={isMenuOpen ? 'arrowUp' : 'arrowDown'}
           alt={isMenuOpen ? 'Arrow pointing up' : 'Arrow pointing down'}
         />
-      </div>
-    </div>
-  )
+      </TransparentButton>
+    </div>)
 
   return (
     <Form.Group controlId={id}>
@@ -72,23 +84,23 @@ export const PcDropdownSelect = ({
           filterBy={handleFilterBy}
           allowNew
           newSelectionPrefix="Add new customer: "
-          className="pc-icon-reserve-place border border-primary rounded-1"
+          className="pc-icon-reserve-place border border-primary rounded-1 bg-white"
           style={{ height }}
           selected={selectedOption ? [selectedOption] : []}
-          maxResults={maxResults}
           paginate={false}
           open={isMenuOpen}
           onMenuToggle={(isOpen) => setIsMenuOpen(isOpen)}
           onFocus={handleFocus}
           onBlur={handleBlur}
-          onChange={handleChenge}
+          onChange={handleChange}
           onInputChange={handleInputChange}
+          inputProps={{ onClick: handleClick }}
           {...props}
         />
         <Form.Label className="border-label fw-bold fs-11 lh-sm px-1">{label}</Form.Label>
-        {hasIcon && <DropdownToggleIcon />}
+        {hasIcon && <TypeaheadControls />}
       </div>
       {error && <div className="text-danger fs-12">{error}</div>}
     </Form.Group>
   )
-}
+}