imbric-theme 0.4.2 → 0.4.4

package/molecules/CardProductTypesBooking/CardProductTypesBooking.js

@@ -7,19 +7,30 @@ import withStyles from '../../hocs/withStyles'
 import Picture from '../../atoms/Picture'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
-export const CardProductTypesBooking = ({ srcImg, getStyles }) => {
-  return <div className={getStyles('card-product-types-booking')}>
+export const CardProductTypesBooking = ({
+  srcImg,
+  onClick,
+  textNotification,
+  textProductTypes,
+  textEtaProductTypesSub,
+  textDescription,
+  priceProductTypes,
+  priceProductTypesSub,
+  selectCard,
+  getStyles
+}) => {
+  return <div className={getStyles('card-product-types-booking', {'selectCard': selectCard})} onClick={onClick}>
 
     <div className={getStyles('labelNotification')}>
-      Reserve 2 h antes de la salida de su vuelo si es nacional, 3 h antes si es internacional.
+      {textNotification}
     </div>
 
     <div className={getStyles('card-product-content')}>
 
-      <div>
+      <div className={getStyles('card-product-img')}>
         <Picture
           src={srcImg}
-          width={110}
+          width={70}
         // height={100}
         />
       </div>
@@ -27,16 +38,16 @@ export const CardProductTypesBooking = ({ srcImg, getStyles }) => {
       <Horizontal size="sm" />
 
       <div>
-        <div className={getStyles('titleCardProductTypes')}>ECO (Tarifa máxima)</div>
-        <div className={getStyles('etaCardProductTypesSub')}>4 - 8 min.</div>
-        <div className={getStyles('titleCardProductTypesSub')}>Envío urgente de sobres y paquetes pequeños con taxi.</div>
+        <div className={getStyles('titleCardProductTypes')}>{textProductTypes}</div>
+        <div className={getStyles('etaCardProductTypesSub')}>{textEtaProductTypesSub}</div>
+        <div className={getStyles('titleCardProductTypesSub')}>{textDescription}</div>
       </div>
 
       <Horizontal size="sm" />
 
       <div class={getStyles('contentPrice')}>
-        <div class={getStyles('priceCardProductTypes')}>30€ - 30€</div>
-        <div class={getStyles('priceCardProductTypesSub')}> Máx.</div>
+        <div class={getStyles('priceCardProductTypes')}>{priceProductTypes}</div>
+        <div class={getStyles('priceCardProductTypesSub')}>{priceProductTypesSub}</div>
       </div>
 
     </div>
@@ -45,13 +56,29 @@ export const CardProductTypesBooking = ({ srcImg, getStyles }) => {
 }
 
 CardProductTypesBooking.propTypes = {
-  srcImg: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  srcImg: PropTypes.string,
+  textNotification: PropTypes.string,
+  textProductTypes: PropTypes.string,
+  textEtaProductTypesSub: PropTypes.string,
+  textDescription: PropTypes.string,
+  priceProductTypes: PropTypes.string,
+  priceProductTypesSub: PropTypes.string,
+  selectCard: PropTypes.bool,
   getStyles: PropTypes.func.isRequired,
-  type: PropTypes.oneOf(options.types),
+
 }
 
 CardProductTypesBooking.defaultProps = {
   getStyles: () => { },
+  onClick: () => { },
+  textNotification: 'Reserve 2 h antes de la salida de su vuelo si es nacional, 3 h antes si es internacional.',
+  textProductTypes: 'ECO (Tarifa máxima)',
+  textEtaProductTypesSub: '4 - 8 min.',
+  textDescription: 'Envío urgente de sobres y paquetes pequeños con taxi.',
+  priceProductTypes: '30€ - 30€',
+  priceProductTypesSub: 'Máx.',
+  selectCard: 'false'
 }
 
 export default withStyles(styles)(CardProductTypesBooking)

package/molecules/CardProductTypesBooking/CardProductTypesBooking.module.css

@@ -9,35 +9,40 @@
   transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
   background-color: #fff;
   margin: 0;
-  cursor: auto;
-  max-width: 330px;
-  min-width: 330px;
-  margin-right: 10px;
+  cursor: pointer;
+  max-width: 100%;
+  min-width: 100%;
+  margin-bottom: 10px;
 }
 
 .labelNotification {
   font-size: 12px;
-    color: #fff;
-    top: 0;
-    left: 0;
-    padding: 8px 8px 4px;
-    line-height: 13px;
-    border-radius: 10px;
-    margin-bottom: 6px;
-    background-color: rgb(245, 166, 35);
+  color: #fff;
+  top: 0;
+  left: 0;
+  padding: 8px 8px 4px;
+  line-height: 13px;
+  border-radius: 10px;
+  margin-bottom: 6px;
+  background-color: rgb(245, 166, 35);
 }
 
 .card-product-content {
   flex-direction: row;
-    box-sizing: border-box;
-    display: flex;
-    place-content: center start;
-    align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  place-content: center start;
+  align-items: center;
+}
+
+.card-product-img {
+  max-width: 70px;
+  min-width: 70px;
 }
 
 .titleCardProductTypes {
-  color: rgba(0,0,0,.87);
-  font-size: 13px;
+  color: rgba(0, 0, 0, .87);
+  font-size: 16px;
 }
 
 .etaCardProductTypesSub {
@@ -58,9 +63,9 @@
 
 .priceCardProductTypes {
   color: #00205b;
-  font-size: 14px;
+  font-size: 18px;
   text-align: right;
-  line-height: .9rem;
+  line-height: 1.1rem;
 }
 
 .priceCardProductTypesSub {
@@ -68,4 +73,37 @@
   font-size: 11px;
   text-align: right;
   line-height: .9rem;
-}
+}
+
+.selectCard {
+  border-top: 4px solid #39b54a;
+  border-bottom: 4px solid #00a3ff;
+  border-left: 1px solid #39b54a;
+  border-right: 1px solid #00a3ff;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background-position: 0 0, 100% 0;
+  background-repeat: no-repeat;
+  -webkit-background-size: 4px 100%;
+  -moz-background-size: 4px 100%;
+  background-size: 4px 100%;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
+  background-image: -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: linear-gradient(to bottom, #39b54a 0%, #00a3ff 100%), linear-gradient(to bottom, #39b54a 0%, #00a3ff 100%);
+}
+
+/* .selectCard:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  margin: 4px;
+  border-radius: inherit;
+  background: linear-gradient(to left, #39b54a, #00a3ff);
+} */

package/molecules/CardServices/CardServices.js

@@ -24,6 +24,7 @@ export const CardServices = ({
   txtUserService,
   txtRefService,
   txtUserNumberService,
+  onClickReturnOrder,
   
 }) => {
   return (
@@ -197,7 +198,7 @@ export const CardServices = ({
 
           <Icon
             name="returnOrder"
-            onClick={function noRefCheck() { }}
+            onClick={onClickReturnOrder}
             size="sm"
           />
 
@@ -271,6 +272,7 @@ CardServices.propTypes = {
   txtUserService: PropTypes.string,
   txtRefService: PropTypes.string,
   txtUserNumberService: PropTypes.string,
+  onClickReturnOrder: PropTypes.func,
 }
 
 CardServices.defaultProps = {
@@ -282,6 +284,7 @@ CardServices.defaultProps = {
   txtUserService: 'Alberto Alvarez',
   txtRefService: '1946980768',
   txtUserNumberService: 'WF3941',
+  onClickReturnOrder: () => { },
 }
 
 export default withStyles(styles)(CardServices)

package/molecules/DynamicSelect/DynamicSelect.js

@@ -5,7 +5,7 @@ import styles from './DynamicSelect.module.css'
 import withStyles from '../../hocs/withStyles'
 
 
-export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placeholder, isMulti, isClearable, isDisabled, isLoading, isRtl, isSearchable, isInline, onChange }) => {
+export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placeholder, isMulti, isClearable, isDisabled, isLoading, isRtl, isSearchable, isInline, onChange, onFocus, onBlur }) => {
 
 
   const customStyles = {
@@ -81,6 +81,8 @@ export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placehol
         isRtl={isRtl}
         isSearchable={isSearchable}
         onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
       />
     </div>
 
@@ -98,7 +100,9 @@ DynamicSelect.propTypes = {
   isRtl: PropTypes.bool,
   isSearchable: PropTypes.bool,
   isInline: PropTypes.bool,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func
 }
 
 DynamicSelect.defaultProps = {
@@ -112,6 +116,8 @@ DynamicSelect.defaultProps = {
   isSearchable: false,
   isInline: false,
   onChange: () => { },
+  onFocus: () => { },
+  onBlur: () => { },
 }
 
 export default withStyles(styles)(DynamicSelect)

package/molecules/InputAutocomplete/InputAutocomplete.js

@@ -0,0 +1,265 @@
+import React from 'react'
+import { useState } from "react";
+import PropTypes from 'prop-types'
+
+import styles from './InputAutocomplete.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+import { BarLoader, ClipLoader } from 'react-spinners'
+import Input from '../../atoms/Input'
+import Picture from '../../atoms/Picture'
+import Icon from '../../atoms/Icon'
+import { Horizontal } from '../../layout/Spacer/components';
+
+
+// import { ReactSearchAutocomplete } from 'react-search-autocomplete'
+// import Select, { components } from "react-select";
+// import AsyncSelect from 'react-select/async';
+
+
+export const InputAutocomplete = ({
+  placeholderOnInput,
+  idOnInput,
+  suggestedAddresses,
+  handleOnInputChange,
+  handleOnFocus,
+  handleOnBlur,
+  handleOnSelect,
+  viewAutocomplete,
+  viewBarLoader,
+  viewIconList,
+  viewInputSecondary,
+  styleWidthInput,
+  value,
+  isViewIcon,
+  idIcon,
+  nameIcon,
+  sizeIcon,
+  colorIcon,
+  backgroundIcon,
+  getStyles
+}) => {
+
+  // let [loading, setLoading] = useState(false);
+  // let [color, setColor] = useState("#ffffff");
+
+  const override = {
+    display: "block",
+    margin: "0 auto",
+    borderColor: "red",
+    width: "94%",
+  };
+
+  // const options = [
+  //   { label: "Option 1", value: 1 },
+  //   { label: "Option 2", value: 2 },
+  //   { label: "Option 3", value: 3 }
+  // ];
+
+  // const Input = (props) => {
+  //   const { autoComplete = props.autoComplete } = props.selectProps;
+  //   return <components.Input {...props} autoComplete={autoComplete} />;
+  // };
+
+
+  // const handleOnInputChange = (string, results) => {
+  //   console.log(string, results)
+
+  // }
+
+  // const loadOptions  = (string, results) => {
+  //   // inputValue: string,
+  //   // callback: (options: ColourOption[]) => void
+  // }
+
+  // const handleOnInputChange = (string, results) => {
+  //   console.log(string, results)
+
+  // }
+
+
+  return <div className={getStyles('input-autocomplete')}>
+
+    {isViewIcon ?
+
+      <div className={getStyles('box-icon-input')}>
+        {/* <ReactSearchAutocomplete
+        inputDebounce={1000}
+        showIcon={false}
+        showItemsOnFocus={true}
+        items={itemsAutocomplete}
+        onSearch={handleOnSearch}
+        onHover={handleOnHover}
+        onSelect={handleOnSelect}
+        resultStringKeyName
+        onFocus={handleOnFocus}
+        autoFocus
+        formatResult={formatResult}
+        placeholder='hola'
+        // maxResults={2}
+        styling={{
+          position: 'fixed',
+          width: '100%',
+          height: "26px",
+          padding: '7px 9px',
+          border: 'var(--border-width-thin) solid var(--color-brand-white-lilac)',
+          background: 'var(--input-background)',
+          borderRadius: 'var(--border-radius-sm)',
+          color: 'var(--color-font-highlight)',
+          fontFamily: "var(--font-family-sans)",
+          fontSize: '14px',
+          fontWeight: 100,
+          // lineHeight: 'var(--line-height-relaxed)',
+          // transition: 'box-shadow 0.2s ease',
+          placeholderColor: 'var(--background-color-primary)',
+          clearIconMargin: '3px 8px 0 0',
+          zIndex: 0,
+          searchIconMargin: '0 0 0 10px',
+        }}
+      /> */}
+
+        {/* 
+      <AsyncSelect
+        // components={{ Input }}
+        // autoComplete="new-password"
+        loadOptions={loadOptions}
+        // onChange={handleOnSearch}
+        // onInputChange={handleOnInputChange}
+        cacheOptions
+        defaultOptions={false}
+      /> */}
+
+        <Icon
+          id={idIcon}
+          name={nameIcon}
+          size={sizeIcon}
+          color={colorIcon}
+          background={backgroundIcon}
+        />
+
+        <Horizontal size="xs" />
+
+        <Input
+          autocomplete={'off'}
+          id={idOnInput}
+          type='text'
+          name={idOnInput}
+          onChange={handleOnInputChange}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          placeholder={placeholderOnInput}
+          isInputSecondary={viewInputSecondary}
+          value={value}
+        />
+
+      </div>
+
+      :
+
+      <Input
+        autocomplete={'off'}
+        id={idOnInput}
+        type='text'
+        name={idOnInput}
+        onChange={handleOnInputChange}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        placeholder={placeholderOnInput}
+        isInputSecondary={viewInputSecondary}
+        value={value}
+      />}
+
+    {!viewBarLoader && suggestedAddresses.length !== 0 && viewAutocomplete ? (
+      <div className={getStyles('input-autocomplete-box-results')}>
+        <ul className={getStyles('input-autocomplete-ul')}>
+          {suggestedAddresses.map((itemAddresses, index) => (
+            <li key={index} className={getStyles('input-autocomplete-li')} onClick={handleOnSelect}>
+              {viewIconList ?
+                <div className={getStyles('input-autocomplete-li-icon')}>
+
+                  <Picture
+                    src={itemAddresses.iconURL}
+                    width={15}
+                    height={15}
+                  />
+                </div> : null}
+              {itemAddresses.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+      :
+      viewAutocomplete ? (
+        <div className={getStyles('input-autocomplete-box-results')}>
+          <ul className={getStyles('input-autocomplete-ul')}>
+
+            <li className={getStyles('input-autocomplete-li')} onClick={handleOnSelect}>
+              <div className={getStyles('input-autocomplete-li-icon')}>
+                <Icon
+                  name="clock"
+                  size="xs"
+                />
+              </div>
+              No hay resultados
+            </li>
+
+          </ul>
+        </div>
+      )
+        : null
+    }
+
+
+    <BarLoader color="#36d7b7" loading={viewBarLoader} cssOverride={override} size={150} />
+
+
+  </div>
+}
+
+InputAutocomplete.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  placeholderOnInput: PropTypes.string,
+  idOnInput: PropTypes.string,
+  suggestedAddresses: PropTypes.object,
+  handleOnInputChange: PropTypes.func,
+  handleOnFocus: PropTypes.func,
+  handleOnBlur: PropTypes.func,
+  handleOnSelect: PropTypes.func,
+  viewAutocomplete: PropTypes.bool,
+  viewBarLoader: PropTypes.bool,
+  viewIconList: PropTypes.bool,
+  viewInputSecondary: PropTypes.bool,
+  styleWidthInput: PropTypes.string,
+  isViewIcon: PropTypes.bool,
+  idIcon: PropTypes.string,
+  nameIcon: PropTypes.string,
+  sizeIcon: PropTypes.string,
+  colorIcon: PropTypes.string,
+  backgroundIcon: PropTypes.string,
+}
+
+InputAutocomplete.defaultProps = {
+  getStyles: () => { },
+  placeholderOnInput: '',
+  idOnInput: '',
+  suggestedAddresses: [],
+  handleOnInputChange: () => { },
+  handleOnFocus: () => { },
+  handleOnBlur: () => { },
+  handleOnSelect: () => { },
+  viewAutocomplete: false,
+  viewBarLoader: false,
+  viewIconList: true,
+  viewInputSecondary: false,
+  styleWidthInput: '260',
+  isViewIcon: false,
+  idIcon: 'Ejemplo',
+  nameIcon: 'user',
+  sizeIcon: 'md',
+  colorIcon: 'highlight',
+  backgroundIcon: 'base',
+}
+
+export default withStyles(styles)(InputAutocomplete)

package/molecules/InputAutocomplete/InputAutocomplete.module.css

@@ -0,0 +1,55 @@
+.input-autocomplete {
+  width: 100%;
+}
+
+.input-autocomplete-box-results {
+  padding: 7px 0px;
+  border-radius: var(--border-radius-xs);
+  border: var(--border-width-thin) solid var(--color-brand-white-lilac);
+  background-color: var(--color-base-white);
+  max-height: 230px;
+  overflow-y: auto;
+  box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+  outline: none;
+  position: absolute;
+  z-index: 11111;
+  margin-top: 2px;
+  max-width: 520px;
+  min-width: 260px;
+}
+
+.input-autocomplete-ul {
+  display: block;
+  list-style-type: none;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0px;
+}
+
+.input-autocomplete-li {
+  color: var(--color-font-base);
+  padding: 7px 9px;
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-light);
+  text-align: left;
+  border-bottom: var(--border-width-thin) solid var(--color-brand-white-lilac);
+  display: flex;
+}
+
+.input-autocomplete-li:hover {
+  background: rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+}
+
+.input-autocomplete-li-icon {
+  width: 15px;
+  min-width: 15px;
+  max-width: 15px;
+  margin-right: 6px;
+}
+
+.box-icon-input {
+  display: flex;
+}

package/molecules/InputAutocomplete/InputAutocomplete.stories.js

@@ -0,0 +1,23 @@
+import { InputAutocomplete, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(InputAutocomplete, styles)
+const ListTemplate = getListTemplate(InputAutocomplete, styles)
+
+export default {
+  title: 'Molecules/InputAutocomplete',
+  component: InputAutocomplete,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/InputAutocomplete/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/molecules/InputAutocomplete/index.js

@@ -0,0 +1,3 @@
+export { default, InputAutocomplete } from './InputAutocomplete'
+export { options } from './constants'
+export { default as styles } from './InputAutocomplete.module.css'