\n \n
\n );\n};\n\nfunction CustomTips(props) {\n const children = props.children || null;\n const { detail, iconClassName, renderExtra, innerImage } = props;\n if (!detail) {\n return {children}
;\n }\n\n return (\n \n \n \n {getContent(innerImage, detail)}\n \n \n }\n >\n
\n );\n}\n\nexport default CustomTips;\n","import i18n from 'i18n-js';\nconst translations = {\n en: {\n ...require('./translations/en.json'),\n campaign: require('./translations/campaign/en.json'),\n coupon: require('./translations/coupon/en.json'),\n },\n 'zh-Hant': {\n ...require('./translations/zh-Hant.json'),\n campaign: require('./translations/campaign/zh-Hant.json'),\n coupon: require('./translations/coupon/zh-Hant.json'),\n },\n 'zh-Hans': {\n ...require('./translations/zh-Hans.json'),\n campaign: require('./translations/campaign/zh-Hans.json'),\n coupon: require('./translations/coupon/zh-Hans.json'),\n },\n};\nconst languageTag = 'en';\ni18n.locale = languageTag;\ni18n.fallbacks = true;\ni18n.translations = translations;\n\nexport default i18n;\n","import axios from 'axios';\n\nconst CMS_BASE_URL =\n process.env.REACT_APP_DOMAIN;\nconst AUTH_PATH = '/graphql';\nconst userAuthAPIinstance = axios.create({\n baseURL: CMS_BASE_URL,\n timeout: 5000,\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n});\n\nclass AuthAPIHelper {\n createAccessToken = (payload) => {\n const { username, password } = payload;\n const graphQL = {\n query: `mutation TokenAuth($input: ObtainJSONWebTokenInput!) {\n tokenAuth(input: $input) {\n token\n payload\n refreshToken\n refreshExpiresIn\n administrator {\n username\n isSuperuser\n allPermissions\n }\n }\n }`,\n variables: { input: { username: username, password: password } },\n };\n return userAuthAPIinstance\n .post(AUTH_PATH, JSON.stringify(graphQL))\n .catch((error) => error);\n };\n refreshAccessToken = (refreshToken) => {\n const query = `mutation RefreshToken($input: RefreshInput!) {\n refreshToken(input: $input) {\n token\n refreshToken\n refreshExpiresIn\n }\n }`;\n const variables = {\n input: {\n refreshToken: refreshToken,\n },\n };\n const graphQL = { query, variables };\n return userAuthAPIinstance\n .post(AUTH_PATH, JSON.stringify(graphQL))\n .catch((error) => error);\n };\n\n logout = (refreshToken, accessToken) => {\n if (!refreshToken) {\n return;\n }\n const query = `mutation RevokeToken($input: RevokeInput!) {\n revokeToken(input: $input) {\n revoked\n }\n }`;\n const variables = {\n input: {\n accessToken: accessToken,\n refreshToken: refreshToken,\n },\n };\n const graphQL = { query, variables };\n return userAuthAPIinstance\n .post(AUTH_PATH, JSON.stringify(graphQL))\n .catch((error) => error);\n };\n}\nexport const authAPIHelper = new AuthAPIHelper();\n","import axios from 'axios';\nimport Cookies from 'cookies-js';\nimport { authAPIHelper } from './AuthApiHelper';\nimport { TokenErrors } from '../config/CustomEnums';\nconst CMS_DOMAIN =\n process.env.REACT_APP_DOMAIN;\n\nexport const ACCESS_TOKEN = 'ACCESS_TOKEN';\nexport const REFRESH_TOKEN = 'REFRESH_TOKEN';\n\nconst defaultHeader = {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n 'Accept-Language': 'en',\n};\n\nexport const baseAPIinstance = axios.create({\n baseURL: CMS_DOMAIN,\n timeout: 300000,\n headers: defaultHeader,\n});\n\nexport const addAuthorization = (token) => {\n Cookies.set(ACCESS_TOKEN, token || '');\n if (token) {\n baseAPIinstance.defaults.headers.common.Authorization = `JWT ${token}`;\n return;\n }\n delete baseAPIinstance.defaults.headers.common.Authorization;\n};\n\nexport const removeAuthorization = () => {\n delete baseAPIinstance.defaults.headers.common.Authorization;\n Cookies.set(ACCESS_TOKEN, '');\n Cookies.set(REFRESH_TOKEN, '');\n};\n\nconst shouldRefresh = (response) => {\n if (!response) {\n return false;\n }\n if (response.status === 403) {\n return true;\n }\n const errors = response.data.errors || [];\n if (\n errors[0] &&\n (errors[0]?.message === TokenErrors.Expiry ||\n errors[0]?.message === TokenErrors.DecodingError)\n ) {\n return true;\n }\n return false;\n};\n\nconst attachTokenToRequest = (request, token) => {\n request.headers.Authorization = `JWT ${token}`;\n};\n\nexport function updateRefreshToken(token) {\n Cookies.set(REFRESH_TOKEN, token || '');\n}\n\nconst clearToken = () => {\n Cookies.set(REFRESH_TOKEN, '');\n Cookies.set(ACCESS_TOKEN, '');\n};\n\nconst refreshPost = (token) => {\n const refreshResponse = authAPIHelper.refreshAccessToken(token);\n return refreshResponse;\n};\n\nfunction handleTokenRefresh() {\n return new Promise((resolve, reject) => {\n const refreshToken = Cookies.get(REFRESH_TOKEN);\n const refreshPromise = refreshPost(refreshToken);\n refreshPromise\n .then((response) => {\n console.log('handleTokenRefresh1', response.data);\n const data = response.data || {};\n const errors = data.errors || [];\n if (\n errors[0] &&\n (errors[0]?.message === TokenErrors.RefreshTokenInvalid ||\n errors[0]?.message === TokenErrors.RefreshTokenExpired)\n ) {\n clearToken();\n reject(response);\n window.location.reload();\n return;\n }\n resolve(response);\n })\n .catch((error) => {\n console.log('handleTokenRefresh2', error.response?.data);\n reject(error.response);\n clearToken();\n window.location.reload();\n });\n });\n}\n\nexport const baseRefreshToken = () => {\n let isRefreshing = false;\n let failedQueue = [];\n\n const processQueue = (token = null) => {\n failedQueue.forEach((prom) => {\n prom.resolve(token);\n });\n failedQueue = [];\n };\n\n const interceptor = (response) => {\n console.log('interceptor:', response);\n const needRefresh = shouldRefresh(response);\n if (!needRefresh) {\n return Promise.reject({ response });\n }\n const originalRequest = response.config;\n if (originalRequest.retry || originalRequest.queued) {\n return Promise.reject({ response });\n }\n\n if (isRefreshing) {\n return new Promise((resolve, reject) => {\n failedQueue.push({ resolve, reject });\n })\n .then((token) => {\n originalRequest.queued = true;\n attachTokenToRequest(originalRequest, token);\n return baseAPIinstance.request(originalRequest);\n })\n .catch(() => {\n return Promise.reject({ response });\n });\n }\n\n originalRequest.retry = true;\n isRefreshing = true;\n return new Promise((resolve) => {\n const refreshResponse = handleTokenRefresh();\n refreshResponse\n .then((response) => {\n const { data } = response;\n const accessToken = data?.data?.refreshToken?.token;\n const refreshToken = data?.data?.refreshToken?.refreshToken;\n console.log('newRefreshToken:', accessToken, refreshToken);\n addAuthorization(accessToken);\n updateRefreshToken(refreshToken);\n attachTokenToRequest(originalRequest, accessToken);\n resolve(baseAPIinstance.request(originalRequest));\n processQueue(accessToken);\n })\n .catch((err) => {\n console.log('refreshTokenError 1:', err);\n clearToken();\n })\n .finally(() => {\n isRefreshing = false;\n });\n });\n };\n baseAPIinstance.interceptors.response.use(interceptor);\n};\n","import {\n baseRefreshToken,\n baseAPIinstance,\n addAuthorization,\n ACCESS_TOKEN,\n} from './BaseRefreshHelper';\nimport Cookies from 'cookies-js';\nconst GET_BRANDS_PATH = '/graphql';\n\nclass APIHelper {\n constructor() {\n const token = Cookies.get(ACCESS_TOKEN);\n addAuthorization(token);\n baseRefreshToken();\n }\n callGraphQLAPI = (payload) => {\n const { query, variables } = payload;\n const graphQL = {\n query: query,\n variables: variables,\n };\n const apiResponse = baseAPIinstance\n .post(GET_BRANDS_PATH, JSON.stringify(graphQL))\n .catch((error) => error.response);\n return apiResponse;\n };\n\n callUpLoadFile = (path, body) => {\n console.log('uploadImageCall', path, body);\n const apiResponse = baseAPIinstance\n .post(path, body, {\n headers: { 'Content-Type': '*/*', Accept: '*/*' },\n })\n .catch((error) => error.response);\n console.log('uploadImageCall', apiResponse);\n return apiResponse;\n };\n}\n\nexport const BaseHelper = new APIHelper();\n","import axios from 'axios';\nimport { BaseHelper } from './BaseGraphQLAPIHelper';\n\nconst CMS_BASE_URL =\n process.env.REACT_APP_DOMAIN;\nconst UPLOAD_FILE_PATH = '/files';\n\nconst UPLOAD_SECERT_FILE_PATH = '/receipt-images';\n\n// timeout: 3000,\nfunction dataURItoBlob(dataURI) {\n // convert base64/URLEncoded data component to raw binary data held in a string\n var byteString;\n if (dataURI.split(',')[0].indexOf('base64') >= 0)\n byteString = atob(dataURI.split(',')[1]);\n else byteString = unescape(dataURI.split(',')[1]);\n\n var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];\n\n // write the bytes of the string to a typed array\n var ia = new Uint8Array(byteString.length);\n for (var i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i);\n }\n\n return new Blob([ia], { type: mimeString });\n}\n\nclass UploadFileHelper {\n uploadImages = (imageList, secert = false) => {\n let bodyFormData = new FormData();\n imageList.map((image, index) => {\n let imageURL = image.imageDataUrl;\n let imageType = image.imageType;\n let blob = dataURItoBlob(imageURL);\n let file = new File([blob], 'canvasImage.jpg', { type: imageType });\n return bodyFormData.append(`${index}_key-for-local-caching`, file);\n });\n return BaseHelper.callUpLoadFile(\n secert ? UPLOAD_SECERT_FILE_PATH : UPLOAD_FILE_PATH,\n bodyFormData,\n );\n };\n\n uploadImage = (image, secert = false) => {\n let blob = dataURItoBlob(image.imageDataUrl);\n let file = new File([blob], 'canvasImage.jpg', { type: image.imageType });\n let bodyFormData = new FormData();\n bodyFormData.append(image.imageName, file);\n return BaseHelper.callUpLoadFile(\n secert ? UPLOAD_SECERT_FILE_PATH : UPLOAD_FILE_PATH,\n bodyFormData,\n );\n };\n\n uploadFile = (file, secert = false) => {\n let bodyFormData = new FormData();\n bodyFormData.append('import', file);\n return BaseHelper.callUpLoadFile(\n secert ? UPLOAD_SECERT_FILE_PATH : UPLOAD_FILE_PATH,\n bodyFormData,\n );\n };\n}\nexport const uploadFileHelper = new UploadFileHelper();\n","import { uploadFileHelper } from '../services/UploadFileHelper';\nimport { delay, createAction } from '../utils';\n\nexport const IMAGE_TYPES = {\n TYPE_URL: 'TYPE_URL',\n TYPE_UPLOADING: 'TYPE_UPLOADING',\n TYPE_UPLOADED: 'TYPE_UPLOADED',\n TYPE_FAILED: 'TYPE_FAILED',\n};\n\nexport const ERROR_TYPE = {\n photoSizeIsTooSmall:\n 'Image dimensions could not be smaller than 600 x 600 px.',\n photoSizeIsTooBig: 'Image dimensions could not be bigger than 2MB.',\n wrongPhotoType:\n 'Please upload a valid picture. The file you uploaded is not a picture or the picture is corrupted',\n photoUploadFailed: 'Unable to upload image. Please try again.',\n};\n\nconst handleImageList = (imageList) => {\n let handledImageList = [];\n imageList.map((img) => {\n handledImageList.push(img.split('/').slice(-1)[0]);\n });\n return handledImageList;\n};\n\nexport default {\n namespace: 'uploadFiles',\n state: {\n imageList: [],\n coverImage: '',\n otherImageList: [],\n uploadedImages: {},\n failedImage: {},\n importedFile: '',\n uploading: false,\n },\n\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n updateCoverImage(state, { payload }) {\n const { coverImage } = payload;\n return { ...state, coverImage: coverImage.split('/').slice(-1)[0] };\n },\n addOtherImageToList(state, { payload }) {\n const { otherImage } = payload;\n console.log(otherImage);\n return {\n ...state,\n otherImageList: [...state.otherImageList, otherImage],\n };\n },\n uploadOtherImageList(state, { payload }) {\n const { otherImageList } = payload;\n return { ...state, otherImageList: handleImageList(otherImageList) };\n },\n updateUploadedImages(state, { payload }) {\n const { uuid, url } = payload;\n return {\n ...state,\n uploadedImages: {\n ...state.uploadedImages,\n [uuid]: url,\n },\n };\n },\n finishUploadImages(state, { payload }) {\n const { uuid } = payload;\n const uploadedImages = {};\n const oldUploadedImages = state.uploadedImages;\n Object.keys(state.uploadedImages).forEach((key, index) => {\n if (key !== uuid) {\n uploadedImages[key] = oldUploadedImages[key];\n }\n });\n return {\n ...state,\n uploadedImages: { ...uploadedImages },\n };\n },\n },\n effects: {\n *uploadImages({ payload }, { call, put }) {\n const { imageList } = payload;\n const response = yield call(uploadFileHelper.uploadImages, imageList);\n if (response.status < 300) {\n yield put({\n type: 'updateState',\n payload: { imageList: response.data },\n });\n }\n },\n *uploadCroppedImage({ payload }, { call, put, select }) {\n const { croppedImage } = payload;\n const { secert } = payload;\n const { imageName } = croppedImage;\n const afterAction = payload.afterAction || (() => {});\n const response = yield call(\n uploadFileHelper.uploadImage,\n croppedImage,\n secert,\n );\n if (response.status < 300) {\n const imageData = response.data;\n const url = Object.values(imageData)[0];\n yield put(\n createAction('updateUploadedImages')({\n uuid: imageName,\n url: url,\n }),\n );\n afterAction(url, imageName);\n } else {\n console.log(response);\n yield put(\n createAction('updateState')({\n failedImage: {\n [imageName]: croppedImage,\n },\n }),\n );\n yield put(\n createAction('updateUploadedImages')({\n uuid: imageName,\n url: croppedImage.imageDataUrl,\n }),\n );\n }\n },\n *uploadFile({ payload }, { call, put, select }) {\n yield put({\n type: 'updateState',\n payload: { uploading: true },\n });\n const { file } = payload;\n const response = yield call(uploadFileHelper.uploadFile, file);\n if (response.status < 300) {\n yield put({\n type: 'updateState',\n payload: { importedFile: response.data },\n });\n }\n\n yield put({\n type: 'updateState',\n payload: { uploading: false },\n });\n },\n },\n};\n","import { useRef, useEffect } from 'react';\nimport { saveAs } from 'file-saver';\nimport { ImageDomain, LanguageConfig } from '../config/CustomEnums';\nimport i18n from '../I18n';\nimport { IMAGE_TYPES, ERROR_TYPE } from '../models/UploadFilesModel';\nimport URI from 'urijs';\nimport { v4 as uuidv4 } from 'uuid';\n\nexport const deleteMessage = (items, related) =>\n `${\n items.length > 1\n ? 'These ' +\n items.slice(0, items.length - 1).join(', ') +\n ' and ' +\n items.slice(items.length - 1) +\n ' are'\n : 'This ' + items.join(', ') + ' is'\n } associated with some ${\n related.length > 1\n ? related.slice(0, related.length - 1).join(', ') +\n ' and ' +\n related.slice(related.length - 1)\n : related.join(', ')\n }, once deleted, it will affect other content. Are you sure to delete?`;\n\nexport const delay = (time) =>\n new Promise((resolve) => setTimeout(resolve, time));\nexport const createNumberArray = (numberSize) =>\n Array.from(Array(numberSize).keys());\n\nexport const anchorElementWithId = (id) => {\n const element = document.getElementById(id);\n if (!element) {\n return;\n }\n window.scrollTo(0, element.offsetTop - 124);\n};\n\nexport const getFileNameFromUrl = (url) => {\n if(!url) {\n return url\n }\n const uri = new URI(url);\n return uri?.filename();\n};\n\nexport const detectIsSafari = () => {\n return window.navigator.userAgent?.indexOf('Safari') !== -1;\n};\n\nexport const firstError = (id, errors, language = LanguageConfig.english) => {\n const firstError = errors[0];\n const error = id?.includes(firstError) && language === LanguageConfig.english;\n if (error) {\n setTimeout(() => {\n anchorElementWithId(id);\n }, 100);\n }\n};\n\nexport const getImageUrl = (data) => {\n if (!data) {\n return '';\n }\n if (data.type !== IMAGE_TYPES.TYPE_URL) {\n return '';\n }\n return data.value;\n};\n\nexport const isShowError = (\n field,\n errors,\n language = LanguageConfig.english,\n) => {\n const error =\n errors.indexOf(field) > -1 && language === LanguageConfig.english;\n return error;\n};\n\nexport const addDomainToImage = (imageName) => {\n if (!imageName) {\n return imageName;\n }\n if (imageName.indexOf('http') > -1) {\n return imageName;\n }\n\n return `${ImageDomain}${imageName}`;\n};\n\nexport const gotoOutWeb = (link, callback) => {\n if (typeof callback === 'function') {\n callback();\n }\n window.open(link, '_blank');\n};\n\nexport const getHashKeyString = (hash) => {\n if (!hash) {\n return '';\n }\n const hashKey = hash.slice(1, hash.length);\n return decodeURI(hashKey);\n};\n\nexport const convertNumberToCursor = (index) => {\n const numberString = `arrayconnection:${index}`;\n return btoa(numberString);\n};\nexport const convertPKToId = (nodeName, PK) => {\n if (!PK) {\n return PK;\n }\n const idString = `${nodeName}:${PK}`;\n return btoa(idString);\n};\n\nexport const convertCursorToNumber = (base64) => {\n const decodedString = atob(base64);\n const numberString = decodedString.substring(\n decodedString.lastIndexOf(':') + 1,\n );\n return parseInt(numberString);\n};\n\nexport const saveToSessionStorage = (key, object) => {\n window.sessionStorage.setItem(key, JSON.stringify(object));\n};\n\nexport const removeFromSessionStorage = (key) => {\n sessionStorage.removeItem(key);\n};\n\nexport const getObjectFromSessionStorage = (key) => {\n const allcookies = sessionStorage.getItem(key);\n if (allcookies) {\n return JSON.parse(allcookies);\n }\n return allcookies;\n};\n\nexport const addToSessionStorage = (key, object) => {\n console.log('save cookies:', object);\n\n const originalCookie = getObjectFromSessionStorage(key);\n const newCookie = { ...originalCookie, ...object };\n window.sessionStorage.setItem(key, JSON.stringify(newCookie));\n};\n\nexport const createAction = (type) => (payload) => {\n return { type, payload };\n};\n\nexport const removeElementFromArray = (array, value) => {\n return array.filter(function (ele) {\n return ele !== value;\n });\n};\n\nfunction usePrevious(value) {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n}\n\nexport const useCompare = (val: any) => {\n const prevVal = usePrevious(val);\n return prevVal && JSON.stringify(prevVal) !== JSON.stringify(val);\n};\n\nexport const getKeyByValue = (object, value) => {\n return Object.keys(object).find((key) => object[key] === value);\n};\n\nexport const capitalizeFirstLetter = (string) => {\n return string.charAt(0).toUpperCase() + string.slice(1);\n};\n\nexport const isNumber = (n) => {\n return /^-?[\\d.]+(?:e-?\\d+)?$/.test(n);\n};\n\nexport const getError = (field, errorFields, errorHandle) => {\n return {\n id: field,\n error: errorFields?.fields?.includes(field),\n message: errorFields?.messages?.map((item) => {\n if (item.field === field) {\n if (item.errorType === 'required')\n return errorHandle[item.errorType][item.field];\n else return errorHandle['others'][item.field][item.errorType];\n }\n }),\n };\n};\n\nexport const enLocaleNumberFormatter = (num) => {\n if (!num) {\n return 0;\n }\n const stringNumber = num.toString();\n const commaIndex = stringNumber.indexOf('.');\n if (commaIndex === -1) {\n return i18n.toNumber(stringNumber, { precision: 0 });\n }\n const stringNeedFormatting = stringNumber.substring(0, commaIndex);\n const stringEnd = stringNumber.substring(commaIndex);\n const stringFormated = i18n.toNumber(stringNeedFormatting, { precision: 0 });\n return `${stringFormated}${stringEnd}`;\n};\n\nexport const formatNumberWithCommas = (num) => {\n return num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n};\n\nexport const removeUndefinedFieldFromDict = (data) => {\n let validData = {};\n if (data) {\n Object.keys(data).forEach((key) => {\n if (data[key] !== undefined && data[key] !== null) {\n validData[key] = data[key];\n }\n });\n }\n\n return validData;\n};\n\nexport const rewritePermission = (requires) => {\n if (typeof requires !== 'string') {\n return requires;\n }\n return requires?.indexOf('delete') === 0 || requires?.indexOf('add') === 0\n ? `change_${requires.split('_')[1]}`\n : requires;\n};\n\nexport const checkHasPermission = (user, requires = []) => {\n if (user?.isSuperuser) return true;\n\n const newRequires = rewritePermission(requires);\n if (user?.userPermissions.includes(newRequires) || !requires) return true;\n\n return false;\n};\n\nexport const ArrayStringData = (toSplitIntData) => {\n return toSplitIntData\n .split(',')\n .filter(function (ele) {\n return ele !== '';\n })\n .map((el) => {\n let number = Number(el);\n return number === 0 ? number : number || el;\n });\n};\n\nexport const emptyStringToNull = (input) => (input === '' ? null : input);\n\nexport const saveImage = (url) => {\n fetch(url, { cache: 'no-cache' })\n .then((res) => res.blob())\n .then((blob) => {\n saveAs(blob, getFileNameFromUrl(url));\n });\n};\n\nexport const getObjectTranslations = (object = {}) => {\n const translationEdge = object?.translations?.edges || [];\n const translation = {};\n translationEdge.forEach((item) => {\n const language = item.node.language;\n translation[language] = {\n ...item.node,\n };\n });\n return translation;\n};\n\nexport const getFormatedField = (fieldName, object) => {\n const translations = object.translations || {};\n const formatedField = {};\n Object.values(LanguageConfig).forEach((language) => {\n const sessionData = object[fieldName]?.[language];\n const translationData =\n language === LanguageConfig.english &&\n typeof object[fieldName] !== 'object'\n ? object[fieldName]\n : translations[language]?.[fieldName];\n formatedField[language] = sessionData || translationData;\n });\n return formatedField;\n};\n\nexport const fileUpload = async ({\n dispatch,\n imageData,\n imageType,\n afterAction,\n}) => {\n const uuid = uuidv4();\n dispatch({\n type: 'uploadFiles/uploadCroppedImage',\n payload: {\n croppedImage: {\n imageDataUrl: imageData,\n imageType: imageType,\n imageName: uuid,\n },\n afterAction: afterAction,\n },\n });\n};\n\nexport function readFile(file) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.addEventListener('load', () => resolve(reader.result), false);\n reader.readAsDataURL(file);\n });\n}\n","import React from 'react';\nimport { Button } from 'react-bootstrap';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { rewritePermission, checkHasPermission } from '../../utils';\n\nfunction AuthButton({\n title,\n action,\n requires,\n customClass,\n children,\n hidden,\n ...others\n}) {\n const dispatch = useDispatch();\n\n const { user } = useSelector((state) => ({\n user: state.users,\n }));\n\n const hasPermission = () => {\n if (!requires) {\n return true;\n }\n let newRequires = requires;\n if (!Array.isArray(requires)) {\n newRequires = [requires];\n }\n\n return (\n newRequires.filter((val) => checkHasPermission(user, val)).length > 0\n );\n };\n\n return (\n <>\n {hasPermission() && !hidden ? (\n children ? (\n \n {children}\n
\n \n {renderExtra && renderExtra()}\n \n {title}\n
\n ) : null}\n {description ? (\n {description}
\n ) : null}\n {otherBody ? (\n {otherBody()}
\n ) : null}\n {leftButton || rightButton ? (\n \n {getButton(leftButton, BUTTON_TYPES.secondary)}\n {getButton(rightButton, BUTTON_TYPES.main)}\n
\n ) : null}\n \n );\n };\n\n return (\n \n
\n );\n}\n\nexport default Loading;\n","export const ToastType = {\n save: 'Saved successfully.',\n discard: 'Changes discarded.',\n couponGenerate: 'Single Coupon generated',\n none: 'none',\n passwordConfirmation: `The two password fields didn't match.`,\n serverError: 'Server error, please refresh or try again later',\n networkError:\n 'The network broke down, please refreshing the page or try again later.',\n};\n\nexport default {\n namespace: 'navBars',\n state: {\n isOnCreateMode: true,\n saveDiscardToastShowing: {\n value: false,\n type: ToastType.none,\n },\n },\n\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n initState(state, { payload }) {\n return { ...state, ...payload };\n },\n clearState(state, { payload }) {\n return {\n isOnCreateMode: false,\n };\n },\n },\n};\n","import React from 'react';\nimport './NextStepItem.scss';\nimport { Image } from 'react-bootstrap';\nimport Right from '../../../assets/images/step_right_icon.svg';\nimport OneStepSuccess from '../../../assets/images/create_success_icon.svg';\n/**\n * stepNames: string array of steps name,\n * [\n * \"name of step\"\n * ]\n *\n * current: int, current step index in stepConfigs\n * @param {*} props\n */\nfunction NextStepItem(props) {\n const steps = props.stepNames || [];\n const current = steps.indexOf(props.current);\n const onlyOneStep = () => (\n {icon}
\n \n );\n };\n\n if (steps.length === 0) {\n return onlyOneStep();\n }\n\n const getTail = (index) => {\n if (index === steps.length - 1) {\n return null;\n }\n return (\n \n {steps.map((item, index) => {\n return (\n
\n );\n })}\n \n );\n}\n\nexport default NextStepItem;\n","import React, { useState, useEffect } from 'react';\nimport './NextStepPrompt.scss';\nimport { Modal } from 'react-bootstrap';\nimport PromptButton from './BaseButtons';\nimport { BUTTON_TYPES } from './BaseButtons';\nimport NextStepItem from './NextStepItem';\n\n/**\n * buttons: array of button, {\n * * {\n * text: \"close\",\n * action: () => {},\n * class: \"button-class\",\n * requires: PermissionCodes\n * }\n * steps={{\n stepNames: [\n 'Create store category',\n 'Create store',\n 'Create coupon campaign',\n 'Notify your Customer',\n ],\n current: 'Create store',\n }}\n * }\n * @param {*} props\n */\n\nfunction NextStepPrompt(props) {\n const steps = props.steps || {};\n const buttons = props.buttons || [];\n const parentShow = props.show;\n const title = props.title;\n const description = props.description;\n\n const stepNames = steps.stepNames;\n const current = steps.current;\n\n const [show, setShow] = useState(false);\n\n const buttonAction = (button) => {\n setShow(false);\n if (button?.action) {\n button.action();\n }\n };\n\n const getButton = (button, defaultType, extraClass) => {\n if (!button) {\n return null;\n }\n button.class = `${extraClass}`;\n return (\n \n {getTail(index)}\n \n \n {item}\n \n
\n {title}
: null}\n {description ? (\n {description}
\n ) : null}\n \n {buttons.map((button, index) =>\n getButton(\n button,\n index === 0 ? BUTTON_TYPES.main : BUTTON_TYPES.link,\n index === 0 ? 'next-step-first-button' : 'next-step-link-button',\n ),\n )}\n
\n \n );\n };\n\n return (\n \n \n \n \n
\n );\n };\n\n const getFunctionNameFromAction = (action) => {\n switch (action) {\n case 'POP':\n return 'goBack';\n case 'PUSH':\n return 'push';\n case 'REPLACE':\n return 'replace';\n default:\n return 'push';\n }\n };\n\n const navigateToNextLocation = () => {\n const action = nextLocation?.action;\n const location = nextLocation?.nextLocation || { pathname: '/' };\n const functionName = getFunctionNameFromAction(action);\n locationBlock.unblock();\n if (functionName === 'goBack') {\n setLocationBlock({ unblock: () => {} });\n history.goBack();\n } else {\n setLocationBlock({ unblock: () => {} });\n history[functionName](location);\n }\n };\n\n const onConfirm = () => {\n setShowPopup(false);\n locationBlock.unblock();\n navigateToNextLocation();\n };\n\n const onCancel = () => {\n setShowPopup(false);\n };\n\n const block = (nextLocation, action) => {\n console.log(\"@@94\", componentRef.current)\n if (!componentRef.current) {\n return true;\n }\n let result = hasFormChanged;\n if (!caution.model) {\n const sessionObject = getObjectFromSessionStorage(\n sessionDataKey.objectKey,\n );\n const sessionOrigional = getObjectFromSessionStorage(\n sessionDataKey.origionalData,\n );\n const origional = JSON.stringify(sessionOrigional).replace(/null/g, '');\n const object = JSON.stringify(sessionObject).replace(/null/g, '');\n const stepEnd = getObjectFromSessionStorage(sessionDataKey.stepEndKey);\n result = origional !== object && !stepEnd;\n console.log('@@104: ', origional !== object, !stepEnd);\n }\n\n if (!result && history.location.pathname.indexOf('edit') !== -1) {\n tempSave(false);\n }\n\n setShowPopup(result);\n setNextLocation({ nextLocation, action });\n return !result;\n };\n\n useEffect(() => {\n formChangedRef.current = hasFormChanged;\n setLocationBlock({ unblock: history.block(block) });\n saveToSessionStorage(sessionDataKey.stepEndKey, false);\n saveToSessionStorage(sessionDataKey.origionalData, null);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hasFormChanged]);\n\n useEffect(() => {\n return () => {\n locationBlock.unblock();\n componentRef.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n window.scrollTo(0, 0);\n }, [currentStep]);\n\n const refreshOrClose = () => {\n let result = formChangedRef.current;\n if (!caution.model) {\n const sessionObject = getObjectFromSessionStorage(\n sessionDataKey.objectKey,\n );\n const sessionOrigional = getObjectFromSessionStorage(\n sessionDataKey.origionalData,\n );\n const origional = JSON.stringify(sessionOrigional).replace(/null/g, '');\n const object = JSON.stringify(sessionObject).replace(/null/g, '');\n const stepEnd = getObjectFromSessionStorage(sessionDataKey.stepEndKey);\n result = origional !== object && !stepEnd;\n }\n if (result) {\n return `You have unsaved changes!`;\n }\n return;\n };\n useEffect(() => {\n window.onbeforeunload = refreshOrClose;\n return () => {\n window.onbeforeunload = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const unSavePrompt = () => {\n return (\n \n \n {breadcrumb}\n {getCaution()}\n
\n \n \n
\n ) : (\n content[currentStep]\n )}\n {bottom}\n {unSavePrompt()}\n {finishCreateFlowPop()}\n {continueCreatePop()}\n \n \n );\n}\n\nexport default ScrollableComponent;\n","import React from 'react';\nimport './ItemTypeSet.scss';\nimport { Image } from 'react-bootstrap';\nimport { useMainContentWidth, getScrollbarWidth } from '../../utils/ScreenUtil';\n\nexport const MIN_WIDTH = 200;\nexport const MAX_WIDTH = 300;\nexport const SPACE_BETWEEN = 30;\n\nfunction ItemTypeSet({ item, onClick, selected, moreThanThree = true, disabled = false, titleMoreThanOne = false }) {\n const mainContentWidth = useMainContentWidth();\n const fullContainerWith = mainContentWidth - 80 - 60 - getScrollbarWidth();\n let width = MIN_WIDTH;\n if (moreThanThree) {\n if (fullContainerWith >= (MAX_WIDTH + SPACE_BETWEEN) * 3) {\n width = MAX_WIDTH;\n } else if (fullContainerWith >= (MIN_WIDTH + SPACE_BETWEEN) * 3) {\n width = (fullContainerWith - SPACE_BETWEEN * 3) / 3;\n } else if (fullContainerWith >= (MIN_WIDTH + SPACE_BETWEEN) * 2) {\n width = (fullContainerWith - SPACE_BETWEEN * 2) / 2;\n } else {\n width = fullContainerWith;\n }\n }\n\n return (\n \n {\n setValue(e.target.value);\n getFilteredList(e.target.value, filterBtn);\n }}\n value={value}\n />\n
\n ) : null}\n {filterButtons && filterButtons.length > 0 ? (\n \n {filterButtons.map((button) => {\n return (\n {\n setFilterBtn(button);\n getFilteredList(value, button);\n }}\n >\n {button}\n \n );\n })}\n
\n ) : null}\n - \n {React.Children.toArray(children).filter((child) => {\n if (isImageField || showMultiLine) {\n return true;\n };\n return filteredList.includes(child.props.children);\n })}\n
\n
\n )\n }\n if (showMultiLine) {\n return (\n \n )\n }\n return null\n};\n\nfunction FilterableDropdown(props) {\n const isImageField = props?.isImageField || false;\n const showMultiLine = props?.showMultiLine || false;\n const needFilter = props.needFilter === undefined ? true : props.needFilter;\n const filterButtons = props.filterButtons || [];\n const customClass = props.customClass;\n const onSelectChange = props.selectChange || (() => { });\n const onToggle = props.onToggle || (() => { });\n const filterableItemClassName = props.filterableItemClassName || '';\n // const options = props.options || [];\n const [options, setOptions] = useState(props.options);\n const [value, setValue] = useState(props.defaultValue?.label);\n const [imageFieldValue, setImageFieldValue] = useState(props.defaultValue?.value);\n const [isOpen, setIsOpen] = useState();\n const isPromptDropdown = props.isPromptDropdown || false;\n\n const filterAction = props.filterAction || (() => { });\n const loadMoreAction = props.loadMoreAction || (() => { });\n const [isLoadMore, setIsLoadMore] = useState(false);\n useEffect(() => {\n setValue(props.defaultValue?.label || props.defaultValue?.value?.label);\n setImageFieldValue(props.defaultValue?.value);\n }, [props.defaultValue]);\n useEffect(() => {\n setOptions(props.options);\n }, [props.options]);\n\n const dropDownPlaceholder = () => {\n if (!value) {\n return 'Please select';\n };\n if (isImageField) {\n return \n {title ? \n
\n \n );\n}\n\nexport function CustomNumberInput(props) {\n const { title, setValue, defaultValue, errorId, error, errorMessage, customInputClassName } = props;\n\n // useEffect(() => {\n // console.log('@@20: ', defaultValue);\n // setValue(defaultValue);\n // }, [defaultValue]);\n return (\n \n {title ? setValue(target.value)}\n className={`${customInputClassName ? customInputClassName : 'custom-number-input-long'} ${error ? 'error-field' : ''}`}\n value={defaultValue}\n // defaultValue={defaultValue}\n onFocus={() => { }}\n />\n {errorId ?
\n );\n}\n\nexport function CustomNumberInputWithUnit(props) {\n const {\n title,\n tips,\n setValue,\n defaultValue,\n unit,\n errorId,\n error,\n errorMessage,\n numberTitle,\n disabled,\n } = props;\n return (\n \n {title ?
\n );\n}\n\nexport function CustomNumberMutipleInputWithUnit(props) {\n const {\n setFirstValue,\n setSecondValue,\n setFirstFocus,\n setSecondFocus,\n firstDefaultValue,\n secondDefaultValue,\n numberTitle,\n } = props;\n return (\n \n {numberTitle ? (\n \n ) : null}\n setValue(target.value)}\n className={`custom-number-input-short ${error ? 'error-field' : ''}`}\n value={defaultValue}\n onFocus={() => { }}\n disabled={disabled}\n />\n \n
\n \n {numberTitle ? (\n \n ) : null}\n setFirstValue(target.value)}\n className=\"custom-number-input-short\"\n value={firstDefaultValue}\n onFocus={setFirstFocus}\n />\n \n setSecondValue(target.value)}\n className=\"custom-number-input-short\"\n value={secondDefaultValue}\n onFocus={setSecondFocus}\n />\n \n
\n );\n}\n\nexport function CustomNumberInputWithTips(props) {\n const {\n title,\n setValue,\n defaultValue,\n errorId,\n error,\n errorMessage,\n tips,\n } = props;\n\n return (\n \n {title ? setValue(target.value)}\n className=\"custom-number-input-long\"\n value={defaultValue}\n // defaultValue={defaultValue}\n onFocus={() => { }}\n />\n
\n );\n}\n","import React, { useState } from 'react';\nimport { Image } from 'react-bootstrap';\n\nimport { useSelector, useDispatch } from 'react-redux';\nimport './CustomTitleWithDropDown.scss';\nimport FilterableDropdown from '../base/FilterableDropdown';\nimport { createAction } from '../../utils';\nimport { CustomTitleLabel } from '../earning/CustomBaseComponments';\nimport ErrorFieldMessage from '../base/ErrorFieldMessage';\nimport AuthButton from '../base/AuthButton';\nimport DeleteIcon from '../../assets/images/deleteIcon.png';\n\nexport function CustomTitleWithDropDown(props) {\n const dispatch = useDispatch();\n\n const isImageField = props.isImageField || false;\n const showMultiLine = props.showMultiLine || false;\n const needFilter = props.needFilter;\n const defaultValue = props.defaultValue || null;\n const title = props.title;\n const titleTips = props.titleTips || \"\";\n const source = props.source || [];\n const listSource = props.listSource || false;\n const sourceShowId = props.sourceShowId || false;\n const extraTitleClass = props.extraTitleClass || '';\n const filterableItemClassName = props.filterableItemClassName || '';\n const setValue = props.setValue || (() => {});\n const errors = props.errors || [];\n const errorName = props.errorName || props.title?.toLowerCase();\n const errorMessage = props.errorMessage || `Please provide ${errorName}`;\n const disabled = props.disabled || false;\n const onFocus = props.onFocus || (() => {});\n const addButtonInfo = props.addButtonInfo || {};\n const defaultFilter = props.defaultFilter || {};\n\n const loadMoreAction = props.loadMoreAction;\n const localFilterAction = props.localFilterAction || (() => {});\n const filterAction = props.filterAction;\n\n const onSelectChange = (value) => {\n setValue(value);\n };\n // const options = source?.map((item) => {\n // return { value: item, label: item?.name };\n // });\n\n const options = source?.map((item) => {\n if (listSource){\n return { value: item, label: item };\n }\n if (sourceShowId) {\n return { value: item, label: `${item?.name} (ID: ${item?.pk})`}\n }\n return { value: item, label: item?.name };\n });\n\n const [currentPage, setCurrentPage] = useState(1);\n const [filterKey, setFilterKey] = useState('');\n\n const loadMore = () => {\n if (!loadMoreAction) {\n return;\n };\n const nextPage = currentPage + 1;\n\n dispatch(\n createAction(loadMoreAction)({\n page: nextPage,\n search: filterKey,\n searchKey: filterKey,\n isSelectorLoad: true,\n ...defaultFilter,\n }),\n );\n\n console.log(\"defaultFilter:\", defaultFilter)\n setCurrentPage(nextPage);\n };\n\n const filter = (search) => {\n if (!filterAction) {\n localFilterAction(search)\n return;\n };\n let nextPage = currentPage + 1;\n if (search !== filterKey) {\n nextPage = 1;\n }\n console.log('@@59: ', filterAction, search, defaultFilter);\n dispatch(\n createAction(filterAction)({\n page: nextPage,\n search: search,\n searchKey: search,\n isSelectorLoad: true,\n ...defaultFilter,\n }),\n );\n\n setCurrentPage(nextPage);\n setFilterKey(search);\n };\n\n return (\n \n {title ? (\n
\n );\n}\n\nexport function CustomTitleWithDropDownAndInput(props) {\n const dispatch = useDispatch();\n\n const { needFilter, customClass, unit, inputCustomClass } = props;\n const defaultValue = props.defaultValue || null;\n const defaultInputValue = props.defaultInputValue || null;\n const title = props.title;\n const source = props.source || [];\n const setValue = props.setValue || (() => {});\n const setInputValue = props.setInputValue || (() => {});\n const errors = props.errors || [];\n const disabled = props.disabled || false;\n const onFocus = props.onFocus || (() => {});\n const inputOnFocusChange = props.inputOnFocusChange || (() => {});\n\n const onSelectChange = (value) => {\n setValue(value);\n };\n const options = source?.map((item) => {\n return { value: item.pk, label: item?.name };\n });\n\n const isError = (field) => {\n return errors.includes(field);\n };\n\n return (\n \n \n
\n \n
\n );\n}\n","import React, { useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { createAction } from '../../../utils';\nimport { CustomTitleWithDropDown } from '../../customer/CustomTitleWithDropDown';\n\nfunction CouponSelectDropdown(props) {\n const dispatch = useDispatch();\n const title = props.title;\n const titleTips = props.titleTips || null;\n const defaultValue = props.defaultValue || null;\n const setValue = props.setValue || (() => {});\n const sourceShowId = props.sourceShowId || false;\n const addButtonInfo = props.addButtonInfo || {};\n\n const { couponTemplateList } = useSelector((state) => ({\n couponTemplateList: state.couponList.couponTemplateList,\n }));\n\n useEffect(() => {\n dispatch(\n createAction('couponList/getCurrentPageTemplateList')({\n isSelectorLoad: true,\n }),\n );\n }, [dispatch]);\n\n const onSelectChange = (value) => {\n setValue(value?.value);\n console.log('@@23: ', value);\n };\n return (\n \n setInputValue(target.value)}\n className={`custom-number-input-long ${inputCustomClass} ${\n isError(title.toLowerCase()) ? 'error-field' : ''\n }`}\n value={defaultInputValue}\n onFocus={inputOnFocusChange}\n />\n \n
\n \n {hasPermission(props.backRequires) ? backButton : null}\n {continueButton}\n {hasMoreThanTwoButtons ? (\n
\n );\n}\n\nfunction ContinueButton(props) {\n const continueAction = props.action || (() => {});\n return (\n \n {multipleButtons.map((item, index) => {\n return item; //TODO: add permission\n })}\n
\n ) : (\n \n {hasPermission(props.secondTempRequires) ? secondSaveTempButton : null}\n {hasPermission(props.tempRequires) ? saveTempButton : null}\n {hasPermission(props.saveRequires) ? saveButton : null}\n
\n )}\n \n
\n ) : (\n getFormatedSections(sections)\n );\n\n const sectionWithPreview = () => {\n return (\n <>\n {sectionContent}
\n ) : (\n sectionWithPreview()\n )}\n \n {campaignType === CampaignType.couponsCampaign ? (\n setShowCreateNewLinkPrompt(true)}\n />\n ) : (\n setShowCreateNewLinkPrompt(true)}\n />\n )}\n
\n \n \n {campaignTypeSelectArea()}\n {linkSet()}\n {showPrompt()}\n setShowCreateNewLinkPrompt(false)}\n rightButton={{\n text: promptconfig.button,\n action: () => {\n const pathname =\n campaignType === CampaignType.couponsCampaign\n ? '/coupons/create'\n : '/earns/create';\n history.push({\n pathname: pathname,\n state: { from: history.location, ...ContinueCreate },\n });\n },\n }}\n title={promptconfig.title}\n description={promptconfig.message}\n />\n
\n )}\n ,\n ];\n\n const continueAction = () =>\n dispatch({ type: 'createCampaign/stepChange', payload: { step: 0 } });\n\n return (\n <>\n \n
\n );\n}\n\nexport default BrandSelectDropdown;\n","import { LanguageConfig } from '../../../config/CustomEnums';\nimport { anchorElementWithId } from '../../../utils';\nexport const CampaignErrorHandleField = {\n generalName: {\n name: 'generalName',\n message: 'Please provide a campaign name.',\n },\n coverPhoto: {\n name: 'coverPhoto',\n message: 'Please provide a cover photo.',\n },\n squarePhoto: {\n name: 'squarePhoto',\n message: 'Please provide an square photo.',\n },\n shortDescription: {\n name: 'shortDescription',\n message: 'Please provide a short description.',\n },\n relatedBrand: {\n name: 'relatedBrand',\n message: 'Max select 2 brands',\n },\n campaignTag: {\n name: 'campaignTag',\n message: 'Please provide correct campaign tags.'\n },\n customerGroup: {\n name: 'customerGroup',\n message: 'Please provide a target customer group.',\n },\n segment: {\n name: 'customerGroup',\n message: 'Please provide a target segment.',\n },\n activeEndDate: {\n name: 'activeEndDate',\n message:\n 'The end date & time of a campaign cannot be on or before the start date and time.',\n },\n visibleEndDate: {\n name: 'visibleEndDate',\n message:\n 'The end date & time of a campaign cannot be on or before the start date and time.',\n },\n requiredPoints: {\n name: 'requiredPoints',\n message: 'Please provide a required points.',\n },\n requiredPointsWholeNumber: {\n name: 'requiredPointsWholeNumber',\n message: 'Required points should be a whole number.',\n },\n requiredPointsDiscountedRequired: {\n name: 'requiredPointsDiscountedRequired',\n message: 'Please provide a required points (discounted).',\n },\n requiredPointsDiscountedWholeNumber: {\n name: 'requiredPointsDiscountedWholeNumber',\n message: 'The discounted points should be a whole number.',\n },\n requiredPointsDiscountedAmount: {\n name: 'requiredPointsDiscountedAmount',\n message: 'The discounted points should be less than required points.',\n },\n discountStartEndDate: {\n name: 'discountStartEndDate',\n message:\n 'The end date & time of the discount period cannot be on or before the start date and time.',\n },\n discountStartEndDateWithin: {\n name: 'discountStartEndDateWithin',\n message:\n 'Please adjust the discount start date and end date within the campaign period.',\n },\n discountTargetedUser: {\n name: 'discountTargetedUser',\n message: 'Please provide the target user.',\n },\n discountTargetedUserGroup: {\n name: 'discountTargetedUserGroup',\n message: 'Please provide a target customer group or a target segment or both.',\n },\n couponDisplayPriority: {\n name: 'couponDisplayPriority',\n message: 'Minimum value is 1. The smaller value, the higher priority.',\n },\n adLink: {\n name: 'adLink',\n message: 'Please provide correct url.',\n },\n locationName: {\n name: 'locationName',\n message: 'Please provide the building name.',\n },\n locationLongitude: {\n name: 'locationLongitude',\n message: 'Please provide the longitude.',\n },\n locationLatitude: {\n name: 'locationLatitude',\n message: 'Please provide the latitude.',\n },\n locationLongitudeLimitBeforeDot: {\n name: 'locationLongitudeLimitBeforeDot',\n message: 'Please make sure the length before dot should not longer than 3.',\n },\n locationLatitudeLimitBeforeDot: {\n name: 'locationLatitudeLimitBeforeDot',\n message: 'Please make sure the length before dot should not longer than 3.',\n },\n locationLongitudeLimitAfterDot: {\n name: 'locationLongitudeLimitAfterDot',\n message: 'Please make sure the length after dot should not longer than 6.',\n },\n locationLatitudeLimitAfterDot: {\n name: 'locationLatitudeLimitAfterDot',\n message: 'Please make sure the length after dot should not longer than 6.',\n },\n locationRadius: {\n name: 'locationRadius',\n message: 'Please provide the radius.',\n },\n isShowError: (\n field,\n errors,\n language = LanguageConfig.english,\n ) => {\n const error =\n errors.indexOf(field) > -1 && language === LanguageConfig.english;\n return error;\n }\n};\n\nexport const firstError = (id, errors, language = LanguageConfig.english) => {\n const firstError = errors[0];\n const error = id?.includes(firstError) && language === LanguageConfig.english;\n if (error) {\n setTimeout(() => {\n anchorElementWithId(firstError);\n }, 100);\n }\n};\n\nexport const isShowError = (\n field,\n errors,\n language = LanguageConfig.english,\n) => {\n const error =\n errors.indexOf(field) > -1 && language === LanguageConfig.english;\n return error;\n};\n\nexport const isShowErrorGroup = (\n fields,\n errors,\n language = LanguageConfig.english,\n) => {\n return fields.find((field) => isShowError(field.name, errors, language));\n};\n","import React from 'react';\nimport 'codemirror/lib/codemirror.css';\nimport '@toast-ui/editor/dist/toastui-editor.css';\nimport { Editor } from '@toast-ui/react-editor';\nimport './CustomEditor.scss';\nimport { isLongScreen } from '../../utils/ScreenUtil';\nconst toolBars = [\n 'heading',\n 'bold',\n 'italic',\n 'quote',\n 'divider',\n 'ul',\n 'ol',\n 'link',\n 'htmlInline',\n 'redo',\n 'undo',\n];\n\nclass CustomEditor extends React.Component {\n constructor(props) {\n super(props);\n this.editorRef = React.createRef();\n this.initialValue = props.initialValue;\n // this.resetValueAction = props.resetValueAction || (() => {});\n this.onValueChange = props.onValueChange || (() => { });\n this.errorMessage = props.errorMessage;\n this.onFocus = props.onFocus || (() => { });\n this.toolBars = props.toolBars || toolBars;\n this.state = {\n editorValue: props.initialValue,\n editorChangeValue: false,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (!prevProps.initialValue && this.props.initialValue && !this.state.editorChangeValue) {\n this.editorRef.current.getInstance().setMarkdown(this.props.initialValue);\n }\n // if (!prevProps?.resetValue && this.props?.resetValue) {\n // this.editorRef.current.getInstance().setMarkdown(this.props.initialValue);\n // this.resetValueAction();\n // }\n }\n\n render() {\n return (\n <>\n \n \n {labelText(label)}\n \n
\n );\n };\n return (\n <>\n \n {getLabel(titleTips, titleLabel)}\n titleFocus()}\n >\n {\n setTitleInput(target.value);\n setTitleLength(target.value?.length);\n titleValueChange(target.value);\n }}\n value={titleInput || ''}\n className={`custom-markdown-area-title-with-count-input ${\n titleError ? 'error-field' : ''\n } ${isLongScreen ? '' : 'custom-markdown-area-title-short'}`}\n maxLength={titleMaxLength}\n />\n {titleShowCount && titleMaxLength\n ? \n {`${titleLength} / ${titleMaxLength}`}\n \n : null\n }\n
\n \n {\n setFilterKey(e.target.value);\n\n if (filterAction) {\n filterAction(\n e.target.value,\n subFilterValue\n ? [\n `${subFilterKey}: \"${\n subFilterValue ? subFilterValue.value.pk : ''\n }\"`,\n ]\n : [],\n );\n } else {\n const filterList = getFilteredList(\n e.target.value,\n subFilterValue ? subFilterValue.name : '',\n );\n setFilteredOptions(filterList);\n }\n }}\n value={filterKey}\n />\n
\n );\n };\n\n const subFilterBar = () => {\n return (\n \n {subFilterItems.map((item) => {\n return (\n {\n const value =\n subFilterValue && subFilterValue.value.pk === item.value.pk\n ? ''\n : item;\n setSubFilterValue(value);\n\n if (filterAction) {\n filterAction(filterKey, [\n `${subFilterKey}: \"${value ? value.value.pk : ''}\"`,\n ]);\n } else {\n const filterList = getFilteredList(filterKey, value?.name);\n setFilteredOptions(filterList);\n }\n }}\n >\n {item.name}\n \n );\n })}\n
\n );\n };\n\n useEffect(() => {\n if (isReset) {\n setSelectedOption(defaultSelected);\n }\n }, [defaultSelected, isReset]);\n\n useEffect(() => {\n if (isFilterable) {\n setFilteredOptions(getFilteredList(filterKey, ''));\n } else {\n setFilteredOptions(options);\n }\n }, [options]);\n\n const selection_pointer_area_class = () => {\n if (isFilterable && subFilterValue) {\n return 'multiple-select-pointer-area-with-2filters';\n }\n\n if (isFilterable || subFilterValue) {\n return 'multiple-select-pointer-area-with-filter';\n }\n\n return 'multiple-select-pointer-area-without-filters';\n };\n\n return (\n <>\n {hideTitle ? null : (\n \n )}\n\n \n \n {isFilterable ? filterBar() : null}\n {subFilterKey ? subFilterBar() : null}\n {reminder()}\n {\n if (\n event.nativeEvent.target.scrollTop +\n event.nativeEvent.target.clientHeight ===\n event.nativeEvent.target.scrollHeight\n ) {\n // setOptions([\n // ...options,\n // { label: 'fake test', value: { pk: 'f01', name: 'fake test' } },\n // ]);\n // load more action\n loadMoreAction();\n setIsLoadMore(true);\n }\n }}\n >\n {selectAllOption()}\n {isFilterable\n ? filteredOptions.map((optionvalue, index) =>\n optionItem(optionvalue, index),\n )\n : groupKey\n ? Object.keys(groupBy(options, groupKey)).map((group) => {\n return (\n <>\n
\n \n {hideAddButton ? null : (\n \n {\n if (disabled) {\n return;\n }\n if (openedSections.includes(group)) {\n setOpenedSections(\n removeElementFromArray(openedSections, group),\n );\n } else {\n setOpenedSections([...openedSections, group]);\n }\n }}\n >\n {group}\n setOpenedSections(group)}\n > */}\n
\n\n {openedSections.includes(group)\n ? groupBy(options, groupKey)[group].map((data, index) =>\n optionItem(data, index, true),\n )\n : null}\n \n );\n })\n : options.map((optionvalue, index) =>\n optionItem(optionvalue, index),\n )}\n \n {title ? \n \n add()}\n src={sourceSelected?.length ? addOn : addOff}\n />\n\n remove()}\n />\n
\n \n\n \n \n {\n // setSelectStores(options);\n setAddResetSelected(false);\n setSourceSelected(options);\n\n onFocusFunc();\n // console.log('@@69: ', options);\n }}\n hideAddButton={true}\n hideTitle={true}\n isReset={addResetSelected}\n reminder={sourceReminderText}\n error={error.error}\n loadMoreAction={loadMore}\n filterPlaceHolder={filterPlaceHolder}\n isCustomerItem={isCustomerItem}\n filterAction={isSourceReminderLocalFilterable ? null : filter}\n groupKey={groupKey}\n disabled={disabled}\n />\n
\n \n {\n if (addButton.link) {\n history.push(addButton.link);\n }\n if (addButton.action) {\n addButton.action();\n }\n }}\n />\n
\n ) : null}\n \n {\n const currentTag = target.value.split(',');\n setStateTag(currentTag);\n }}\n className=\"custom-textarea-input-box custom-textarea-input-font \"\n onFocus={() => { }}\n value={stateTag?.join(',')}\n />\n
\n {tagTitle}
\n \n {tagDescription}\n
\n \n {tagSecondDescription}\n
\n : null\n }\n \n {stateTag?.map((element, index) => {\n if (!element?.length) {\n return null;\n };\n return (\n
\n \n )\n};\n\nexport default CustomTagSection;\n","import React, { useEffect, useState } from 'react';\nimport './CustomInputWithMaxLength.scss';\nimport ErrorFieldMessage from './ErrorFieldMessage';\nimport { isLongScreen } from '../../utils/ScreenUtil';\n\nfunction CustomInputWithMaxLength({\n sectionTitle,\n value,\n valueChange,\n placeholder,\n customInputContainerClassName,\n maxLength,\n showCount,\n tips,\n error,\n errorMessage,\n errorId,\n}) {\n const [valueInput, setValueInput] = useState();\n const [valueLength, setValueLength] = useState(value?.length || 0);\n\n useEffect(() => {\n setValueInput(value);\n setValueLength(value?.length || 0);\n }, [value]);\n\n return (\n <>\n \n \n {\n setStateTag(removeElementFromArray(stateTag, element));\n }}\n >\n
\n );\n })}\n \n
\n {/* \n
*/}\n \n )}\n \n
\n \n {this.getDefaultImages()?.map((item, index) => {\n const { type, value } = item;\n let src = '';\n if (type === IMAGE_TYPES.TYPE_URL) {\n src = value;\n } else if (type === IMAGE_TYPES.TYPE_UPLOADING) {\n if (value in this.uploadingImagesMap) {\n src = this.uploadingImagesMap[value];\n }\n }\n return (\n
\n );\n })}\n \n this.deleteImageBtnClicked(index)}\n />\n
\n \n {\n const uuid = item.oldValue;\n if (uuid && uuid in this.uploadingImagesMap) {\n delete this.uploadingImagesMap[uuid];\n this.props.dispatch({\n type: 'uploadFiles/finishUploadImages',\n payload: {\n uuid,\n },\n });\n }\n }}\n />\n
\n {type === IMAGE_TYPES.TYPE_UPLOADING ||\n type === IMAGE_TYPES.TYPE_UPLOADED ? (\n \n this.props.uploadImageClicked()}\n >\n {this.uploadImage[this.props.language]}\n \n
\n \n {this.state.errorMessage || this.props.errorMessage}\n
\n\n \n {language !== LanguageConfig.english ? (\n i18n.t(radioText, { locale: language })\n ) : (\n {\n console.log(\"@@220\", value)\n updateCampaignState({\n displayInDiscover: campaignType === CampaignType.couponsCampaign ? false : !value,\n displayInHome: value,\n isFeatured: false,\n isExclusive: false,\n })\n }}\n />\n )}\n
\n \n )\n}\n\nconst HomeSection = ({\n language,\n campaignType,\n displayInHome,\n homeSection,\n updateCampaignState,\n}) => {\n const radioOptions = getHomeSectionRadioOptions(language);\n const defaultSection =\n homeSection === CampaignHomeSection.redeemSection.value\n ? CampaignHomeSection.redeemSection.value\n : CampaignHomeSection.earnSection.value;\n\n const radioText = radioOptions.filter((item) => item.value === defaultSection)[0].label;\n\n return (\n <>\n \n \n \n {language !== LanguageConfig.english ? (\n radioText\n ) : (\n {\n console.log(\"@@change home section\", value)\n updateCampaignState({\n homeSection: value,\n })\n }}\n default={defaultSection}\n options={radioOptions}\n />\n )}\n
\n
\n \n \n \n {language !== LanguageConfig.english ? (\n getRadioText()\n ) : (\n {\n console.log(\"@@275\", value)\n updateCampaignState({\n isFeatured: value === CampaignLabel.isFeatured,\n isExclusive: value === CampaignLabel.isExclusive,\n })\n }}\n default={getDefaultLabel()}\n options={showExclusive ? exclusiveOptions : featuredOptions}\n />\n )}\n
\n
\n \n \n \n {language !== LanguageConfig.english ? (\n getRadioText()\n ) : (\n {\n console.log(\"@@281\", value)\n updateCampaignState({\n isSponsored: value === CampaignSponsoredLabel.isSponsored,\n isSupported: value === CampaignSponsoredLabel.isSupported,\n })\n }}\n default={getDefaultLabel()}\n options={radioOptions}\n />\n )}\n
\n
\n )\n}\n\nfunction KeyVisualSection(props) {\n const focusChange = props.focusChange;\n const language = props.language;\n const onSubmit = props.onSubmit;\n const onSubmitAction = props.onSubmitAction || (() => { });\n const {\n campaignType,\n coverPhoto,\n squareCoverPhoto,\n detailPhotoTwo,\n detailPhotoOne,\n detailPhotoThree,\n detailPhotoFour,\n isExclusive,\n isFeatured,\n isSponsored,\n isSupported,\n displayInDiscover,\n displayInHome,\n homeSection,\n errorFields,\n } = useSelector((state) => ({\n campaignType: state.createCampaign.campaign.campaignType,\n coverPhoto: state.createCampaign.campaign.translations[language].coverPhoto,\n squareCoverPhoto:\n state.createCampaign.campaign.translations[language].squareCoverPhoto,\n detailPhotoOne:\n state.createCampaign.campaign.translations[language].detailPhotoOne,\n detailPhotoTwo:\n state.createCampaign.campaign.translations[language].detailPhotoTwo,\n detailPhotoThree:\n state.createCampaign.campaign.translations[language].detailPhotoThree,\n detailPhotoFour:\n state.createCampaign.campaign.translations[language].detailPhotoFour,\n isExclusive: state.createCampaign.campaign.isExclusive,\n isFeatured: state.createCampaign.campaign.isFeatured,\n isSponsored: state.createCampaign.campaign.isSponsored,\n isSupported: state.createCampaign.campaign.isSupported,\n displayInDiscover: state.createCampaign.campaign.displayInDiscover,\n displayInHome: state.createCampaign.campaign.displayInHome,\n homeSection: state.createCampaign.campaign.homeSection,\n errorFields: state.createCampaign.errorFields,\n }));\n const defaultCoverPhoto = [coverPhoto].filter((coverPhoto) => coverPhoto);\n const defaultSquareCoverPhoto = [squareCoverPhoto].filter(\n (squareCoverPhoto) => squareCoverPhoto,\n );\n const defaultOtherPhotos = [\n detailPhotoOne,\n detailPhotoTwo,\n detailPhotoThree,\n detailPhotoFour,\n ].filter((item) => item);\n\n const [campaignCoverPhoto, setCoverPhoto] = useState(defaultCoverPhoto);\n const [campaignSquareCoverPhoto, setSquareCoverPhoto] = useState(\n defaultSquareCoverPhoto,\n );\n\n const [campaignOtherPhotos, setOtherPhotos] = useState(defaultOtherPhotos);\n const dispatch = useDispatch();\n\n const getImageUrl = (data) => {\n if (!data) {\n return '';\n }\n if (data.type !== IMAGE_TYPES.TYPE_URL) {\n return '';\n }\n return data.value;\n };\n useEffect(() => {\n if (onSubmit) {\n onSubmitAction({\n coverPhoto: getImageUrl(campaignCoverPhoto[0]),\n squareCoverPhoto: getImageUrl(campaignSquareCoverPhoto[0]),\n detailPhotoOne: getImageUrl(campaignOtherPhotos[0]),\n detailPhotoTwo: getImageUrl(campaignOtherPhotos[1]),\n detailPhotoThree: getImageUrl(campaignOtherPhotos[2]),\n detailPhotoFour: getImageUrl(campaignOtherPhotos[3]),\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [onSubmit]);\n\n useEffect(() => {\n firstError(\n `${CampaignErrorHandleField.coverPhoto.name}-${LanguageConfig.english}`,\n errorFields,\n language,\n );\n firstError(\n `${CampaignErrorHandleField.squarePhoto.name}-${LanguageConfig.english}`,\n errorFields,\n language,\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [errorFields]);\n\n const updateCampaignState = (payload) => {\n dispatch({\n type: 'createCampaign/updateCampaign',\n payload: payload,\n });\n };\n\n return (\n <>\n \n {language === LanguageConfig.english ? null : (\n \n )}\n\n \n \n \n
\n \n \n \n\n {\n dispatch({\n type: 'createCampaign/setFieldToSession',\n payload: {\n squareCoverPhoto: getImageUrl(newState[0]),\n language,\n },\n });\n setSquareCoverPhoto(newState);\n }}\n aspect={1 / 1}\n maxImageNum={1}\n language={language}\n photoSectionTitle={'square_photo'}\n uploadImageClicked={() => focusChange('squareCoverPhoto')}\n errorMessage={`${isShowError(\n CampaignErrorHandleField.squarePhoto.name,\n errorFields,\n language,\n )\n ? CampaignErrorHandleField.squarePhoto.message\n : ''\n }`}\n />\n
\n \n handleChange(date)}\n maxDate={maxDate}\n minDate={minDate}\n filterDate={filterDate}\n customInput={
\n );\n}\n\nexport default CustomDateTimeSelect;\n","import React, { useEffect } from 'react';\nimport CustomSwitchButton from '../../base/CustomSwitchButton';\nimport { Collapse } from 'react-bootstrap';\nimport CustomDateTimeSelect from '../../base/CustomDateTimeSelect';\nimport ErrorFieldMessage from '../../base/ErrorFieldMessage';\nimport { isShowError, firstError } from './CreateCampaignHandleError';\n\nfunction PeriodSection(props) {\n const title = props.title;\n const titleDescription = props.titleDescription;\n const switchButtonTitle = props.switchButtonTitle;\n const isAlwaysPeriod = props.isAlwaysPeriod;\n const switchOnChange = props.switchOnChange || (() => {});\n const startDate = props.startDate;\n const startDateChange = props.startDateChange || (() => {});\n const endDate = props.endDate;\n const endDateChange = props.endDateChange || (() => {});\n const maxDate = props.maxDate;\n const minDate = props.minDate;\n const errorFields = props.errorFields;\n const fieldName = props.fieldName;\n const fieldErrorMessage = props.fieldErrorMessage;\n const disabled = props.disabled;\n const filterStartDate =\n props.filterStartDate ||\n ((date) => {\n return true;\n });\n\n const filterEndDate =\n props.filterEndDate ||\n ((date) => {\n return true;\n });\n const hideTime = props.hideTime || false;\n useEffect(() => {\n firstError(fieldName, errorFields);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [errorFields]);\n return (\n <>\n \n \n \n \n \n
\n \n {\n let value = target.value;\n if (value === '') {\n value = null;\n }\n valueChange(value);\n }}\n />\n \n
\n {fieldDescription ? (\n \n {numberInput({\n labelText: 'Required points (Discounted)',\n type: 'points',\n valueChange: (value) => {\n dispatch({\n type: 'createCampaign/setFieldToSession',\n payload: { discountRequiredPoints: value },\n });\n setDiscountRequiredPoints(value)\n },\n defaultValue: discountRequiredPointsDisplay,\n onError: isShowErrorGroup(\n [CampaignErrorHandleField.requiredPointsDiscountedRequired, CampaignErrorHandleField.requiredPointsDiscountedAmount, CampaignErrorHandleField.requiredPointsDiscountedWholeNumber],\n errorFields,\n ),\n })}\n\n
\n\n \n \n \n \n\n\n
\n \n \n \n {\n setTargetUser(value);\n }}\n default={targetUserDisplay}\n options={Object.entries(TARGET_USERS).map(([key, value]) => ({ label: value, value: value }))}\n />\n
\n
\n \n {getSelectorWithConfig(customerGroupConfig)}\n {getSelectorWithConfig(segmentConfig)}\n
\n \n {CategoryList.map((category, index) => translation(category, index))}\n
\n \n
\n ) : null}\n \n );\n };\n\n return (\n <>\n \n {profileField('Campaign type', campaignType)}\n {campaignType === CampaignType.couponsCampaign\n ? profileField('Link to coupon set', linkedCoupon?.name)\n : profileField('Link to earning rule set', linkedEarningRules?.name)}\n {\n linkedEarningRules?.type === EarningRuleType.qrCodeRecyclingExtraRewards\n ?\n <>\n {profileField('Building name - EN (Compulsory)', location?.name)}\n {profileField('Building name - TC (Compulsory)', location?.translations?.[LanguageConfig.traditionalChinese]?.name)}\n {profileField('Longitude', location?.longitude)}\n {profileField('Latitude', location?.latitude)}\n {profileField('Radius', location?.radius)}\n \n : null\n }\n {profileField('Campaign category', getListStrings(categories))}\n {profileField(\n 'Target customer groups',\n getListStrings(\n generalType === GENERAL_TYPE.customerGroup ? customerGroup : [],\n ),\n )}\n {profileField(\n 'Segments',\n getListStrings(generalType === GENERAL_TYPE.segment ? segments : []),\n )}\n {profileField(\n 'Active period',\n getReadablePeriod(activeStartDate, activeEndDate, isAlwaysActivePeriod),\n )}\n {profileField(\n 'Visible period',\n getReadablePeriod(\n visibleStartDate,\n visibleEndDate,\n isAlwaysVisiblePeriod,\n ),\n )}\n {profileField(\n 'Related brand',\n linkedBrands?.map((item) => item.name).join(', '),\n )}\n {campaignType === CampaignType.couponsCampaign ? (\n <>\n {profileField(\n 'Overall limit',\n overallLimit === null ? '-' : `${overallLimit} number of coupons`,\n displayOverLimit,\n )}\n {profileField(\n 'Per head limit',\n perHeadLimit === null ? '-' : `${perHeadLimit} number of coupons`,\n )}\n {profileField('Required points', `${requiredPoints} points`)}\n {profileField('Discount', discount == true ? 'Available' : '-')}\n {discount == true &&\n <>\n {profileField('Required points (Discounted)', `${discountRequiredPoints} points`)}\n {profileField('Discount start date', getCampaignPeriodDateTimeWithA(discountStartDate))}\n {profileField('Discount end date', getCampaignPeriodDateTimeWithA(discountEndDate))}\n {profileField('Target all users', discountTargetedUser == TARGET_USERS.all ? TARGET_USERS.all : '-')}\n {profileField('Target customer group', getListStrings(discountTargetedCustomerGroups))}\n {profileField('Target customer segment', getListStrings(discountTargetedCustomerSegments))}\n \n }\n \n ) : null}\n \n );\n}\n\nexport default ProfileSection;\n","import React from 'react';\nimport { Image, Table } from 'react-bootstrap';\nimport { useSelector } from 'react-redux';\nimport PerfectScrollbar from 'react-perfect-scrollbar';\nimport './ContentSection.scss';\nimport {\n LanguageConfig,\n LanguageTabTransLation,\n} from '../../../config/CustomEnums';\nconst fieldsLanguages = [\n LanguageConfig.english,\n LanguageConfig.traditionalChinese,\n LanguageConfig.simplifiedChinese,\n];\n\nconst detailPhotos = [\n 'detailPhotoOne',\n 'detailPhotoTwo',\n 'detailPhotoThree',\n 'detailPhotoFour',\n];\n\nfunction ContentSection(props) {\n const { translations } = useSelector((state) => ({\n translations: state.createCampaign.campaign.translations,\n }));\n const showdown = require('showdown');\n const converter = new showdown.Converter();\n converter.setOption('simpleLineBreaks', true);\n const fieldValueText = (value, index) => {\n return (\n \n {getDetailPhotosWithOneLanguage(language)}\n
\n \n
\n \n 0}\n type=\"checkbox\"\n onChange={(e) => {\n if (checkedStores.length === 0) {\n setCheckedStores([...stores]);\n } else {\n setCheckedStores([]);\n }\n }}\n id=\"select-all\"\n />\n\n \n
\n \n \n \n Sort by\n \n\n \n {\n setSortKey(SORT_KEYS.ID_ASC);\n }}\n >\n Ascending order according ID\n \n {\n setSortKey(SORT_KEYS.ID_DESC);\n }}\n >\n Descending order according ID\n \n {\n setSortKey(SORT_KEYS.NAME_ASC);\n }}\n >\n Store name A-Z\n \n {\n setSortKey(SORT_KEYS.NAME_DESC);\n }}\n >\n Store name Z-A\n \n \n \n {checkedStores.length === 0 ? null : (\n {\n if (tabIndex === 0) {\n setSelectedStores(\n selectedStores.filter(\n (store) =>\n !checkedStoreIds.includes(\n store.node.pk,\n ),\n ),\n );\n } else {\n setSelectedStores([\n ...selectedStores,\n ...checkedStores,\n ]);\n }\n setCheckedStores([]);\n }}\n />\n )}\n
\n \n {\n setSearchKey(target.value);\n }}\n type=\"text\"\n className=\"list-filter-search-field search-field-input\"\n placeholder=\"Search by name or ID\"\n />\n
\n \n \n {({ height, width }) => (\n {\n const { scrollTop, scrollLeft } = target;\n const { Grid: grid } = listRefs[\n tabIndex\n ].current;\n grid.handleScrollEvent({\n scrollTop,\n scrollLeft,\n });\n }}\n >\n {\n const store = stores[index].node;\n return (\n \n {\n const test = checkedStores.filter(\n (checkedStore) =>\n checkedStore.node.pk !== store.pk,\n );\n if (\n test.length === checkedStores.length\n ) {\n test.push(stores[index]);\n }\n setCheckedStores(test);\n }}\n />\n
\n );\n }}\n />\n \n )}\n \n \n \n )}\n \n
\n \n {store.name}\n
\n \n ID: {store.pk}\n
\n \n {i18n.t('yes', { locale: this.props.language })}\n
\n );\n } else {\n return (\n \n {i18n.t('no', { locale: this.props.language })}\n
\n );\n }\n\n default:\n break;\n }\n };\n\n shouldUseStaffCodeView = () => {\n switch (this.props.language) {\n case LanguageConfig.english:\n return (\n \n {i18n.t('yes', { locale: this.props.language })}\n
\n );\n } else {\n return (\n \n {i18n.t('no', { locale: this.props.language })}\n
\n );\n }\n\n default:\n break;\n }\n };\n\n parseStoreList = (storeList) => {\n return storeList?.map((store) => {\n if (\n this.props.language !== LanguageConfig.english &&\n store.storeTranslations[this.props.language]\n ) {\n return {\n name: store.storeTranslations[this.props.language].storeName,\n value: store.storePK,\n };\n }\n return {\n name: store.storeName,\n value: store.storePK,\n };\n });\n };\n\n selectedStoreOnChange = (options) => {\n this.props.inputChange('selectedStores');\n const selectedStoreList = [];\n options.forEach((store) => {\n const selected = this.props.selectedBrand?.brandStores.filter(\n (item) => item.storePK === store.value,\n );\n if (selected) {\n selectedStoreList.push(...selected);\n }\n });\n if (selectedStoreList.length > 0) {\n this.setState({\n selectedStore: selectedStoreList,\n });\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n selectedStores: selectedStoreList,\n }),\n );\n } else {\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n selectedStores: this.props.selectedBrand?.brandStores,\n }),\n );\n this.setState({\n selectedStore: this.props.selectedBrand?.brandStores,\n });\n }\n };\n\n showStoreName = (store) => {\n if (\n this.language !== LanguageConfig.english &&\n store.storeTranslations &&\n store.storeTranslations[this.props.language]\n ) {\n return store.storeTranslations[this.props.language].storeName;\n }\n return store.storeName;\n };\n\n selectStoreView = () => {\n const hiddenState = this.storeListHiddenState();\n if (hiddenState === false) {\n switch (this.props.language) {\n case 'en':\n return (\n \n \n this.selectedStoreOnChange(options)\n }\n addAction={() => {\n this.setState({ createNewType: CREATE_NEW_TYPE.store });\n }}\n defaultSelected={\n this.props.location.pathname.includes('edit')\n ? this.parseStoreList(this.props.selectedStore)\n : this.parseStoreList(this.state.selectedStore)\n }\n addButtonExtraClass={'add-store-button-left-margin'}\n />\n
\n );\n case 'zh-Hant':\n case 'zh-Hans':\n if (this.props.selectedStore && this.props.selectedStore.length > 0) {\n return (\n \n {this.props.selectedStore.map((store) => {\n return (\n \n {this.showStoreName(store)}\n
\n );\n })}\n \n );\n } else {\n return -
;\n }\n default:\n break;\n }\n }\n };\n\n couponTemplateName = (e) => {\n let textContent = e.target.value;\n this.props.dispatch({\n type: 'createCoupon/setFieldToSession',\n payload: {\n name:\n textContent ||\n this.props.translations[this.props.language]?.name ||\n null,\n language: this.props.language,\n },\n });\n this.setState({\n generalName: textContent,\n });\n };\n\n createNewText = () => {\n return this.state?.createNewType === CREATE_NEW_TYPE.brand\n ? 'brand'\n : 'store';\n };\n\n render() {\n console.log(\"staffhandleChange:\", this.state.useStaffCode, (this.state.checked || this.props.shouldBeUsedInStores) && (this.state.useStaffCode || this.props.useStaffCode))\n const generalNameError = isShowError(\n CouponErrorFields.generalName.name,\n this.props.errorFields,\n this.props.language,\n );\n return (\n <>\n \n {i18n.t('general', { locale: this.props.language })}\n
\n \n
\n {/* \n
\n \n {i18n.t('name', { locale: this.props.language })}\n
\n \n this.props.inputChange('name')}\n onChange={this.couponTemplateName}\n defaultValue={this.props.translations[this.props.language]?.name}\n />\n
\n \n
*/}\n {this.selectBrandSectionView()}\n \n
\n\n \n\n
\n \n
\n {this.shouldShowInStoreView()}\n \n {this.state.checked || this.props.shouldBeUsedInStores ?\n \n {i18n.t('use_store_switch', { locale: this.props.language })}\n
\n \n
\n {this.shouldUseStaffCodeView()}\n : null\n }\n\n {this.props.language !== LanguageConfig.english &&\n this.props.shouldBeUsedInStores ? (\n \n {i18n.t('use_staff_code_switch', { locale: this.props.language })}\n
\n \n {i18n.t('applicable_stores', { locale: this.props.language })}\n
\n ) : null}\n {this.selectStoreView()}\n \n
\n );\n }\n}\n\nexport default CouponKeyVisual;\n","import React, { Component } from 'react';\nimport './CouponInstructionSection.scss';\nimport { connect } from 'react-redux';\nimport CustomMarkDownArea from '../../base/CustomMarkDownArea';\nimport i18n from '../../../I18n';\nimport { createAction } from '../../../utils';\n\n@connect(({ createCoupon }) => ({\n couponTranslation: createCoupon.couponTemplate.translations,\n}))\nclass CouponInstructionSection extends Component {\n constructor(props) {\n super(props);\n this.state = {\n instructionTitle:\n props.couponTranslation[props.language]?.instructionSectionTitle,\n instructionContent:\n props.couponTranslation[props.language]?.instructionSectionContent,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.couponTranslation !== this.props.couponTranslation) {\n this.setState({\n instructionTitle: this.props.couponTranslation[this.props.language]\n ?.instructionSectionTitle,\n instructionContent: this.props.couponTranslation[this.props.language]\n ?.instructionSectionContent,\n });\n }\n\n if (this.props.onSubmit) {\n this.props.onSubmitAction({\n instructionSectionTitle: this.state.instructionTitle,\n instructionSectionContent: this.state.instructionContent,\n });\n }\n }\n\n formChanged = () => {\n this.props.dispatch({\n type: 'createCoupon/updateState',\n payload: { formChanged: true },\n });\n };\n\n render() {\n return (\n \n {i18n.t('key_visual', { locale: this.props.language })}\n
\n \n {\n this.props.dispatch({\n type: 'createCoupon/setFieldToSession',\n payload: {\n coverPhoto: newState?.[0],\n language: this.props.language,\n },\n });\n\n this.setState({ coverPhoto: newState?.[0] });\n if (\n this.props.language === LanguageConfig.english &&\n this.props.errorFields.includes(\n CouponErrorFields.coverPhotoEmpty.name,\n )\n ) {\n let currentErrorFields = this.props.errorFields;\n const index = this.props.errorFields.indexOf(\n CouponErrorFields.coverPhotoEmpty.name,\n );\n currentErrorFields.splice(index, 1);\n this.props.dispatch(\n createAction('createCoupon/updateState')({\n errorFields: currentErrorFields,\n }),\n );\n }\n this.props.dispatch(\n createAction('createCoupon/updateTranslation')({\n language: this.props.language,\n changedStates: { coverPhoto: newState?.[0] },\n }),\n );\n }}\n aspect={3 / 2}\n maxImageNum={1}\n language={this.props.language}\n photoSectionTitle={'coupon_cover_photo'}\n uploadImageClicked={() => this.props.inputChange('coverPhoto')}\n errorMessage={\n coverPhotoError ? CouponErrorFields.coverPhotoEmpty.message : ''\n }\n />\n
\n \n {i18n.t('cover_photo', { locale: this.props.language })}\n
\n \n {i18n.t('cover_photo_suggest', { locale: this.props.language })}\n
\n \n {\n this.props.dispatch({\n type: 'createCoupon/setFieldToSession',\n payload: {\n otherPhoto: newState,\n language: this.props.language,\n },\n });\n this.setState({ otherPhotos: newState });\n this.props.dispatch(\n createAction('createCoupon/updateTranslation')({\n language: this.props.language,\n changedStates: { otherPhoto: newState },\n }),\n );\n }}\n aspect={3 / 2}\n maxImageNum={4}\n language={this.props.language}\n photoSectionTitle={'coupon_other_photo'}\n uploadImageClicked={() => this.props.inputChange('otherPhotos')}\n errorMessage=\"\"\n />\n
\n \n {i18n.t('other_photos', { locale: this.props.language })}\n
\n \n {i18n.t('cover_photo_suggest', { locale: this.props.language })}\n
\n \n {\n this.setState({\n continueBtnClicked: true,\n });\n }}\n />\n
\n );\n }\n}\n\nexport default CreateCouponStepOne;\n","import { BaseHelper } from './BaseGraphQLAPIHelper';\n\nexport const getCouponTemplateList = (afterCursor, search) => {\n let order = '-pk';\n if (search.rank === false || search.rank === 'false') {\n order = 'pk';\n }\n\n let searchString = `, orderBy: \"${order}\"`;\n if (search?.sort) {\n searchString = `, orderBy: \"${search?.sort}\"`;\n }\n if (search.all) {\n searchString += `,`;\n } else {\n searchString += `, first: 20,`;\n }\n if (search.out_of_stock) {\n searchString += `, outOfStock: ${search.out_of_stock}`;\n }\n if (search.status) {\n searchString += `, isActive: ${search.status}`;\n }\n if (search.expired) {\n searchString += `, isExpired: ${search.expired}`;\n }\n if (search.expired_date) {\n switch (search.expired_date) {\n case 'absolute':\n if (search.absolute) {\n const expiredDateRange = search.absolute.split(',');\n searchString += `, absoluteGte: \"${expiredDateRange[0]}\", absoluteLte: \"${expiredDateRange[1]}\"`;\n }\n break;\n case 'relativeDay':\n if (search.relativeDay) {\n searchString += `, relativeDay: ${search.relativeDay}`;\n }\n break;\n default:\n searchString += `, allTime: true`;\n break;\n }\n }\n\n if (search.search || search.searchKey || search.filterName) {\n searchString += `, nameIcontains: \"${\n search.search || search.searchKey || search.filterName\n }\"`;\n }\n\n const query = `{\n couponTemplates(after: \"${afterCursor}\"${searchString}) {\n totalCount\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n edges {\n cursor\n node {\n id\n pk\n name\n shouldUseInStore\n useStaffCode\n isForcedInactive\n instructionSectionTitle\n instructionSectionContent\n detailSectionTitle\n detailSectionContent\n coverPhoto\n detailPhoto1\n detailPhoto2\n detailPhoto3\n detailPhoto4\n lastModifiedDate\n creationDate\n linkedCampaignsName\n absoluteEffectiveDate\n absoluteExpiryDate\n status\n stock\n totalNubmerOfGeneratedCoupons\n validPeriodType\n numberOfDaysToExpireAfterAcquisition\n formats\n }\n }\n }\n }\n `;\n const variables = {\n input: {},\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const getCouponSet = (couponSetID) => {\n const query = `{\n couponTemplate(id: \"${couponSetID}\") {\n id\n pk\n name\n lastModifiedDate\n creationDate\n instructionSectionTitle\n instructionSectionContent\n detailSectionTitle\n detailSectionContent\n validPeriodType\n absoluteEffectiveDate\n absoluteExpiryDate\n numberOfDaysToExpireAfterAcquisition\n isForcedInactive\n translations {\n edges {\n node {\n language\n name\n id\n pk\n instructionSectionTitle\n instructionSectionContent\n detailSectionTitle\n detailSectionContent\n coverPhoto\n detailPhoto1\n detailPhoto2\n detailPhoto3\n detailPhoto4\n }\n }\n }\n brand {\n id\n name\n pk\n translations {\n edges {\n node {\n language\n name\n description\n id\n }\n }\n }\n stores {\n edges {\n node {\n id\n pk\n name\n address\n description\n translations {\n edges {\n node {\n language\n name\n address\n description\n }\n }\n }\n }\n }\n }\n }\n applicableStores {\n edges {\n node {\n id\n pk\n name\n address\n description\n translations {\n edges {\n node {\n language\n name\n address\n description\n }\n }\n }\n }\n }\n }\n shouldUseInStore\n useStaffCode\n # applicableStores\n coverPhoto\n detailPhoto1\n detailPhoto2\n detailPhoto3\n detailPhoto4\n # computed fields\n totalNubmerOfGeneratedCoupons\n stock\n linkedCampaignsName\n status\n formats\n }\n }`;\n const variables = {};\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const createCouponTemplate = (couponTemplateInfo) => {\n const query = `mutation CreateCouponTemplate($input: CreateCouponTemplateInput!) {\n createCouponTemplate(input: $input) {\n node {\n id\n pk\n name\n coverPhoto\n }\n errors {\n field\n messages\n }\n }\n }`;\n const variables = {\n input: {\n name: 'campaign',\n ...couponTemplateInfo,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const generateCoupon = (payload) => {\n const query = `mutation GenerateCoupons($input: GenerateCouponsInput!) {\n generateCoupons(input: $input) {\n success\n }\n }`;\n const variables = {\n input: {\n ...payload,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const getSingleCouponListWithTemplate = (\n templateID,\n afterCursor = null,\n rank = null,\n filterKey = null,\n) => {\n let order = '-pk';\n if (rank === false || rank === 'false') {\n order = 'pk';\n }\n const query = `{\n couponTemplate(id: \"${templateID}\") {\n coupons(first: 20, orderBy: \"${order}\", after: \"${afterCursor}\", serialNumberIcontains: \"${\n filterKey || ''\n }\") {\n totalCount\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n edges {\n node {\n id\n pk\n serialNumber\n creationDate\n lastModifiedDate\n dateOfPurchase\n dateOfEarning\n dateOfGrant\n isUsed\n isExpired\n isActive\n isForcedInactive\n effectiveDate\n expiryDate\n owner {\n id\n pk\n firstName\n lastName\n }\n store {\n id\n pk\n name\n staffCode\n }\n image\n }\n }\n }\n }\n }`;\n const variables = {\n input: {},\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const getAllSingleCouponWithTemplate = (templateID) => {\n const query = `{\n couponTemplate(id: \"${templateID}\") {\n coupons {\n totalCount\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n edges {\n cursor\n node {\n id\n pk\n dateOfGrant\n serialNumber\n }\n }\n }\n }\n }`;\n const variables = {};\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const getSingleCoupon = (id) => {\n const query = `\n {\n coupon(id: \"${id}\") {\n id\n pk\n template {\n name\n formats\n }\n isForcedInactive\n store {\n name\n }\n owner {\n firstName\n lastName\n }\n dateOfPurchase\n dateOfEarning\n dateOfGrant\n serialNumber\n isUsed\n isExpired\n isActive\n effectiveDate\n expiryDate\n image\n creationDate\n }\n }`;\n const variables = {};\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const deactiveCoupons = (ids) => {\n const query = `\n mutation DeactivateCoupons($input: DeactivateCouponsInput!) {\n deactivateCoupons(input: $input) {\n success\n }\n }`;\n const variables = {\n input: {\n ids,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const deleteSingleCoupon = (couponPK) => {\n const query = `\n mutation DeleteCoupon($input: DeleteCouponInput!) {\n deleteCoupon(input: $input) {\n success\n }\n }`;\n const variables = {\n input: {\n id: couponPK,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const deleteSingleCoupons = (ids) => {\n const query = `\n mutation DeleteCoupons($input: DeleteCouponsInput!) {\n deleteCoupons(input: $input) {\n success\n }\n }`;\n const variables = {\n input: {\n ids: ids,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const deactiveSingleCoupon = (couponPK) => {\n const query = `\n mutation DeactivateCoupon($input: DeactivateCouponInput!) {\n deactivateCoupon(input: $input) {\n node {\n id\n template {\n name\n }\n }\n }\n }`;\n const variables = {\n input: {\n id: couponPK,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const activeSingleCoupon = (couponPK) => {\n const query = `\n mutation ActivateCoupon($input: ActivateCouponInput!) {\n activateCoupon(input: $input) {\n node {\n id\n template {\n name\n }\n }\n }\n }`;\n const variables = {\n input: {\n id: couponPK,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const activeCoupons = (ids) => {\n const query = `\n mutation ActivateCoupons($input: ActivateCouponsInput!) {\n activateCoupons(input: $input) {\n success\n }\n }`;\n const variables = {\n input: {\n ids: ids,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const grantCoupon = (couponPK, customerPK) => {\n const query = `mutation GrantCoupon($input: GrantCouponInput!) {\n grantCoupon(input: $input) {\n node {\n id\n pk\n isForcedInactive\n owner {\n firstName\n lastName\n }\n dateOfPurchase\n dateOfEarning\n dateOfGrant\n serialNumber\n isUsed\n isExpired\n isActive\n effectiveDate\n expiryDate\n }\n }\n }`;\n const variables = {\n input: {\n id: couponPK,\n customer: customerPK,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const reclaimCoupon = (id) => {\n const query = `\n mutation ReclaimCoupon($input: ReclaimCouponInput!) {\n reclaimCoupon(input: $input) {\n node {\n id\n pk\n template {\n name\n }\n isForcedInactive\n store {\n name\n }\n owner {\n firstName\n lastName\n }\n dateOfPurchase\n dateOfEarning\n dateOfGrant\n serialNumber\n isUsed\n isExpired\n isActive\n effectiveDate\n expiryDate\n }\n }\n }`;\n const variables = {\n input: {\n id,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const deleteCouponSet = (couponSetPK) => {\n const query = `\n mutation DeleteCouponTemplate($input: DeleteCouponTemplateInput!) {\n deleteCouponTemplate(input: $input) {\n success\n }\n }`;\n const variables = {\n input: {\n id: couponSetPK,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const deleteCouponSets = (ids) => {\n const query = `\n mutation DeleteCouponTemplates($input: DeleteCouponTemplatesInput!) {\n deleteCouponTemplates(input: $input) {\n success\n }\n }`;\n const variables = {\n input: {\n ids,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const updateCouponSetActiveStatus = (\n couponSetPK,\n isForcedInactive = false,\n) => {\n const query = `\n mutation UpdateCouponTemplate($input: UpdateCouponTemplateInput!) {\n updateCouponTemplate(input: $input) {\n node {\n id\n name\n }\n errors {\n field\n messages\n }\n }\n }`;\n const variables = {\n input: {\n id: couponSetPK,\n isForcedInactive: isForcedInactive,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const updateCouponSet = (couponSet) => {\n const query = `\n mutation UpdateCouponTemplate($input: UpdateCouponTemplateInput!) {\n updateCouponTemplate(input: $input) {\n node {\n id\n name\n }\n errors {\n field\n messages\n }\n }\n }`;\n const variables = {\n input: {\n ...couponSet,\n },\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const getAllCouponSet = (ssoUid) => {\n const query = `\n {\n coupons(customerSsoUid: \"${ssoUid}\", customerName: \"\", isExpired: false, isUsed: false orderBy: \"-pk\") {\n totalCount\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n edges {\n cursor\n node {\n id\n pk\n template {\n name\n }\n isForcedInactive\n store {\n name\n staffCode\n }\n owner {\n id\n pk\n firstName\n lastName\n }\n dateOfPurchase\n dateOfEarning\n dateOfGrant\n serialNumber\n isUsed\n isExpired\n isActive\n effectiveDate\n expiryDate\n }\n }\n }\n }\n\n `;\n\n const variables = {\n input: {},\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n","import { LanguageConfig, APIStatus } from '../config/CustomEnums';\nimport {\n createCouponTemplate,\n generateCoupon,\n updateCouponSet,\n} from '../services/CouponAPIHelper';\nimport {\n createAction,\n saveToSessionStorage,\n removeFromSessionStorage,\n getObjectFromSessionStorage,\n getFileNameFromUrl,\n} from '../utils';\nimport { ToastType } from './NavBarModel';\nimport { getCouponExpiryDate } from '../utils/TimeFormatUtil';\nimport { defaultStep, getNewStepConfig } from './StepBarUtil';\nimport { CouponErrorFields } from '../components/coupon/couponCreation/CouponHandleError';\nimport { apiWithResponseHandle } from './LoadingUtil';\nimport { IMAGE_TYPES } from './UploadFilesModel';\nexport const VALID_PERIOD_TYPE = {\n ALL_TIME: 'ALL_TIME',\n ABSOLUTE: 'ABSOLUTE',\n RELATIVE: 'RELATIVE',\n};\nconst stepNameList = ['Content', 'Properties'];\n\nexport const sessionDataKey = {\n objectKey: 'createCoupon',\n stepEndKey: 'createCouponStepEnd',\n origionalData: 'createCouponOriginalData',\n};\n\nfunction checkFields(data, coverPhoto) {\n const generalName = data[LanguageConfig.english].name;\n let errorFields = [];\n if (!generalName) {\n errorFields.push(CouponErrorFields.generalName.name);\n }\n if (\n !coverPhoto ||\n coverPhoto.length < 1 ||\n coverPhoto.type !== IMAGE_TYPES.TYPE_URL\n ) {\n errorFields.push(CouponErrorFields.coverPhotoEmpty.name);\n }\n return {\n invalid: errorFields.length > 0,\n errorFields,\n data: {\n translations: { ...data },\n },\n };\n}\n\nfunction parsePhotoUrlForAPI(image) {\n let imageUrl = image;\n if (image && image.value) {\n imageUrl = image.value;\n }\n // const imageUrlSplitList = imageUrl.split('/');\n // return imageUrlSplitList[imageUrlSplitList.length - 1];\n return getFileNameFromUrl(imageUrl);\n}\n\nfunction parseOtherPhotoForAPI(otherPhotos) {\n let detailPhotos = {};\n if (otherPhotos && otherPhotos.length > 0) {\n otherPhotos.forEach((image, index) => {\n const detailPhotoKey = 'detailPhoto' + (index + 1);\n detailPhotos[detailPhotoKey] = parsePhotoUrlForAPI(image);\n });\n }\n return detailPhotos;\n}\n\nfunction getCouponValideType(state) {\n if (state.isAllTime) {\n return VALID_PERIOD_TYPE.ALL_TIME;\n } else if (state.isAbsolute) {\n return VALID_PERIOD_TYPE.ABSOLUTE;\n } else if (state.isRelative) {\n return VALID_PERIOD_TYPE.RELATIVE;\n }\n}\n\nfunction paseConponSetInputBody(couponTemplate) {\n const validPeriodType =\n couponTemplate.validPeriodType || getCouponValideType(couponTemplate);\n const otherPhotos = parseOtherPhotoForAPI(\n couponTemplate.translations[LanguageConfig.english].otherPhoto,\n );\n let brandPK = null;\n if (couponTemplate.selectedBrand) {\n brandPK = couponTemplate.selectedBrand.pk;\n }\n let applicableStores = null;\n if (couponTemplate.selectedStores) {\n applicableStores = couponTemplate.selectedStores.map((store) => {\n return store.storePK;\n });\n }\n const inputBody = {\n name: couponTemplate.translations[LanguageConfig.english].name,\n instructionSectionTitle:\n couponTemplate.translations[LanguageConfig.english]\n .instructionSectionTitle,\n instructionSectionContent:\n couponTemplate.translations[LanguageConfig.english]\n .instructionSectionContent,\n detailSectionTitle:\n couponTemplate.translations[LanguageConfig.english].detailSectionTitle,\n detailSectionContent:\n couponTemplate.translations[LanguageConfig.english].detailSectionContent,\n validPeriodType: validPeriodType,\n coverPhoto: parsePhotoUrlForAPI(\n couponTemplate.translations[LanguageConfig.english].coverPhoto,\n ),\n formats: couponTemplate.formats,\n ...otherPhotos,\n };\n\n if (validPeriodType === VALID_PERIOD_TYPE.ABSOLUTE) {\n inputBody.absoluteEffectiveDate =\n couponTemplate.startDateTime || couponTemplate.absoluteEffectiveDate;\n inputBody.absoluteExpiryDate = couponTemplate.endDateTime\n ? getCouponExpiryDate(couponTemplate.endDateTime)\n : couponTemplate.absoluteExpiryDate;\n } else if (validPeriodType === VALID_PERIOD_TYPE.RELATIVE) {\n inputBody.numberOfDaysToExpireAfterAcquisition =\n couponTemplate.numberOfDaysToExpireAfterAcquisition;\n }\n if (brandPK) {\n inputBody.brand = brandPK;\n inputBody.shouldUseInStore = couponTemplate.shouldBeUsedInStores;\n inputBody.useStaffCode = couponTemplate.useStaffCode\n if (applicableStores) {\n inputBody.applicableStores = applicableStores;\n }\n }\n return inputBody;\n}\n\nfunction parseCouponSetTranslation(\n couponTemplatePK,\n currentLanguageContent,\n language,\n) {\n let otherPhotos = [];\n if (currentLanguageContent.otherPhoto) {\n otherPhotos = parseOtherPhotoForAPI(currentLanguageContent.otherPhoto);\n }\n\n const inputBody = {\n // source: couponTemplatePK,\n language: language,\n name: currentLanguageContent.name ? currentLanguageContent.name : null,\n coverPhoto: currentLanguageContent.coverPhoto\n ? parsePhotoUrlForAPI(currentLanguageContent.coverPhoto)\n : null,\n instructionSectionTitle: currentLanguageContent.instructionSectionTitle,\n instructionSectionContent: currentLanguageContent.instructionSectionContent,\n detailSectionTitle: currentLanguageContent.detailSectionTitle,\n detailSectionContent: currentLanguageContent.detailSectionContent,\n ...otherPhotos,\n };\n if (currentLanguageContent.pk) {\n inputBody['id'] = currentLanguageContent.pk;\n }\n\n return inputBody;\n}\n\nfunction getInitState() {\n return {\n couponTemplate: {\n selectedBrand: null,\n shouldBeUsedInStores: false,\n useStaffCode: false,\n selectedStores: null,\n isAllTime: true,\n isAbsolute: false,\n startDateTime: null,\n endDateTime: null,\n isRelative: false,\n numberOfDaysToExpireAfterAcquisition: null,\n generateCoupon: false,\n pk: null,\n id: null,\n translations: {\n [LanguageConfig.english]: {\n name: null,\n source: {\n id: null,\n },\n instructionSectionTitle: '',\n instructionSectionContent: '',\n detailSectionTitle: '',\n detailSectionContent: '',\n coverPhoto: null,\n otherPhoto: null,\n },\n [LanguageConfig.traditionalChinese]: {\n name: null,\n source: {\n id: null,\n },\n instructionSectionTitle: '',\n instructionSectionContent: '',\n detailSectionTitle: '',\n detailSectionContent: '',\n coverPhoto: null,\n otherPhoto: null,\n pk: null,\n id: null,\n },\n [LanguageConfig.simplifiedChinese]: {\n name: null,\n source: {\n id: null,\n },\n instructionSectionTitle: '',\n instructionSectionContent: '',\n detailSectionTitle: '',\n detailSectionContent: '',\n coverPhoto: null,\n otherPhoto: null,\n pk: null,\n id: null,\n },\n },\n },\n isSomeFieldError: false,\n stepConfig: defaultStep(stepNameList),\n currentStep: 0,\n previewImageStatus: 0,\n fromBack: false,\n errorFields: [],\n createCouponTemplateStatus: APIStatus.none,\n generateCouponStatus: APIStatus.none,\n couponQuantity: 0,\n couponGenerated: false,\n formChanged: false,\n };\n}\n\nexport default {\n namespace: 'createCoupon',\n state: getInitState(),\n\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n\n updateTranslation(state, { payload }) {\n const { language, changedStates } = payload;\n return {\n ...state,\n couponTemplate: {\n ...state.couponTemplate,\n translations: {\n ...state.couponTemplate.translations,\n [language]: {\n ...state.couponTemplate.translations[language],\n ...changedStates,\n },\n },\n },\n };\n },\n\n updateCouponTemplate(state, { payload }) {\n if (payload.absoluteEffectiveDate) {\n payload.startDateTime = payload.absoluteEffectiveDate;\n }\n if (payload.absoluteExpiryDate) {\n payload.endDateTime = payload.absoluteExpiryDate;\n }\n const coupon = {\n ...state.couponTemplate,\n ...payload,\n };\n if (!payload.notSaveToSession) {\n delete coupon.notSaveToSession;\n saveToSessionStorage(sessionDataKey.objectKey, coupon);\n }\n return {\n ...state,\n couponTemplate: coupon,\n };\n },\n\n updateCouponTemplateWithSetData(state, { payload }) {\n const { selectedStores } = payload;\n let shouldBeUsedInStores = state.couponTemplate.shouldBeUsedInStores;\n if (selectedStores && selectedStores.length > 0) {\n shouldBeUsedInStores = true;\n }\n const useStaffCode = state.couponTemplate.shouldBeUsedInStores && state.couponTemplate.useStaffCode\n const coupon = {\n ...state.couponTemplate,\n ...payload,\n shouldBeUsedInStores: shouldBeUsedInStores,\n useStaffCode,\n selectedStores: selectedStores,\n };\n if (!payload.notSaveToSession) {\n delete coupon.notSaveToSession;\n saveToSessionStorage(sessionDataKey.origionalData, coupon);\n saveToSessionStorage(sessionDataKey.objectKey, coupon);\n }\n return {\n ...state,\n couponTemplate: coupon,\n };\n },\n\n saveOrRemoveCouponFromCookie(state, { payload }) {\n if (!payload) {\n removeFromSessionStorage(sessionDataKey.objectKey);\n }\n saveToSessionStorage(sessionDataKey.stepEndKey, true);\n return {\n ...state,\n };\n },\n\n loadCouponFromCookie(state, { payload }) {\n const coupon = getObjectFromSessionStorage(sessionDataKey.objectKey);\n if (!coupon) {\n return {\n ...state,\n };\n }\n delete coupon.notSaveToSession;\n saveToSessionStorage(sessionDataKey.origionalData, coupon);\n saveToSessionStorage(sessionDataKey.objectKey, coupon);\n return {\n ...state,\n couponTemplate: {\n ...coupon,\n },\n };\n },\n\n stepChange(state, { payload }) {\n let { isBack, step, data } = payload;\n const coverPhoto =\n state.couponTemplate.translations[LanguageConfig.english].coverPhoto;\n const result = checkFields(data.translations, coverPhoto);\n const errorFields = result.errorFields;\n const stepConfig = getNewStepConfig(\n step,\n state.stepConfig,\n result.invalid,\n isBack,\n );\n if (!result.invalid) {\n if (isBack) {\n step = step - 1;\n } else {\n step = step + 1;\n }\n }\n return {\n ...state,\n currentStep: step,\n stepConfig,\n errorFields: errorFields,\n couponTemplate: {\n ...state.couponTemplate,\n ...result.data,\n translations: {\n [LanguageConfig.english]: {\n ...state.couponTemplate.translations[LanguageConfig.english],\n ...result.data.translations[LanguageConfig.english],\n },\n [LanguageConfig.simplifiedChinese]: {\n ...state.couponTemplate.translations[\n LanguageConfig.simplifiedChinese\n ],\n ...result.data.translations[LanguageConfig.simplifiedChinese],\n },\n [LanguageConfig.traditionalChinese]: {\n ...state.couponTemplate.translations[\n LanguageConfig.traditionalChinese\n ],\n ...result.data.translations[LanguageConfig.traditionalChinese],\n },\n },\n },\n };\n },\n\n clearState(state, { payload }) {\n return { ...getInitState() };\n },\n },\n\n effects: {\n *initCoupon({ payload }, { select }) {\n const oldCoupon = yield select(\n (state) => state.createCoupon.couponTemplate,\n );\n delete oldCoupon.notSaveToSession;\n saveToSessionStorage(sessionDataKey.origionalData, oldCoupon);\n },\n *setFieldToSession({ payload }, { select }) {\n const oldCoupon = yield select(\n (state) => state.createCoupon.couponTemplate,\n );\n const language = payload.language;\n let coupon = {};\n // console.log('@@408: ', payload);\n if (language) {\n delete payload.language;\n coupon = {\n ...oldCoupon,\n translations: {\n ...oldCoupon.translations,\n [language]: {\n ...oldCoupon.translations[language],\n ...payload,\n },\n },\n };\n } else {\n coupon = { ...oldCoupon, ...payload };\n }\n // console.log('@@424: ', coupon);\n delete coupon.notSaveToSession;\n saveToSessionStorage(sessionDataKey.objectKey, coupon);\n },\n createCouponTemplate: [\n function* ({ payload }, { all, select, put }) {\n yield put(\n createAction('updateState')({\n createCouponTemplateStatus: APIStatus.calling,\n }),\n );\n const couponTemplate = yield select(\n (state) => state.createCoupon.couponTemplate,\n );\n\n let inputBody = paseConponSetInputBody(couponTemplate);\n\n if (payload.isDuplicate) {\n if (\n couponTemplate.translations[LanguageConfig.simplifiedChinese] &&\n couponTemplate.translations[LanguageConfig.simplifiedChinese].pk\n ) {\n delete couponTemplate.translations[LanguageConfig.simplifiedChinese]\n .pk;\n }\n\n if (\n couponTemplate.translations[LanguageConfig.traditionalChinese] &&\n couponTemplate.translations[LanguageConfig.traditionalChinese].pk\n ) {\n delete couponTemplate.translations[\n LanguageConfig.traditionalChinese\n ].pk;\n }\n\n inputBody.name = `Copy of ${inputBody.name}`;\n }\n\n const data = {\n ...inputBody,\n translations: [\n couponTemplate.translations[LanguageConfig.simplifiedChinese]\n ? parseCouponSetTranslation(\n null,\n couponTemplate.translations[LanguageConfig.simplifiedChinese],\n LanguageConfig.simplifiedChinese,\n )\n : { language: LanguageConfig.simplifiedChinese },\n couponTemplate.translations[LanguageConfig.traditionalChinese]\n ? parseCouponSetTranslation(\n null,\n couponTemplate.translations[\n LanguageConfig.traditionalChinese\n ],\n LanguageConfig.traditionalChinese,\n )\n : { language: LanguageConfig.traditionalChinese },\n ],\n };\n\n const serviceArgs = [createCouponTemplate, data];\n saveToSessionStorage(sessionDataKey.stepEndKey, true);\n\n function* onFailed() {\n yield put(\n createAction('updateState')({\n createCouponTemplateStatus: APIStatus.failed,\n }),\n );\n yield put({ type: 'saveOrRemoveCouponFromCookie', payload: false });\n }\n\n function* onSuccess(data) {\n const couponTemplateInfo = data.createCouponTemplate.node;\n if (couponTemplateInfo) {\n yield put(\n createAction('updateCouponTemplate')({\n pk: couponTemplateInfo.pk,\n id: couponTemplateInfo.id,\n }),\n );\n\n yield put(\n createAction('updateState')({\n createCouponTemplateStatus: APIStatus.success,\n }),\n );\n }\n yield put({ type: 'saveOrRemoveCouponFromCookie', payload: false });\n\n if (payload.afterAction) {\n yield payload.afterAction();\n }\n }\n yield apiWithResponseHandle(serviceArgs, onSuccess, onFailed, onFailed);\n },\n { type: 'takeLatest' },\n ],\n\n generateCoupon: [\n function* ({ payload }, { call, select, put, all }) {\n const redirectAction = payload.redirectAction || (() => {});\n const { store, quantity } = payload;\n const { couponTemplate, couponQuantity } = yield select((state) => ({\n couponTemplate: state.createCoupon.couponTemplate.pk,\n couponQuantity: state.createCoupon.couponQuantity,\n }));\n yield put(\n createAction('updateState')({\n generateCouponStatus: APIStatus.calling,\n couponQuantity: (\n parseInt(quantity) + parseInt(couponQuantity)\n ).toLocaleString(),\n }),\n );\n\n const inputBody = {\n couponTemplate: couponTemplate,\n quantity: quantity,\n store: store,\n };\n const serviceArgs = [generateCoupon, inputBody];\n function* onFailed() {\n yield put(\n createAction('updateState')({\n generateCouponStatus: APIStatus.failed,\n }),\n );\n }\n function* onSuccess(data) {\n if (data.generateCoupons.success) {\n const couponTemplatePK = yield select(\n (state) => state.createCoupon.couponTemplate.pk,\n );\n yield all([\n put(\n createAction('updateState')({\n generateCouponStatus: APIStatus.success,\n couponGenerated: true,\n }),\n ),\n put({ type: 'saveOrRemoveCouponFromCookie', payload: false }),\n put({\n type: 'navBars/updateState',\n payload: {\n saveDiscardToastShowing: {\n value: true,\n type: ToastType.couponGenerate,\n },\n },\n }),\n redirectAction(couponTemplatePK),\n ]);\n saveToSessionStorage(sessionDataKey.stepEndKey, true);\n }\n }\n yield apiWithResponseHandle(serviceArgs, onSuccess, onFailed);\n },\n { type: 'takeLatest' },\n ],\n updateCouponTemplateInput: [\n function* ({ payload }, { call, put, select }) {\n yield put(\n createAction('updateState')({\n createCouponTemplateStatus: APIStatus.calling,\n }),\n );\n const isGenerater = payload.isGenerater;\n const couponTemplate = yield select(\n (state) => state.createCoupon.couponTemplate,\n );\n yield put({ type: 'saveOrRemoveCouponFromCookie', payload: false });\n const inputBody = paseConponSetInputBody(couponTemplate);\n inputBody.id = couponTemplate.pk;\n\n const serviceArgs = [\n updateCouponSet,\n {\n ...inputBody,\n translations: [\n couponTemplate.translations[LanguageConfig.simplifiedChinese]\n ? parseCouponSetTranslation(\n null,\n couponTemplate.translations[\n LanguageConfig.simplifiedChinese\n ],\n LanguageConfig.simplifiedChinese,\n )\n : {},\n couponTemplate.translations[LanguageConfig.traditionalChinese]\n ? parseCouponSetTranslation(\n null,\n couponTemplate.translations[\n LanguageConfig.traditionalChinese\n ],\n LanguageConfig.traditionalChinese,\n )\n : {},\n ],\n },\n ];\n saveToSessionStorage(sessionDataKey.stepEndKey, true);\n\n function* onFailed() {\n yield put(\n createAction('updateState')({\n createCouponTemplateStatus: APIStatus.failed,\n }),\n );\n }\n function* onSuccess(data) {\n yield put(\n createAction('couponList/getCurrentPageTemplateList')({\n rank: true,\n search: '',\n page: 1,\n }),\n );\n if (isGenerater) {\n yield put(\n createAction('createCoupon/updateCouponTemplate')({\n generateCoupon: true,\n }),\n );\n }\n yield put(\n createAction('updateState')({\n createCouponTemplateStatus: APIStatus.success,\n }),\n );\n removeFromSessionStorage(sessionDataKey.objectKey);\n }\n yield apiWithResponseHandle(serviceArgs, onSuccess, onFailed);\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","import React, { Component } from 'react';\nimport CustomRadios from '../../base/CustomRadios';\nimport { Row } from 'react-bootstrap';\nimport './CouponDateTimeSelector.scss';\nimport CustomDateTimeSelect from '../../base/CustomDateTimeSelect';\nimport { connect } from 'react-redux';\nimport { createAction } from '../../../utils';\nimport { VALID_PERIOD_TYPE } from '../../../models/CreateCouponModel';\nimport { isShowError } from '../../campaign/campaignCreation/CreateCampaignHandleError';\nimport { CouponErrorFields } from './CouponHandleError';\nimport { LanguageConfig } from '../../../config/CustomEnums';\nimport ErrorFieldMessage from '../../base/ErrorFieldMessage';\n\n@connect(({ createCoupon }) => ({\n couponTemplate: createCoupon.couponTemplate,\n errorFields: createCoupon.errorFields,\n}))\nclass CouponDateTimeSelector extends Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedDatetimeLabel:\n props.couponTemplate.validPeriodType || VALID_PERIOD_TYPE.ALL_TIME,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (\n prevProps.couponTemplate.validPeriodType !==\n this.props.couponTemplate.validPeriodType\n ) {\n this.setState({\n selectedDatetimeLabel: this.props.couponTemplate.validPeriodType,\n });\n }\n }\n\n couponDatetimeOptions = [\n { label: 'All the time', value: VALID_PERIOD_TYPE.ALL_TIME },\n { label: 'In a period', value: VALID_PERIOD_TYPE.ABSOLUTE },\n {\n label: 'Numbers of day since acquiring',\n value: VALID_PERIOD_TYPE.RELATIVE,\n },\n ];\n\n daySinceNowView = () => {\n const inputFieldError = isShowError(\n CouponErrorFields.relativeDay.name,\n this.props.errorFields,\n LanguageConfig.english,\n );\n return (\n \n \n
\n );\n };\n\n periodView = () => {\n let absoluteEffectiveDate = this.props.couponTemplate.absoluteEffectiveDate;\n if (this.props.startDateTime) {\n absoluteEffectiveDate = this.props.couponTemplate.startDateTime;\n }\n let absoluteExpiryDate = this.props.couponTemplate.absoluteExpiryDate;\n if (this.props.couponTemplate.endDateTime) {\n absoluteExpiryDate = this.props.couponTemplate.endDateTime;\n }\n return (\n \n {\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n numberOfDaysToExpireAfterAcquisition: e.target.value,\n }),\n );\n }}\n />\n \n
\n \n
\n );\n };\n\n radiosChanged = (value) => {\n switch (value) {\n case VALID_PERIOD_TYPE.ALL_TIME:\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n isAllTime: true,\n isAbsolute: false,\n isRelative: false,\n }),\n );\n break;\n case VALID_PERIOD_TYPE.ABSOLUTE:\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n isAbsolute: true,\n isAllTime: false,\n isRelative: false,\n }),\n );\n break;\n case VALID_PERIOD_TYPE.RELATIVE:\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n isAllTime: false,\n isAbsolute: false,\n isRelative: true,\n }),\n );\n break;\n default:\n break;\n }\n };\n\n render() {\n return (\n \n \n {\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n startDateTime: datetime,\n }),\n );\n }}\n />\n
\n \n \n {\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n endDateTime: datetime,\n }),\n );\n }}\n hideTime={true}\n />\n
\n \n \n \n {\n this.setState({ selectedDatetimeLabel: value });\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n validPeriodType: value,\n }),\n );\n this.radiosChanged(value);\n }}\n />\n
\n \n {this.daySinceNowView()}\n
\n \n {\n if (this.checkCouponDateValid()) {\n if (this.state.fromEdit) {\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplateInput')({\n isGenerater: false,\n }),\n );\n } else {\n this.props.dispatch(\n createAction('createCoupon/createCouponTemplate')({}),\n );\n }\n this.setState({ saveButtonClicked: true });\n }\n }}\n saveAction={() => {\n if (this.checkCouponDateValid()) {\n if (this.state.fromEdit) {\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplateInput')({\n isGenerater: true,\n }),\n );\n } else {\n this.props.dispatch(\n createAction('createCoupon/createCouponTemplate')({\n isGenerater: true,\n }),\n );\n }\n }\n }}\n backAction={() => {\n this.props.dispatch(\n createAction('createCoupon/stepChange')({\n data: this.props.couponTemplate,\n step: 1,\n isBack: true,\n }),\n );\n }}\n />\n
\n );\n }\n}\n\nexport default withRouter(CreateCouponStepTwo);\n","export const CouponURLQueryKeys = {\n searchKey: 'searchKey',\n rank: 'rank',\n page: 'page',\n};\n\nexport const CouponURLFragments = {\n overview: 'Overview',\n list: 'Single Coupons Generated'\n}","import React, { useState, useEffect } from 'react';\nimport './CustomListComponent.scss';\nimport CustomTips from '../base/CustomTips';\nimport { TabContainer, TabPane, Nav, TabContent } from 'react-bootstrap';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { checkHasPermission } from '../../utils';\n\nfunction CustomListComponent(props) {\n const breadcrumb = props.breadcrumb;\n const caution = props.caution;\n const buttons = props.buttons || [];\n const renderTabsRight = props.renderTabsRight;\n const renderCompare = props.renderCompare;\n const tabs = props.tabs || [];\n const title = props.title || '';\n const defaultActiveKey = props.defaultActiveKey || '';\n const onTabChange = props.onTabChange || (() => {});\n const [activeTab, setActiveTab] = useState();\n const hideTab = props.hideTab;\n const hideHeaderAndFooter = props.hideHeaderAndFooter || false;\n const location = useLocation();\n const history = useHistory();\n\n const { user } = useSelector((state) => ({\n user: state.users,\n }));\n\n useEffect(() => {\n console.log('location list change');\n window.scrollTo(0, 0);\n }, [location]);\n\n useEffect(() => {\n setActiveTab(defaultActiveKey);\n }, [defaultActiveKey]);\n const getCaution = () => {\n return caution ? (\n \n
\n \n {hideTab ? tabs.map((item) => item.content) : getTabs()}\n \n );\n}\n\nexport default CustomListComponent;\n","export const COUPON_PIE_CHART_CONFIG = [\n { color: '#7375E2', name: 'Coupon acquired by points', key: 'totalPoints' },\n {\n color: '#00A9C8',\n name: 'Coupon acquired by campaigns',\n key: 'totalCampaigns',\n },\n { color: '#E64A7B', name: 'Coupon used', key: 'totalUsed' },\n];\nexport const ANIMATION_DURATION = 500;\n","import React from 'react';\nimport './NewCustomersChart.scss';\nimport {\n AreaChart,\n CartesianGrid,\n XAxis,\n YAxis,\n Tooltip,\n Area,\n} from 'recharts';\nimport { ANIMATION_DURATION } from '../../config/DashboardConfig';\n\nconst renderTooltip = ({ active, payload, label }) => {\n if (active && payload) {\n const { color } = payload[0];\n const { startDate, endDate } = payload[0].payload;\n let displayDate = '';\n if (startDate - endDate === 0) {\n displayDate = startDate.format('D MMM, YYYY');\n } else {\n displayDate = `${startDate.format('D MMM, YYYY')} - ${endDate.format(\n 'D MMM, YYYY',\n )}`;\n }\n return (\n \n {title ? (\n \n ) : null}\n {getCaution()}\n
\n \n {buttons.map((item, index) => (\n
\n {item}
\n ))}\n \n
\n );\n }\n return null;\n};\nconst NewCustomersChart = ({ width, data, height, dataGrow }) => {\n if (!data) {\n return ;\n }\n return (\n {`New Customers: ${payload[0].payload.point}`}
\n {displayDate}
\n \n 
\n 0 ? '#008a60' : '#CE0045' }}\n >{`${(Math.abs(change) * 100).toFixed(1)}%`}
\n \n );\n }\n return null;\n};\n\nconst CustomersCard = ({ width, height }) => {\n const {\n chartData,\n totalCustomers,\n newCustomers,\n activeCustomers,\n } = useSelector((state) => state.dashboard.customers);\n const newCustomersGrow = (newCustomers?.change || 0) >= 0;\n return (\n \n \n Customer Overview\n
\n );\n};\n\nexport default withResizeDetector(CustomersCard);\n","import React from 'react';\nimport './OverviewCard.scss';\nimport AnimatedNumber from 'animated-number-react';\nimport { getValueChangeLabel } from './CustomersCard';\nimport { ANIMATION_DURATION } from '../../config/DashboardConfig';\nimport { enLocaleNumberFormatter } from '../../utils';\n\nconst OverviewCard = ({ title, value, change, showPercentage }) => {\n return (\n CUSTOMERS
\n \n
\n \n enLocaleNumberFormatter(value.toFixed(0))}\n />\n {getValueChangeLabel(totalCustomers?.change)}\n
\n Total
\n \n enLocaleNumberFormatter(value.toFixed(0))}\n />\n {getValueChangeLabel(newCustomers?.change)}\n
\n \n New Customers\n
\n \n \n \n \n\n enLocaleNumberFormatter(value.toFixed(0))}\n />\n {getValueChangeLabel(activeCustomers?.change)}\n
\n New Customers
\n \n
\n \n {\n if (showPercentage) {\n return `${((input || 0) * 100).toFixed(0)}%`;\n }\n return enLocaleNumberFormatter(input.toFixed(0));\n }}\n />\n {getValueChangeLabel(change)}\n
\n );\n};\nexport default OverviewCard;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport './CouponsOverview.scss';\nimport OverviewCard from '../../dashboard/OverviewCard';\n\nconst COUPOINS_DATA_LIST_CONFIG = [\n {\n title: 'Total number of coupon activity',\n key: 'totalCouponActivities',\n },\n {\n title: 'Total number of coupon redeemed by points',\n key: 'totalCouponRedeemByPoints',\n },\n {\n title: 'Total number of coupon used',\n key: 'totalCouponUsed',\n },\n {\n title: 'Total number of coupon acquired by campaigns',\n key: 'totalCouponAcquiredByCampaigns',\n },\n];\n\nconst CouponsOverview = () => {\n const couponsOverviewData = useSelector((state) => state.overview.coupons);\n return (\n {title}
\n \n
\n );\n};\n\nexport default CouponsOverview;\n","import React from 'react';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport queryString from 'query-string';\nimport moment from 'moment';\nimport { useDispatch } from 'react-redux';\nimport { DatePicker } from 'antd';\nimport './DateRangeSelection.scss';\nimport { createAction } from '../../utils';\nconst { RangePicker } = DatePicker;\n\nconst RANGE_TYPES = {\n TODAY: '0',\n LAST_7_DAYS: '1',\n LAST_30_DAYS: '2',\n CUSTOM: '3',\n};\n\nexport const getStartEndDate = (range, start, end) => {\n if (range === RANGE_TYPES.TODAY) {\n return { rangeType: range, startDate: moment(), endDate: moment() };\n }\n if (range === RANGE_TYPES.LAST_30_DAYS) {\n return {\n rangeType: range,\n startDate: moment().add(-30, 'days'),\n endDate: moment().add(-1, 'days'),\n };\n }\n if (range === RANGE_TYPES.CUSTOM) {\n return {\n rangeType: range,\n startDate: moment(start),\n endDate: moment(end),\n };\n }\n return {\n rangeType: RANGE_TYPES.LAST_7_DAYS,\n startDate: moment().add(-7, 'days'),\n endDate: moment().add(-1, 'days'),\n };\n};\n\nconst DateRangeSelection = ({ applyDateRangeEvent, clearDataEvent, onTab }) => {\n const history = useHistory();\n const location = useLocation();\n const { range, start, end } = queryString.parse(location.search);\n const { rangeType, startDate, endDate } = getStartEndDate(range, start, end);\n const [tempStartDate, setTempStartDate] = React.useState(startDate);\n const [tempEndDate, setTempEndDate] = React.useState(endDate);\n const [datePickerOpen, setDatePickerOpen] = React.useState(false);\n const [initialized, setInitialized] = React.useState(false);\n React.useEffect(() => {\n applyDateRangeEvent && applyDateRangeEvent(startDate, endDate);\n setTempStartDate(startDate);\n setTempEndDate(endDate);\n }, [range, start, end]);\n\n React.useEffect(() => {\n if (!datePickerOpen && initialized) {\n history.push({\n pathname: location.pathname,\n search: `?range=${RANGE_TYPES.CUSTOM}&start=${tempStartDate.format(\n 'YYYY-MM-DD',\n )}&end=${tempEndDate.format('YYYY-MM-DD')}`,\n hash: location.hash,\n });\n }\n }, [datePickerOpen]);\n\n React.useEffect(() => {\n applyDateRangeEvent && applyDateRangeEvent(startDate, endDate);\n setInitialized(true);\n return () => {\n clearDataEvent && clearDataEvent();\n };\n }, []);\n return (\n coupons
\n \n {COUPOINS_DATA_LIST_CONFIG.map((config) => (\n
\n \n {config.key} - {activeTab}\n
\n )}\n \n );\n })}\n \n );\n};\nconst TabContainerWithSize = withResizeDetector(TabContainer);\n\nfunction BaseTabListContainer({\n maxTabWidth = 0,\n hideTab,\n hideSearch = false,\n groupActions,\n tabs,\n pageInfo,\n totalCount,\n listContent,\n defaultTabKey,\n searchPlaceholder,\n // showDeletePrompt,\n filter = {},\n}) {\n const history = useHistory();\n const location = useLocation();\n\n const queryString = require('query-string');\n const [activeTab, setActiveTab] = useState(\n queryString.parse(location.search)['type'] || 'all',\n );\n // const [searchKey, setSearchKey] = useState();\n const [showFilter, setShowFilter] = useState(false);\n\n const getFilterCount = () => {\n let filterCount = 0;\n const querySearch = queryString.parse(location.search);\n Object.entries(querySearch).map(([key, value]) => {\n if (Object.keys(querySearch).includes(querySearch[key])) {\n return;\n }\n if (!['page', 'rank', 'search', 'sort'].includes(key) && value) {\n if (\n (key === 'type' && value.toLowerCase().indexOf('all') < 0) ||\n key !== 'type'\n )\n filterCount += 1;\n }\n });\n\n return filterCount;\n };\n\n useEffect(() => {\n setActiveTab(queryString.parse(location.search)['type'] || 'all');\n // setSearchKey(queryString.parse(location.search)['search']);\n //eslint-disable-next-line react-hooks/exhaustive-deps\n }, [location]);\n\n const filterCount = getFilterCount();\n\n useEffect(() => {\n if (defaultTabKey) {\n setActiveTab(defaultTabKey);\n }\n }, [defaultTabKey, tabs]);\n // useEffect(() => {\n // setShowPrompt(showDeletePrompt);\n // }, [showDeletePrompt]);\n\n return (\n <>\n {showFilter ? (\n \n
\n \n );\n}\n\nexport default BaseTabListContainer;\n","import { BaseHelper } from './BaseGraphQLAPIHelper';\n\nconst BRAND_CONTENT = `\nid\npk\nname\nicon\ndescription\ncoverPhoto\ndisplayPriority\nactivityType\nbrandPageLink\nshowInBarcode\nbarcodePartner\nreceiptPartner\noclPartner\nstores {\n edges {\n node {\n id\n pk\n name\n }\n }\n}\ntranslations {\n edges {\n node {\n pk\n language\n name\n }\n }\n}\n`;\n\nexport const getBrands = (\n afterCursor = '',\n rank = true,\n searchKey = '',\n isAll = false,\n moreSearch,\n) => {\n let searchString = isAll ? 'first: 100' : 'first: 20';\n let orderBy = '-pk';\n if (moreSearch?.sort) {\n orderBy = moreSearch?.sort;\n }\n if (afterCursor) {\n searchString += `, after: \"${afterCursor}\"`;\n }\n searchString += `, orderBy: \"${orderBy}\"`;\n if (searchKey) {\n searchString += `, name: \"${searchKey}\"`;\n }\n if (moreSearch?.showInBarcode) { \n searchString += `, showInBarcode: true`;\n }\n if (moreSearch?.barcodePartner) {\n searchString += `, barcodePartner: true`;\n }\n if (moreSearch?.receiptPartner) {\n searchString += `, receiptPartner: true`;\n }\n if (moreSearch?.oclPartner) {\n searchString += `, oclPartner: true`;\n }\n\n const brandContent = isAll\n ? `id\n pk\n name\n icon\n description`\n : BRAND_CONTENT;\n // console.log('@@68: ', brandContent);\n const query = `{\n brands(${searchString}) {\n totalCount\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n edges {\n cursor\n node {\n ${brandContent}\n }\n }\n }\n }`;\n const variables = {};\n\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const getBrand = (brandID) => {\n const query = `\n {\n brand(id: \"${brandID}\") {\n id\n pk\n name\n description\n icon\n isForcedInactive\n coverPhoto\n displayPriority\n activityType\n brandTag\n brandPageLink\n showInBarcode\n barcodePartner\n receiptPartner\n oclPartner\n translations {\n edges {\n node {\n pk\n language\n name\n description\n brandTag\n }\n }\n }\n stores {\n edges {\n node {\n pk\n id\n name\n }\n }\n }\n }\n }`;\n const variables = {};\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const deleteBrand = (inputBody) => {\n const query = `\n mutation DeleteBrands($input: DeleteBrandsInput!) {\n deleteBrands(input: $input) {\n success\n }\n }`;\n const variables = {\n input: inputBody,\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const createBrand = (inputBody) => {\n const query = `\n mutation CreateBrand($input: CreateBrandInput!) {\n createBrand(input: $input) {\n node {\n id\n pk\n name\n icon\n description\n }\n errors {\n field\n messages\n }\n }\n }`;\n const variables = {\n input: inputBody,\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n\nexport const updateBrand = (inputBody) => {\n const query = `\n mutation UpdateBrand($input: UpdateBrandInput!) {\n updateBrand(input: $input) {\n node {\n id\n pk\n name\n icon\n description\n }\n errors {\n field\n messages\n }\n }\n }`;\n const variables = {\n input: inputBody,\n };\n return BaseHelper.callGraphQLAPI({ query, variables });\n};\n","import {\n getBrands,\n deleteBrand,\n createBrand,\n getBrand,\n updateBrand,\n} from '../services/BrandAPIHelper';\nimport {\n createAction,\n convertCursorToNumber,\n convertNumberToCursor,\n saveToSessionStorage,\n getObjectFromSessionStorage,\n removeFromSessionStorage,\n getFileNameFromUrl,\n} from '../utils';\nimport { apiWithResponseHandle, loading } from './LoadingUtil';\nimport { defaultStep } from './StepBarUtil';\nimport { LanguageConfig } from '../config/CustomEnums';\nimport { isValidHttpUrl } from '../utils/CheckValidUtil';\n\nexport const BrandActivityType = {\n RECYCLING: {\n name: 'Recycling',\n value: 'RECYCLING',\n },\n GREEN_DINING: {\n name: 'Green Dining',\n value: 'GREEN_DINING',\n },\n PLANT_MILK: {\n name: 'Plant Milk',\n value: 'PLANT_MILK',\n },\n GREEN_SHOPPING: {\n name: 'Green Shopping',\n value: 'GREEN_SHOPPING',\n },\n WATER_FILLING: {\n name: 'Water Filling',\n value: 'WATER_FILLING',\n }\n}\n\nexport const BrandActivityTypeList = Object.values(BrandActivityType);\n\nexport const CreateBrandError = {\n brandName: {\n name: 'brandName',\n message: 'Please provide a name.',\n },\n brandIcon: {\n name: 'brandIcon',\n message: 'Please provide a logo image.',\n },\n brandPromotionPhoto: {\n name: 'brandPromotionPhoto',\n message: 'Please provide a promotion image.',\n },\n brandDisplayPriority: {\n name: 'brandDisplayPriority',\n message: 'Please provide a display priority.',\n },\n brandTag: {\n name: 'brandTag',\n message: 'Please provide correct brand tag.',\n },\n brandPageLink: {\n name: 'brandPageLink',\n message: 'Please provide correct url.',\n }\n};\n\nexport const sessionDataKey = {\n objectKey: 'createBrand',\n stepEndKey: 'createBrandStepEnd',\n origionalData: 'createBrandOriginalData',\n};\n\n\nconst checkFields = (data) => {\n let errorFields = [];\n if (!data.name) {\n errorFields.push(CreateBrandError.brandName.name);\n }\n if (!data.coverPhoto) {\n errorFields.push(CreateBrandError.brandIcon.name);\n }\n if (!data?.promotionPhoto) {\n errorFields.push(CreateBrandError.brandPromotionPhoto.name);\n };\n if (!data?.displayPriority) {\n errorFields.push(CreateBrandError.brandDisplayPriority.name);\n };\n if (data?.brandTag?.length) {\n const invalidBrandTag = data?.brandTag?.filter(item => item?.length > 50);\n if (invalidBrandTag?.length) {\n errorFields.push(CreateBrandError.brandTag.name);\n };\n };\n if (data?.brandPageLink?.length) {\n if (!isValidHttpUrl(data?.brandPageLink)) {\n errorFields.push(CreateBrandError.brandPageLink.name);\n }\n };\n\n console.log(\"@@137\", data, errorFields)\n return {\n invalid: errorFields.length > 0,\n errorFields: errorFields,\n data,\n };\n};\n\nconst getInitialState = () => ({\n brandList: [],\n receiptPartnerList: [],\n receiptPartnerListCompleted: false,\n oclPartnerList: [],\n oclPartnerListCompleted: false,\n listDisplayFields: [\n { displayName: 'ID', fieldName: 'pk' },\n { displayName: 'Name', fieldName: 'name', orderField: 'name' },\n { displayName: 'Cover photo', fieldName: 'coverPhoto' },\n { displayName: 'Display order', fieldName: 'displayPriority', orderField: 'displayPriority' },\n { displayName: 'Related Store', fieldName: 'relatedStoreNames' },\n { displayName: 'Show in barcode', fieldName: 'displayShowInBarcode' },\n { displayName: 'Barcode partner', fieldName: 'displayCodePartner' },\n { displayName: 'Receipt partner', fieldName: 'displayReceiptPartner' },\n { displayName: 'OCL partner', fieldName: 'displayOclPartner' },\n ],\n pageInfo: {\n startCursor: '',\n endCursor: '',\n hasNextPage: false,\n hasPreviousPage: false,\n },\n currentLastCursor: '',\n currentPage: 0,\n totalPage: 0,\n totalCount: 0,\n checkedList: [],\n currentPageBrandList: [],\n selectedBrand: {},\n errorFields: [],\n stepConfig: defaultStep([]),\n currentStep: 0,\n});\n\nconst getTranslations = (translationList = []) => {\n const translation = {};\n translationList.forEach((item) => {\n let language = item.node.language;\n if (language === 'ZH_HANS') {\n language = LanguageConfig.simplifiedChinese;\n }\n if (language === 'ZH_HANT') {\n language = LanguageConfig.traditionalChinese;\n }\n translation[language] = {\n id: item.node.pk,\n name: item.node.name,\n brandDescription: item.node.description,\n brandTag: item.node.brandTag?.split(\",\") || [],\n language,\n };\n });\n return translation;\n};\n\nconst getStoreTranslations = (translationList) => {\n const translation = {};\n if (!translationList || translationList.length === 0) {\n return {};\n }\n translationList.forEach((item) => {\n const language = item.node.language;\n translation[language] = {\n storeName: item.node.name,\n storeAddress: item.node.address,\n storeDescription: item.node.description,\n };\n });\n return translation;\n};\n\nexport const parseStore = (storeInfo) => {\n const store = storeInfo.node;\n return {\n storeID: store.id,\n storePK: store.pk,\n storeName: store.name,\n storeAddress: store.address,\n storeDescription: store.description,\n storeTranslations: getStoreTranslations(store.translations?.edges),\n };\n};\n\nexport const parseBrand = (brand) => {\n let relatedStoreNameList = [];\n if (brand.stores) {\n relatedStoreNameList = brand.stores?.edges?.map((store) => store.node.name);\n }\n const activityType = brand.activityType?.map(item => BrandActivityType?.[item]);\n\n return {\n id: brand.id,\n pk: brand.pk,\n name: brand.name,\n coverPhoto: brand.icon,\n promotionPhoto: brand.coverPhoto,\n displayPriority: brand.displayPriority,\n brandTag: brand.brandTag?.split(',') || [],\n brandPageLink: brand.brandPageLink || '',\n activityType: activityType || [],\n brandDescription: brand.description,\n brandTranslations: getTranslations(brand.translations?.edges),\n brandStores: brand.stores?.edges.map((store) => parseStore(store)),\n isForcedInactive: brand.isForcedInactive,\n showInBarcode: brand.showInBarcode,\n barcodePartner: brand.barcodePartner,\n displayCodePartner: brand.barcodePartner ? \"Yes\" : \"No\",\n receiptPartner: brand.receiptPartner,\n displayReceiptPartner: brand.receiptPartner ? \"Yes\" : \"No\",\n oclPartner: brand.oclPartner,\n displayOclPartner: brand.oclPartner ? \"Yes\" : \"No\",\n displayShowInBarcode: brand.showInBarcode ? \"Yes\" : \"No\",\n relatedStoreNames:\n relatedStoreNameList.length > 0 ? relatedStoreNameList.toString() : '',\n };\n};\n\nexport const parseBrandInputBody = (brand, isEdit = false) => {\n let brandUrl = [];\n if (brand.coverPhoto.type) {\n brandUrl = brand.coverPhoto.value;\n } else {\n brandUrl = brand.coverPhoto;\n }\n\n let brandPromotionPhotoUrl = [];\n if (brand.promotionPhoto?.type) {\n brandPromotionPhotoUrl = brand.promotionPhoto?.value;\n } else {\n brandPromotionPhotoUrl = brand.promotionPhoto;\n }\n\n const coverPhotoName = getFileNameFromUrl(brandUrl);\n const promotionPhotoName = getFileNameFromUrl(brandPromotionPhotoUrl);\n const activityType = brand?.activityType?.length\n ? brand?.activityType?.map(item => item?.value)\n : null;\n\n const translations = []\n const languages = [LanguageConfig.traditionalChinese, LanguageConfig.simplifiedChinese]\n console.log(\"brand.brandTranslations:\", brand.brandTranslations)\n languages.forEach((language) => {\n const translate = brand.brandTranslations?.[language] || {}\n const brandTag = (translate?.brandTag || []).join(',') || null\n const translateData = {\n brandTag,\n description: translate.brandDescription,\n name: translate.name,\n language: language\n }\n if (translate.id) {\n translateData.id = translate.id\n }\n translations.push(translateData)\n })\n console.log(\"Brandtranslations:\", translations)\n let inputBody = {\n name: brand.name,\n icon: coverPhotoName,\n coverPhoto: promotionPhotoName,\n displayPriority: brand.displayPriority,\n brandTag: brand.brandTag?.filter(item => !!item?.length)?.join(',') || null,\n brandPageLink: brand?.brandPageLink || null,\n activityType,\n description: brand.brandDescription,\n isForcedInactive: brand.isForcedInactive,\n showInBarcode: brand.showInBarcode || false,\n barcodePartner: brand.barcodePartner || false,\n receiptPartner: brand.receiptPartner || false,\n oclPartner: brand.oclPartner || false,\n translations: translations\n };\n if (isEdit) {\n inputBody = {\n ...inputBody,\n id: brand.pk,\n };\n }\n return inputBody;\n};\n\nexport default {\n namespace: 'brand',\n state: getInitialState(),\n reducers: {\n updateState(state, { payload }) {\n return {\n ...state,\n ...payload,\n };\n },\n updateBrandList(state, { payload }) {\n const { newBrandList, page, receiptPartner, oclPartner } = payload;\n\n const result = state;\n if (receiptPartner) {\n result.receiptPartnerList = page > 1 ? [...state.receiptPartnerList, ...newBrandList] : newBrandList;\n } else if (oclPartner) {\n result.oclPartnerList = page > 1 ? [...state.oclPartnerList, ...newBrandList] : newBrandList;\n } else {\n result.brandList = page > 1 ? [...state.brandList, ...newBrandList] : newBrandList;\n }\n return result;\n },\n updateSelectedBrand(state, { payload }) {\n let brand = {};\n if ([LanguageConfig.traditionalChinese, LanguageConfig.simplifiedChinese].includes(payload?.language)) {\n const brandTranslations = {\n ...state.selectedBrand.brandTranslations,\n [payload?.language]: {\n ...state.selectedBrand.brandTranslations?.[payload?.language],\n ...payload\n },\n }\n brand = { ...state.selectedBrand, brandTranslations };\n } else {\n brand = { ...state.selectedBrand, ...payload }\n }\n const key = Object.keys(payload)[0];\n if (state.selectedBrand[key] !== payload[key]) {\n saveToSessionStorage(sessionDataKey.objectKey, brand);\n }\n return {\n ...state,\n selectedBrand: brand,\n };\n },\n loadBrandFromCookie(state, { payload }) {\n const brand = getObjectFromSessionStorage(sessionDataKey.objectKey);\n if (!brand) {\n return {\n ...state,\n };\n }\n saveToSessionStorage(sessionDataKey.origionalData, brand);\n saveToSessionStorage(sessionDataKey.objectKey, brand);\n return {\n ...state,\n selectedBrand: brand,\n };\n },\n\n saveOrRemoveBrandFromCookie(state, { payload }) {\n if (!payload) {\n removeFromSessionStorage(sessionDataKey.objectKey);\n }\n saveToSessionStorage(sessionDataKey.stepEndKey, true);\n return {\n ...state,\n };\n },\n\n cleanSelectedBrand(state, action) {\n return {\n ...state,\n selectedBrand: {},\n errorFields: [],\n };\n },\n cleanBrandList(state, { payload }) {\n return {\n ...state,\n brandList: [],\n currentPageBrandList: [],\n };\n }\n },\n effects: {\n *setFieldToSession({ payload }, { select }) {\n const oldBrand = yield select((state) => state.brand.selectedBrand);\n let brand = {}\n if ([LanguageConfig.traditionalChinese, LanguageConfig.simplifiedChinese].includes(payload?.language)) {\n const brandTranslations = {\n ...oldBrand.brandTranslations,\n [payload?.language]: {\n ...oldBrand.brandTranslations?.[payload?.language],\n ...payload\n },\n }\n brand = { ...oldBrand, brandTranslations };\n } else {\n brand = { ...oldBrand, ...payload };\n }\n\n saveToSessionStorage(sessionDataKey.objectKey, brand);\n },\n\n checkFields: [\n function* ({ payload }, { select, put }) {\n const brand = yield select((state) => state.brand.selectedBrand);\n const result = checkFields(brand);\n yield put(\n createAction('updateState')({\n errorFields: result.errorFields,\n }),\n );\n if (!result.invalid) {\n const afterActions = payload.afterActions || (() => { });\n yield afterActions();\n }\n },\n { type: 'takeLatest' },\n ],\n getCurrentPageBrands: [\n function* ({ payload }, { put, all }) {\n const { page, searchKey, rank, moreSearch, isAll } = payload || {};\n console.log(\"getCurrentPageBrands:\", payload)\n let afterCursor = '';\n const pageSize = isAll ? 100 : 20;\n if (page > 1) {\n afterCursor = convertNumberToCursor((page - 1) * pageSize - 1);\n }\n\n const serviceArgs = [\n getBrands,\n afterCursor,\n rank,\n searchKey,\n isAll || false,\n moreSearch,\n ];\n function* onSuccess(data) {\n const brandData = data.brands.edges;\n const pageInfo = data.brands.pageInfo;\n const totalCount = data.brands.totalCount;\n const currentLastCursor = pageInfo.endCursor;\n const brandList = brandData.map((item) => parseBrand(item.node));\n yield all([\n put({\n type: 'updateState',\n payload: {\n currentPageBrandList: brandList,\n pageInfo: {\n startCursor: convertCursorToNumber(pageInfo?.startCursor) + 1,\n endCursor: convertCursorToNumber(pageInfo?.endCursor) + 1,\n },\n currentLastCursor,\n totalCount,\n totalPage: Math.ceil(totalCount / 20),\n },\n }),\n put({\n type: 'updateBrandList',\n payload: {\n newBrandList: brandList,\n page: page,\n receiptPartner: moreSearch?.receiptPartner,\n oclPartner: moreSearch?.oclPartner,\n },\n }),\n ]);\n\n if (isAll || moreSearch?.receiptPartner || moreSearch?.oclPartner) {\n if (brandList?.length < pageSize) {\n console.log(\"@@469, all brands loaded\")\n let moreSearchPayload = {};\n if (moreSearch?.receiptPartner) {\n moreSearchPayload = { receiptPartnerListCompleted: true }\n } else if (moreSearch?.oclPartner) {\n moreSearchPayload = { oclPartnerListCompleted: true }\n }\n\n yield put({\n type: 'updateState',\n payload: moreSearchPayload,\n })\n\n } else {\n yield put({\n type: 'getCurrentPageBrands',\n payload: {\n ...payload,\n page: (page || 1) + 1,\n }\n })\n }\n };\n }\n if (isAll) {\n yield apiWithResponseHandle(serviceArgs, onSuccess);\n } else {\n yield loading(serviceArgs, onSuccess);\n }\n },\n ],\n getBrand: [\n function* ({ payload }, { put }) {\n const { brandPK } = payload;\n const brandID = btoa(`BrandNode:${brandPK}`);\n const serviceArgs = [getBrand, brandID];\n\n function* onSuccess(data) {\n const brandData = data.brand;\n const brand = parseBrand(brandData);\n yield put(\n createAction('updateState')({\n selectedBrand: brand,\n }),\n );\n }\n yield loading(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n delete: [\n function* ({ payload }, { put, select }) {\n const { checkedList } = yield select((state) => ({\n checkedList: state.brand.checkedList,\n }));\n\n let ids = [];\n checkedList.forEach((item) => {\n ids.push(item.pk);\n });\n\n const serviceArgs = [\n deleteBrand,\n {\n ids: ids,\n },\n ];\n function* onSuccess() {\n const afterActions = payload.afterAction || (() => { });\n yield afterActions();\n }\n yield loading(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n createBrand: [\n function* ({ payload }, { select, put }) {\n const brand = yield select((state) => state.brand.selectedBrand);\n const inputBody = parseBrandInputBody(brand);\n const serviceArgs = [createBrand, inputBody];\n saveToSessionStorage(sessionDataKey.stepEndKey, true);\n function* onSuccess() {\n removeFromSessionStorage(sessionDataKey.objectKey);\n yield put({ type: 'updateState', payload: { selectedBrand: {} } });\n\n const afterActions = payload.afterActions || (() => { });\n yield afterActions();\n }\n yield loading(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n duplicate: [\n function* ({ payload }, { put }) {\n const brand = { ...payload.data, name: `Copy of ${payload.data.name}` };\n yield put(\n createAction('updateState')({\n selectedBrand: brand,\n }),\n );\n const afterActions = payload.afterAction || (() => { });\n yield put(\n createAction('createBrand')({\n afterActions,\n }),\n );\n },\n ],\n updateBrand: [\n function* ({ payload }, { select }) {\n const brand = yield select((state) => state.brand.selectedBrand);\n const inputBody = parseBrandInputBody(brand, true);\n const serviceArgs = [updateBrand, inputBody];\n saveToSessionStorage(sessionDataKey.stepEndKey, true);\n function* onSuccess() {\n removeFromSessionStorage(sessionDataKey.objectKey);\n const afterActions = payload.afterActions || (() => { });\n yield afterActions();\n }\n yield loading(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n updateBrandDisplayPriority: [\n function* ({ payload }, { select }) {\n const inputBody = {\n id: payload?.data?.pk,\n displayPriority: payload?.data?.displayPriority\n };\n const serviceArgs = [updateBrand, inputBody];\n function* onSuccess() {\n const afterAction = payload.afterAction || (() => { });\n yield afterAction();\n }\n yield loading(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","import { LanguageConfig } from '../config/CustomEnums';\nimport { addDomainToImage } from '../utils';\nimport { parseBrand, parseStore } from './BrandModel';\nfunction getCouponTemplateTranslation(node) {\n const language = node.language || LanguageConfig.english;\n let otherPhotos = [];\n if (addDomainToImage(node.detailPhoto1)) {\n otherPhotos.push(addDomainToImage(node.detailPhoto1));\n }\n if (addDomainToImage(node.detailPhoto2)) {\n otherPhotos.push(addDomainToImage(node.detailPhoto2));\n }\n if (addDomainToImage(node.detailPhoto3)) {\n otherPhotos.push(addDomainToImage(node.detailPhoto3));\n }\n if (addDomainToImage(node.detailPhoto4)) {\n otherPhotos.push(addDomainToImage(node.detailPhoto4));\n }\n return {\n [language]: {\n name: node.name,\n id: node.id,\n pk: node.pk,\n instructionSectionTitle: node.instructionSectionTitle,\n instructionSectionContent: node.instructionSectionContent,\n detailSectionTitle: node.detailSectionTitle,\n detailSectionContent: node.detailSectionContent,\n coverPhoto: addDomainToImage(node.coverPhoto),\n otherPhoto: otherPhotos,\n },\n };\n}\n\nexport function parseCouponSet(data) {\n const translationEdges = data.translations?.edges;\n const enTranslation = getCouponTemplateTranslation(data);\n let reducedTranslation = null;\n if (translationEdges) {\n const chineseTranslation = translationEdges.map((item) => {\n return getCouponTemplateTranslation(item.node);\n });\n reducedTranslation = chineseTranslation.reduce(function (obj, item) {\n return {\n ...obj,\n ...item,\n };\n }, {});\n }\n\n const selectedBrand = data.brand;\n let selectedStores = data.applicableStores?.edges;\n if (selectedStores && selectedStores.length > 0) {\n selectedStores = selectedStores.map((store) => parseStore(store));\n }\n return {\n ...data,\n id: data.id,\n pk: data.pk,\n name: data.name,\n lastModifiedDate: data.lastModifiedDate,\n displayLastModifiedDate: parseCouponSetListDate(data.lastModifiedDate),\n creationDate: data.creationDate,\n displayCreationDate: parseCouponSetListDate(data.creationDate),\n linkedCampaignsName: data.linkedCampaignsName,\n absoluteEffectiveDate: data.absoluteEffectiveDate,\n absoluteExpiryDate: data.absoluteExpiryDate,\n status: data.status,\n stock: data.stock,\n totalNubmerOfGeneratedCoupons: data.totalNubmerOfGeneratedCoupons,\n validPeriodType: data.validPeriodType,\n numberOfDaysToExpireAfterAcquisition:\n data.numberOfDaysToExpireAfterAcquisition,\n translations: {\n ...enTranslation,\n ...reducedTranslation,\n },\n selectedBrand: selectedBrand ? parseBrand(selectedBrand) : null,\n selectedStores: selectedStores,\n shouldBeUsedInStores: data.shouldUseInStore,\n useStaffCode: data.useStaffCode,\n isForcedInactive: data.isForcedInactive,\n expiryDate: parseExpiredDate(data),\n };\n}\n\nexport const parseExpiredDate = (couponTemplate) => {\n if (couponTemplate.validPeriodType === 'ABSOLUTE') {\n const startDate = parseCouponSetListDate(\n couponTemplate.absoluteEffectiveDate,\n );\n const endDate = parseCouponSetListDate(couponTemplate.absoluteExpiryDate);\n return `${startDate} - ${endDate}`;\n } else if (couponTemplate.validPeriodType === 'RELATIVE') {\n return `${couponTemplate.numberOfDaysToExpireAfterAcquisition} days since acquiring`;\n } else {\n return `All time valid`;\n }\n};\n\nexport function assembleCouponTemplates(couponTemplatesData) {\n return couponTemplatesData.map((data) => {\n return parseCouponSet(data.node);\n });\n}\n\nconst parseCouponExpiryDate = (couponSet, coupon) => {\n const effectiveDate = coupon.effectiveDate;\n const expiryDate = coupon.expiryDate;\n if (effectiveDate && expiryDate) {\n return `${parseCouponSetListDate(effectiveDate)} - ${parseCouponSetListDate(\n expiryDate,\n )}`;\n }\n if (couponSet?.validPeriodType === 'ALL_TIME') {\n return 'All time valid';\n }\n if (couponSet?.validPeriodType === 'ABSOLUTE') {\n return `${effectiveDate ? parseCouponSetListDate(effectiveDate) : ''} - ${\n expiryDate ? parseCouponSetListDate(expiryDate) : ''\n }`;\n }\n if (couponSet?.validPeriodType === 'RELATIVE') {\n return `${couponSet.numberOfDaysToExpireAfterAcquisition} days since acquiring`;\n }\n return '-';\n};\n\nexport const parseSingleCoupon = (couponSet, singleCouponData) => {\n const ownerObject = singleCouponData.node.owner;\n let owner = '-';\n if (ownerObject) {\n owner = `${ownerObject.firstName} ${ownerObject.lastName}`;\n }\n return {\n ...singleCouponData.node,\n id: singleCouponData.node.id,\n pk: singleCouponData.node.pk,\n name: singleCouponData.node.serialNumber,\n serialNumber: singleCouponData.node.serialNumber,\n owner: { ...singleCouponData.node.owner, owner: owner },\n customerName: owner,\n expiryDate: singleCouponData.node.expiryDate,\n displayExpiryDate: parseCouponExpiryDate(couponSet, singleCouponData.node),\n creationDate: singleCouponData.node.creationDate,\n displayCreationDate: parseCouponSetListDate(\n singleCouponData.node.creationDate,\n ),\n lastModifiedDate: singleCouponData.node.lastModifiedDate,\n displayLastModifiedDate: parseCouponSetListDate(\n singleCouponData.node.lastModifiedDate,\n ),\n dateOfPurchase: singleCouponData.node.dateOfPurchase,\n dateOfEarning: singleCouponData.node.dateOfEarning,\n dateOfGrant: singleCouponData.node.dateOfGrant,\n isUsed: singleCouponData.node.isUsed,\n isExpired: singleCouponData.node.isExpired,\n isActive: singleCouponData.node.isActive,\n isForcedInactive: singleCouponData.node.isForcedInactive,\n effectiveDate: singleCouponData.node.effectiveDate,\n store: singleCouponData.node.store,\n displayImage: addDomainToImage(singleCouponData.node.image),\n };\n};\n\nexport const parseCouponSetListDate = (dateString) => {\n if (!dateString || dateString === '') {\n return '';\n }\n const options = {\n weekday: 'short',\n month: 'short',\n day: 'numeric',\n };\n const date = new Date(dateString);\n const format = new Intl.DateTimeFormat('en', options);\n const [\n { value: weekday },\n ,\n { value: month },\n ,\n { value: day },\n ,\n ] = format.formatToParts(date);\n const year = date.getFullYear();\n const currentYear = new Date().getFullYear();\n if (currentYear !== year) {\n return `${day} ${month} ${year}`;\n }\n return `${day} ${month} (${weekday})`;\n};\n\nexport const parseCouponSetOverviewDatetime = (datetimeString) => {\n const datetime = new Date(datetimeString);\n const weekday = new Intl.DateTimeFormat('en', { weekday: 'short' }).format(\n datetime,\n );\n let localeString = datetime.toLocaleString('en');\n localeString = localeString.replace(',', `(${weekday})`);\n return localeString;\n};\n","import {\n getCouponTemplateList,\n updateCouponSetActiveStatus,\n getCouponSet,\n getAllCouponSet,\n deleteCouponSets,\n} from '../services/CouponAPIHelper';\nimport {\n assembleCouponTemplates,\n parseCouponSetListDate,\n parseSingleCoupon,\n parseCouponSet,\n} from './CouponUtil';\nimport {\n createAction,\n convertCursorToNumber,\n convertNumberToCursor,\n convertPKToId,\n} from '../utils';\nimport { APIStatus, LanguageConfig } from '../config/CustomEnums';\nimport { loading, apiWithResponseHandle } from './LoadingUtil';\nimport { IMAGE_TYPES } from './UploadFilesModel';\n\nconst getInitialState = () => ({\n totalCount: 0,\n couponTemplateList: [],\n currentPage: 0,\n getCouponTemplateListStatus: APIStatus.none,\n pageInfo: {\n startCursor: '',\n endCursor: '',\n hasNextPage: false,\n hasPreviousPage: false,\n },\n couponSetList: [],\n currentPageCouponSetList: [],\n currentLastCursor: '',\n totalPage: 0,\n checkedList: [],\n couponSet: {},\n listDisplayFields: [\n { displayName: 'ID', fieldName: 'pk' },\n { displayName: 'Name', fieldName: 'name', orderField: 'name' },\n {\n displayName: 'Stock Left /Total Stock',\n fieldName: 'leftStockInTotal',\n orderField: 'stock',\n },\n {\n displayName: 'Linked Campaign',\n fieldName: 'linkedCampaignsName',\n orderField: 'linkedCampaigns',\n },\n { displayName: 'Expiry Date', fieldName: 'expiryDate' },\n {\n displayName: 'Create at',\n fieldName: 'displayCreationDate',\n orderField: 'creationDate',\n },\n {\n displayName: 'Last Modified',\n fieldName: 'displayLastModifiedDate',\n orderField: 'lastModifiedDate',\n },\n { displayName: 'Status', fieldName: 'status' },\n ],\n});\n\nexport const COUPON_STATUS = {\n ACTIVE: 'Active',\n INACTIVE: 'Inactive',\n EXPIRED: 'Expired',\n ACTIVE_ACQUIRED: 'Active(Acquired)',\n USED: 'Used',\n};\n\nconst parseCouponStatus = (couponTemplate) => {\n const isForcedInactive = couponTemplate.isForcedInactive;\n const expiredDate = couponTemplate.absoluteExpiryDate;\n if (isForcedInactive) {\n return COUPON_STATUS.INACTIVE;\n }\n if (\n couponTemplate.validPeriodType === 'ABSOLUTE' &&\n new Date(expiredDate) < new Date()\n ) {\n return COUPON_STATUS.EXPIRED;\n }\n return COUPON_STATUS.ACTIVE;\n};\n\nexport const parseExpiredDate = (couponTemplate) => {\n if (couponTemplate.validPeriodType === 'ABSOLUTE') {\n const startDate = parseCouponSetListDate(\n couponTemplate.absoluteEffectiveDate,\n );\n const endDate = parseCouponSetListDate(couponTemplate.absoluteExpiryDate);\n return `${startDate} - ${endDate}`;\n } else if (couponTemplate.validPeriodType === 'RELATIVE') {\n return `${couponTemplate.numberOfDaysToExpireAfterAcquisition} days since acquiring`;\n } else {\n return `All time valid`;\n }\n};\n\nconst parseSingleCouponWithStatus = (singleCouponList) => {\n if (singleCouponList.length > 0) {\n let parsedSingleCouponList = singleCouponList.map((singleCoupon) => {\n return parseSingleCoupon(singleCoupon);\n });\n parsedSingleCouponList = parsedSingleCouponList.map((singleCoupon) => {\n let status = COUPON_STATUS.ACTIVE;\n if (singleCoupon.isUsed) {\n status = COUPON_STATUS.USED;\n } else if (singleCoupon.isExpired) {\n status = COUPON_STATUS.EXPIRED;\n } else if (singleCoupon.isForcedInactive) {\n status = COUPON_STATUS.INACTIVE;\n } else if (singleCoupon.owner.owner !== '-') {\n status = COUPON_STATUS.ACTIVE_ACQUIRED;\n }\n return {\n ...singleCoupon,\n status: status,\n };\n });\n return parsedSingleCouponList;\n } else {\n return [];\n }\n};\n\nexport default {\n namespace: 'couponList',\n state: getInitialState(),\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n\n assembleCouponTemplateList(state, { payload }) {\n const { templateList, page } = payload;\n const edges = templateList.edges;\n const couponTemplateList = assembleCouponTemplates(edges);\n return {\n ...state,\n couponTemplateList:\n page > 1\n ? [...state.couponTemplateList, ...couponTemplateList]\n : couponTemplateList,\n };\n },\n\n updateCurrentPageTemplateList(state, { payload }) {\n const { templateList } = payload;\n const pageInfo = templateList.pageInfo;\n let currentPageCouponTemplateList = assembleCouponTemplates(\n templateList.edges,\n );\n currentPageCouponTemplateList = currentPageCouponTemplateList.map(\n (item) => {\n return {\n ...item,\n status: parseCouponStatus(item),\n expiredDate: parseExpiredDate(item),\n leftStockInTotal: `${item.stock} /${item.totalNubmerOfGeneratedCoupons}`,\n };\n },\n );\n return {\n ...state,\n currentPageCouponSetList: currentPageCouponTemplateList,\n currentPageInfo: {\n ...state.currentPageInfo,\n totalCount: templateList.totalCount,\n pageInfo: pageInfo,\n currentPageCouponTemplateList: currentPageCouponTemplateList,\n },\n };\n },\n\n updateSingleCouponList(state, { payload }) {\n const { singleCoupons } = payload;\n const pageInfo = singleCoupons?.pageInfo;\n const totalCount = singleCoupons?.totalCount;\n const singleCouponList = parseSingleCouponWithStatus(singleCoupons.edges);\n return {\n ...state,\n currentSingleCouponList: {\n ...state.currentSingleCouponList,\n totalCount,\n pageInfo,\n singleCouponList: singleCouponList,\n },\n };\n },\n\n clearData(state, { payload }) {\n return { ...state, ...getInitialState() };\n },\n },\n\n effects: {\n getCouponSet: [\n function* ({ payload }, { put }) {\n const { couponSetPK } = payload;\n const couponSetID = convertPKToId('CouponTemplateNode', couponSetPK);\n const notSaveToSession = payload.notSaveToSession;\n const serviceArgs = [getCouponSet, couponSetID];\n\n function* onSuccess(data) {\n const couponSetData = data.couponTemplate;\n const couponSet = parseCouponSet(couponSetData);\n couponSet.status = parseCouponStatus(couponSet);\n const enCoverPhoto =\n couponSet.translations[LanguageConfig.english].coverPhoto;\n couponSet.translations[LanguageConfig.english].coverPhoto = {\n type: IMAGE_TYPES.TYPE_URL,\n value: enCoverPhoto,\n };\n yield put(\n createAction('updateState')({\n [couponSetID]: {\n ...couponSet,\n },\n couponSet,\n }),\n );\n yield put(\n createAction('createCoupon/updateCouponTemplate')({\n ...couponSet,\n notSaveToSession: notSaveToSession,\n }),\n );\n }\n yield loading(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n\n getCurrentPageTemplateList: [\n function* ({ payload }, { select, put, all }) {\n yield put(\n createAction('updateState')({\n getCouponTemplateListStatus: APIStatus.calling,\n }),\n );\n const { page } = payload;\n if (!payload.filterName && payload.search) {\n payload.filterName = payload.search;\n }\n let afterCursor = undefined;\n let serviceArgs = [];\n if (page > 1) {\n afterCursor = convertNumberToCursor((page - 1) * 20 - 1);\n }\n serviceArgs = [getCouponTemplateList, afterCursor, payload];\n\n function* onSuccess(data) {\n const pageInfo = data?.couponTemplates?.pageInfo;\n const currentLastCursor = pageInfo?.endCursor;\n const totalCount = data?.couponTemplates?.totalCount;\n\n yield all([\n put({\n type: 'updateState',\n payload: {\n totalCount: totalCount,\n getCouponTemplateListStatus: APIStatus.success,\n pageInfo: {\n startCursor: convertCursorToNumber(pageInfo?.startCursor) + 1,\n endCursor: convertCursorToNumber(pageInfo?.endCursor) + 1,\n },\n currentLastCursor,\n totalPage: Math.ceil(totalCount / 20),\n },\n }),\n put({\n type: 'updateCurrentPageTemplateList',\n payload: {\n templateList: data.couponTemplates,\n },\n }),\n put({\n type: 'assembleCouponTemplateList',\n payload: {\n templateList: data.couponTemplates,\n page: page,\n },\n }),\n ]);\n }\n function* onFailed() {\n yield put(\n createAction('updateState')({\n getCouponTemplateListStatus: APIStatus.failed,\n }),\n );\n }\n yield loading(serviceArgs, onSuccess, onFailed);\n },\n { type: 'takeLatest' },\n ],\n\n delete: [\n function* ({ payload }, { select, put }) {\n const checkedList = yield select(\n (state) => state.couponList.checkedList,\n );\n let ids = [];\n ids = checkedList.map((item) => item.pk);\n const serviceArgs = [deleteCouponSets, ids];\n function* onSuccess() {\n const afterAction = payload.afterAction;\n yield afterAction();\n }\n yield loading(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n\n duplicate: [\n function* ({ payload }, { put, select }) {\n const couponSet = payload.data;\n\n const afterAction = payload.afterAction || (() => {});\n\n yield put.resolve(\n createAction('getCouponSet')({ couponSetPK: couponSet.pk }),\n );\n\n yield put.resolve(\n createAction('createCoupon/createCouponTemplate')({\n isDuplicate: true,\n afterAction: afterAction,\n }),\n );\n console.log('@@337: ', afterAction);\n yield afterAction();\n },\n { type: 'takeLatest' },\n ],\n\n updateCouponSetActiveStatus: [\n function* ({ payload }, { put, select, call }) {\n const { couponSetPK, isForcedInactive } = payload;\n const couponSet = yield select((state) => state.couponList.couponSet);\n const serviceArgs = [\n updateCouponSetActiveStatus,\n couponSetPK,\n isForcedInactive,\n ];\n function* onSuccess() {\n const updateAction = payload.updateAction || (() => {});\n const afterAction = payload.afterAction || (() => {});\n if (couponSet?.coupons && couponSet?.coupons?.length > 0) {\n yield put(\n createAction('singleCoupon/updateState')({\n singleCouponList: couponSet.coupons,\n }),\n );\n yield updateAction();\n } else {\n yield put.resolve(\n createAction('singleCoupon/getAllSingleCoupons')({\n template: couponSet,\n afterAction: updateAction,\n }),\n );\n }\n yield afterAction();\n }\n yield loading(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n\n getAllCouponSet: [\n function* ({ payload }, { put, select, call }) {\n const { ssoUid } = payload;\n console.log('@@458: ', ssoUid);\n const serviceArgs = [getAllCouponSet, ssoUid];\n\n function* onSuccess(data) {\n console.log('@@462: ', data);\n console.log(\n '@@462-1: ',\n data?.coupons?.edges.map((item) => ({\n name: item.node.template.name,\n value: item.node.pk,\n })),\n );\n yield put({\n type: 'updateState',\n payload: {\n couponSetList: data?.coupons?.edges.map((item) => ({\n name: item.node.template.name,\n value: item.node.pk,\n })),\n },\n });\n }\n yield apiWithResponseHandle(serviceArgs, onSuccess);\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","import React from 'react';\nimport './CustomStatusTag.scss';\nimport { checkCampaignIsExpired } from '../../utils/TimeFormatUtil';\nimport {\n StatusTag,\n DownloadTag,\n MessageTag,\n PublishTagType,\n BrandStatus\n} from '../../config/CustomEnums';\nimport { COUPON_STATUS } from '../../models/CouponListModel';\nconst TagType = {\n published: 'Published',\n unPublished: 'Unpublished',\n expired: 'Expired',\n};\nconst getFormatedStatus = (campaign) => {\n if (!campaign.isPublished) {\n return {\n status: TagType.unPublished,\n className: 'custom-tag-label-un-publish',\n };\n }\n\n const isExpired = checkCampaignIsExpired(campaign.endDate);\n if (!isExpired) {\n return { status: TagType.published, className: 'custom-tag-label-publish' };\n }\n return { status: TagType.expired, className: 'custom-tag-label-expired' };\n};\n\nfunction CustomStatusTag(props) {\n const campaign = props.item;\n const tag = getFormatedStatus(campaign);\n return (\n \n );\n}\n\nexport const CustomStatusTagFromText = (status, extraStyle) => {\n let statusClass = '';\n switch (status) {\n case StatusTag.active:\n case DownloadTag.completed:\n case MessageTag.scheduled:\n case MessageTag.sent:\n case MessageTag.sending:\n case DownloadTag.importCompleted:\n case COUPON_STATUS.ACTIVE_ACQUIRED:\n case COUPON_STATUS.ACTIVE:\n case PublishTagType.published:\n case BrandStatus.Yes:\n statusClass = 'custom-tag-label-publish';\n break;\n case StatusTag.deactive:\n case COUPON_STATUS.EXPIRED:\n case COUPON_STATUS.USED:\n case PublishTagType.expired:\n case DownloadTag.error:\n case MessageTag.error:\n statusClass = 'custom-tag-label-expired';\n break;\n case DownloadTag.canceled:\n case StatusTag.inactive:\n case MessageTag.saved:\n case COUPON_STATUS.INACTIVE:\n case PublishTagType.unPublished:\n case BrandStatus.No:\n statusClass = 'custom-tag-label-un-publish';\n break;\n case DownloadTag.downloading:\n case DownloadTag.importing:\n statusClass = 'custom-tag-label-downloading';\n break;\n default:\n statusClass = '';\n break;\n }\n\n return (\n \n );\n};\n\nexport default CustomStatusTag;\n","import React, { useState, useEffect } from 'react';\nimport './CustomPagination.scss';\nimport { Button, Image } from 'react-bootstrap';\nimport OmitPage from '../../assets/images/omit_page.svg';\nimport Next from '../../assets/images/next_page.svg';\nimport { createNumberArray } from '../../utils';\n\nfunction CustomPagination(props) {\n const pageSize = props.pageSize || 1;\n const initPage = props.initPage || 0;\n const pageList = createNumberArray(pageSize);\n const pageChange = props.pageChange || (() => {});\n const [currentPage, setCurrentPage] = useState(initPage);\n useEffect(() => {\n setCurrentPage(initPage);\n }, [initPage]);\n\n const getOmittPageItem = () => {\n return (\n \n
\n\n {/* \n {groupActions?.length > 0 ? (\n
\n \n {hideTab ? (\n {\n history.push({\n pathname: location.pathname,\n hash: location.hash,\n search: queryString.stringify({\n search: '',\n page: 1,\n type: key,\n rank: true,\n }),\n });\n setActiveTab(key);\n }}\n />\n )}\n
\n\n {filter.hasFilter ? (\n \n \n {listContent}\n
\n ) : (\n \n setShowFilter(!showFilter)}\n image={filterImage}\n title={'Filter'}\n />\n {filterCount > 0 ? (\n \n ) : null}\n
\n ) : null}\n\n \n {hideSearch ? (\n \n ) : (\n {\n history.push({\n pathname: location.pathname,\n hash: location.hash,\n search: queryString.stringify({\n ...queryString.parse(location.search),\n ...{ search: key, page: 1 },\n }),\n });\n }}\n />\n )}\n
\n \n {pageList.length <= 7\n ? getPagesWithLessThanSeven()\n : getPagesWithMoreThanSeven()}\n
\n );\n}\n\nexport default CustomPagination;\n","import React from 'react';\nimport './Loading.scss';\nimport { Image } from 'react-bootstrap';\nimport LoadingIcon from '../../assets/images/loading.gif';\nimport NoDataIcon from '../../assets/images/nodata.svg';\n\nfunction NoDataPage() {\n return (\n \n
\n );\n}\n\nexport default NoDataPage;\n","import React from 'react';\nimport '../campaign/campaignList/DeleteCampaignPrompt.scss';\nimport BasePrompt from '../base/prompt/BasePrompt';\n\nexport const deleteMessage = (items, related, title = '') => {\n const sections = (\n \n {related.length > 1\n ? related.slice(0, related.length - 1).join(', ') +\n ' and ' +\n related.slice(related.length - 1)\n : related.join(', ')}\n \n );\n // const sections = `${\n // related.length > 1\n // ? related.slice(0, related.length - 1).join(', ') +\n // ' and ' +\n // related.slice(related.length - 1)\n // : related.join(', ')\n // }`;\n\n // const message = (\n // \n // {items.length > 1\n // ? 'These ' +\n // items.slice(0, items.length - 1).join(', ') +\n // ' and ' +\n // items.slice(items.length - 1) +\n // ' are'\n // : 'This ' + items.join(', ') + ' is'}{' '}\n // associated with some {sections}, once deleted, it will affect other\n // content. Are you sure to delete?\n //
\n // );\n\n const message = (\n \n {items.length > 1\n ? 'These ' + title.toLowerCase() + ' are'\n : 'This ' + title.toLowerCase() + ' is'}{' '}\n associated with some {sections}, once deleted, it will affect other\n content. Are you sure to delete?\n
\n );\n\n return message;\n};\n\nfunction DeletePrompt(props) {\n const onClose = props.onClose || (() => {});\n const onConfirm = props.onConfirm || (() => {});\n const data = props.data || [];\n const title = props.title;\n const relatedName = props.relatedName;\n const relatedSections = props.relatedSections || [];\n const message = props.message;\n const displayName = props.displayName || null;\n\n const getDisplay = () => {\n if (message) {\n return null;\n }\n let mapData = [];\n if (!Array.isArray(data) && data) {\n mapData = [data];\n } else {\n mapData = data;\n }\n\n return (\n \n {mapData.map((data, index) => {\n const item = data.node ? data.node : data;\n const name = item.name;\n // console.log('@@39: ', relatedName, item.node);\n const relatedItems = relatedName\n ? item[relatedName]['edges'] || item[relatedName]\n : [];\n return (\n
\n );\n };\n\n const getDescription = () => {\n if (relatedSections.length <= 0) {\n return `Do you confirm to delete ${\n !Array.isArray(data) && data ? 'this' : 'these'\n } ${title}?`;\n }\n let mapData = [];\n if (!Array.isArray(data) && data) {\n mapData = [data];\n } else {\n mapData = data;\n }\n\n return deleteMessage(\n mapData.map((item) => item.name),\n relatedSections,\n title,\n );\n };\n\n return (\n - \n
- \n {displayName\n ? `${title}: ${item[displayName]}`\n : `${title}: ${name}`}\n
- \n {relatedItems.length > 0 ? `${relatedName}:` : null}\n {relatedItems.map((related, index) => {\n return (\n
- \n {related.node?.name || related.name || related}\n \n );\n })}\n
\n
\n {isEditMode ? (\n
\n ) : (\n <>\n \n {\n setValue(target.value);\n }}\n />\n {\n setIsEditMode(false);\n onDone && onDone(item, parseInt(value));\n }}\n >\n Done\n
\n {value || '-'}
\n {editable ? (\n \n \n {item.pk || '-'}\n \n
\n \n \n
\n \n );\n case 'name':\n if (\n field.linked === false ||\n !checkHasPermission(\n user,\n `${\n actions.includes('Detail') ? 'view' : 'change'\n }_${permissionGroup}`,\n ) ||\n (item.earningRule &&\n item.earningRule.habitTypeAllCampaignsToEarnRewards) // temp: [hardcode] disable edit global habit campaign\n ) {\n return (\n \n \n
\n \n {\n setEnlargeImage(item[field.fieldName]);\n }\n : () => {}\n }\n />\n
\n \n {\n dispatch({ type: `${model}/clearData` });\n history.push(`${location.pathname}/${item.pk}/`);\n }}\n />\n
\n \n \n
\n \n {\n history.push({\n pathname: location.pathname,\n hash: location.hash,\n search: queryString.stringify({\n ...queryString.parse(location.search),\n ...{\n page: page + 1,\n },\n }),\n });\n }}\n />\n
\n ) : null}\n\n {this.props.modalTitle}
\n \n \n {this.props.modalDetailContent}\n
\n \n \n
\n );\n };\n\n render() {\n return (\n \n \n \n
\n \n \n \n
\n \n {\n setShow(!show);\n }}\n />\n
\n ) : null}\n\n {show ? (\n \n {\n setShow(!show);\n }}\n />\n
\n {show ? (\n \n \n \n
\n \n );\n};\n\nconst FilterDate = ({ title, value, setValue = () => {} }) => {\n return (\n <>\n \n
\n );\n}\n\nexport default BaseFilter;\n","import React, { useEffect, useState } from 'react';\nimport queryString from 'query-string';\nimport { useLocation } from 'react-router-dom';\nimport BaseFilter, {\n FilterTypeEnum,\n} from '../../../components/base/BaseFilter';\nimport { ArrayStringData } from '../../../utils';\nimport {\n CustomNumberInput,\n CustomTitleLabel,\n} from '../../../components/earning/CustomBaseComponments';\n\nfunction Filter({ backAction = () => {} }) {\n const location = useLocation();\n\n const parsedSearch = queryString.parse(location.search);\n const searchOutOfStock = parsedSearch['out_of_stock'] || '';\n const searchStatus = parsedSearch['status'] || '';\n const searchExpired = parsedSearch['expired'] || '';\n\n const searchExpiredDateType = parsedSearch['expired_date'] || '';\n const searchExpiredDate = parsedSearch['absolute'] || '';\n const searchRelativeDay = parsedSearch['relativeDay'] || '';\n\n const [outOfStock, setOutOfStock] = useState(searchOutOfStock);\n const [expiredDateType, setExpiredDateType] = useState(searchExpiredDateType);\n const [expiredDate, setExpiredDate] = useState(searchExpiredDate);\n const [status, setStatus] = useState(searchStatus);\n const [expired, setExpired] = useState(searchExpired);\n const [relativeDay, setRelativeDay] = useState(searchRelativeDay);\n\n const content = [\n {\n title: 'Out of stock',\n data: [\n { name: 'Out of stock', pk: 'true' },\n { name: 'Have stock', pk: 'false' },\n ],\n value: outOfStock,\n setValue: setOutOfStock,\n componment: FilterTypeEnum.singleChoice,\n className: 'fit-content-height-area',\n },\n {\n title: 'Expired',\n data: [\n { name: 'Expired', pk: 'true' },\n { name: 'Unexpired', pk: 'false' },\n ],\n value: expired,\n setValue: setExpired,\n componment: FilterTypeEnum.singleChoice,\n className: 'fit-content-height-area',\n },\n {\n title: 'Status',\n data: [\n { name: 'Active', pk: 'true' },\n { name: 'Inactive', pk: 'false' },\n ],\n value: status,\n setValue: setStatus,\n componment: FilterTypeEnum.singleChoiceSegment,\n },\n {\n title: 'Expired date',\n data: [\n { name: 'All time', pk: 'allTime', subComponment: null },\n {\n name: 'Time Range',\n pk: 'absolute',\n subComponment: {\n value: expiredDate,\n setValue: setExpiredDate,\n componment: FilterTypeEnum.dateRange,\n },\n },\n {\n name: 'Since acquiring',\n pk: 'relativeDay',\n subComponment: {\n value: relativeDay,\n setValue: setRelativeDay,\n componment: FilterTypeEnum.input,\n },\n },\n ],\n value: expiredDateType,\n setValue: setExpiredDateType,\n componment: FilterTypeEnum.singleChoice,\n className: 'fit-content-height-area',\n },\n ];\n\n const confirmAction = () => {\n backAction();\n\n let search = {};\n if (expiredDateType) {\n search['expired_date_type'] = expiredDateType;\n switch (expiredDateType) {\n case 'absolute':\n search['expired_date'] = expiredDate;\n break;\n case 'relativeDay':\n search['relative_day'] = relativeDay;\n break;\n default:\n break;\n }\n }\n\n return search;\n };\n\n return \n \n Reset All\n \n\n {content.map((item) => {\n if (item.customComponment) return item.customComponment;\n\n return (\n
\n \n \n {\n // backAction();\n\n let search = {};\n\n content.map((item) => {\n const key = item.key || item.title.toLowerCase().replace(/ /g, '_');\n const value = item.value;\n\n switch (item.componment) {\n case FilterTypeEnum.date:\n case FilterTypeEnum.dateRange:\n case FilterTypeEnum.datetime:\n case FilterTypeEnum.singleChoiceSegment:\n if (value) {\n search[key] = value;\n }\n break;\n case FilterTypeEnum.singleChoice:\n if (value) {\n search[key] = value;\n }\n\n item.data.map((val) => {\n if (val.pk === value && val.subComponment) {\n if (\n val.subComponment.componment ===\n FilterTypeEnum.choice &&\n val.subComponment.value.length > 0\n ) {\n search[value] = val.subComponment.value.join(',');\n } else {\n search[value] = val.subComponment.value;\n }\n }\n });\n\n break;\n case FilterTypeEnum.slider:\n if (value[1] > 0) {\n search[key] = value.join(',');\n }\n break;\n case undefined:\n break;\n default:\n if (value.length > 0) {\n search[key] = value.join(',');\n }\n break;\n }\n });\n\n const customSearch = backAction();\n\n history.push({\n pathname: location.pathname,\n hash: location.hash,\n search: queryString.stringify({\n page: 1,\n rank: parsedSearch['rank'],\n search: parsedSearch['search'],\n ...search,\n ...(customSearch ? customSearch : {}),\n }),\n });\n }}\n image={backImage}\n />\n
\n\n \n
\n );\n }\n };\n\n applicableStoreView = () => {\n if (\n this.props.shouldBeUsedInStores &&\n this.props.selectedStores &&\n this.props.selectedStores.length > 0\n ) {\n const storeList = this.props.selectedStores.map((store) => {\n return {\n name: store.storeName,\n action: () => this.setState({ currentSelectedStore: store }),\n };\n });\n return (\n \n
\n Related brand
\n \n {this.props.selectedBrand.name}\n
\n \n
\n );\n }\n };\n\n modalOnHide = () => {\n this.props.dispatch(\n createAction('createCoupon/updateCouponTemplate')({\n generateCoupon: false,\n notSaveToSession: true,\n }),\n );\n };\n\n generateCouponButtonClicked = () => {\n const selectedStore = this.state.currentSelectedStore?.storePK;\n switch (this.props.couponFormat) {\n case COUPON_TEMPLATE_TYPE.storeCode:\n if (!this.state.quantity) {\n this.setState({\n errorMessage: 'This field is required.',\n });\n break;\n }\n\n this.props.dispatch(\n createAction('createCoupon/generateCoupon')({\n quantity: this.state.quantity,\n store: selectedStore,\n redirectAction: (couponSetID) => {\n if (\n this.props.history.location.pathname.includes('edit') ||\n this.props.toSingleCouponList\n ) {\n this.props.history.push({\n pathname: `/coupons/${couponSetID}`,\n hash: CouponURLFragments.list,\n });\n }\n },\n }),\n );\n\n this.modalOnHide();\n break;\n default:\n this.props.dispatch(\n createAction('downloadAndImport/importFile')({\n from:\n this.props.couponFormat === COUPON_TEMPLATE_TYPE.couponCode || this.props.couponFormat === COUPON_TEMPLATE_TYPE.couponMTRCode\n ? ImportResource.generateCodeCoupon\n : this.props.couponFormat === COUPON_TEMPLATE_TYPE.couponQRCode\n ? ImportResource.generateQRCodeCoupon\n : ImportResource.generateImageCoupon,\n file: this.props.importedFile,\n related: `${this.props.couponTemplate}|${selectedStore || ''}`,\n }),\n );\n break;\n }\n\n // this.props.dispatch(\n // createAction('createCoupon/updateCouponTemplate')({\n // generateCoupon: false,\n // notSaveToSession: true,\n // }),\n // );\n };\n\n otherBody = () => {\n return (\n <>\n {this.relateBrandView()}\n {this.applicableStoreView()}\n {this.props.couponFormat === COUPON_TEMPLATE_TYPE.storeCode ? (\n \n
\n Applicable stores
\n \n
\n ) : this.props.couponFormat === COUPON_TEMPLATE_TYPE.couponCodeImage ? (\n \n
\n Quantity
\n \n this.setState({ quantity: e.target.value })}\n />\n \n
\n \n {this.state.errorMessage}\n
\n \n
\n ) : (\n \n
\n )}\n \n );\n };\n\n render() {\n return (\n \n enLocaleNumberFormatter(value.toFixed(0))}\n />\n \n Campaign Overview\n \n \n
\n );\n};\n\nexport default CampaignsCard;\n","import React from 'react';\nimport { PieChart, Pie, Cell } from 'recharts';\nimport './CouponsPieChart.scss';\nimport {\n COUPON_PIE_CHART_CONFIG,\n ANIMATION_DURATION,\n} from '../../config/DashboardConfig';\n\nconst RADIAN = Math.PI / 180;\nconst renderCustomizedLabel = ({\n cx,\n cy,\n midAngle,\n innerRadius,\n outerRadius,\n percent,\n index,\n}) => {\n if (percent === 0) {\n return null;\n }\n const displayString = `${(percent * 100).toFixed(0)}%`;\n const radius =\n innerRadius +\n (outerRadius - innerRadius) * (displayString.length === 4 ? 0.05 : 0.3);\n const x = cx + radius * Math.cos(-midAngle * RADIAN);\n const y = cy + radius * Math.sin(-midAngle * RADIAN);\n\n return (\n Campaigns
\n \n Total published\n
\n \n Conversion (Buy coupons/ earn points)\n
\n\n \n enLocaleNumberFormatter(value.toFixed(0))}\n />\n {getValueChangeLabel(conversions?.change)}\n
\n \n Share\n
\n\n \n `${(value * 100).toFixed(0)}%`}\n />\n {getValueChangeLabel(shareRate?.change)}\n
\n \n View\n
\n \n enLocaleNumberFormatter(value.toFixed(0))}\n />\n {getValueChangeLabel(views?.change)}\n
\n \n \n Coupon Activities Overview\n \n \n
\n );\n};\n\nexport default CouponsCard;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport Slide from '../../assets/images/slide-1-image.svg';\nimport './OnBoardingSlideOne.scss';\nfunction OnboardingSlideOne({ width, height }) {\n const isPadSize = width < 1000;\n\n const titleDes = () => {\n return (\n coupons
\n \n
\n \n enLocaleNumberFormatter(value.toFixed(0))}\n />\n
\n \n Total Activities\n
\n \n {COUPON_PIE_CHART_CONFIG.map((item, index) => (\n
\n \n \n enLocaleNumberFormatter(value.toFixed(0))\n }\n />\n
\n ))}\n \n
\n );\n}\n\nexport default OnboardingSlideOne;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport Slide from '../../assets/images/slide-2-image.svg';\nimport Dot from '../../assets/images/under-line-dot.svg';\nimport LeftUnderLine from '../../assets/images/left-underline.svg';\nimport RightUnderLine1 from '../../assets/images/right-underline-1.svg';\nimport RightUnderLine2 from '../../assets/images/right-underline-2.svg';\nimport RightUnderLine2Short from '../../assets/images/right-underline-2-short.svg';\nimport 'swiper/swiper-bundle.css';\nimport './OnboardingSlideTwo.scss';\n\nconst TEXT_LEFT_BASE_STYLES = {\n 1: [74, 52],\n 2: [552, 750],\n 3: [591, 770],\n};\n\nconst slideTwoText = (title, description, eg, position, isSmall, leftFix) => {\n const left = isSmall\n ? TEXT_LEFT_BASE_STYLES[position][0] + leftFix\n : TEXT_LEFT_BASE_STYLES[position][1];\n return (\n \n {order()}\n
\n \n \n
\n );\n}\n\nexport default OnboardingSlideTwo;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport Slide from '../../assets/images/slide-2-image.svg';\nimport './OnboardingSlideTwo.scss';\nimport './OnboardingSlideTwoVertical.scss';\nconst slideTwoText = (title, description, eg) => {\n return (\n \n \n \n \n
\n );\n};\n\nfunction OnboardingSlideTwoVertical({ width, height }) {\n return (\n \n \n
\n );\n}\n\nexport default OnboardingSlideTwoVertical;\n","import { CampaignType } from '../../config/CustomEnums';\nimport CouponWhite from '../../assets/images/slide-coupon-white.svg';\nimport CouponOn from '../../assets/images/slide-coupon-on.svg';\n\nimport EarningWhite from '../../assets/images/slide-earning-white.png';\nimport EarningOn from '../../assets/images/slide-earning-on.png';\n\nimport GeneralWhite from '../../assets/images/slide-general-white.svg';\nimport GeneralOn from '../../assets/images/slide-general-on.svg';\n\nexport const ButtonConfig = {\n coupon: {\n imageOn: CouponOn,\n imageOff: CouponWhite,\n textColorOn: 'black',\n textColorOff: 'white',\n backgroundColorOn: 'white',\n backgroundColorOff: '#4E8DD7',\n des: 'Start by create coupon set',\n title: 'Coupon campaign',\n type: CampaignType.couponsCampaign,\n location: {\n pathname: '/coupons/create',\n },\n },\n\n earning: {\n imageOn: EarningOn,\n imageOff: EarningWhite,\n textColorOn: 'black',\n textColorOff: 'white',\n backgroundColorOn: 'white',\n backgroundColorOff: '#4E8DD7',\n des: 'Start by create earning rule',\n title: 'Earning campaign',\n type: CampaignType.earningRulesCampaign,\n location: {\n pathname: '/earns/create',\n },\n },\n general: {\n imageOn: GeneralOn,\n imageOff: GeneralWhite,\n textColorOn: 'black',\n textColorOff: 'white',\n backgroundColorOn: 'white',\n backgroundColorOff: '#4E8DD7',\n des: 'Create Directly',\n title: 'General message campaign',\n type: CampaignType.generalMessageCampaign,\n location: {\n pathname: '/campaigns/create',\n search: `type=${CampaignType.generalMessageCampaign}`,\n },\n },\n};\n","import React, { useState } from 'react';\nimport { Image } from 'react-bootstrap';\nimport BackgroundLong from '../../assets/images/slide-3-background-long.svg';\nimport BackgroundMiddle from '../../assets/images/slide-3-background-middle-mask.svg';\nimport OrLong from '../../assets/images/slide-or-long.svg';\nimport OrMiddle from '../../assets/images/slide-or-middle.svg';\nimport './OnboardingSlideThree.scss';\nimport { useHistory } from 'react-router-dom';\nimport { useDispatch } from 'react-redux';\nimport { ButtonConfig } from './OnboardingConfig';\n\nfunction OnboardingSlideThree({ width, height }) {\n const isSmall = width < 1100;\n const history = useHistory();\n const dispatch = useDispatch();\n const [currentHover, setCurrentHover] = useState(null);\n\n const onHover = (type) => {\n setCurrentHover(type);\n };\n\n const getButtonItems = (config) => {\n return (\n <>\n \n onHover(config.type)}\n onMouseLeave={() => onHover(null)}\n onClick={() => {\n history.push(config.location);\n dispatch({\n type: 'users/updateState',\n payload: { firstLogin: false },\n });\n }}\n >\n \n {config.des}\n \n
\n \n \n \n );\n };\n\n return (\n \n \n {getButtonItems(ButtonConfig.coupon)}\n {getButtonItems(ButtonConfig.earning)}\n
\n \n \n \n
\n \n onHover(config.type)}\n onMouseLeave={() => onHover(null)}\n onClick={() => {\n history.push(config.location);\n dispatch({\n type: 'users/updateState',\n payload: { firstLogin: false },\n });\n }}\n >\n \n {config.des}\n \n
\n \n \n \n );\n };\n\n return (\n \n
\n );\n}\n\nexport default OnboardingSlideThreeVertical;\n","import React from 'react';\nimport SwiperCore, { Pagination, Autoplay } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/swiper-bundle.css';\nimport './CustomSwiper.scss';\nimport OnboardingSlideOne from './OnboardingSlideOne';\nimport OnboardingSlideTwo from './OnboardingSlideTwo';\nimport OnboardingSlideTwoVertical from './OnboardingSlideTwoVertical';\nimport OnboardingSlideThree from './OnboardingSlideThree';\nimport OnboardingSlideThreeVertical from './OnboardingSlideThreeVertical';\nSwiperCore.use([Pagination, Autoplay]);\n\nfunction CustomSwiper({ width, height }) {\n return (\n \n \n \n
\n \n {getButtonItems(ButtonConfig.coupon)}\n {getButtonItems(ButtonConfig.earning)}\n
\n \n
\n \n {\n dispatch(\n createAction('dashboard/getDashboardData')({\n startDate: startDate.format('YYYY-MM-DD'),\n endDate: endDate.format('YYYY-MM-DD'),\n }),\n );\n }}\n clearDataEvent={() => {\n dispatch(createAction('dashboard/clearState')());\n }}\n />\n
\n \n
\n \n \n \n \n
\n \n
\n\n CampaignItemOverview {params.id}
,\n },\n ];\n\n return (\n\n {this.props.title}\n
\n ) : null}\n {this.props.itemTitleList.map((title, index) => {\n return (\n \n {\n this.setState({\n imageUrl: this.props.itemValueList[index],\n });\n }}\n />\n ) : (\n
\n );\n })}\n \n
\n {title === 'Image' ? (\n {title}
\n \n {this.props.itemValueList[index]}\n
\n )}\n \n
\n );\n };\n\n render() {\n return (\n \n \n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default SingleCouponOverview;\n","import React, { Component } from 'react';\nimport { withRouter } from 'react-router-dom';\nimport CustomListComponent from '../../../components/base/CustomListComponent';\nimport { singleCouponBreads } from '../../../config/CustomBreadConfig';\nimport CustomBreadcrumb from '../../../components/base/CustomBreadcrumb';\nimport SingleCouponOverview from '../../../components/coupon/couponList/SingleCouponOverview';\nimport { DeleteAndMultipleButtons } from '../../../components/base/BottomStepComponent';\nimport { connect } from 'react-redux';\nimport { createAction } from '../../../utils';\nimport DeleteSingleCouponView from '../../../components/coupon/couponList/DeleteSingleCouponView';\nimport DeactiveSingleCouponView from '../../../components/coupon/couponList/DeactiveSingleCouponView';\nimport {\n CouponURLQueryKeys,\n CouponURLFragments,\n} from '../../../components/coupon/CouponUrlConfig';\nimport DeletePrompt from '../../../components/base/DeletePrompt';\nimport { DELETE_RELATED_SECTIONS } from '../../../config/CustomEnums';\nconst queryString = require('query-string');\n\n@connect(({ couponList, singleCoupon }) => ({\n couponSet: couponList.couponSet,\n singleCoupon: singleCoupon.singleCoupon,\n}))\nclass SingleCouponDetail extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showDeleteView: false,\n showDeactiveView: false,\n selectedOwner: props.singleCoupon?.owner,\n };\n }\n\n componentDidMount() {\n const couponSetId = this.props.match.params.id;\n const singleCouponId = this.props.match.params.singleCouponId;\n this.props.dispatch(\n createAction('couponList/getCouponSet')({\n couponSetPK: couponSetId,\n notSaveToSession: true,\n }),\n );\n this.props.dispatch(\n createAction('singleCoupon/getSingleCoupon')({\n pk: singleCouponId,\n }),\n );\n }\n\n componentWillUnmount() {\n this.props.dispatch(createAction('singleCoupon/clearSingleCoupon')());\n }\n\n goBacktoCouponList = () => {\n return this.props.history.push({\n pathname: `/coupons/${this.props.couponSet.pk}`,\n search: queryString.stringify({\n [CouponURLQueryKeys.rank]: true,\n [CouponURLQueryKeys.page]: 1,\n [CouponURLQueryKeys.searchKey]: '',\n }),\n hash: CouponURLFragments.list,\n state: this.props.couponSet,\n });\n };\n\n saveButtonClicked = () => {\n if (this.state.selectedOwner && this.state.selectedOwner !== '-') {\n this.props.dispatch(\n createAction('singleCoupon/grantSingleCoupon')({\n couponPK: this.props.singleCoupon.pk,\n customerPK: this.state.selectedOwner?.value?.pk,\n afterAction: this.goBacktoCouponList,\n }),\n );\n }\n this.goBacktoCouponList();\n };\n\n getBottomActions = () => {\n let actions = [];\n if (this.props.singleCoupon?.isForcedInactive) {\n actions = [\n {\n text: 'Active',\n action: () => {\n this.props.dispatch(\n createAction('singleCoupon/activeSingleCoupon')({\n couponPK: this.props.singleCoupon.pk,\n activeAction: this.goBacktoCouponList,\n }),\n );\n },\n },\n ...actions,\n ];\n } else {\n actions = [\n {\n text: 'Deactive',\n action: () => this.setState({ showDeactiveView: true }),\n },\n ...actions,\n ];\n }\n if (\n this.props.singleCoupon.owner &&\n this.props.singleCoupon.owner.owner !== ''\n ) {\n actions = [\n ...actions,\n {\n text: 'Reclaim',\n action: () => {\n this.props.dispatch(\n createAction('singleCoupon/reclaimCoupon')({\n couponPK: this.props.singleCoupon.pk,\n afterAction: () => this.goBacktoCouponList(),\n }),\n );\n },\n },\n ];\n } else {\n actions = [\n ...actions,\n {\n text: 'Save',\n action: this.saveButtonClicked,\n },\n ];\n }\n return actions;\n };\n\n render() {\n return (\n \n {\n this.setState({ selectedOwner: owner });\n }}\n />\n {\n this.setState({ showDeleteView: true });\n }}\n multipleButtons={this.getBottomActions()}\n />\n {\n this.setState({ showDeleteView: false });\n }}\n onConfirm={() => {\n this.props.dispatch(\n createAction('singleCoupon/updateState')({\n checkedList: [this.props.singleCoupon],\n }),\n );\n this.props.dispatch(\n createAction('singleCoupon/delete')({\n couponPK: this.props.singleCoupon.pk,\n afterAction: this.goBacktoCouponList,\n }),\n );\n }}\n />\n\n this.setState({ showDeactiveView: false })}\n singleCoupon={this.props.singleCoupon}\n couponSet={this.props.couponSet}\n activeBtnClicked={() => {\n this.props.dispatch(\n createAction('singleCoupon/deactiveSingleCoupon')({\n couponPK: this.props.singleCoupon.pk,\n afterAction: this.goBacktoCouponList,\n }),\n );\n }}\n />\n
\n );\n }\n}\n\nexport default withRouter(SingleCouponDetail);\n","import React, { Component } from 'react';\nimport { createAction } from '../../../utils';\nimport './DeleteSingleCouponView.scss';\nimport { connect } from 'react-redux';\nimport BaseActionModal from './BaseActionModalView';\n\n@connect()\nclass DeleteSingleCouponView extends Component {\n getSingleCouponContent = () => {\n return (\n \n {this.props.singleCouponList?.map((singleCoupon, index) => {\n if (singleCoupon?.dateOfGrant) {\n return (\n \n Coupon:{' '}\n {`${this.props.couponSet.name}(${singleCoupon.serialNumber})`}\n \n );\n } else {\n return (\n \n Coupon:{' '}\n {`${this.props.couponSet.name}(${singleCoupon?.serialNumber})`}{' '}\n \n );\n }\n })}\n
\n );\n };\n\n render() {\n return (\n - \n
- \n {`Coupon transaction: ${this.props.couponSet.name}(${singleCoupon.serialNumber}) at ${singleCoupon.dateOfGrant}`}\n \n
\n \n {earningruleTypeSelectArea()}\n
\n \n \n )}\n ,\n ];\n\n return (\n <>\n \n {showSkuPattern ? (\n <>\n setCurrentSkuPattern(target.value)}\n className=\"custom-markdown-area-title\"\n value={skuPattern}\n />\n \n ) : null}\n
\n {hideTitle ? null : (\n \n )}\n\n {hideRewardType ? null : (\n <>\n \n {\n setRewardType(value);\n }}\n default={rewardType}\n options={radioOptions}\n />\n
\n \n )}\n\n {rewardType === EarningRuleRewardType.coupons ? (\n <>\n \n setQuantity(target.value)}\n className=\"custom-number-input-short\"\n value={quantity}\n onFocus={() => { }}\n />\n \n \n
\n \n {\n setGeneralPurchaseSubType(value);\n }}\n default={generalPurchaseSubType}\n options={GeneralPurchaseSubTypeOptionsWithoutGeneralType}\n />\n
\n\n \n setReferralType(value)}\n default={referralType}\n options={radioOptions}\n />\n
\n\n {referralType !== 'INVITEE' ? (\n <>\n \n setValue(target.value)}\n value={defaultValue || ''}\n className={`custom-markdown-area-title ${\n error.error ? 'error-field' : ''\n } custom-markdown-area-title-short ${\n type === 'number' ? 'custom-number-input-short' : ''\n } ${customInputClassName}`}\n onFocus={focusChange}\n />\n
\n );\n}\n\nexport default CustomTitleWithInput;\n","import React, { useState, useRef, useEffect, createRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport '../campaign/campaignCreation/PropertiesGeneralSection.scss';\nimport './RewardSection.scss';\nimport './QRCodeScanningSection.scss';\nimport { CSVReader } from 'react-papaparse';\nimport {\n CustomTitleLabel,\n CustomNumberInput,\n CustomNumberInputWithUnit,\n CustomNumberMutipleInputWithUnit,\n} from './CustomBaseComponments';\nimport { Button, Image } from 'react-bootstrap';\nimport ErrorFieldMessage from '../base/ErrorFieldMessage';\nimport { EarningRuleErrorHandleField } from './EarningRuleHandleError';\nimport {\n isShowError,\n firstError,\n} from '../campaign/campaignCreation/CreateCampaignHandleError';\nimport deleteImage from '../../assets/images/earning/deletex1.png';\nimport { removeElementFromArray, useCompare } from '../../utils';\nimport { EarningRuleType } from '../../config/CustomEnums';\nimport CustomTitleWithInput from '../base/CustomTitleWithInput';\nconst buttonRef = createRef();\n\nfunction QRCodeScanningSection(props) {\n const camma = ',';\n\n const dispatch = useDispatch();\n\n const defaultValue = props.defaultValue || {};\n const [inputQRCodes, setInputQRCodes] = useState(defaultValue.qrCodes || []);\n const [importQRCodes, setImportQRCodes] = useState([]);\n const [qrCodes, setQRCodes] = useState(defaultValue.qrCodes || []);\n const [showFileBox, setShowFileBox] = useState(false);\n const [overallLimit, setOverallLimit] = useState(defaultValue.overallLimit);\n const [periodicLimit, setPeriodicLimit] = useState(\n defaultValue.periodicLimit,\n );\n const [periodicLimitDays, setPeriodicLimitDays] = useState(\n defaultValue.periodicLimitDays,\n );\n const [perHeadLimit, setPerHeadLimit] = useState(defaultValue.perHeadLimit);\n const [perHeadPeriodicLimit, setPerHeadPeriodicLimit] = useState(\n defaultValue.perHeadPeriodicLimit,\n );\n const [perHeadPeriodicLimitDays, setPerHeadPeriodicLimitDays] = useState(\n defaultValue.perHeadPeriodicLimitDays,\n );\n\n const [machineId, setMachineId] = useState(defaultValue.machineId);\n\n const vals = {\n qrCodes,\n overallLimit,\n periodicLimit,\n periodicLimitDays,\n perHeadLimit,\n perHeadPeriodicLimit,\n perHeadPeriodicLimitDays,\n machineId,\n };\n\n const onSubmit = props.onSubmit;\n const onSubmitAction = props.onSubmitAction || (() => { });\n const { errorFields } = useSelector((state) => ({\n errorFields: state.createEarningRules.errorFields,\n }));\n\n const hasValChanged = useCompare(vals);\n useEffect(() => {\n if (hasValChanged) {\n dispatch({ type: 'createEarningRules/changeVals', payload: { vals } });\n }\n });\n\n const isError = (name) => {\n const error = isShowError(\n EarningRuleErrorHandleField[name].name,\n errorFields,\n );\n\n return error;\n };\n\n useEffect(() => {\n if (onSubmit) {\n onSubmitAction(vals);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [onSubmit]);\n\n useEffect(() => {\n firstError(`${EarningRuleErrorHandleField.qrCodes.name}`, errorFields);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [errorFields]);\n\n const handleOpenDialog = (e) => {\n // Note that the ref is set async, so it might be null at some point\n if (buttonRef.current) {\n buttonRef.current.open(e);\n }\n };\n\n const handleOnFileLoad = (data) => {\n console.log('---------------------------');\n console.log(data);\n console.log('---------------------------');\n\n let importedQRCodes = [];\n data.map((element) => {\n const hasValueData = removeElementFromArray(element.data, '');\n if (hasValueData.length > 0) {\n // importQRCodes.push(hasValueData);\n importedQRCodes = [...importedQRCodes, ...hasValueData];\n }\n });\n setImportQRCodes(importedQRCodes);\n // setQRCodes([...qrCodes, ...importQRCodes]);\n setQRCodesWithoutDuplicate(inputQRCodes, importedQRCodes);\n\n setShowFileBox(true);\n };\n\n const handleOnError = (err, file, inputElem, reason) => {\n console.log(err);\n };\n\n const handleOnRemoveFile = (data) => {\n console.log('---------------------------');\n console.log(data);\n console.log('---------------------------');\n };\n\n const handleRemoveFile = (e) => {\n // Note that the ref is set async, so it might be null at some point\n if (buttonRef.current) {\n buttonRef.current.removeFile(e);\n setQRCodes(\n qrCodes.filter(function (val) {\n return importQRCodes.indexOf(val) === -1;\n }),\n );\n setImportQRCodes([]);\n\n setShowFileBox(false);\n }\n };\n\n const setQRCodesWithoutDuplicate = (inputQRCodes, importQRCodes) => {\n const nonEmptyInputQRcodes = removeElementFromArray(inputQRCodes, '');\n const nonEmptyImportQRcodes = removeElementFromArray(importQRCodes, '');\n\n const importRemoveDuplicateFromInput = nonEmptyImportQRcodes.filter(\n (val) => !nonEmptyInputQRcodes.includes(val),\n );\n\n setQRCodes([...importRemoveDuplicateFromInput, ...nonEmptyInputQRcodes]);\n };\n\n const qrCodesCom = (type) => {\n const isActivationCode = type === EarningRuleType.activationCode;\n const isExtraReward = type === EarningRuleType.qrCodeRecyclingExtraRewards;\n return (\n <>\n \n\n \n \n Choose file\n \n
\n )}\n \n\n \n \n
\n\n {file && file.name}
\n \n {qrCodes.map((element) => {\n return (\n
\n \n }\n \n );\n };\n\n return (\n <>\n {defaultValue.type === EarningRuleType.qrCodeScanning ||\n defaultValue.type === EarningRuleType.activationCode ||\n defaultValue.type === EarningRuleType.qrCodeRecyclingExtraRewards\n ? (\n qrCodesCom(defaultValue.type)\n ) : (\n <>\n \n \n \n {\n setQRCodes(removeElementFromArray(qrCodes, element));\n setInputQRCodes(\n removeElementFromArray(inputQRCodes, element),\n );\n setImportQRCodes(\n removeElementFromArray(importQRCodes, element),\n );\n }}\n >\n
\n );\n })}\n \n {/* */}\n
\n );\n}\n\nexport function CustomContentFilterDropDown({\n title,\n data,\n content,\n addContentAction = (section) => { },\n}) {\n const [isShowDropdown, setIsShowDropdown] = useState(false);\n return (\n \n {\n const value = e.target.value;\n setFilterKey(value);\n\n let filteredResult = {};\n Object.keys(contentSections).map(\n (key) =>\n (filteredResult[key] = contentSections[key].filter(\n (val) => val.name?.toLowerCase()?.indexOf(value.toLowerCase()) >= 0,\n )),\n );\n setContentSelections(filteredResult);\n }}\n value={filterKey}\n />\n
\n \n {Object.keys(contentSelections).map((section, index) => {\n return (\n
\n \n\n {\n sectionSelectAction(val);\n setSelectedSections([...selectedSections, val]);\n }}\n >\n
\n );\n })}\n - \n \n
\n \n \n
\n \n );\n })\n : null}\n \n \n {\n setCarbons({\n ...carbons,\n [category.pk]: { ...carbons[category.pk], carbon: target.value },\n });\n }}\n defaultValue={carbons[category.pk] ? carbons[category.pk].carbon : null}\n >\n carbon\n {\n setCarbons({\n ...carbons,\n [category.pk]: { ...carbons[category.pk], point: target.value },\n });\n }}\n value={carbons[category.pk] ? carbons[category.pk].point : null}\n >\n points\n
\n );\n}\n\nfunction RewardCarbonSection(props) {\n const defaultValue = props.defaultValue || {};\n\n // const materialCommonItems = [\n // { pk: 4, name: 'Glass bottle' },\n // { pk: 5, name: 'Paper' },\n // ];\n\n const { categoryList } = useSelector((state) => ({\n categoryList: state.storeCategoryList.categoryList,\n }));\n\n const [quantity, setQuantity] = useState(defaultValue.quantity);\n const [carbons, setCarbons] = useState(defaultValue.carbons || {});\n\n const [content, setContent] = useState([]);\n // const [isShowDropdown, setIsShowDropdown] = useState(false);\n\n // const [showCoupons, setShowCoupons] = useState();\n const dispatch = useDispatch();\n const history = useHistory();\n\n const vals = {\n carbons,\n quantity,\n };\n const hasValchanged = useCompare(vals);\n useEffect(() => {\n if (hasValchanged) {\n dispatch({ type: 'createEarningRules/changeVals', payload: { vals } });\n }\n });\n\n const onSubmit = props.onSubmit;\n const onSubmitAction = props.onSubmitAction || (() => {});\n const { errorFields } = useSelector((state) => ({\n errorFields: state.createEarningRules.errorFields,\n }));\n\n useEffect(() => {\n if (onSubmit) {\n onSubmitAction(vals);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [onSubmit]);\n\n useEffect(() => {\n firstError(`${EarningRuleErrorHandleField.coupons.name}`, errorFields);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [errorFields]);\n\n useEffect(() => {\n const rewardsSubcategories = defaultValue.rewards\n ? Object.keys(defaultValue.rewards)\n : [];\n\n const initContent = [];\n\n for (let i = 0; i < categoryList.length; i++) {\n const category = categoryList[i];\n\n for (let f = 0; f < category.subcategories.length; f++) {\n const subcategory = category.subcategories[f];\n console.log('@@120: ', rewardsSubcategories, subcategory.pk);\n if (rewardsSubcategories.includes(subcategory.pk.toString())) {\n initContent.push({\n title: subcategory.name,\n data: subcategory,\n componment: (\n \n {\n const afterRemoveContent = content.filter(\n (val) => val.title !== item.title,\n );\n setContent(afterRemoveContent);\n\n dispatch({\n type: 'createEarningRules/removeVals',\n payload: { rewardsGroupKey: item.data.pk },\n });\n }}\n >\n
\n \n \n );\n })}\n\n \n {\n onSubmitAction(data);\n }}\n defaultValue={\n defaultValue.rewards\n ? defaultValue.rewards[item.data.pk]\n : {}\n }\n hideTitle\n groupKey={item.data.pk}\n />\n
\n \n \n {\n const afterRemoveContent = content.filter(\n (val) => val.skuName !== item.skuName,\n );\n const newContent = afterRemoveContent?.map((val, index) => ({\n ...val,\n skuName: `SKU ${index + 1} `,\n }));\n setContent(newContent);\n dispatch({\n type: 'createEarningRules/removeVals',\n payload: { rewardsGroupKey: item.pk },\n });\n }}\n src={DeleteIcon}\n className=\"content-delete-button reward-sku-delete-button\"\n />\n
\n\n \n
\n \n \n );\n })}\n\n \n {\n onSubmitAction(data);\n }}\n showSkuPattern\n defaultValue={item}\n hideTitle\n groupKey={`SKU${index + 1}`}\n rewardChange={(reward, group) => {\n const newContent = content?.map((data, index) => {\n if (parseInt(group?.replace(\"SKU\", \"\")) === index + 1) {\n return {\n ...data,\n ...reward,\n };\n }\n return data;\n });\n setContent(newContent);\n }}\n />\n
\n \n {\n setRewardType(value);\n }}\n default={rewardType}\n options={RADIO_OPTIONS}\n />\n
\n\n {rewardType === EarningRuleRewardType.coupons ? (\n <>\n \n {showExtra && (\n \n )}\n {\n const { value } = target;\n setQuantity(value === '' ? null : value);\n }}\n className=\"custom-number-input-short\"\n value={quantity}\n />\n \n
\n \n {showExtra && (\n \n )}\n setCarbonReward(target.value)}\n className=\"custom-number-input-short\"\n value={carbonReward}\n onFocus={() => {}}\n />\n \n
\n {/* \n ) : null} */}\n \n );\n};\n\nfunction StepRewardSection(props) {\n const defaultValue = props.defaultValue || {};\n const [showCreateNewLinkPrompt, setShowCreateNewLinkPrompt] = useState(false);\n const history = useHistory();\n const params = useParams();\n\n const onSubmit = props.onSubmit;\n const onSubmitAction = props.onSubmitAction || (() => {});\n\n return (\n \n setShowCreateNewLinkPrompt(false)}\n rightButton={{\n text: PROMOT_CONFIG.button,\n action: () => {\n history.push({\n pathname: '/coupons/create',\n state: {\n from: params.id\n ? `/earns/${params.id}/edit/`\n : '/earns/create',\n title: 'Continue to Create Earning Rule',\n content: 'You can continue to create the earning rule.',\n },\n });\n },\n }}\n title={PROMOT_CONFIG.title}\n description={\n 'You will leave the campaign creation process. After you create a coupon set, you can come back to create a earning rule.'\n }\n />\n
\n \n );\n}\n\nexport default StepRewardSection;\n","import React, { useState, useEffect } from 'react';\nimport { useDispatch, connect } from 'react-redux';\nimport { Image } from 'react-bootstrap';\nimport '../campaign/campaignCreation/PropertiesGeneralSection.scss';\nimport './RewardSection.scss';\nimport ErrorFieldMessage from '../base/ErrorFieldMessage';\nimport { EarningRuleErrorHandleField } from './EarningRuleHandleError';\nimport { firstError } from '../campaign/campaignCreation/CreateCampaignHandleError';\nimport { useCompare } from '../../utils';\nimport DeleteIcon from '../../assets/images/deleteIcon.png';\nimport './RewardSKUSection.scss';\nimport RewardSection from './RewardSection';\n\nconst defaultContent = (defaultValue) => {\n if (defaultValue?.octopusExtraRewards?.length) {\n const rewardContents = defaultValue.octopusExtraRewards?.map((reward, index) => {\n return {\n rewardName: `Reward ${index + 1}`,\n ...reward,\n };\n });\n return rewardContents;\n }\n return [];\n};\n\nconst OctopusExtraRewardSection = ({\n errorFields,\n onSubmit,\n onSubmitAction = () => { },\n defaultValue,\n}) => {\n const dispatch = useDispatch();\n const [content, setContent] = useState(defaultContent(defaultValue));\n const vals = {\n octopusExtraRewards: content,\n };\n const hasValsChanged = useCompare(vals);\n useEffect(() => {\n if (hasValsChanged) {\n dispatch({ type: 'createEarningRules/changeVals', payload: { vals } });\n }\n });\n\n useEffect(() => {\n if (onSubmit) {\n console.log('useEffectvals:', vals);\n onSubmitAction(vals);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [onSubmit]);\n\n useEffect(() => {\n firstError(`${EarningRuleErrorHandleField.octopusExtraRewards.name}`, errorFields);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [errorFields]);\n\n return (\n <>\n \n {content.map((item, index) => {\n return (\n <>\n \n \n {\n const afterRemoveContent = content.filter(\n (val) => val.rewardName !== item.rewardName,\n );\n const newContent = afterRemoveContent?.map((val, index) => ({\n ...val,\n rewardName: `Reward ${index + 1} `,\n }));\n setContent(newContent);\n dispatch({\n type: 'createEarningRules/removeVals',\n payload: { extraRewardsGroupKey: item.pk },\n });\n }}\n src={DeleteIcon}\n className=\"content-delete-button reward-sku-delete-button\"\n />\n
\n\n \n
\n \n \n );\n })}\n\n \n {\n onSubmitAction(data);\n }}\n defaultValue={item}\n hideTitle\n showCouponRemoveButton\n // hideCarbonInput\n groupKey={`octopusReward${index + 1}`}\n rewardChange={(reward, group) => {\n const newContent = content?.map((data, index) => {\n if (parseInt(group?.replace(\"octopusReward\", \"\")) === index + 1) {\n return {\n ...data,\n ...reward,\n };\n }\n return data;\n });\n setContent(newContent);\n }}\n />\n
\n \n \n \n
\n \n );\n })}\n\n \n {\n const afterRemoveContent = content.filter(\n (val) => val.title !== item.title,\n );\n setContent(afterRemoveContent);\n\n dispatch({\n type: 'createEarningRules/removeVals',\n payload: { rewardsGroupKey: item.data.pk },\n });\n }}\n >\n
\n \n {\n onSubmitAction(data);\n }}\n defaultValue={\n defaultValue.rewards\n ? defaultValue.rewards[item.data.pk]\n : {}\n }\n hideTitle\n hideRewardType\n hideCarbonInput\n groupKey={item.data.pk}\n customPointsTitle=\"Extra CW Points for users\"\n defaultRewardType={EarningRuleRewardType.points}\n />\n
\n \n
\n );\n}\nexport default withResizeDetector(DropdownToMutipleSelector);\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { CustomTitleLabel } from '../earning/CustomBaseComponments';\nimport CustomMultipleSelect from '../base/CustomMultipleSelect';\nimport { DropDownWithDefaultSelect } from '../base/ActionsDropdown';\nimport { useCompare, isNumber } from '../../utils';\n\nexport default function LookupWithMutipleNumber(props) {\n const title = props.title;\n const groupName = props.groupName;\n const conditionIndex = props.conditionIndex;\n\n const defaultLookup = props.defaultLookup || 'Please select';\n const defaultMin = props.defaultMin; // || '';\n const defaultMax = props.defaultMax; // || '';\n\n const onReset = props.isReset;\n const changeReset = props.changeReset || (() => {});\n const isCreate = props.isCreate;\n\n const dropDownName = props.dropDownName || `${title}-lookup`;\n const minName = props.dropDownName || `${title}-minNum`;\n const maxName = props.dropDownName || `${title}-maxNum`;\n\n const getInputNumberCount = (lookup) => {\n if (lookup === 'Please select') {\n return 0;\n }\n let showInputCount = 1;\n if (lookup.toLowerCase().indexOf('empty') >= 0) {\n showInputCount = 0;\n } else if (lookup.toLowerCase() === 'between') {\n showInputCount = 2;\n }\n\n return showInputCount;\n };\n\n const [lookup, setLookup] = useState(defaultLookup);\n const [showInputNumber, setShowInputNumber] = useState(\n getInputNumberCount(lookup),\n );\n const [minNum, setMinNum] = useState(defaultMin);\n const [maxNum, setMaxNum] = useState(defaultMax);\n\n const lookups =\n groupName === 'signUpAnniversaryCharacteristic'\n ? ['Equal to', 'Not equal to', 'Between', 'Less than', 'Greater than']\n : [\n 'Equal to',\n 'Not equal to',\n 'Is empty',\n 'Is not empty',\n 'Between',\n 'Less than',\n 'Greater than',\n ];\n\n const dropDownOptions = lookups.map((lookup) => ({\n name: lookup,\n action: () => {\n setLookup(lookup);\n setShowInputNumber(getInputNumberCount(lookup));\n },\n }));\n\n const dispatch = useDispatch();\n const vals = { lookup, minNum, maxNum };\n const hasValsChanged = useCompare(vals);\n\n useEffect(() => {\n if (hasValsChanged) {\n dispatch({\n type: 'segments/changeVals',\n payload: {\n vals,\n groupName,\n conditionIndex,\n },\n });\n }\n });\n\n useEffect(() => {\n if (onReset) {\n if (isCreate) {\n setLookup('Please select');\n setShowInputNumber(getInputNumberCount('Please select'));\n setMinNum('');\n setMaxNum('');\n } else {\n setLookup(defaultLookup || 'Please select');\n setShowInputNumber(getInputNumberCount(defaultLookup));\n setMinNum(defaultMin || '');\n setMaxNum(defaultMax || '');\n }\n\n changeReset(false);\n }\n }, [onReset, isCreate, defaultLookup, defaultMin, defaultMax, changeReset]);\n\n return (\n \n {\n // setSelected(options);\n // }}\n // hideAddButton={true}\n // isReset={isReset}\n // />\n
\n \n
\n\n {showSelector ? (\n // \n
\n ) : null}\n \n
\n );\n}\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { CustomTitleLabel } from '../earning/CustomBaseComponments';\nimport CustomMultipleSelect from '../base/CustomMultipleSelect';\nimport { DropDownWithDefaultSelect } from '../base/ActionsDropdown';\nimport { useCompare, isNumber } from '../../utils';\n\nexport default function InputWithMutipleDropDown(props) {\n const title = props.title;\n const groupName = props.groupName;\n const conditionIndex = props.conditionIndex;\n\n const defaultRange = props.defaultRange || 'Please select';\n const hasNumber = props.hasNumber;\n const defaultNumber = props.defaultNumber; // || '';\n const defaultDays = props.defaultPeriod || 'Please select';\n\n const rangeOptions = props.rangeOptions || ['All the time', 'Within'];\n const hasPeriodDropdown = props.hasPeriodDropdown;\n\n const onReset = props.isReset;\n const changeReset = props.changeReset || (() => {});\n const isCreate = props.isCreate;\n\n const [number, setNumber] = useState(defaultNumber);\n const [periodRange, setPeriodRange] = useState(\n rangeOptions.length === 1 ? rangeOptions[0] : defaultRange,\n );\n const [showPeriodDays, setShowPeriodDays] = useState(\n props.rangeOptions && props.rangeOptions[0] === 'Within',\n );\n const [periodDays, setPeriodDays] = useState(defaultDays);\n\n const dropDownOptions = (values, setAction) => {\n return values.map((value) => ({\n name: value,\n action: () => {\n setAction(value);\n setShowPeriodDays(value !== 'All the time');\n },\n }));\n };\n\n const dispatch = useDispatch();\n const vals = { number, periodRange, periodDays };\n const hasValsChanged = useCompare(vals);\n\n useEffect(() => {\n if (hasValsChanged) {\n dispatch({\n type: 'segments/changeVals',\n payload: {\n vals,\n groupName,\n conditionIndex,\n },\n });\n }\n });\n\n useEffect(() => {\n if (props.defaultRange === 'Within') {\n setShowPeriodDays(true);\n }\n }, [props.defaultRange]);\n\n useEffect(() => {\n if (!rangeOptions?.includes(periodRange)) {\n setPeriodRange('Please select');\n }\n }, [rangeOptions]);\n\n useEffect(() => {\n if (onReset) {\n if (isCreate) {\n setNumber();\n setPeriodRange(\n rangeOptions.length === 1 ? rangeOptions[0] : 'Please select',\n );\n setPeriodDays('Please select');\n } else {\n setNumber(defaultNumber);\n setPeriodRange(\n rangeOptions.length === 1 ? rangeOptions[0] : defaultRange,\n );\n setPeriodDays(defaultDays);\n }\n\n changeReset(false);\n }\n }, [onReset, isCreate, changeReset]);\n\n return (\n \n setMinNum(target.value)}\n className=\"custom-number-input-short\"\n value={minNum}\n onFocus={() => {}}\n hidden={showInputNumber < 1}\n />\n \n and\n \n setMaxNum(target.value)}\n className=\"custom-number-input-short\"\n value={maxNum}\n onFocus={() => {}}\n hidden={showInputNumber < 2}\n />\n
\n \n {title ?
\n );\n}\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n CustomTitleLabel,\n CustomNumberInputWithUnit,\n} from '../earning/CustomBaseComponments';\nimport CustomMultipleSelect from '../base/CustomMultipleSelect';\nimport { DropDownWithDefaultSelect } from '../base/ActionsDropdown';\nimport CustomRadios from '../base/CustomRadios';\nimport { useCompare, isNumber, createAction } from '../../utils';\nimport { CustomTitleWithDropDown } from '../customer/CustomTitleWithDropDown';\nimport InputWithMutipleDropDown from './InputWithMutipleDropDown';\nimport BranchLine from '../../assets/images/branchLinex3.png';\n\nconst ViewCampaignTypeEnum = {\n viewTimes: 'VIEW_TIMES',\n stayTimes: 'STAY_TIME',\n};\n\nconst getCampaignType = (groupName) => {\n if (groupName === 'couponCampaignCharacteristic') {\n return 'COUPON_CAMPAIGN';\n };\n if (groupName === 'earningCampaignCharacteristic') {\n return 'EARNING_CAMPAIGN';\n };\n return '';\n};\n\nfunction CampaignBehavioralSection(props) {\n const title = props.title;\n const groupName = props.groupName || 'viewCampaignCharacteristic';\n const conditionIndex = props.conditionIndex;\n\n const defaultValue = props.defaultValue || {};\n // const campaignList = props.campaignList || [];\n // const campaignCategoryList = props.campaignCategoryList || [];\n\n const onReset = props.isReset;\n const changeReset = props.changeReset || (() => {});\n const isCreate = props.isCreate;\n\n const [viewType, setViewType] = useState(defaultValue.viewType);\n const [viewValue, setViewValue] = useState(defaultValue.viewValue);\n\n const [viewedTimeType, setViewedTimeType] = useState(\n defaultValue.viewedTimeType || ViewCampaignTypeEnum.viewTimes,\n );\n\n const [viewTimes, setViewTimes] = useState(defaultValue.viewTimes);\n\n const { campaignList, campaignCategoryList } = useSelector((state) => ({\n campaignList: state.campaignList.allCampaignList,\n campaignCategoryList: state.campaignCategoryList.categoryList,\n }));\n\n const dropDownOptions = (values, setAction) => {\n return values.map((value) => ({\n name: value,\n action: () => {\n setAction(value);\n },\n }));\n };\n\n const dispatch = useDispatch();\n const vals = { viewType, viewValue, viewedTimeType, viewTimes };\n const hasValsChanged = useCompare(vals);\n\n useEffect(() => {\n if (hasValsChanged) {\n dispatch({\n type: 'segments/changeVals',\n payload: {\n vals,\n groupName,\n conditionIndex,\n },\n });\n }\n });\n\n useEffect(() => {\n dispatch(\n createAction('campaignList/getCampaignList')({\n isSelectorLoad: true,\n type: getCampaignType(props.groupName),\n }),\n );\n dispatch(\n createAction('campaignCategoryList/getCampaignCategoryList')({\n isSelectorLoad: true,\n }),\n );\n }, []);\n\n return (\n \n {hasNumber ? (\n setNumber(target.value)}\n className=\"custom-number-input-long\"\n value={number}\n onFocus={() => {}}\n />\n ) : null}\n\n {rangeOptions.length === 1 ? (\n \n ) : (\n
\n \n
\n );\n}\n\nexport default CampaignBehavioralSection;\n","import React, { useState } from 'react';\nimport { Image } from 'react-bootstrap';\nimport Search from '../../assets/images/drop_down_filter.svg';\n\nfunction CustomSearchInput({ customClass, customIconClass, filterAction }) {\n const [filterKey, setFilterKey] = useState();\n\n return (\n \n
\n \n {\n setViewType(value);\n setViewValue(null);\n },\n )}\n defaultValue={viewType}\n />\n \n val.type === 'COUPON_CAMPAIGN')\n : props.groupName === 'earningCampaignCharacteristic'\n ? campaignList.filter((val) => val.type === 'EARNING_CAMPAIGN')\n : campaignList\n }\n defaultValue={viewValue}\n loadMoreAction={\n viewType === 'Campaign'\n ? 'campaignList/getCampaignList'\n : 'campaignCategoryList/getCampaignCategoryList'\n }\n filterAction={\n viewType === 'Campaign'\n ? 'campaignList/getCampaignList'\n : 'campaignCategoryList/getCampaignCategoryList'\n }\n defaultFilter={{type: getCampaignType(props.groupName)}}\n />\n\n {/*
\n \n
\n \n
\n ) : (\n <>\n \n {\n setViewedTimeType(value);\n }}\n default={viewedTimeType}\n options={[\n {\n label: 'Number of times viewing the campaign',\n value: ViewCampaignTypeEnum.viewTimes,\n },\n {\n label: 'Period of time staying in the campaign',\n value: ViewCampaignTypeEnum.stayTimes,\n },\n ]}\n />\n
\n \n
\n );\n}\n\nexport default function ProductSelector(props) {\n const title = props.title;\n const groupName = props.groupName;\n const conditionIndex = props.conditionIndex;\n\n const defaultValue = props.defaultValue || [];\n\n const isReset = props.isReset || false;\n const changeReset = props.changeReset || (() => {});\n const isCreate = props.isCreate;\n\n const { productList } = useSelector((state) => ({\n productList: state.bannerList.productList,\n }));\n\n const [selected, setSelected] = useState(defaultValue);\n const [showSelectPopup, setShowSelectPopup] = useState(false);\n const [filterKey, setFilterKey] = useState();\n const [popSelected, setPopSelected] = useState(defaultValue);\n const [source, setSource] = useState(productList);\n\n const dispatch = useDispatch();\n const vals = { selected };\n const hasValsChanged = useCompare(vals);\n\n useEffect(() => {\n if (hasValsChanged) {\n dispatch({\n type: 'segments/changeVals',\n payload: {\n vals,\n groupName,\n conditionIndex,\n },\n });\n }\n });\n\n useEffect(() => {\n dispatch(createAction('bannerList/getProductList')({}));\n }, [dispatch]);\n\n useEffect(() => {\n if (isReset) {\n if (isCreate) {\n setSelected([]);\n } else {\n setSelected(defaultValue || []);\n }\n\n changeReset(false);\n }\n }, [isReset, isCreate, changeReset]);\n\n return (\n <>\n \n \n \n
\n \n
\n \n {\n setShowSelectPopup(true);\n setSource(productList);\n\n setFilterKey();\n // setSource([{ name: \"111\", pk: \"dsds333\" }, { name: \"2222\", pk: \"dsds333\" }, { name: \"33333\", pk: \"dsds333\" }, { name: \"44444\", pk: \"dsds333\" }, { name: \"555555\", pk: \"dsds333\" }, { name: \"66666\", pk: \"dsds333\" }])\n }}\n >\n
\n \n {\n const leftProducts = removeElementFromArray(\n selected,\n item.pk,\n );\n setSelected(leftProducts);\n setPopSelected(leftProducts);\n }}\n >\n x\n \n
\n );\n }\n })}\n \n {source.map((item) => {\n return (\n
\n \n );\n }}\n />\n \n );\n}\n","import React, { useState, useEffect } from 'react';\nimport { Button, Image, Dropdown } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport '../../utils/BtnCommonTheme.scss';\nimport './Segment.scss';\nimport DropdownToMutipleSelector from './DropdownToMutipleSelector';\nimport LookupWithMutipleNumber from './LookupWithMutipleNumber';\nimport { getObjectFromSessionStorage, useCompare } from '../../utils';\nimport {\n CustomNumberInput,\n CustomTitleLabel,\n CustomNumberInputWithUnit,\n} from '../earning/CustomBaseComponments';\nimport NarrowUp from '../../assets/images/drop_down_not_show_narrow.svg';\nimport Search from '../../assets/images/drop_down_filter.svg';\nimport DeleteIcon from '../../assets/images/deleteIcon.png';\nimport {\n GenderOptions,\n MonthOptions,\n CountryCodeOptions,\n} from '../../config/CustomEnums';\nimport InputWithMutipleDropDown from './InputWithMutipleDropDown';\nimport CustomSwitchButton from '../base/CustomSwitchButton';\nimport CampaignBehavioralSection from './CampaignBehavioralSection';\nimport ProductSelector from './ProductSelector';\nimport BasePrompt from '../base/prompt/BasePrompt';\n\nconst contentEnum = {\n gender: 'Gender',\n birthday: 'Birthday',\n age: 'Age',\n countryCode: 'Country code',\n signupAnniversary: 'Signup anniversary (in year)',\n level: 'Level',\n lastPurchase: 'Last purchase',\n numberOfTransaction: 'Number of transaction',\n totalSpending: 'Total spending',\n averageTransaction: 'Average transaction value',\n newMember: 'Sign up member',\n newSignupWithReferral: 'Sign up member via referral',\n numberOfLogin: 'Number of login',\n lastLogin: 'Last login',\n campaignViewed: 'Campaign viewed',\n buyCoupon: 'Buy coupon',\n earnReward: 'Earn reward by campaign',\n products: 'Special product',\n};\n\nconst contentGroupTitleEnum = {\n genderCharacteristic: 'Gender',\n monthOfBirthCharacteristic: 'Birthday',\n ageCharacteristic: 'Age',\n countryCodeCharacteristic: 'Country code',\n signUpAnniversaryCharacteristic: 'Signup anniversary (in year)',\n levelCharacteristic: 'Level',\n lastPurchase: 'Last purchase',\n numberOfTransactionsCharacteristic: 'Number of transaction',\n totalSpendingCharacteristic: 'Total spending',\n averageTransactionValueCharacteristic: 'Average transaction value',\n signUpMemberCharacteristic: 'Sign up member',\n isSignupReferral: 'Sign up member via referral',\n numberOfLogin: 'Number of login',\n lastLoginCharacteristic: 'Last login',\n viewCampaignCharacteristic: 'Campaign viewed',\n couponCampaignCharacteristic: 'Buy coupon',\n earningCampaignCharacteristic: 'Earn reward by campaign',\n productCharacteristic: 'Special product',\n};\n\nconst contentGroupEnum = {\n Gender: 'genderCharacteristic',\n Birthday: 'monthOfBirthCharacteristic',\n Age: 'ageCharacteristic',\n 'Country code': 'countryCodeCharacteristic',\n 'Signup anniversary (in year)': 'signUpAnniversaryCharacteristic',\n Level: 'levelCharacteristic',\n 'Last purchase': 'hasRecentPurchaseCharacteristic',\n 'Number of transaction': 'numberOfTransactionsCharacteristic',\n 'Total spending': 'totalSpendingCharacteristic',\n 'Average transaction value': 'averageTransactionValueCharacteristic',\n 'Sign up member': 'signUpMemberCharacteristic',\n 'Sign up member via referral': 'signUpReferralCharacteristic',\n 'Number of login': 'loginTimeCharacteristic',\n 'Last login': 'lastLoginCharacteristic',\n 'Campaign viewed': 'viewCampaignCharacteristic',\n 'Buy coupon': 'couponCampaignCharacteristic',\n 'Earn reward by campaign': 'earningCampaignCharacteristic',\n 'Special product': 'productCharacteristic',\n};\n\nconst contentSections = {\n Demographic: [\n contentEnum.gender,\n contentEnum.birthday,\n contentEnum.age,\n contentEnum.countryCode,\n contentEnum.signupAnniversary,\n ],\n Behavioral: [\n contentEnum.level,\n contentEnum.lastPurchase,\n contentEnum.numberOfTransaction,\n contentEnum.totalSpending,\n contentEnum.averageTransaction,\n contentEnum.newMember,\n contentEnum.newSignupWithReferral,\n contentEnum.numberOfLogin,\n contentEnum.lastLogin,\n contentEnum.campaignViewed,\n contentEnum.buyCoupon,\n contentEnum.earnReward,\n // contentEnum.products,\n ],\n};\n\nfunction ContentFilterDropDown(props) {\n const sectionSelectAction = props.addContent || (() => {});\n const settedParams = props.settedParams || [];\n\n const [isOpen, setIsOpen] = useState({\n Demographic: false,\n Behavioral: false,\n });\n const openNarrow = (section) => {\n setIsOpen({ ...isOpen, [section]: !isOpen[section] });\n };\n const [contentSelections, setContentSelections] = useState(contentSections);\n const [filterKey, setFilterKey] = useState('');\n const [selectedSections, setSelectedSections] = useState(settedParams);\n\n useEffect(() => {\n setSelectedSections(props.settedParams);\n }, [props.settedParams]);\n\n useEffect(() => {\n setFilterKey('');\n setContentSelections(contentSections);\n }, [props.show]);\n\n return (\n \n \n {\n if (popSelected.includes(item.pk)) {\n setPopSelected(\n removeElementFromArray(popSelected, item.pk),\n );\n } else {\n setPopSelected([...popSelected, item.pk]);\n }\n }}\n />\n \n \n
\n );\n })}\n \n {/* */}\n
\n \n );\n}\n\nfunction ContentItemSection(props) {\n const addNewAction = props.addNewAction || (() => {});\n const itemIndex = props.index || 0;\n const conditionIndex = itemIndex + 1;\n // const segment = getObjectFromSessionStorage('tempSegment')\n // ? getObjectFromSessionStorage('tempSegment')[conditionIndex] || {}\n // : {};\n\n // console.log('@@209: ', segment);\n\n const [isReset, setIsReset] = useState(false);\n const [showResetPrompt, setShowResetPrompt] = useState(false);\n const [isShowDropdown, setIsShowDropdown] = useState(false);\n // const [conditionGroup, setConditionGroup] = useState(() => {\n // console.log(\"@@@init@@\");\n // return {};\n // })\n\n const { levels, segment, conditionGroup } = useSelector((state) => ({\n levels: state.levels.levelList,\n segment: state.segments.tempSegment,\n conditionGroup: state.segments.tempSegment?.conditionGroup\n ? state.segments.tempSegment.conditionGroup[conditionIndex] || {}\n : {},\n }));\n\n const isCreate = !segment || Object.keys(segment).length <= 0 || !segment.pk;\n\n const dispatch = useDispatch();\n const [lastPurchase, setLastPurchase] = useState();\n // const [products, setProducts] = useState();\n const [numberOfLogin, setNumberOfLogin] = useState();\n const [isSignupReferral, setIsSignupReferral] = useState();\n\n const vals = { lastPurchase, numberOfLogin, isSignupReferral };\n const hasValsChanged = useCompare(vals);\n\n useEffect(() => {\n if (hasValsChanged) {\n dispatch({\n type: 'segments/changeVals',\n payload: {\n vals,\n conditionIndex: conditionIndex,\n },\n });\n }\n });\n\n const getDropdownToMutipleSelector = (groupName, title, options) => {\n // console.log('@@262: ', groupName, conditionGroup[groupName]?.lookup);\n return (\n \n {\n const value = e.target.value;\n setFilterKey(value);\n\n let filteredResult = {};\n Object.keys(contentSections).map(\n (key) =>\n (filteredResult[key] = contentSections[key].filter(\n (val) => val.toLowerCase().indexOf(value.toLowerCase()) >= 0,\n )),\n );\n setContentSelections(filteredResult);\n }}\n value={filterKey}\n />\n
\n \n {Object.keys(contentSelections).map((section) => {\n return (\n <>\n {\n sectionSelectAction(val);\n setSelectedSections([...selectedSections, val]);\n }}\n >\n {\n // sectionSelectAction(val);\n // setSelectedSections([...selectedSections, val]);\n // }}\n // role=\"button\"\n // >\n // \n // \n //
\n );\n })\n : null}\n \n );\n })}\n - \n \n
\n \n \n
\n \n // \n {\n setValue(isChecked);\n }}\n />\n {tips ? : null}\n
\n );\n };\n\n const getCampaignView = (groupName, title) => {\n return (\n \n \n {content.length > 0 ? (\n setShowResetPrompt(true)}\n >\n Reset\n \n ) : null}\n
\n\n \n {content.map((item, index) => {\n return (\n <>\n {index > 0 ? (\n {\n setIsShowDropdown(isOpen);\n }}\n >\n \n + Add condition\n \n\n \n {\n setContent([\n ...content,\n {\n title: section,\n componment: contentSectionComponment[section],\n groupName: contentGroupEnum[section],\n },\n ]);\n\n if (content.length === 0) {\n addNewAction(itemIndex);\n }\n\n if (section === contentEnum.newSignupWithReferral)\n setIsSignupReferral(false);\n else if (section === contentEnum.lastPurchase)\n setLastPurchase(null);\n else if (section === contentEnum.numberOfLogin)\n setNumberOfLogin(null);\n else\n dispatch({\n type: 'segments/changeVals',\n payload: {\n conditionIndex: conditionIndex,\n groupName: contentGroupEnum[section],\n },\n });\n }}\n settedParams={content?.map((item) => item.title)}\n />\n \n \n
\n \n \n \n
\n ) : null}\n \n {item.componment}\n {\n const afterRemoveContent = content.filter(\n (val) => val.title !== item.title,\n );\n setContent(afterRemoveContent);\n\n if (item.title === contentEnum.newSignupWithReferral)\n setIsSignupReferral();\n else if (item.title === contentEnum.lastPurchase)\n setLastPurchase();\n else if (item.title === contentEnum.numberOfLogin)\n setNumberOfLogin();\n\n dispatch({\n type: 'segments/removeVals',\n payload: {\n conditionIndex: conditionIndex,\n groupName: item.groupName,\n },\n });\n }}\n >\n
\n \n );\n })}\n \n \n \n
\n ) : null}\n\n \n {\n if (!save) {\n dispatch({\n type: 'segments/removeFromCookie',\n });\n }\n }}\n showFinishPop={savedSuccess === SavedStatus.savedWithSuccess}\n nextStepConfig={{\n title: 'Successfully Created!',\n description: 'Segment is successfully created.',\n steps: null,\n buttons: [\n {\n text: 'Back to segment list',\n action: () => {\n history.push({\n pathname: '/segments',\n });\n },\n },\n ],\n }}\n continueCreateConfig={{\n onConfirm: () => {\n history.push(history.location.state?.from);\n },\n onCancel: () => history.push('/segments'),\n onClose: () => history.push('/segments'),\n }}\n content={stepSet}\n currentStep={0}\n breadcrumb={\n
\n );\n}\n\nexport default CreateSegment;\n","import React from 'react';\nimport './AlertInfoPrompt.scss';\nimport BasePrompt from '../../base/prompt/BasePrompt';\nfunction AlertInfoPrompt(props) {\n const onCancel = props.onCancel || (() => {});\n const onConfirm = props.onConfirm || (() => {});\n const title = props.title;\n const subTitle = props.subTitle;\n const content = props.content;\n const leftButton = props.leftButton;\n const rightButton = props.rightButton;\n\n const infoContent = () => {\n return {content}
;\n };\n\n const getLeftButton = () => {\n return leftButton\n ? {\n text: leftButton,\n action: () => onCancel(true),\n }\n : null;\n };\n\n const getRightButton = () => {\n return rightButton\n ? {\n text: rightButton,\n action: () => onConfirm(),\n }\n : null;\n };\n\n return (\n \n {promptDetailItems.map((item, index) => {\n if (item.content === null || item?.content?.length === 0 || item?.content === 0) {\n return null;\n }\n return (\n
\n );\n };\n\n return (\n \n \n \n
\n );\n })}\n {event === \"reject\"\n ? \n {extraPopContent.map((item, index) =>\n hasPermission(item.requires) ? (\n \n {item.content}\n
\n ) : null,\n )}\n {primaryPopContent &&\n hasPermission(primaryPopContent.requires) &&\n mainContentWidth <= hideAllButtonWidth ? (\n \n \n \n
\n {primaryButton}\n \n );\n }\n return (\n \n \n {extraButtons}\n
\n {primaryButton}\n \n );\n};\nexport default ListButtonsGroup;\n","import React, { useState, useEffect } from 'react';\nimport './TransactionList.scss';\nimport CustomListComponent from '../../../components/base/CustomListComponent';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport CustomBreadcrumb from '../../../components/base/CustomBreadcrumb';\nimport BaseTabListContainer from '../../base/BaseTabListContainer';\nimport DeletePrompt from '../../../components/base/DeletePrompt';\nimport BaseListContainer from '../../base/BaseListContainer';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { ActionsDropdownForItem } from '../../../components/base/ActionsDropdown';\nimport { createAction } from '../../../utils';\nimport TransactionActionPrompt from '../../../components/transactions/TransactionActionPrompt';\nimport CustomFileUploader from '../../../components/base/CustomFileUploader';\nimport { ImportResource } from '../../../models/DownloadImportModel';\nimport { PermissionCodes } from '../../../config/PermissionCodes';\nimport AuthButton from '../../../components/base/AuthButton';\nimport Filter from './Filter';\nimport { DELETE_RELATED_SECTIONS } from '../../../config/CustomEnums';\nimport ListButtonsGroup from '../../../components/base/ListButtonsGroup';\nimport BasePrompt from '../../../components/base/prompt/BasePrompt';\n\nexport const TRANSACTION_RECORD_TYPE = {\n TYPE_ONLINE: 'Online',\n TYPE_OFFLINE_POS: 'Offline (POS)',\n TYPE_OFFLINE_REWARD_CLAIM: 'General purchase',\n TYPE_PHOTO_TAKING: 'Take photo',\n TYPE_QR_CODE_SCANNING: 'Water filling',\n TYPE_ADMIN_CREATE: 'Admin create',\n TYPE_HABIT: 'Habit',\n TYPE_WEEKLY_GOAL: 'Weekly goal',\n TYPE_ACTIVE_TRACKING: 'Active tracking',\n TYPE_BARCODE: 'Barcode',\n TYPE_OCTOPUS: 'Octopus',\n TYPE_REWARD_CODE: 'Registration code',\n};\n\nexport const TRANSACTION_EVENT_TYPE = {\n TYPE_WAITING: 'Waiting for approval',\n TYPE_APPROVED: 'Approved',\n TYPE_REJECTED: 'Rejected',\n TYPE_RECALLED: 'Recalled',\n TYPE_PENDING: 'Pending',\n TYPE_AUTHORIZED: 'Authorized',\n TYPE_PAID: 'Paid',\n TYPE_PARTIALLY_PAID: 'Partially paid',\n TYPE_REFUNDED: 'Refunded',\n TYPE_PARTIALLY_REFUNDED: 'Partially refunded',\n TYPE_VOIDED: 'Voided',\n};\n\nfunction TransactionList() {\n const queryString = require('query-string');\n const history = useHistory();\n const location = useLocation();\n const dispatch = useDispatch();\n const hiddenFileInput = React.useRef(null);\n\n const [showDeletePrompt, setShowDeletePrompt] = useState(false);\n const [showActionPrompt, setShowActionPrompt] = useState(false);\n const [promptActionTitle, setPromptActionTitle] = useState();\n const [singleItemAction, setSingleItemAction] = useState(false);\n const [selectedItem, setSelectedItem] = useState();\n const [rejectReason, setRejectReason] = useState({ value: null, label: null});\n\n const {\n tableFields,\n dataList,\n pageInfo,\n totalCount,\n totalPage,\n currentPage,\n checkedList,\n importedFile,\n } = useSelector((state) => ({\n tableFields: state.transactions.listDisplayFields,\n dataList: state.transactions.currentPageTransactionList,\n pageInfo: state.transactions.pageInfo,\n totalCount: state.transactions.totalCount,\n totalPage: state.transactions.totalPage,\n currentPage: state.transactions.currentPage,\n checkedList: state.transactions.checkedList,\n importedFile: state.uploadFiles.importedFile,\n }));\n\n useEffect(() => {\n createAction('transactions/clearData')({});\n return () => {\n createAction('transactions/clearData')({});\n }\n }, [])\n\n useEffect(() => {\n if (importedFile) {\n dispatch(\n createAction('downloadAndImport/importFile')({\n from: ImportResource.transaction,\n file: importedFile,\n }),\n );\n }\n }, [dispatch, importedFile]);\n\n useEffect(() => {\n const searchDict = queryString.parse(location.search);\n // const transactionType = searchDict['type'];\n const searchKey = searchDict['search'];\n const stringRank = searchDict['rank'] || 'true';\n const stringPage = searchDict['page'] || 1;\n const rank = stringRank === 'true';\n const page = parseInt(stringPage);\n dispatch(\n createAction('transactions/getCurrentPageTransactions')({\n ...searchDict,\n // transactionType,\n searchKey,\n rank,\n page,\n }),\n );\n }, [dispatch, location, queryString]);\n\n const handleImportClick = (event) => {\n hiddenFileInput.current.click();\n };\n\n const handleChange = (event) => {\n const fileUploaded = event.target.files[0];\n // props.handleFile(fileUploaded);\n dispatch(\n createAction('uploadFiles/uploadFile')({\n file: fileUploaded,\n source: event,\n }),\n );\n\n event.target.value = null;\n };\n const exportCSVAction = () => {\n dispatch(\n createAction('downloadAndImport/createDownloadTask')({\n from: ImportResource.transaction,\n }),\n );\n };\n const createTransactionAction = () => {\n dispatch(createAction('createTransaction/clearData')());\n history.push('/transactions/create');\n };\n const buttons = [\n \n {\n setImage(newState[0]);\n dispatch({\n type: 'createTransaction/updateTransactionState',\n payload: { [field]: newState?.[0] },\n });\n }}\n uploadImageClicked={() => { }}\n aspect={4 / 3}\n maxImageNum={1}\n language={'en'}\n errorMessage={\n errorFields.includes(field)\n ? CreateTransactionError[field].message\n : ''\n }\n />\n
\n \n );\n}\n\nfunction PhotoTakingItemCom({ defaultValue, errorFields }) {\n const dispatch = useDispatch();\n const [amount, setAmount] = useState(defaultValue?.amount);\n useEffect(() => {\n setAmount(defaultValue?.amount);\n }, [defaultValue]);\n\n const getErrorMessage = () => {\n if (errorFields.includes('recylingItemAmount' + defaultValue?.pk)) {\n return CreateTransactionError['recylingItemAmount'].message;\n }\n\n if (errorFields.includes('recylingItemAmountMore' + defaultValue?.pk)) {\n return CreateTransactionError['recylingItemAmountMore'].message;\n }\n };\n\n return (\n <>\n \n {\n const afterRemoveContent = content.filter(\n (val) => val.title !== item.title,\n );\n setContent(afterRemoveContent);\n\n dispatch({\n type: 'createTransaction/changeRecylingRecords',\n payload: {\n item: item.data,\n deleted: true,\n },\n });\n }}\n >\n
\n \n \n );\n })}\n\n \n
\n \n {\n dispatch(\n createAction('createTransaction/updateTransactionState')({\n waterVolume: e.target.value,\n }),\n );\n }}\n value={transaction.waterVolume}\n />\n
\n \n {\n dispatch(\n createAction('createTransaction/updateTransactionState')({\n machineId: e.target.value,\n }),\n );\n }}\n value={transaction.machineId}\n />\n
\n \n