PC-115: Add clear X button to the Company input field

Author: vb-cmd

app/assets/images/icons/cross.svg

@@ -70,16 +70,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

@@ -151,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">
@@ -181,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

@@ -32,6 +32,7 @@ import logoutUrl from '../../../assets/images/icons/logout.svg'
 import placeholderUrl from '../../../assets/images/icons/placeholder.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: {
@@ -40,6 +41,7 @@ export const IMAGE_ASSETS = {
     placeholder: placeholderUrl,
     dropdownArrowDown: dropdownArrowDownUrl,
     dropdownArrowUp: dropdownArrowUpUrl,
+    cross: crossUrl,
   },
   // future asset files can be added here
 }

app/javascript/components/shared/constants.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useState } from 'react'
 import { Form } from 'react-bootstrap'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import { normalizeName } from '../utils'
@@ -16,6 +16,7 @@ export const PcDropdownSelect = ({
                                    hasIcon = false,
                                    onChange,
                                    onInputChange,
+                                   onClearInput,
                                    ...props
                                  }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
@@ -40,31 +41,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 handleClick = (e) => {
     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 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 ? 'dropdownArrowUp' : 'dropdownArrowDown'}
           alt={isMenuOpen ? 'Arrow pointing up' : 'Arrow pointing down'}
         />
-      </div>
-    </div>
+      </TransparentButton>
+    </div>)
 
   return (
     <Form.Group controlId={id}>
@@ -76,7 +85,7 @@ 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}
@@ -85,13 +94,13 @@ export const PcDropdownSelect = ({
           onMenuToggle={(isOpen) => setIsMenuOpen(isOpen)}
           onFocus={handleFocus}
           onBlur={handleBlur}
-          onChange={handleChenge}
+          onChange={handleChange}
           onInputChange={handleInputChange}
-          inputProps={{onClick: handleClick}}
+          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>