ordering-ui-admin-external 1.43.85 → 1.43.87

package/src/components/Stores/PaymentOptionStripeLink/index.js

@@ -0,0 +1,357 @@
+import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useLanguage, PaymentOptionStripeLink as PaymentOptionStripeLinkController } from 'ordering-components-admin-external'
+import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
+import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
+import { Button, Input, IconButton, Checkbox, DefaultSelect as Select } from '../../../styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { useTheme } from 'styled-components'
+import { ThreeDots, XLg } from 'react-bootstrap-icons'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
+import { Confirm } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
+
+import {
+  Container,
+  SandboxWrapper,
+  FieldName,
+  Header,
+  CloseButton,
+  TabOption,
+  TabOptionName,
+  ActionSelectorWrapper,
+  Option
+} from './styles'
+import { Tab, TabsContainer } from '../BusinessMenu/styles'
+
+const PaymentOptionStripeLinkUI = (props) => {
+  const {
+    open,
+    onClose,
+    orderTypes,
+    sitesState,
+    configsState,
+    changesState,
+    handleChangeBusinessPaymentState,
+    cleanChangesState,
+    actionState,
+    handleChangeSandbox,
+    handleChangeInput,
+    handleSaveClick,
+    businessPaymethod,
+    handleDeletePaymethod,
+    handleUpdateConfigs
+  } = props
+
+  const query = new URLSearchParams(useLocation().search)
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [paymentTabs, setPaymentTabs] = useState(0)
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
+
+  const configsToShow = {
+    allow_text_messages_sms: true,
+    allow_text_messages_whatsapp: true
+  }
+
+  const setPaymethodInfo = (values) => {
+    const data = {}
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
+
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!data?.sites?.length)
+      }
+    }
+
+    handleChangeBusinessPaymentState(data)
+  }
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      props.onClose()
+    }
+    setIsMenuOpen(value)
+  }
+  const onClickDeletePaymethod = () => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_ITEM', 'Are you sure to delete this _item_?').replace('_item_', t('PAYMETHOD_ID', 'Paymethod')),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleDeletePaymethod(businessPaymethod?.paymethod?.id)
+      }
+    })
+  }
+  useEffect(() => {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('stripe_link').style.width = '100%'
+      } else {
+        document.getElementById('stripe_link').style.width = '500px'
+      }
+    }
+  }, [width])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open])
+
+  useEffect(() => {
+    const initState = {
+      sandbox: businessPaymethod?.sandbox,
+      allowed_order_types: businessPaymethod?.allowed_order_types || [1, 2, 3, 4, 5]
+    }
+    if (businessPaymethod?.data) {
+      initState.data = businessPaymethod.data
+    }
+    if (businessPaymethod?.data_sandbox) {
+      initState.data_sandbox = businessPaymethod.data_sandbox
+    }
+    cleanChangesState(initState)
+  }, [])
+
+  useEffect(() => {
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
+  }, [changesState?.sites, changesState?.allowed_order_types])
+
+  const handleTabClick = (tab, isInitialRender) => {
+    setPaymentTabs(tab)
+    if (!isInitialRender) {
+      addQueryToUrl({ payemthod_tab: tab })
+    }
+  }
+
+  useEffect(() => {
+    const payemthodTab = query.get('payemthod_tab')
+    if (payemthodTab) {
+      handleTabClick(Number(payemthodTab), true)
+    } else {
+      handleTabClick(0)
+    }
+  }, [])
+
+  return (
+    <>
+      <Container id='stripe_link'>
+        <Header>
+          <h1>{t('STRIPE_LINK', 'Stripe link (Only for callcenter)')}</h1>
+          <ActionSelectorWrapper>
+            <DropdownButton
+              menuAlign={theme?.rtl ? 'left' : 'right'}
+              title={<ThreeDots />}
+              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+            >
+              <Dropdown.Item
+                onClick={() => onClickDeletePaymethod()}
+              >
+                {t('DELETE', 'Delete')}
+              </Dropdown.Item>
+            </DropdownButton>
+          </ActionSelectorWrapper>
+          <CloseButton>
+            <IconButton
+              color='black'
+              onClick={() => onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </CloseButton>
+        </Header>
+        <p className='message'>{t('STRIPE_AND_TWILIO_CONFIGS_REQUIERED', 'Stripe and Twilio keys are requiered to use this Payment Method')}</p>
+        <TabsContainer>
+          <Tab
+            active={paymentTabs === 0}
+            onClick={() => handleTabClick(0)}
+          >
+            {t('GENERAL', 'General')}
+          </Tab>
+          {sitesState?.sites?.length > 0 && (
+            <Tab
+              active={paymentTabs === 1}
+              onClick={() => handleTabClick(1)}
+            >
+              {t('CHANNELS', 'Channels')}
+            </Tab>
+          )}
+          <Tab
+            active={paymentTabs === 2}
+            onClick={() => handleTabClick(2)}
+          >
+            {t('ORDER_TYPE', 'Order type')}
+          </Tab>
+        </TabsContainer>
+
+        {paymentTabs === 0 && (
+          <>
+            <SandboxWrapper>
+              <Checkbox
+                checked={changesState?.sandbox ?? businessPaymethod?.sandbox ?? false}
+                onChange={e => handleChangeSandbox(e.target.checked)}
+              />
+              <span>{t('SANDBOX', 'Sandbox')}</span>
+            </SandboxWrapper>
+            <FieldName>{t('PUBLISHABLE_KEY', 'Publishable key')}</FieldName>
+            <Input
+              name='publishable'
+              defaultValue={
+                changesState?.data?.publishable
+                  ? changesState?.data?.publishable
+                  : businessPaymethod?.data?.publishable
+              }
+              placeholder={t('PUBLISHABLE_KEY', 'Publishable key')}
+              onChange={e => handleChangeInput(e, false)}
+            />
+            <FieldName>{t('SECRET_KEY', 'Secret key')}</FieldName>
+            <Input
+              name='secret'
+              defaultValue={
+                changesState?.data?.secret
+                  ? changesState?.data?.secret
+                  : businessPaymethod?.data?.secret
+              }
+              placeholder={t('SECRET_KEY', 'Secret key')}
+              onChange={e => handleChangeInput(e, false)}
+            />
+            <FieldName>{t('PUBLISHABLE_KEY', 'Publishable key')} ({t('SANDBOX', 'Sandbox')})</FieldName>
+            <Input
+              name='publishable'
+              defaultValue={
+                changesState?.data_sandbox?.publishable
+                  ? changesState?.data_sandbox?.publishable
+                  : businessPaymethod?.data_sandbox?.publishable
+              }
+              placeholder={`${t('PUBLISHABLE_KEY', 'Publishable key')} (${t('SANDBOX', 'Sandbox')})`}
+              onChange={e => handleChangeInput(e, true)}
+            />
+            <FieldName>{t('SECRECT_KEY', 'Secret key')} ({t('SANDBOX', 'Sandbox')})</FieldName>
+            <Input
+              name='secret'
+              defaultValue={
+                changesState?.data_sandbox?.secret
+                  ? changesState?.data_sandbox?.secret
+                  : businessPaymethod?.data_sandbox?.secret
+              }
+              placeholder={`${t('SECRECT_KEY', 'Secret key')} (${t('SANDBOX', 'Sandbox')})`}
+              onChange={e => handleChangeInput(e, true)}
+            />
+            <p className='alert-message'>{t('TWILIO_CONFIGURATION_MESSAGE', '*Enable these options after twilio configuration')}</p>
+            {!configsState?.loading && configsState?.configs?.filter(config => configsToShow[config?.key]).map(config => {
+              const options = config?.options?.map(item => {
+                return { value: item.value, content: <Option>{t(item.text.toUpperCase())}</Option> }
+              })
+              return (
+                <>
+                  <FieldName>{config?.name}</FieldName>
+                  {config?.type === 2 && options && (
+                    <Select
+                      notAsync
+                      defaultValue={config?.value}
+                      options={options}
+                      onChange={(typeValue) => handleUpdateConfigs(config?.id, { value: typeValue })}
+                      placeholder={t('SELECT_A_OPTION', 'Select a option')}
+                    />
+                  )}
+                </>
+              )
+            })}
+          </>
+        )}
+
+        {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
+          <>
+            <TabOption
+              key='all'
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
+            >
+              {all ? (
+                <RiCheckboxFill className='fill' />
+              ) : (
+                <RiCheckboxBlankLine />
+              )}
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
+            </TabOption>
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
+        )}
+
+        {paymentTabs === 2 && (
+          orderTypes.map(type => (
+            <TabOption
+              key={type.value}
+              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+            >
+              {(localState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
+                <RiCheckboxFill className='fill' />
+              ) : (
+                <RiCheckboxBlankLine />
+              )}
+              <TabOptionName>{type.text}</TabOptionName>
+            </TabOption>
+          ))
+        )}
+
+        <Button
+          borderRadius='5px'
+          color='primary'
+          disabled={actionState.loading || Object.keys(changesState).length === 0}
+          onClick={() => handleSaveClick(businessPaymethod.id)}
+        >
+          {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
+        </Button>
+      </Container>
+      <Confirm
+        width='700px'
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const PaymentOptionStripeLink = (props) => {
+  const paymentOptionStripeLinkProps = {
+    ...props,
+    UIComponent: PaymentOptionStripeLinkUI
+  }
+  return <PaymentOptionStripeLinkController {...paymentOptionStripeLinkProps} />
+}

package/src/components/Stores/PaymentOptionStripeLink/styles.js

@@ -0,0 +1,171 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  padding: 20px;
+  overflow: auto;
+  transition: 0.3s;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  > button {
+    margin-top: 20px;
+    padding: 5px 15px 35px;
+    position: sticky;
+    top: 100%;
+    width: fit-content;
+    height: 42px;
+  }
+
+  .message {
+    margin: 0px;
+    font-size: 12px;
+  }
+
+  .alert-message {
+    margin: 30px 0 0 0;
+    font-weight: 700;
+  }
+
+  .select {
+    width: 100%;
+    > div:first-child {
+      padding: 8px 15px;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    width: 0;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid #E9ECEF;
+    ` : css`
+      border-left: 1px solid #E9ECEF;
+    `}
+  }
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  font-size: 13px;
+  line-height: 2;
+  font-weight: 500;
+`
+
+export const SandboxWrapper = styled.div`
+  margin-top: 30px;
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors.headingColor};
+  span {
+    ${props => props.theme?.rtl ? css`
+      margin-right: 10px;
+    ` : css`
+      margin-left: 10px;
+    `}
+  }
+`
+
+export const FieldName = styled.p`
+  color: ${props => props.theme.colors.headingColor};
+  margin: 30px 0 10px;
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  h1 {
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    font-weight: 700;
+    flex: 1;
+    margin: 0;
+  }
+`
+
+export const CloseButton = styled.div`
+  display: none;
+  @media (min-width: 1000px) {
+    display: flex;
+    align-items: center;
+  }
+`
+export const TabOption = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  cursor: pointer;
+  color: ${props => props.theme.colors.headingColor};
+
+  > svg {
+    font-size: 20px;
+    &.fill {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+`
+
+export const TabOptionName = styled.span`
+  color: ${props => props.theme.colors.headingColor};
+  ${props => props.theme?.rtl ? css`
+    margin-right: 10px;
+  ` : css`
+    margin-left: 10px;
+  `}
+`
+export const ActionSelectorWrapper = styled.div`
+  margin: 0 10px;
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px 5px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`

package/src/components/Stores/index.js

@@ -44,6 +44,7 @@ import { BusinessMenuOptions } from './BusinessMenuOptions'
 import { BusinessDeliveryDetails } from './BusinessDeliveryDetails'
 import { BusinessPickupDetails } from './BusinessPickupDetails'
 import { PaymentOptionStripeDirect } from './PaymentOptionStripeDirect'
+import { PaymentOptionStripeLink } from './PaymentOptionStripeLink'
 import { PaymentOption } from './PaymentOption'
 import { PaymethodOptionPaypalExpress } from './PaymethodOptionPaypalExpress'
 import { PaymethodOptionStripeRedirect } from './PaymethodOptionStripeRedirect'
@@ -163,6 +164,7 @@ export {
   BusinessDeliveryDetails,
   BusinessPickupDetails,
   PaymentOptionStripeDirect,
+  PaymentOptionStripeLink,
   PaymentOption,
   PaymethodOptionPaypalExpress,
   PaymethodOptionStripeRedirect,

package/src/index.js

@@ -254,6 +254,7 @@ import {
   BusinessDeliveryDetails,
   BusinessPickupDetails,
   PaymentOptionStripeDirect,
+  PaymentOptionStripeLink,
   PaymentOption,
   PaymethodOptionPaypalExpress,
   PaymethodOptionStripeRedirect,
@@ -685,6 +686,7 @@ export {
   BusinessDeliveryDetails,
   BusinessPickupDetails,
   PaymentOptionStripeDirect,
+  PaymentOptionStripeLink,
   PaymentOption,
   PaymethodOptionPaypalExpress,
   PaymethodOptionStripeRedirect,

package/src/styles/Select/index.js

@@ -3,7 +3,7 @@ import { useSession } from 'ordering-components-admin-external'
 import { usePopper } from 'react-popper'
 import { CaretDownFill } from 'react-bootstrap-icons'
 import FiChevronDown from '@meronex/icons/fi/FiChevronDown'
-import { SearchBar } from '../../components/Shared'
+import { Pagination, SearchBar } from '../../components/Shared'
 
 import {
   Selected,
@@ -19,6 +19,7 @@ import {
   HeaderItem,
   PopoverBody
 } from './styles'
+import { PaginationWrapper } from '../MultiSelect/styles'
 
 export const Select = (props) => {
   const {
@@ -38,7 +39,12 @@ export const Select = (props) => {
     className,
     isShowCustomOption,
     customOptionTitle,
-    handleCustomOptionClick
+    handleCustomOptionClick,
+    pagination,
+    handleChangePage,
+    handleChangePageSize,
+    useLazyPagination,
+    isHidePagecontrol
   } = props
   const defaultOption = options?.find(
     (option) => option.value === defaultValue
@@ -89,6 +95,11 @@ export const Select = (props) => {
     }
   }
 
+  const handlerChangePage = (page) => {
+    setOpen(true)
+    handleChangePage(page)
+  }
+
   useEffect(() => {
     window.addEventListener('mouseup', handleClickOutside)
     window.addEventListener('keydown', handleKeyDown)
@@ -104,7 +115,9 @@ export const Select = (props) => {
       const _defaultOption = options?.find(
         (option) => option.value === defaultValue
       )
-      setSelectedOption(_defaultOption)
+      if (!(useLazyPagination && pagination)) {
+        setSelectedOption(_defaultOption)
+      }
       setValue(defaultValue)
     }
   }, [defaultValue, options, searchValue])
@@ -124,6 +137,14 @@ export const Select = (props) => {
     setOpen(!open)
   }
 
+  const filterFunction = (_, index) => {
+    if (!pagination || useLazyPagination) return true
+    const validation = pagination?.currentPage === 1
+      ? index < (pagination.pageSize * pagination.currentPage)
+      : (index >= (pagination.pageSize * (pagination.currentPage - 1))) && (index < (pagination.pageSize * pagination.currentPage))
+    return validation
+  }
+
   const popStyle = { ...styles.popper, display: open ? 'block' : 'none', minWidth: referenceElement?.current?.offsetWidth || '100px' }
   if (!open) {
     popStyle.transform = 'translate3d(0px, 0px, 0px)'
@@ -173,7 +194,7 @@ export const Select = (props) => {
             optionInnerMargin={props.optionInnerMargin}
             optionInnerMaxHeight={props.optionInnerMaxHeight}
           >
-            {options.map((option, i) => (
+            {options.filter(filterFunction).map((option, i) => (
               <Option
                 key={i}
                 selected={value === option.value}
@@ -200,6 +221,18 @@ export const Select = (props) => {
               {customOptionTitle}
             </Option>
           )}
+          {pagination && handleChangePageSize && handleChangePage && (
+            <PaginationWrapper>
+              <Pagination
+                currentPage={pagination?.currentPage}
+                totalPages={pagination?.totalPages}
+                handleChangePage={handlerChangePage}
+                handleChangePageSize={handleChangePageSize}
+                defaultPageSize={pagination?.pageSize}
+                isHidePagecontrol={isHidePagecontrol}
+              />
+            </PaginationWrapper>
+          )}
         </Options>
       </PopoverBody>
     </div>