ordering-ui-admin-external 1.0.0

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

@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, RecoveryNotificationList as RecoveryNotificationListController } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import Skeleton from 'react-loading-skeleton'
+import { Modal, Alert } from '../../Shared'
+import { Switch, Button } from '../../../styles'
+import { SingleRecoveryNotification } from '../SingleRecoveryNotification'
+
+import {
+  Container,
+  NotificationBlock,
+  BlockHeader,
+  PreivewEditWrapper,
+  PreviewContent,
+  EmailPreviewWrapper,
+  EmailPreviewHeader,
+  PointGroup,
+  EmailPreviewContent,
+  SmsPreviewWrapper,
+  SmsContentLayout,
+  SmsPreviewContent,
+  SmsPreviewContentWrapper,
+  AddNewNotificationButton
+} from './styles'
+
+const RecoveryNotificationListUI = (props) => {
+  const {
+    action,
+    notificationListState,
+    handleUpdateClick,
+    handleAddNotifications,
+    handleUpdateNotifications,
+    handleDeleteNotifications,
+    actionState
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const [showPreview, setShowPreview] = useState(false)
+  const [selectedNotification, setSelectedNotification] = useState(null)
+  const [isAddModal, setIsAddModal] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const handleEditNotification = (notification) => {
+    setSelectedNotification(notification)
+    setShowPreview(true)
+  }
+
+  const handleClosePreview = () => {
+    setShowPreview(false)
+    setSelectedNotification(null)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (!actionState?.error || actionState.loading) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState?.error])
+
+  return (
+    <>
+      <Container>
+        {notificationListState?.loading ? (
+          <>
+            {[...Array(2).keys()].map(i => (
+              <NotificationBlock key={i} noBorder={i === 0}>
+                <BlockHeader>
+                  <Skeleton width={80} height={20} />
+                  <Skeleton width={40} height={20} style={{ margin: '0px 10px' }} />
+                </BlockHeader>
+                <PreivewEditWrapper>
+                  <Skeleton width={70} height={20} />
+                  <Skeleton width={70} height={44} />
+                </PreivewEditWrapper>
+                <EmailPreviewWrapper isSkeleton />
+              </NotificationBlock>
+            ))}
+          </>
+        ) : (
+          <>
+            {notificationListState?.notifications.map((notification, i) => (
+              <NotificationBlock
+                key={i}
+                noBorder={i === 0}
+              >
+                <BlockHeader>
+                  <span>{notification.channel}</span>
+                  <Switch
+                    defaultChecked={notification?.enabled || false}
+                    onChange={val => handleUpdateClick(notification.id, { enabled: val })}
+                  />
+                </BlockHeader>
+                <PreivewEditWrapper>
+                  <span>{t('PREVIEW', 'Preview')}</span>
+                  <Button
+                    color='secundary'
+                    borderRadius='8px'
+                    onClick={() => handleEditNotification(notification)}
+                  >
+                    {t('EDIT', 'Edit')}
+                  </Button>
+                </PreivewEditWrapper>
+                <PreviewContent>
+                  {notification?.channel === 'email' && (
+                    <EmailPreviewWrapper>
+                      <EmailPreviewHeader>
+                        <PointGroup>
+                          <div />
+                          <div />
+                          <div />
+                        </PointGroup>
+                      </EmailPreviewHeader>
+                      <EmailPreviewContent>
+                        <h2>{notification?.title}</h2>
+                        <p>{notification.body}</p>
+                      </EmailPreviewContent>
+                    </EmailPreviewWrapper>
+                  )}
+                  {notification?.channel === 'sms' && (
+                    <SmsPreviewWrapper>
+                      <SmsContentLayout bgimage={theme.images.general.mobileHalfMask}>
+                        <SmsPreviewContentWrapper>
+                          <SmsPreviewContent>
+                            <h2>{notification?.title}</h2>
+                            <p>{notification.body}</p>
+                          </SmsPreviewContent>
+                        </SmsPreviewContentWrapper>
+                      </SmsContentLayout>
+                    </SmsPreviewWrapper>
+                  )}
+                  {notification?.channel === 'notification' && (
+                    <SmsPreviewWrapper>
+                      <SmsContentLayout bgimage={theme.images.general.mobileHalfMask}>
+                        <SmsPreviewContentWrapper>
+                          <SmsPreviewContent>
+                            <h2>{notification?.title}</h2>
+                            <p>{notification.body}</p>
+                          </SmsPreviewContent>
+                        </SmsPreviewContentWrapper>
+                      </SmsContentLayout>
+                    </SmsPreviewWrapper>
+                  )}
+                </PreviewContent>
+              </NotificationBlock>
+            ))}
+            <AddNewNotificationButton>
+              <span onClick={() => setIsAddModal(true)}>{t('ADD_NEW_NOTIFICATION', 'Add new notification')}</span>
+            </AddNewNotificationButton>
+          </>
+        )}
+      </Container>
+
+      <Modal
+        width='700px'
+        height='80vh'
+        padding='30px'
+        title={selectedNotification?.channel || t('NOTIFICATIONS', 'Notifications')}
+        open={showPreview}
+        onClose={() => handleClosePreview()}
+      >
+        <SingleRecoveryNotification
+          notification={selectedNotification}
+          handleAddNotifications={handleAddNotifications}
+          handleUpdateNotifications={handleUpdateNotifications}
+          handleDeleteNotifications={handleDeleteNotifications}
+          onClose={() => handleClosePreview()}
+          action={action}
+        />
+      </Modal>
+      <Modal
+        width='700px'
+        height='80vh'
+        padding='30px'
+        title={t('NOTIFICATIONS', 'Notifications')}
+        open={isAddModal}
+        onClose={() => setIsAddModal(false)}
+      >
+        <SingleRecoveryNotification
+          isAdd
+          action={action}
+          notification={selectedNotification}
+          handleAddNotifications={handleAddNotifications}
+          handleUpdateNotifications={handleUpdateNotifications}
+          handleDeleteNotifications={handleDeleteNotifications}
+          onClose={() => setIsAddModal(false)}
+        />
+      </Modal>
+
+      <Alert
+        title={t('RECOVERY_ACTIONS', 'Recovery actions')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const RecoveryNotificationList = (props) => {
+  const recoveryNotificationsProps = {
+    ...props,
+    UIComponent: RecoveryNotificationListUI
+  }
+  return <RecoveryNotificationListController {...recoveryNotificationsProps} />
+}

package/src/components/CartRecovery/RecoveryNotificationList/styles.js

@@ -0,0 +1,211 @@
+import styled, { css } from 'styled-components'
+import React from 'react'
+
+export const Container = styled.div``
+
+export const NotificationBlock = styled.div`
+  border-top: 1px solid ${props => props.theme.colors.borderColor};
+  padding: 40px 0px;
+
+  ${({ noBorder }) => noBorder && css`
+    border: none;
+    padding-top: 0px;
+  `}
+`
+
+export const BlockHeader = styled.div`
+  display: flex;
+  align-items: center;
+
+  > span {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    text-transform: capitalize;
+  }
+
+  > label {
+    margin: 0px 15px;
+  }
+`
+
+export const PreivewEditWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 15px;
+
+  > span {
+    font-size: 14px;
+    line-height: 24px;
+  }
+  > button {
+    height: 44px;
+  }
+`
+
+export const PreviewContent = styled.div``
+
+export const EmailPreviewWrapper = styled.div`
+  max-width: 317px;
+  margin-left: auto;
+  margin-right: auto;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+
+  ${({ isSkeleton }) => isSkeleton && css`
+    border: none;
+    background: ${props => props.theme.colors.borderColor};
+    height: 200px;
+  `}
+`
+
+export const EmailPreviewHeader = styled.div`
+  width: 100%;
+  height: 18px;
+  background: ${props => props.theme.colors.secundaryDarkContrast};
+`
+
+export const PointGroup = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0px 4px;
+  height: 100%;
+  > div {
+    width: 7px;
+    height: 7px;
+    min-width: 7px;
+    border-radius: 50%;
+    background-color: #CED4DA;
+    margin: 0px 4px;
+  }
+`
+
+export const EmailPreviewContent = styled.div`
+  background-color: ${props => props.theme.colors.primaryContrast};
+  padding: 13px 30px;
+
+  > h2 {
+    margin-top: 0px;
+    margin-bottom: 10px;
+    text-align: center;
+    font-size: 10px;
+  }
+  p {
+    margin: 0px;
+    font-size: 7px;
+  }
+`
+
+export const SmsPreviewWrapper = styled.div`
+  margin: 0 auto;
+  background-color: ${props => props.theme.colors.secundaryDarkContrast};
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  width: 212px;
+  padding: 20px 16px 0px 16px;
+`
+
+export const NotificationPreviewWrapper = styled(SmsPreviewWrapper)``
+
+export const NotificationPreviewLayout = styled.div`
+  width: 100%;
+`
+
+const SmsContentLayoutStyled = styled.div`
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+`
+
+export const SmsContentLayout = (props) => {
+  return (
+    <SmsContentLayoutStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </SmsContentLayoutStyled>
+  )
+}
+
+const NotificationContentHeaderStyled = styled.div`
+  width: 100%;
+  height: 51px;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+`
+export const NotificationContentHeader = (props) => {
+  return (
+    <NotificationContentHeaderStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </NotificationContentHeaderStyled>
+  )
+}
+
+export const NotificationContent = styled.div`
+  background-color: #EAE1D8;
+  padding: 9px;
+  height: 145px;
+  max-height: 145px;
+  overflow: auto;
+`
+
+export const SmsPreviewContentWrapper = styled(NotificationContent)`
+  background-color: transparent;
+  width: 100%;
+  padding: 9px;
+  margin-top: 30px;
+  height: 165px;
+  max-height: 165px;
+  overflow: auto;
+`
+
+export const SmsPreviewContent = styled.div`
+  margin: 10px 0px 0px 0px;
+  background: ${props => props.theme.colors.secundary};
+  border-radius: 7.6px;
+  padding: 10px;
+  height: fit-content;
+
+  > h2 {
+    font-size: 10px;
+    margin-top: 0px;
+    margin-bottom: 5px;
+  }
+  p {
+    font-size: 7px;
+    margin: 0px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+`
+
+export const NotificationMessageContent = styled(SmsPreviewContent)`
+  height: fit-content;
+  margin: 20px 0px 0px 0px;
+`
+
+export const AddNewNotificationButton = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.lightGray};
+  padding-bottom: 15px;
+  span {
+    cursor: pointer;
+  }
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`

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

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, SingleRecoveryNotification as SingleRecoveryNotificationController } from 'ordering-components-admin-external'
+import { Input, TextArea, Button } from '../../../styles'
+import { Select } from '../../../styles/Select'
+import { Alert, Confirm } from '../../Shared'
+
+import {
+  Container,
+  InputWrapper,
+  ButtonGroup,
+  Option
+} from './styles'
+
+const SingleRecoveryNotificationUI = (props) => {
+  const {
+    notification,
+    formState,
+    handleChangeInput,
+    handleChangeSelect,
+    handleUpdateClick,
+    handleDeleteClick,
+    isAdd,
+    handleClickAddBtn
+  } = props
+
+  const [, t] = useLanguage()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+
+  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 handleClickDeleteBtn = (id) => {
+    handleDeleteClick && handleDeleteClick(id)
+  }
+
+  const handleClickUpdateBtn = (id) => {
+    handleUpdateClick && handleUpdateClick(id, formState?.changes)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const onClickDeleteNotification = (id) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_ITEM', 'Are you sure to delete this _item_?').replace('_item_', t('NOTIFICATION', 'Notification')),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleClickDeleteBtn(id)
+      }
+    })
+  }
+
+  const placeholder = <Option>{t('SELECT_CHANNEL', 'Select a channel')}</Option>
+
+  useEffect(() => {
+    if (!formState?.error || formState.loading) return
+    setAlertState({
+      open: true,
+      content: formState?.error
+    })
+  }, [formState?.error])
+
+  return (
+    <>
+      <Container>
+        <InputWrapper>
+          <label>{t('TITLE', 'Title')}</label>
+          <Input
+            name='title'
+            placeholder={t('TITLE', 'Title')}
+            defaultValue={
+              formState?.changes?.title
+                ? formState?.changes?.title
+                : notification?.title ?? ''
+            }
+            onChange={handleChangeInput}
+          />
+        </InputWrapper>
+        <InputWrapper>
+          <label>{t('MESSAGE', 'Message')}</label>
+          <TextArea
+            name='body'
+            placeholder={t('WRITE_MESSAGE', 'Write a message')}
+            defaultValue={
+              formState?.changes?.body
+                ? formState?.changes?.body
+                : notification?.body ?? ''
+            }
+            onChange={handleChangeInput}
+          />
+        </InputWrapper>
+        {isAdd && (
+          <InputWrapper>
+            <label>{t('CHANNEL', 'Channel')}</label>
+            <Select
+              placeholder={placeholder}
+              defaultValue={
+                formState?.changes?.channel
+                  ? formState?.changes?.channel
+                  : notification?.channel ?? ''
+              }
+              options={channelList}
+              onChange={val => handleChangeSelect('channel', val)}
+            />
+          </InputWrapper>
+        )}
+      </Container>
+      <ButtonGroup>
+        {isAdd ? (
+          <Button
+            color='primary'
+            borderRadius='8px'
+            disabled={Object.keys(formState?.changes).length === 0 || formState?.loading}
+            onClick={() => handleClickAddBtn()}
+          >
+            {t('ADD', 'Add')}
+          </Button>
+        ) : (
+          <>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              disabled={Object.keys(formState?.changes).length === 0 || formState?.loading}
+              onClick={() => handleClickUpdateBtn(notification?.id)}
+            >
+              {t('ACCEPT', 'Accept')}
+            </Button>
+            <Button
+              color='secundary'
+              borderRadius='8px'
+              onClick={() => onClickDeleteNotification(notification?.id)}
+            >
+              {t('DELETE', 'Delete')}
+            </Button>
+          </>
+        )}
+      </ButtonGroup>
+      <Alert
+        title={t('RECOVERY_ACTIONS', 'Recovery actions')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+      <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 SingleRecoveryNotification = (props) => {
+  const singleRecoveryNotificationProps = {
+    ...props,
+    UIComponent: SingleRecoveryNotificationUI
+  }
+  return <SingleRecoveryNotificationController {...singleRecoveryNotificationProps} />
+}

package/src/components/CartRecovery/SingleRecoveryNotification/styles.js

@@ -0,0 +1,46 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+
+`
+
+export const InputWrapper = styled.div`
+  label {
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  input, textarea {
+    width: 100%;
+  }
+  textarea {
+    height: 80px;
+  }
+  margin-bottom: 35px;
+
+  .select {
+    border: 1px solid ${props => props.theme.colors.gray};
+  }
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  position: sticky;
+  bottom: 0px;
+  top: 100%;
+
+  button {
+    height: 44px;
+    margin-right: 25px;
+    ${props => props.theme.rtl && css`
+      margin-right: 25px;
+      margin-right: 10px;
+    `}
+  }
+`
+
+export const Option = styled.div`
+  font-size: 14px;
+  line-height: 24px;
+`

package/src/components/CartRecovery/index.js

@@ -0,0 +1,7 @@
+import { OpenCartListing } from './OpenCartListing'
+import { RecoveryActionListing } from './RecoveryActionListing'
+
+export {
+  OpenCartListing,
+  RecoveryActionListing
+}