ordering-ui-admin-external 1.23.5 → 1.24.0

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.orderRejectCommentList = exports.optimizeImage = exports.getUniqueId = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getMinutes = exports.getIconCard = exports.getHours = exports.getCurrentDiffDays = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.findExitingCode = exports.fieldsToSort = exports.convertHoursToMinutes = exports.convertHMS = exports.checkValidUrlFormat = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.DriverTipsOptions = void 0;
+exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.orderRejectCommentList = exports.optimizeImage = exports.getUniqueId = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getOrderStatus = exports.getOrderStatuPickUp = exports.getMinutes = exports.getIconCard = exports.getHours = exports.getCurrentDiffDays = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.findExitingCode = exports.fieldsToSort = exports.convertHoursToMinutes = exports.convertHMS = exports.checkValidUrlFormat = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.DriverTipsOptions = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FaCcMastercard = _interopRequireDefault(require("@meronex/icons/fa/FaCcMastercard"));
 var _FaCcVisa = _interopRequireDefault(require("@meronex/icons/fa/FaCcVisa"));
@@ -545,13 +545,214 @@ var reviewCommentList = function reviewCommentList(type) {
   };
   return reviews[type];
 };
+exports.reviewCommentList = reviewCommentList;
+var getOrderStatus = function getOrderStatus(status) {
+  var orderStatus = [{
+    key: 0,
+    value: 'Pending Order',
+    slug: 'PENDING_ORDER',
+    percentage: 10
+  }, {
+    key: 1,
+    value: 'Completed by admin',
+    slug: 'COMPLETED_BY_ADMIN',
+    percentage: 100
+  }, {
+    key: 2,
+    value: 'Reject by admin',
+    slug: 'REJECT_BY_ADMIN',
+    percentage: 0
+  }, {
+    key: 3,
+    value: 'Driver arrived by business',
+    slug: 'DRIVER_IN_BUSINESS',
+    percentage: 60
+  }, {
+    key: 4,
+    value: 'Preparation Completed',
+    slug: 'PREPARATION_COMPLETED',
+    percentage: 20
+  }, {
+    key: 5,
+    value: 'Reject by business',
+    slug: 'REJECT_BY_BUSINESS',
+    percentage: 0
+  }, {
+    key: 6,
+    value: 'Reject by driver',
+    slug: 'REJECT_BY_DRIVER',
+    percentage: 0
+  }, {
+    key: 7,
+    value: 'Accepted by business',
+    slug: 'ACCEPTED_BY_BUSINESS',
+    percentage: 15
+  }, {
+    key: 8,
+    value: 'Accepted by driver',
+    slug: 'ACCEPTED_BY_DRIVER',
+    percentage: 40
+  }, {
+    key: 9,
+    value: 'Pick up completed by driver',
+    slug: 'PICK_UP_COMPLETED_BY_DRIVER',
+    percentage: 70
+  }, {
+    key: 10,
+    value: 'Pick up Failed by driver',
+    slug: 'PICK_UP_FAILED_BY_DRIVER',
+    percentage: 0
+  }, {
+    key: 11,
+    value: 'Delivery completed by driver',
+    slug: 'DELIVERY_COMPLETED_BY_DRIVER',
+    percentage: 100
+  }, {
+    key: 12,
+    value: 'Delivery Failed by driver',
+    slug: 'DELIVERY_FAILED_BY_DRIVER',
+    percentage: 0
+  }, {
+    key: 13,
+    value: 'Preorder',
+    slug: 'PREORDER',
+    percentage: 0
+  }, {
+    key: 14,
+    value: 'Order not ready',
+    slug: 'ORDER_NOT_READY',
+    percentage: 15
+  }, {
+    key: 15,
+    value: 'Pickup completed by customer',
+    slug: 'PICKUP_COMPLETED_BY_CUSTOMER',
+    percentage: 100
+  }, {
+    key: 16,
+    value: 'Canceled by customer',
+    slug: 'CANCELED_BY_CUSTOMER',
+    percentage: 0
+  }, {
+    key: 17,
+    value: 'Not picked by customer',
+    slug: 'NOT_PICKED_BY_CUSTOMER',
+    percentage: 0
+  }, {
+    key: 18,
+    value: 'Driver almost arrived to business',
+    slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
+    percentage: 50
+  }, {
+    key: 19,
+    value: 'Driver almost arrived to customer',
+    slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
+    percentage: 90
+  }, {
+    key: 20,
+    value: 'Customer almost arrived to business',
+    slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS',
+    percentage: 90
+  }, {
+    key: 21,
+    value: 'Customer arrived to business',
+    slug: 'CUSTOMER_ARRIVED_TO_BUSINESS',
+    percentage: 90
+  }, {
+    key: 22,
+    value: 'Looking for driver',
+    slug: 'ORDER_LOOKING_FOR_DRIVER',
+    percentage: 30
+  }, {
+    key: 23,
+    value: 'Driver on way',
+    slug: 'ORDER_DRIVER_ON_WAY',
+    percentage: 80
+  }];
+  var objectStatus = orderStatus.find(function (o) {
+    return o.key === status;
+  });
+  return objectStatus && objectStatus;
+};
+exports.getOrderStatus = getOrderStatus;
+var getOrderStatuPickUp = function getOrderStatuPickUp(status) {
+  var orderStatus = [{
+    key: 0,
+    value: 'Pending Order',
+    slug: 'PENDING_ORDER',
+    percentage: 10
+  }, {
+    key: 1,
+    value: 'Completed by admin',
+    slug: 'COMPLETED_BY_ADMIN',
+    percentage: 100
+  }, {
+    key: 2,
+    value: 'Reject by admin',
+    slug: 'REJECT_BY_ADMIN',
+    percentage: 0
+  }, {
+    key: 4,
+    value: 'Preparation Completed',
+    slug: 'PREPARATION_COMPLETED',
+    percentage: 50
+  }, {
+    key: 5,
+    value: 'Reject by business',
+    slug: 'REJECT_BY_BUSINESS',
+    percentage: 0
+  }, {
+    key: 7,
+    value: 'Accepted by business',
+    slug: 'ACCEPTED_BY_BUSINESS',
+    percentage: 30
+  }, {
+    key: 13,
+    value: 'Preorder',
+    slug: 'PREORDER',
+    percentage: 0
+  }, {
+    key: 14,
+    value: 'Order not ready',
+    slug: 'ORDER_NOT_READY',
+    percentage: 30
+  }, {
+    key: 15,
+    value: 'Pickup completed by customer',
+    slug: 'PICKUP_COMPLETED_BY_CUSTOMER',
+    percentage: 100
+  }, {
+    key: 16,
+    value: 'Canceled by customer',
+    slug: 'CANCELED_BY_CUSTOMER',
+    percentage: 0
+  }, {
+    key: 17,
+    value: 'Not picked by customer',
+    slug: 'NOT_PICKED_BY_CUSTOMER',
+    percentage: 0
+  }, {
+    key: 20,
+    value: 'Customer almost arrived to business',
+    slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS',
+    percentage: 70
+  }, {
+    key: 21,
+    value: 'Customer arrived to business',
+    slug: 'CUSTOMER_ARRIVED_TO_BUSINESS',
+    percentage: 90
+  }];
+  var objectStatus = orderStatus.find(function (o) {
+    return o.key === status;
+  });
+  return objectStatus && objectStatus;
+};
 
 /**
  * function to manage order reject comment list
  * @param {string} param0 type of orders to return
  * @returns object with orders dictionary
  */
-exports.reviewCommentList = reviewCommentList;
+exports.getOrderStatuPickUp = getOrderStatuPickUp;
 var orderRejectCommentList = function orderRejectCommentList(status) {
   var messages = {
     6: [

package/index-template.js

@@ -292,7 +292,7 @@ if (!(window?.location?.hostname === 'localhost')) {
     integrations: [
       new Integrations.BrowserTracing()
     ],
-    release: 'ordering-ui-admin-release@' + process.env.npm_package_version,
+    release: process.env.npm_package_version ? 'ordering-ui-admin-release@' + process.env.npm_package_version : 'ordering-ui-admin-release@' + '1.0.0',
     // Release health
     autoSessionTracking: true,
     ignoreErrors: [

package/index.html

@@ -14,6 +14,7 @@
       z-index: 10000 !important;
     }
   </style>
+  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.23.5",
+  "version": "1.24.0",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.23.1",
+    "ordering-components-admin-external": "1.24.0",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/public/push/onesignal/OneSignalSDKUpdaterWorker.js

@@ -0,0 +1 @@
+importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

package/public/push/onesignal/OneSignalSDKWorker.js

@@ -0,0 +1 @@
+importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

package/src/components/CartRecovery/RecoveryActionAdd/index.js

@@ -0,0 +1,355 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  RecoveryActionDetail as RecoveryActionDetailController
+} from 'ordering-components-admin-external'
+import { useForm } from 'react-hook-form'
+import {
+  Circle as UnCheckIcon,
+  RecordCircleFill as CheckIcon
+} from 'react-bootstrap-icons'
+import NumericInput from 'react-numeric-input'
+import { Button, Input, TextArea } from '../../../styles'
+import { Alert, HtmlEditor } from '../../Shared'
+import { Select } from '../../../styles/Select'
+
+import {
+  RecoveryActionAddContainer,
+  CardContainer,
+  ButtonsContainer,
+  InputWrapper,
+  LastTimeWrapper,
+  TypeWrapper,
+  ParentCheckBoxWrapper,
+  TimeBlock,
+  TimeContent,
+  DaysContent,
+  Option
+} from './styles'
+
+export const RecoveryActionAddUI = (props) => {
+  const {
+    onClose,
+    formState,
+    handleAddRecoveryAction,
+    handleChangeInput,
+    handleChangeItem,
+    actionState
+  } = props
+
+  const [, t] = useLanguage()
+  const { register, handleSubmit, errors } = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const [hours, setHours] = useState([])
+  const [minutes, setMinutes] = useState([])
+  const [seconds, setSeconds] = useState([])
+  const [curPreorderTime, setCurPreorderTime] = useState({ hour: '0', minute: '0', second: '0' })
+  const [curDayTime, setCurDayTime] = useState(0)
+  const [isTime, setIsTime] = useState(true)
+
+  const channelList = [
+    { value: 'email', content: <Option>{t('EMAIL', 'Email')}</Option> },
+    { value: 'sms', content: <Option>{t('SMS', 'SMS')}</Option> },
+    { value: 'notification', content: <Option>{t('PUSH_NOTIFICATION', 'Push notification')}</Option> }
+  ]
+
+  const setTimeList = () => {
+    const _hours = []
+    const _minutes = []
+    const _seconds = []
+    for (let i = 0; i < 24; i++) {
+      const text = (i < 10 ? '0' : ' ') + i
+      _hours.push({
+        text: text,
+        hour: i
+      })
+    }
+    for (let i = 0; i < 60; i++) {
+      const text = (i < 10 ? '0' : '') + i
+      _minutes.push({
+        text: text,
+        minute: i
+      })
+      _seconds.push({
+        text: text,
+        second: i
+      })
+    }
+    setHours(_hours)
+    setMinutes(_minutes)
+    setSeconds(_seconds)
+  }
+
+  const handleChangePreorderTime = (evt) => {
+    const type = evt.target.name
+    const value = evt.target.value
+    setCurPreorderTime({
+      ...curPreorderTime,
+      [type]: value
+    })
+    let preorderTime = 0
+    if (type === 'hour') preorderTime = parseInt(value) * 3600 + parseInt(curPreorderTime?.minute) * 60 + parseInt(curPreorderTime?.second)
+    else if (type === 'minute') preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(value) * 60 + parseInt(curPreorderTime?.second)
+    else preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(curPreorderTime?.minute) * 60 + parseInt(value)
+    handleChangeItem({ times: [preorderTime], launch_type: 'times' })
+  }
+
+  const handleChangeDay = (value) => {
+    setCurDayTime(value)
+    handleChangeItem({ times: [value * 24 * 3600], launch_type: 'times' })
+  }
+
+  const onSubmit = () => {
+    if (!formState.changes?.times?.[0]) {
+      setAlertState({
+        open: true,
+        content: [t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('TIME', 'Time'))]
+      })
+      return
+    }
+    if (!formState.changes?.channel) {
+      setAlertState({
+        open: true,
+        content: [t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('CHANNEL', 'Channel'))]
+      })
+      return
+    }
+    if (!formState.changes?.body) {
+      setAlertState({
+        open: true,
+        content: [t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('MESSAGE', 'Message'))]
+      })
+      return
+    }
+    handleAddRecoveryAction()
+  }
+
+  const handleSwitchTime = () => {
+    setIsTime(prev => !prev)
+  }
+
+  useEffect(() => {
+    setTimeList()
+  }, [])
+
+  useEffect(() => {
+    if (!actionState?.error || actionState.loading) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  return (
+    <>
+      <RecoveryActionAddContainer onSubmit={handleSubmit(onSubmit)}>
+        <CardContainer>
+          <h2>{t('GENERAL', 'General')}</h2>
+          <InputWrapper>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              name='name'
+              type='text'
+              placeholder={t('NAME', 'name')}
+              value={formState?.changes?.name ?? ''}
+              ref={register({
+                required: t(
+                  'VALIDATION_ERROR_REQUIRED',
+                  'Name is required'
+                ).replace('_attribute_', t('NAME', 'Name'))
+              })}
+              onChange={handleChangeInput}
+              disabled={formState.loading}
+              autoComplete='off'
+            />
+          </InputWrapper>
+          <InputWrapper>
+            <label>{t('DESCRIPTION', 'Description')}</label>
+            <TextArea
+              placeholder={t('WRITE_LITTLE_DESCRIPTION', 'Write a little description')}
+              name='description'
+              rows={3}
+              value={
+                formState?.changes?.description ?? ''
+              }
+              onChange={handleChangeInput}
+              disabled={formState.loading}
+              autoComplete='off'
+            />
+          </InputWrapper>
+          <LastTimeWrapper>
+            <h3>{t('LAST_TIME_CART_WAS_OPENED', 'Last time the cart was opened')}</h3>
+            <TypeWrapper>
+              <ParentCheckBoxWrapper>
+                <div onClick={() => handleSwitchTime()}>
+                  {isTime ? <CheckIcon className='checked-icon' /> : <UnCheckIcon />}
+                  <span>{t('TIME', 'Time')}</span>
+                </div>
+              </ParentCheckBoxWrapper>
+              {isTime && (
+                <TimeContent>
+                  <TimeBlock>
+                    <select
+                      value={curPreorderTime?.hour}
+                      name='hour'
+                      onChange={handleChangePreorderTime}
+                    >
+                      {
+                        hours?.map((hour, i) => (
+                          <option value={hour.hour} key={i}>{hour.text}</option>
+                        ))
+                      }
+                    </select>
+                    <span>:</span>
+                    <select
+                      value={curPreorderTime?.minute}
+                      name='minute'
+                      onChange={handleChangePreorderTime}
+                    >
+                      {minutes?.map((minute, i) => (
+                        <option value={minute.minute} key={i}>{minute.text}</option>
+                      ))}
+                    </select>
+                    <span>:</span>
+                    <select
+                      value={curPreorderTime?.second}
+                      name='second'
+                      onChange={handleChangePreorderTime}
+                    >
+                      {seconds?.map((second, i) => (
+                        <option value={second.second} key={i}>{second.text}</option>
+                      ))}
+                    </select>
+                  </TimeBlock>
+                </TimeContent>
+              )}
+            </TypeWrapper>
+            <TypeWrapper>
+              <ParentCheckBoxWrapper>
+                <div onClick={() => handleSwitchTime()}>
+                  {!isTime ? <CheckIcon className='checked-icon' /> : <UnCheckIcon />}
+                  <span>{t('DAYS', 'Days')}</span>
+                </div>
+              </ParentCheckBoxWrapper>
+              {!isTime && (
+                <DaysContent>
+                  <NumericInput
+                    placeholder='00'
+                    onKeyPress={(e) => {
+                      if (!/^[0-9]$/.test(e.key)) {
+                        e.preventDefault()
+                      }
+                    }}
+                    value={curDayTime || ''}
+                    onChange={(value) => handleChangeDay(value)}
+                    min={0}
+                  />
+                </DaysContent>
+              )}
+            </TypeWrapper>
+          </LastTimeWrapper>
+        </CardContainer>
+        <CardContainer>
+          <h2>{t('NOTIFICATIONS', 'Notifications')}</h2>
+          <InputWrapper>
+            <label>{t('TITLE', 'Title')}</label>
+            <Input
+              name='title'
+              placeholder={t('TITLE', 'Title')}
+              defaultValue={formState?.changes?.title ?? ''}
+              onChange={handleChangeInput}
+              ref={register({
+                required: t(
+                  'VALIDATION_ERROR_REQUIRED',
+                  'Name is required'
+                ).replace('_attribute_', t('TITLE', 'Title'))
+              })}
+            />
+          </InputWrapper>
+          <InputWrapper>
+            <label>{t('CHANNEL', 'Channel')}</label>
+            <Select
+              placeholder={<Option>{t('SELECT_CHANNEL', 'Select a channel')}</Option>}
+              defaultValue={formState?.changes?.channel ?? ''}
+              options={channelList}
+              onChange={val => handleChangeItem({ channel: val })}
+            />
+          </InputWrapper>
+          <InputWrapper>
+            <label>{t('MESSAGE', 'Message')}</label>
+            {formState.changes?.channel === 'email' ? (
+              <HtmlEditor
+                handleChangeBody={val => handleChangeItem({ body: val })}
+              />
+            ) : (
+              <TextArea
+                name='body'
+                rows={3}
+                placeholder={t('WRITE_MESSAGE', 'Write a message')}
+                defaultValue={formState?.changes?.body ?? ''}
+                onChange={handleChangeInput}
+                ref={register({
+                  required: t(
+                    'VALIDATION_ERROR_REQUIRED',
+                    'Name is required'
+                  ).replace('_attribute_', t('MESSAGE', 'Message'))
+                })}
+              />
+            )}
+          </InputWrapper>
+        </CardContainer>
+        <ButtonsContainer>
+          <Button
+            color='secundary'
+            onClick={() => onClose()}
+          >
+            {t('CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            color='primary'
+            type='submit'
+            disabled={Object.keys(formState.changes).length === 0 || formState.loading}
+          >
+            {t('SAVE', 'Save')}
+          </Button>
+        </ButtonsContainer>
+      </RecoveryActionAddContainer>
+      <Alert
+        title={t('RECOVERY_ACTIONS', 'Recovery actions')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const RecoveryActionAdd = (props) => {
+  const recoveryActionDetailProps = {
+    ...props,
+    UIComponent: RecoveryActionAddUI
+  }
+  return <RecoveryActionDetailController {...recoveryActionDetailProps} />
+}

package/src/components/CartRecovery/RecoveryGeneral/index.js

@@ -42,13 +42,15 @@ export const RecoveryGeneral = (props) => {
 
   const [hours, setHours] = useState([])
   const [minutes, setMinutes] = useState([])
-  const [curPreorderTime, setCurPreorderTime] = useState({})
+  const [seconds, setSeconds] = useState([])
+  const [curPreorderTime, setCurPreorderTime] = useState({ hour: '0', minute: '0', second: '0' })
   const [curDayTime, setCurDayTime] = useState(0)
   const [isTime, setIsTime] = useState(true)
 
   const setTimeList = () => {
     const _hours = []
     const _minutes = []
+    const _seconds = []
     for (let i = 0; i < 24; i++) {
       const text = (i < 10 ? '0' : ' ') + i
       _hours.push({
@@ -62,9 +64,14 @@ export const RecoveryGeneral = (props) => {
         text: text,
         minute: i
       })
+      _seconds.push({
+        text: text,
+        second: i
+      })
     }
     setHours(_hours)
     setMinutes(_minutes)
+    setSeconds(_seconds)
   }
 
   const handleChangePreorderTime = (evt) => {
@@ -75,8 +82,9 @@ export const RecoveryGeneral = (props) => {
       [type]: value
     })
     let preorderTime = 0
-    if (type === 'hour') preorderTime = parseInt(value) * 3600 + parseInt(curPreorderTime?.minute) * 60
-    else preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(value) * 60
+    if (type === 'hour') preorderTime = parseInt(value) * 3600 + parseInt(curPreorderTime?.minute) * 60 + parseInt(curPreorderTime?.second)
+    else if (type === 'minute') preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(value) * 60 + parseInt(curPreorderTime?.second)
+    else preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(curPreorderTime?.minute) * 60 + parseInt(value)
     handleChangeItem({ times: [preorderTime], launch_type: 'times' })
   }
 
@@ -103,7 +111,8 @@ export const RecoveryGeneral = (props) => {
     setTimeList()
     setCurPreorderTime({
       hour: recoveryActionState?.action?.times ? (parseInt(recoveryActionState?.action?.times[0] / 3600)) : '0',
-      minute: recoveryActionState?.action?.times ? (recoveryActionState?.action?.times[0] % 3600 / 60) : '0'
+      minute: recoveryActionState?.action?.times ? (parseInt(recoveryActionState?.action?.times[0] % 3600 / 60)) : '0',
+      second: recoveryActionState?.action?.times ? (recoveryActionState?.action?.times[0] % 3600 % 60) : '0'
     })
     if (!recoveryActionState?.action?.times) return
 
@@ -231,6 +240,16 @@ export const RecoveryGeneral = (props) => {
                       <option value={minute.minute} key={i}>{minute.text}</option>
                     ))}
                   </select>
+                  <span>:</span>
+                  <select
+                    value={curPreorderTime?.second}
+                    name='second'
+                    onChange={handleChangePreorderTime}
+                  >
+                    {seconds?.map((second, i) => (
+                      <option value={second.second} key={i}>{second.text}</option>
+                    ))}
+                  </select>
                 </TimeBlock>
               </TimeContent>
             )}