ordering-ui-admin-external 1.10.0 → 1.11.0

package/src/components/Marketing/CampaignList/styles.js

@@ -201,3 +201,10 @@ export const AddNewPageButton = styled.div`
     color: ${props => props.theme.colors.primary};
   }
 `
+
+export const LinkText = styled.span`
+  color: ${props => props.theme.colors.primary};
+  &:hover {
+    text-decoration: underline;
+  }
+`

package/src/components/Marketing/CampaignListing/index.js

@@ -33,6 +33,7 @@ export const CampaignListingUI = (props) => {
           {...props}
           handleOpenDetail={handleOpenDetail}
           selectedCampaign={selectedCampaign}
+          setSelectedCampaign={setSelectedCampaign}
         />
       </CampaignListingContainer>
       {isOpenDetail && (

package/src/components/Marketing/CampaignNotification/index.js

@@ -1,8 +1,10 @@
-import React, { useState } from 'react'
-import { useLanguage, useEvent } from 'ordering-components-admin-external'
+import React, { useEffect, useMemo, useState } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage } from 'ordering-components-admin-external'
 import { Input, TextArea, Button } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { Alert } from '../../Shared'
+import { SettingsList } from '../../Settings/SettingsList'
 import {
   Container,
   InputWrapper,
@@ -11,7 +13,8 @@ import {
   SmsContentLayout,
   SmsPreviewContentWrapper,
   SmsPreviewContent,
-  Description
+  Description,
+  BottomSpace
 } from './styles'
 
 export const CampaignNotification = (props) => {
@@ -21,13 +24,26 @@ export const CampaignNotification = (props) => {
     handleChangeData,
     handleUpdateContact,
     handleAddCampaign,
-    formState
+    formState,
+    categoryList
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [category, setCategory] = useState()
+
+  const generalList = [
+    'onesignal_user_auth',
+    'onesignal_orderingapp_id',
+    'onesignal_businessapp_id',
+    'onesignal_deliveryapp_id',
+    'notification_toast'
+  ]
+
+  const isEnableConfig = useMemo(() => {
+    return category?.configs?.filter(config => generalList.includes(config.key)).every(config => !!config?.value)
+  }, [category])
 
   const closeAlert = () => {
     setAlertState({
@@ -77,54 +93,84 @@ export const CampaignNotification = (props) => {
     }
   }
 
-  const handleGoToPage = () => {
-    events.emit('go_to_page', { page: 'operation_settings', search: '?category=14' })
-  }
+  useEffect(() => {
+    if (categoryList?.categories?.length > 0) {
+      const selectedCategory = categoryList?.categories.find(item => item.key === 'notification')
+      const configs = selectedCategory?.configs.filter(config => generalList.includes(config.key))
+      setCategory({ ...selectedCategory, configs: configs })
+    }
+  }, [categoryList])
 
   return (
     <>
-      <Container>
-        <Description>
-          {t('NOTIFICATION_SETTINGS_LINK_DESC', 'You need to complete One signal configuration first, you can do it here:')} <span onClick={() => handleGoToPage()}>{t('NOTIFICATION_SETTINGS', 'Notification settings')}</span>
-        </Description>
-        <InputWrapper>
-          <label>{t('TITLE', 'Title')}</label>
-          <Input
-            name='title'
-            placeholder={t('TITLE', 'Title')}
-            defaultValue={contactState?.changes?.contact_data?.title || ''}
-            onChange={handleChangeData}
-          />
-        </InputWrapper>
-        <InputWrapper>
-          <label>{t('MESSAGES', 'Messages')}</label>
-          <TextArea
-            name='body'
-            placeholder={t('WRITE_MESSAGE', 'Write a message')}
-            defaultValue={contactState?.changes?.contact_data?.body || ''}
-            onChange={handleChangeData}
-          />
-        </InputWrapper>
-        <SmsPreviewWrapper>
-          <SmsContentLayout bgimage={theme.images.general.mobileHalfMask}>
-            <SmsPreviewContentWrapper>
-              <SmsPreviewContent>
-                <h2>{contactState?.changes?.contact_data?.title || ''}</h2>
-                <p>{contactState?.changes?.contact_data?.body || ''}</p>
-              </SmsPreviewContent>
-            </SmsPreviewContentWrapper>
-          </SmsContentLayout>
-        </SmsPreviewWrapper>
-      </Container>
-      <ButtonWrapper>
-        <Button
-          color='primary'
-          onClick={() => handleSaveNotification()}
-          disabled={contactState.loading}
-        >
-          {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
-        </Button>
-      </ButtonWrapper>
+      {isEnableConfig ? (
+        <>
+          <Container>
+            <InputWrapper>
+              <label>{t('TITLE', 'Title')}</label>
+              <Input
+                name='title'
+                placeholder={t('TITLE', 'Title')}
+                defaultValue={contactState?.changes?.contact_data?.title || ''}
+                onChange={handleChangeData}
+              />
+            </InputWrapper>
+            <InputWrapper>
+              <label>{t('MESSAGES', 'Messages')}</label>
+              <TextArea
+                name='body'
+                placeholder={t('WRITE_MESSAGE', 'Write a message')}
+                defaultValue={contactState?.changes?.contact_data?.body || ''}
+                onChange={handleChangeData}
+              />
+            </InputWrapper>
+            <SmsPreviewWrapper>
+              <SmsContentLayout bgimage={theme.images.general.mobileHalfMask}>
+                <SmsPreviewContentWrapper>
+                  <SmsPreviewContent>
+                    <h2>{contactState?.changes?.contact_data?.title || ''}</h2>
+                    <p>{contactState?.changes?.contact_data?.body || ''}</p>
+                  </SmsPreviewContent>
+                </SmsPreviewContentWrapper>
+              </SmsContentLayout>
+            </SmsPreviewWrapper>
+          </Container>
+          <ButtonWrapper>
+            <Button
+              color='primary'
+              onClick={() => handleSaveNotification()}
+              disabled={contactState.loading}
+            >
+              {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
+            </Button>
+          </ButtonWrapper>
+        </>
+      ) : (
+        <>
+          <Description>
+            <span>
+              {t('NOTIFICATION_SETTINGS_LINK_DESC', 'You need to complete One signal configuration first')}
+            </span>
+          </Description>
+          {categoryList?.loading && (
+            <>
+              {[...Array(5).keys()].map(i => (
+                <p key={i}>
+                  <Skeleton height={20} />
+                </p>
+              ))}
+            </>
+          )}
+          {!categoryList?.loading && category && (
+            <SettingsList
+              {...props}
+              category={category}
+              isCampaign
+            />
+          )}
+          <BottomSpace />
+        </>
+      )}
       <Alert
         title={t('CAMPAIGN', 'Campaign')}
         content={alertState.content}

package/src/components/Marketing/CampaignSMS/index.js

@@ -1,6 +1,8 @@
-import React, { useState } from 'react'
-import { useLanguage, useEvent } from 'ordering-components-admin-external'
+import React, { useState, useMemo } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage } from 'ordering-components-admin-external'
 import { Input, TextArea, Button } from '../../../styles'
+import { SettingsList } from '../../Settings/SettingsList'
 import { useTheme } from 'styled-components'
 import { Alert } from '../../Shared'
 
@@ -12,7 +14,8 @@ import {
   SmsContentLayout,
   SmsPreviewContentWrapper,
   SmsPreviewContent,
-  Description
+  Description,
+  BottomSpace
 } from './styles'
 
 export const CampaignSMS = (props) => {
@@ -22,14 +25,20 @@ export const CampaignSMS = (props) => {
     handleChangeData,
     handleUpdateContact,
     handleAddCampaign,
-    formState
+    formState,
+    categoryList
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
+  const category = categoryList?.categories.find(item => item.key === 'twilio')
+
+  const isEnableConfig = useMemo(() => {
+    return category?.configs?.every(config => !!config?.value)
+  }, [category])
+
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -78,54 +87,76 @@ export const CampaignSMS = (props) => {
     }
   }
 
-  const handleGoToPage = () => {
-    events.emit('go_to_page', { page: 'operation_settings', search: '?category=26' })
-  }
-
   return (
     <>
-      <Container>
-        <Description>
-          {t('TWILIO_SETTINGS_LINK_DESC', 'You need to complete Twilio configuration first, you can do it here:')} <span onClick={() => handleGoToPage()}>{t('TWILIO_SETTINGS', 'Twilio settings')}</span>
-        </Description>
-        <InputWrapper>
-          <label>{t('TITLE', 'Title')}</label>
-          <Input
-            name='title'
-            placeholder={t('TITLE', 'Title')}
-            defaultValue={contactState?.changes?.contact_data?.title || ''}
-            onChange={handleChangeData}
-          />
-        </InputWrapper>
-        <InputWrapper>
-          <label>{t('MESSAGES', 'Messages')}</label>
-          <TextArea
-            name='body'
-            placeholder={t('WRITE_MESSAGE', 'Write a message')}
-            defaultValue={contactState?.changes?.contact_data?.body || ''}
-            onChange={handleChangeData}
-          />
-        </InputWrapper>
-        <SmsPreviewWrapper>
-          <SmsContentLayout bgimage={theme.images.general.mobileHalfMask}>
-            <SmsPreviewContentWrapper>
-              <SmsPreviewContent>
-                <h2>{contactState?.changes?.contact_data?.title || ''}</h2>
-                <p>{contactState?.changes?.contact_data?.body || ''}</p>
-              </SmsPreviewContent>
-            </SmsPreviewContentWrapper>
-          </SmsContentLayout>
-        </SmsPreviewWrapper>
-      </Container>
-      <ButtonWrapper>
-        <Button
-          color='primary'
-          onClick={() => handleSaveSms()}
-          disabled={contactState.loading}
-        >
-          {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
-        </Button>
-      </ButtonWrapper>
+      {isEnableConfig ? (
+        <>
+          <Container>
+            <InputWrapper>
+              <label>{t('TITLE', 'Title')}</label>
+              <Input
+                name='title'
+                placeholder={t('TITLE', 'Title')}
+                defaultValue={contactState?.changes?.contact_data?.title || ''}
+                onChange={handleChangeData}
+              />
+            </InputWrapper>
+            <InputWrapper>
+              <label>{t('MESSAGES', 'Messages')}</label>
+              <TextArea
+                name='body'
+                placeholder={t('WRITE_MESSAGE', 'Write a message')}
+                defaultValue={contactState?.changes?.contact_data?.body || ''}
+                onChange={handleChangeData}
+              />
+            </InputWrapper>
+            <SmsPreviewWrapper>
+              <SmsContentLayout bgimage={theme.images.general.mobileHalfMask}>
+                <SmsPreviewContentWrapper>
+                  <SmsPreviewContent>
+                    <h2>{contactState?.changes?.contact_data?.title || ''}</h2>
+                    <p>{contactState?.changes?.contact_data?.body || ''}</p>
+                  </SmsPreviewContent>
+                </SmsPreviewContentWrapper>
+              </SmsContentLayout>
+            </SmsPreviewWrapper>
+          </Container>
+          <ButtonWrapper>
+            <Button
+              color='primary'
+              onClick={() => handleSaveSms()}
+              disabled={contactState.loading}
+            >
+              {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
+            </Button>
+          </ButtonWrapper>
+        </>
+      ) : (
+        <>
+          <Description>
+            <span>
+              {t('TWILIO_SETTINGS_LINK_DESC', 'You need to complete Twilio configuration first')}
+            </span>
+          </Description>
+          {categoryList?.loading && (
+            <>
+              {[...Array(5).keys()].map(i => (
+                <p key={i}>
+                  <Skeleton height={20} />
+                </p>
+              ))}
+            </>
+          )}
+          {!categoryList?.loading && category && (
+            <SettingsList
+              {...props}
+              category={category}
+              isCampaign
+            />
+          )}
+          <BottomSpace />
+        </>
+      )}
       <Alert
         title={t('CAMPAIGN', 'Campaign')}
         content={alertState.content}

package/src/components/Marketing/CampaignUsersList/index.js

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, CampaignUserList as CampaignUserListController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { Pagination } from '../../Shared'
+import {
+  Container,
+  Title,
+  TableContainer,
+  Table,
+  THead,
+  TBody,
+  PaginationWrapper
+} from './styles'
+
+const CampaignUserListUI = (props) => {
+  const {
+    userListState
+  } = props
+
+  const [, t] = useLanguage()
+
+  // Change page
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pagesPerPage, setPagesPerPage] = useState(10)
+
+  // Get current products
+  const [currentPages, setCurrentPages] = useState([])
+  const [totalPages, setTotalPages] = useState(null)
+
+  const handleChangePage = (page) => {
+    setCurrentPage(page)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((currentPage - 1) * pagesPerPage + 1) / pageSize)
+    setCurrentPage(expectedPage)
+    setPagesPerPage(pageSize)
+  }
+
+  useEffect(() => {
+    if (userListState.loading) return
+    let _totalPages
+    if (userListState.users.length > 0) {
+      _totalPages = Math.ceil(userListState.users.length / pagesPerPage)
+    }
+    const indexOfLastPost = currentPage * pagesPerPage
+    const indexOfFirstPost = indexOfLastPost - pagesPerPage
+    const _currentBusinessList = userListState.users.slice(indexOfFirstPost, indexOfLastPost)
+    setTotalPages(_totalPages)
+    setCurrentPages(_currentBusinessList)
+  }, [userListState, currentPage, pagesPerPage])
+
+  return (
+    <Container>
+      <Title>
+        <h1>
+          {t('OPENS', 'Opens')}
+          {userListState?.loading
+            ? <Skeleton width={30} height={16} />
+            : <span>{userListState?.users?.length || 0}</span>}
+        </h1>
+      </Title>
+      <TableContainer>
+        <Table>
+          <THead>
+            <tr>
+              <th>{t('USER', 'User')}</th>
+              <th>{t('EMAIL_ADDRESS', 'Email Address')}</th>
+              <th>{t('OPENS', 'Opens')}</th>
+            </tr>
+          </THead>
+          {userListState?.loading && (
+            [...Array(8).keys()].map(i => (
+              <TBody key={i}>
+                <tr>
+                  <td><Skeleton width={50} /></td>
+                  <td><Skeleton width={50} /></td>
+                  <td><Skeleton width={50} /></td>
+                </tr>
+              </TBody>
+            ))
+          )}
+          {!userListState?.loading && currentPages.map((user, i) => (
+            <TBody key={i}>
+              <tr>
+                <td>{user?.user?.name}</td>
+                <td className='underline'>{user?.user?.email}</td>
+                <td>{user?.open_at ? 1 : 0}</td>
+              </tr>
+            </TBody>
+          ))}
+        </Table>
+      </TableContainer>
+      <PaginationWrapper>
+        {userListState?.users?.length > 0 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            handleChangePage={handleChangePage}
+            defaultPageSize={pagesPerPage}
+            handleChangePageSize={handleChangePageSize}
+          />
+        )}
+      </PaginationWrapper>
+    </Container>
+  )
+}
+
+export const CampaignUserList = (props) => {
+  const campaignUserListProps = {
+    ...props,
+    UIComponent: CampaignUserListUI
+  }
+  return <CampaignUserListController {...campaignUserListProps} />
+}

package/src/components/Marketing/CampaignUsersList/styles.js

@@ -0,0 +1,73 @@
+import styled from 'styled-components'
+
+export const Container = styled.div``
+
+export const Title = styled.div`
+  margin-bottom: 30px;
+
+  h1 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+    margin: 0px;
+    > span {
+      display: inline-flex;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      margin: 0px 16px;
+    }
+  }
+`
+
+export const TableContainer = styled.div``
+
+export const Table = styled.table`
+  width: 100%;
+
+  th,
+  td {
+    padding: 15px;
+    box-sizing: border-box;
+    font-size: 14px;
+
+    &:first-child {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+`
+
+export const THead = styled.thead`
+  tr {
+    width: 100%;
+    border-bottom: solid 1px ${props => props.theme.colors.secundaryLight};
+    th {
+      color: ${props => props.theme.colors?.headingColor};
+      white-space: nowrap;
+      z-index: 100;
+      background: ${props => props.theme.colors.backgroundPage};
+      padding-top: 0px;
+      font-weight: 700;
+      font-size: 12px;
+      padding: 5px 15px;
+    }
+  }
+`
+
+export const TBody = styled.tbody`
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  tr {
+    td {
+      &.underline {
+        text-decoration: underline;
+      }
+    }
+  }
+`
+
+export const PaginationWrapper = styled.div`
+  margin-top: 15px;
+  display: flex;
+  justify-content: flex-end;
+`

package/src/components/Marketing/EnterprisePromotionDetails/index.js

@@ -181,7 +181,7 @@ const EnterprisePromotionDetailsUI = (props) => {
             handleSelectNoneSites={() => handleSelectAllSites(false)}
             isDisabled={Object.keys(formState.changes).length === 0 || actionState.loading}
             handleUpdateClick={handleUpdateClick}
-            handleAddPromotion={handleAddPromotion}
+            handleAddClick={handleAddPromotion}
           />
         )}
         {selectedOption === 'businesses' && (

package/src/components/Marketing/EnterprisePromotionList/index.js

@@ -284,6 +284,7 @@ export const EnterprisePromotionList = (props) => {
               totalPages={paginationProps?.totalPages}
               handleChangePage={handleChangePage}
               handleChangePageSize={handleChangePageSize}
+              defaultPageSize={paginationProps?.pageSize}
             />
           </WrapperPagination>
         )}

package/src/components/Marketing/EnterprisePromotionList/styles.js

@@ -200,7 +200,14 @@ export const PromotionListBottom = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
   margin-top: 10px;
+  margin-bottom: 38px;
+  @media (max-width: 450px) {
+    > div {
+      margin-bottom: 5px;
+    }
+  }
   ${({ eventDisabled }) => eventDisabled && css`
     pointer-events: none;
   `}

package/src/components/Marketing/EnterprisePromotionListing/index.js

@@ -42,7 +42,7 @@ const EnterprisePromotionListingUI = (props) => {
   const [moveDistance, setMoveDistance] = useState(0)
 
   const handleOpenDetails = (promotion) => {
-    setMoveDistance(0) 
+    setMoveDistance(0)
     setSelectedPromotion(promotion)
     setOpenDetails(true)
   }