imbric-theme 1.1.5 → 1.1.6

package/layout/DynamicTable/DynamicTable.js

@@ -13,9 +13,6 @@ import { Horizontal, Vertical } from '../../layout/Spacer/components'
 import ReactTooltip from 'react-tooltip'
 import Checkbox from '../../atoms/Checkbox/Checkbox'
 
-
-
-
 export const DynamicTable = ({
   getStyles,
   optionsData,
@@ -78,13 +75,13 @@ export const DynamicTable = ({
   isMultiSelectFilter,
   dateRangeDefault,
 }) => {
-
   const [tableData, setTableData] = useState(optionsData)
   const [columnsData, setColumnsData] = useState(opColumns)
   const [addColumsData, setAddColumsData] = useState(opAddColumns)
   const [filterTableData, setFilterTableData] = useState(opFilterTable)
-  const [filterSecondaryTableData, setFilterSecondaryTableData] = useState(opFilterSecondaryTable)
-
+  const [filterSecondaryTableData, setFilterSecondaryTableData] = useState(
+    opFilterSecondaryTable
+  )
 
   // STATE TOOLTIP
   const [isToolTipMounted, setIsToolTipMounted] = useState(false)
@@ -110,21 +107,20 @@ export const DynamicTable = ({
   const handleSorting = (sortField, sortOrder) => {
     if (sortField) {
       const sorted = [...tableData].sort((a, b) => {
-        if (a[sortField] === null) return 1;
-        if (b[sortField] === null) return -1;
-        if (a[sortField] === null && b[sortField] === null) return 0;
+        if (a[sortField] === null) return 1
+        if (b[sortField] === null) return -1
+        if (a[sortField] === null && b[sortField] === null) return 0
         return (
-          a[sortField].toString().localeCompare(b[sortField].toString(), "en", {
+          a[sortField].toString().localeCompare(b[sortField].toString(), 'en', {
             numeric: true,
-          }) * (sortOrder === "asc" ? 1 : -1)
-        );
-      });
-      setTableData(sorted);
+          }) * (sortOrder === 'asc' ? 1 : -1)
+        )
+      })
+      setTableData(sorted)
     }
   }
 
   const handleChangeCheckboxDateMy = (op) => {
-
     if (op.target.checked) {
       setCheckboxCheckboxDate(true)
       setDisabledDate(false)
@@ -132,74 +128,50 @@ export const DynamicTable = ({
       setCheckboxCheckboxDate(false)
       setDisabledDate(true)
     }
-
   }
 
   return (
-
-
     <div className={getStyles('opFunction')}>
-
-
       <div className={getStyles('opFunctionBoxTotal2')}>
-
         {isViewTitleTable ? (
-
           <>
-
             <div className={getStyles('opFunctionBox1')}>
-
-              <Paragraph weight="semibold" size="md">{titleHeadingTable}</Paragraph>
-
+              <Paragraph weight="semibold" size="md">
+                {titleHeadingTable}
+              </Paragraph>
             </div>
 
             <Horizontal size="sm" />
-
           </>
-
         ) : null}
 
         {isViewTitleTableSecundary ? (
-
           <>
             <div className={getStyles('opFunctionBox1')}>
-
-              <Paragraph weight="semibold" size="md">{titleHeadingTableSecundary}</Paragraph>
-
+              <Paragraph weight="semibold" size="md">
+                {titleHeadingTableSecundary}
+              </Paragraph>
             </div>
 
             <Horizontal size="sm" />
           </>
         ) : null}
 
-
         {isViewLeftBtn ? (
-
           <>
-
-
             <div className={getStyles('opFunctionBox3')}>
-
-              <Button
-                type={typeBtn}
-                isInline={true}
-                onClick={handleBtn}
-              >
+              <Button type={typeBtn} isInline={true} onClick={handleBtn}>
                 {titleBtn}
               </Button>
-
             </div>
 
             <Horizontal size="sm" />
-
           </>
         ) : null}
 
         {isViewLeftBtnSecondary ? (
-
           <>
             <div className={getStyles('opFunctionBox3')}>
-
               <Button
                 type={typeBtnSecondary}
                 isInline={true}
@@ -207,20 +179,15 @@ export const DynamicTable = ({
               >
                 {titleBtnSecondary}
               </Button>
-
             </div>
 
             <Horizontal size="sm" />
-
           </>
         ) : null}
 
         {isViewLeftBtnTertiary ? (
-
           <>
-
             <div className={getStyles('opFunctionBox3')}>
-
               <Button
                 type={typeBtnTertiary}
                 isInline={true}
@@ -228,21 +195,15 @@ export const DynamicTable = ({
               >
                 {titleBtnTertiary}
               </Button>
-
             </div>
 
             <Horizontal size="sm" />
-
           </>
         ) : null}
 
-
         {isViewLeftBtnExtra ? (
-
           <>
-
             <div className={getStyles('opFunctionBox3')}>
-
               <Button
                 type={typeBtnExtra}
                 isInline={true}
@@ -250,15 +211,12 @@ export const DynamicTable = ({
               >
                 {titleBtnExtra}
               </Button>
-
             </div>
 
             <Horizontal size="sm" />
-
           </>
         ) : null}
 
-
         {isViewRange ? (
           <div className={getStyles('opFunctionBox1')}>
             <DatePicker
@@ -270,26 +228,21 @@ export const DynamicTable = ({
             />
           </div>
         ) : null}
-
       </div>
       <div className={getStyles('opFunctionBox2')}>
-
-
         {isViewRangeSecundary ? (
           <>
-
             <Checkbox
               id={'dateSecundary'}
               name={'dateSecundary'}
               label={'Fecha creación'}
-              onChange={op => (
-                handleChangeCheckboxDate(op),
-                handleChangeCheckboxDateMy(op)
+              onChange={(op) => (
+                handleChangeCheckboxDate(op), handleChangeCheckboxDateMy(op)
               )}
               value={dataCheckboxCheckboxDate}
-            // handleClick={handleClickCheck(values[name])}
-            // onChange={formikLoginCompany.handleChange}
-            // value={formikLoginCompany.values.terms1}
+              // handleClick={handleClickCheck(values[name])}
+              // onChange={formikLoginCompany.handleChange}
+              // value={formikLoginCompany.values.terms1}
             />
 
             <div className={getStyles('opFunctionBox1')}>
@@ -303,18 +256,15 @@ export const DynamicTable = ({
             </div>
 
             <Horizontal size="sm" />
-
           </>
         ) : null}
 
-
         {isViewFilterTable ? (
-
           <>
             <div className={getStyles('opFunctionBox3')}>
               <Label>{labelDinamicSelectFilter}</Label>
 
-              {isLoadingDinamicSelectFilter ?
+              {isLoadingDinamicSelectFilter ? (
                 <DynamicSelect
                   isInline
                   onChange={handleFilterTable}
@@ -325,25 +275,21 @@ export const DynamicTable = ({
                   isClearable={false}
                   instanceId={'idFilterTableAll'}
                   isMulti={isMultiSelectFilter}
-                // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
-                /> : null
-              }
-
+                  // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
+                />
+              ) : null}
             </div>
 
             <Horizontal size="xs" />
-
           </>
         ) : null}
 
-
         {isViewFilterSecondaryTable ? (
-
           <>
             <div className={getStyles('opFunctionBox3')}>
               <Label>{labelDinamicSelectFilterSecondary}</Label>
 
-              {isLoadingDinamicSelectFilterSecondary ?
+              {isLoadingDinamicSelectFilterSecondary ? (
                 <DynamicSelect
                   isInline
                   onChange={handleFilterSecondaryTable}
@@ -353,26 +299,21 @@ export const DynamicTable = ({
                   closeMenuOnSelect={false}
                   isClearable={false}
                   instanceId={'idFilterSecondaryTableAll'}
-                // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
-                /> : null
-              }
-
+                  // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
+                />
+              ) : null}
             </div>
 
             <Horizontal size="xs" />
-
           </>
         ) : null}
 
-
-
         {isViewAddColumn ? (
-
           <>
             <div className={getStyles('opFunctionBox3')}>
               <Label>{labelDinamicSelect}</Label>
 
-              {isLoadingDinamicSelect ?
+              {isLoadingDinamicSelect ? (
                 <DynamicSelect
                   isMulti
                   isInline
@@ -382,10 +323,9 @@ export const DynamicTable = ({
                   defaultValue={handleDefaultValue}
                   closeMenuOnSelect={false}
                   instanceId={'idAddColumsTable'}
-                // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
-                /> : null
-              }
-
+                  // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
+                />
+              ) : null}
             </div>
 
             <Horizontal size="xs" />
@@ -393,33 +333,22 @@ export const DynamicTable = ({
         ) : null}
 
         {isViewBtn ? (
-
           <>
-
             <div className={getStyles('opFunctionBox3')}>
-
-              <Button
-                type={typeBtn}
-                isInline={true}
-                onClick={handleBtn}
-              >
+              <Button type={typeBtn} isInline={true} onClick={handleBtn}>
                 {titleBtn}
               </Button>
-
             </div>
 
             <Horizontal size="xs" />
-
           </>
         ) : null}
 
         {isViewDownloadDoc ? (
-          <div id='boxFileDownload' className={getStyles('opFunctionBox3')}>
-
-
+          <div id="boxFileDownload" className={getStyles('opFunctionBox3')}>
             <span
               data-tip
-              data-for='fileDownload'
+              data-for="fileDownload"
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
             >
@@ -429,21 +358,16 @@ export const DynamicTable = ({
                 name="fileDownload"
                 onClick={handleDownloadExcel}
               />
-
             </span>
 
             {isToolTipMounted ? (
-              <ReactTooltip id='fileDownload' type='error'>
+              <ReactTooltip id="fileDownload" type="error">
                 <span>{txtTootipFileDownload}</span>
               </ReactTooltip>
             ) : null}
-
-
           </div>
         ) : null}
-
       </div>
-
     </div>
 
     // <ColumnTable
@@ -456,9 +380,7 @@ export const DynamicTable = ({
 
     // <RowTable slice={slice} columnsData={columnsData}></RowTable>
 
-    // <FooterTable range={range} slice={slice} setPage={setPage} page={page} /> 
-
-
+    // <FooterTable range={range} slice={slice} setPage={setPage} page={page} />
   )
 }
 
@@ -517,10 +439,10 @@ DynamicTable.propTypes = {
 }
 
 DynamicTable.defaultProps = {
-  getStyles: () => { },
-  handleAddColumn: () => { },
-  handleFilterTable: () => { },
-  handleFilterSecondaryTable: () => { },
+  getStyles: () => {},
+  handleAddColumn: () => {},
+  handleFilterTable: () => {},
+  handleFilterSecondaryTable: () => {},
   isViewRange: true,
   isViewRangeSecundary: false,
   isViewTitleTable: false,
@@ -532,9 +454,9 @@ DynamicTable.defaultProps = {
   isViewBtn: false,
   isViewLeftBtn: false,
   isLayoutDate: 'Calendar',
-  handleSelectRange: () => { },
-  handleSelectRangeSecundary: () => { },
-  handleDownloadExcel: () => { },
+  handleSelectRange: () => {},
+  handleSelectRangeSecundary: () => {},
+  handleDownloadExcel: () => {},
   labelDinamicSelect: 'Mostrar u ocultar columnas',
   placeholderDinamicSelect: 'Seleccionar columnas',
   labelDinamicSelectFilter: '',
@@ -547,7 +469,7 @@ DynamicTable.defaultProps = {
   labelTillDateRangeSecundary: 'Hasta',
   typeBtn: 'primary',
   titleBtn: '',
-  handleBtn: () => { },
+  handleBtn: () => {},
   isViewLeftBtnSecondary: false,
   isViewLeftBtnTertiary: false,
   isViewLeftBtnExtra: false,
@@ -557,9 +479,9 @@ DynamicTable.defaultProps = {
   titleBtnSecondary: '',
   titleBtnTertiary: '',
   titleBtnExtra: '',
-  handleBtnSecondary: () => { },
-  handleBtnTertiary: () => { },
-  handleBtnExtra: () => { },
+  handleBtnSecondary: () => {},
+  handleBtnTertiary: () => {},
+  handleBtnExtra: () => {},
   txtTootipFileDownload: '',
   titleHeadingTable: 'Total: 200',
   titleHeadingTableSecundary: '',

package/molecules/CardServiceDetail/CardServiceDetail.js

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
-import { Horizontal, Vertical } from '../../layout/Spacer/components'
+// import { Horizontal, Vertical } from '../../layout/Spacer/components'
 import Label from '../../atoms/Label'
 import Icon from '../../atoms/Icon'
+import Button from '../../atoms/Button'
 
 import styles from './CardServiceDetail.module.css'
-import { options } from './constants'
+// import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
 export const handleClick = ({ onClick }) => (event) => {
@@ -20,8 +21,8 @@ export const CardServiceDetail = ({
   txtInfoLabel,
   txtUserService,
   statusService,
-  txtZoneService,
-  txtTimeTotalService,
+  // txtZoneService,
+  // txtTimeTotalService,
   txtDistanceService,
   txtServiceService,
   txtPayService,
@@ -34,8 +35,8 @@ export const CardServiceDetail = ({
   onClickCross,
   txtTootipCross,
   labelUserService,
-  labelZoneService,
-  labelTimeTotalService,
+  // labelZoneService,
+  // labelTimeTotalService,
   labelDistanceService,
   labelServiceService,
   labelPayService,
@@ -45,6 +46,12 @@ export const CardServiceDetail = ({
   labelCarNumberService,
   labelNumberDriverService,
   labelSmsDriverService,
+  labelPhoneNumberSupplierService,
+  txtPhoneNumberSupplierService,
+  labelPhoneNumberTaxiDriverService,
+  txtPhoneNumberTaxiDriverService,
+  canRequestCallFromDriver,
+  onClickBtnCanRequestCallFromDriver,
 }) => {
   // STATE TOOLTIP
   const [isToolTipMounted, setIsToolTipMounted] = useState(false)
@@ -108,6 +115,18 @@ export const CardServiceDetail = ({
           </div>
         </div>
 
+        {txtPhoneNumberSupplierService ? (
+          <div className={getStyles('card-content')}>
+            <div className={getStyles('card-subcontent-inLine')}>
+              <Label>{labelPhoneNumberSupplierService}</Label>
+
+              <p className={getStyles('card-content-p')}>
+                &nbsp; {txtPhoneNumberSupplierService}
+              </p>
+            </div>
+          </div>
+        ) : null}
+
         <div className={getStyles('card-content')}>
           <div className={getStyles('card-subcontent')}>
             <Label>
@@ -130,6 +149,31 @@ export const CardServiceDetail = ({
           </div>
         </div>
 
+        {txtPhoneNumberTaxiDriverService ? (
+          <div className={getStyles('card-content')}>
+            <div className={getStyles('card-subcontent-inLine')}>
+              <Label>{labelPhoneNumberTaxiDriverService}</Label>
+
+              <p className={getStyles('card-content-p')}>
+                &nbsp; {txtPhoneNumberTaxiDriverService}
+              </p>
+            </div>
+          </div>
+        ) : null}
+
+        {canRequestCallFromDriver ? (
+          <div className={getStyles('card-content-btn')}>
+            <div className={getStyles('card-subcontent-inLine')}>
+              <Button
+                type="primary"
+                onClick={onClickBtnCanRequestCallFromDriver}
+              >
+                Solicitar que el conductor me llame
+              </Button>
+            </div>
+          </div>
+        ) : null}
+
         <div className={getStyles('card-content')}>
           {/* <div className={getStyles('card-subcontent')}>
             <Label>
@@ -254,8 +298,8 @@ CardServiceDetail.propTypes = {
   txtInfoLabel: PropTypes.any,
   statusService: PropTypes.number,
   txtUserService: PropTypes.string,
-  txtZoneService: PropTypes.string,
-  txtTimeTotalService: PropTypes.string,
+  // txtZoneService: PropTypes.string,
+  // txtTimeTotalService: PropTypes.string,
   txtDistanceService: PropTypes.string,
   txtServiceService: PropTypes.string,
   txtPayService: PropTypes.string,
@@ -269,8 +313,8 @@ CardServiceDetail.propTypes = {
   txtTootipCross: PropTypes.string,
   selectCard: PropTypes.bool,
   labelUserService: PropTypes.string,
-  labelZoneService: PropTypes.string,
-  labelTimeTotalService: PropTypes.string,
+  // labelZoneService: PropTypes.string,
+  // labelTimeTotalService: PropTypes.string,
   labelDistanceService: PropTypes.string,
   labelServiceService: PropTypes.string,
   labelPayService: PropTypes.string,
@@ -280,6 +324,12 @@ CardServiceDetail.propTypes = {
   labelCarNumberService: PropTypes.string,
   labelNumberDriverService: PropTypes.string,
   labelSmsDriverService: PropTypes.string,
+  txtPhoneNumberSupplierService: PropTypes.string,
+  labelPhoneNumberSupplierService: PropTypes.string,
+  labelPhoneNumberTaxiDriverService: PropTypes.string,
+  txtPhoneNumberTaxiDriverService: PropTypes.string,
+  onClickBtnCanRequestCallFromDriver: PropTypes.func,
+  canRequestCallFromDriver: PropTypes.bool,
 }
 
 CardServiceDetail.defaultProps = {
@@ -287,8 +337,8 @@ CardServiceDetail.defaultProps = {
   txtInfoLabel: '',
   statusService: 10,
   txtUserService: '',
-  txtZoneService: '',
-  txtTimeTotalService: '',
+  // txtZoneService: '',
+  // txtTimeTotalService: '',
   txtDistanceService: '',
   txtServiceService: '',
   txtPayService: '',
@@ -302,8 +352,8 @@ CardServiceDetail.defaultProps = {
   txtTootipCross: 'Cerrar',
   selectCard: false,
   labelUserService: 'Creado por:',
-  labelZoneService: 'Recogida',
-  labelTimeTotalService: 'Tiempo estimado',
+  // labelZoneService: 'Recogida',
+  // labelTimeTotalService: 'Tiempo estimado',
   labelDistanceService: 'Distancia',
   labelServiceService: 'Servicio',
   labelPayService: 'Método de pago',
@@ -313,6 +363,12 @@ CardServiceDetail.defaultProps = {
   labelCarNumberService: ' Matrícula',
   labelNumberDriverService: ' Telefono conductor',
   labelSmsDriverService: 'Mensaje al conductor',
+  txtPhoneNumberSupplierService: '',
+  labelPhoneNumberSupplierService: 'Teléfono de la flota',
+  txtPhoneNumberTaxiDriverService: '',
+  labelPhoneNumberTaxiDriverService: 'Teléfono del conductor',
+  onClickBtnCanRequestCallFromDriver: () => {},
+  canRequestCallFromDriver: false,
 }
 
 export default withStyles(styles)(CardServiceDetail)