\n
\n {this.getModalDescription()}
\n{actionModalButton()}
\n \n
\n \n {this.props.earnRule.textTitle}\n
\n {this.props.earnRule.point}
\n \n {i18n.t(\"campaign_suggest_use_mobile_device\", { brandName: this.appName, appName: this.appName })}\n
\n\n \n \n \n
\n ) \n }\n}\n\nexport default LoadMoreSpinner;","export function getScreenWidth() {\n return Math.max(\n document.body.scrollWidth,\n document.documentElement.scrollWidth,\n document.body.offsetWidth,\n document.documentElement.offsetWidth,\n document.documentElement.clientWidth,\n window.innerWidth,\n );\n}\n\nexport function getScrollTop() {\n return Math.max(document.body.scrollTop, document.documentElement.scrollTop);\n}\n\nexport function getDocumentHeight() {\n return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);\n}\n\nexport function getWindowHeight(){\n return (document.compatMode === \"CSS1Compat\") ? document.documentElement.clientHeight : document.body.clientHeight;\n}\n\nexport function isMobile() {\n const screenWidth = getScreenWidth();\n return screenWidth < 769;\n}\n\nexport function isPadOrMobile() {\n const screenWidth = getScreenWidth();\n return screenWidth <= 1023;\n}\n","import React, { Component } from \"react\";\nimport { Modal } from \"react-bootstrap\";\nimport LoadMoreSpinner from \"component/common/LoadMoreSpinner\";\n\nimport \"./CustomAlert.scss\";\nimport { isMobile } from \"utils/ScreenUtils\";\n\nclass CustomAlert extends Component {\n constructor(props) {\n super(props);\n this.state = {\n alertStatus: props.status,\n };\n }\n\n render() {\n return (\n \n {this.props?.title || \"\"}\n
\n {this.props.content ? this.props.content :\n \n {this.props.isLoading ? (\n
}\n \n
\n ) : (\n this.props.message\n )}\n {navItem.title}
\n \n \n {/* 
*/}\n \n\n \n
\n );\n}\n\nexport default connect(mapStateToProps)(NothingPage);\n","import React from \"react\";\nimport { Image } from \"react-bootstrap\";\n\n\nexport const CHECKBOX_INIT = -1;\nexport const CHECKBOX_SOME = 0;\nexport const CHECKBOX_CHECKED = 1;\nexport const CHECKBOX_TICK = 2;\n\nfunction CheckBoxImage({\n customClassName,\n status,\n}) {\n if (status === CHECKBOX_INIT) {\n return (\n \n
\n );\n}\n\nexport default connect(mapStateToProps)(MultiChoiceWithSubList);\n","import React from \"react\";\nimport { connect } from 'react-redux';\nimport { Button } from \"react-bootstrap\";\n\nimport i18n from \"I18n\";\nimport \"./FilterActionBar.scss\";\n\n\nconst mapStateToProps = state => {\n return {\n language: state.users.language,\n };\n};\n\nfunction FilterActionBar({\n language,\n onReset,\n onApply,\n}) {\n return (\n \n \n {itemsData.map((item, index) => {\n return (\n 0}\n onClick={() => {\n setActiveItem(item);\n }}>\n {item.name}\n \n
\n \n \n \n {\n const subItemIDs = activeItem?.subItems?.map((subItem) => subItem.id);\n if (subListStatus === CHECKBOX_CHECKED) {\n setSelectedSubIDs([]);\n } else {\n setSelectedSubIDs(subItemIDs);\n }\n }}>\n {i18n.t(\"store:All\")}\n {\n if (item.checked) {\n removeSubItems(item.id);\n } else {\n addSubItems(activeItem.id, item.id);\n }\n }}>\n {item.name}\n \n
\n \n onReset()} >\n {i18n.t('store:Reset')}\n \n \n onApply()} >\n {i18n.t('store:Apply')}\n \n
\n );\n}\n\nexport default connect(mapStateToProps)(FilterActionBar);\n","import URI from 'urijs';\nimport queryString from 'query-string';\n\nexport const processDeepLink = (urlString) => {\n console.log('@get deep link', urlString);\n if (!urlString) {\n return urlString;\n }\n const uri = new URI(urlString);\n const protocol = uri.protocol();\n const searchMap = uri.search(true);\n const host = uri.host();\n const path = uri.path();\n console.log('@protocol', protocol);\n console.log('@host', host);\n\n if (host === 'campaignDetail') {\n const campaignID = searchMap?.id;\n console.log('@get campaign id:', campaignID);\n if (campaignID) {\n return `/campaign/${campaignID}`;\n }\n }\n if (host === 'myCard') {\n return '/user/myCard';\n }\n if (host === 'myCoupon') {\n return '/user/myCoupon';\n }\n if (host === 'profile') {\n return '/user/myProfile';\n }\n if (host === 'couponDetail') {\n const couponID = searchMap?.id;\n console.log('@get coupon id:', couponID);\n if (couponID) {\n return `/coupon/${couponID}`;\n }\n }\n if (host === 'inboxMessage') {\n const inboxMessageId = searchMap?.id;\n const scheduledMessageId = searchMap?.scheduledMessageId;\n if (!inboxMessageId && !scheduledMessageId) {\n return '/inbox';\n }\n return '/inbox';\n }\n if (host === 'storeDetail') {\n const storeId = searchMap?.id;\n console.log('@get storeId id:', storeId);\n if (storeId) {\n return `/storeDetail/${storeId}`;\n }\n }\n if (host === 'home') {\n const refererCode = searchMap?.referCode;\n if (refererCode) {\n return '/home';\n }\n return '/home';\n }\n if (host === 'rewardStatus') {\n if (path === '/point') {\n return '/user/myProfile';\n } else if (path === '/coupon') {\n return '/user/myProfile';\n }\n return '/user/rewardStatus';\n }\n};\n\nexport const QUERY_STRING_CONFIG = {\n arrayFormat: 'index',\n};\n\nexport const updateQueryString = (location, queryDict) => {\n const pathname = location.pathname;\n const parsed = queryString.parse(location.search, QUERY_STRING_CONFIG);\n const keys = Object.keys(queryDict);\n for (const key of keys) {\n if (!!queryDict[key]) {\n parsed[key] = queryDict[key];\n } else {\n delete parsed[key];\n }\n }\n const stringify = queryString.stringify(parsed, QUERY_STRING_CONFIG);\n return `${pathname}?${stringify}`;\n};\n","import React, { useEffect, useState } from \"react\";\nimport { connect } from 'react-redux';\nimport { useLocation, useHistory } from \"react-router-dom\";\nimport { Card } from \"react-bootstrap\";\n\nimport MultiChoiceWithSubList from \"component/store/MultiChoiceWithSubList\";\nimport FilterActionBar from \"component/store/FilterActionBar\";\nimport { updateQueryString } from \"utils/UrlUtils\";\n\nimport \"./StoreCategoryDropdown.scss\";\n\n\nconst mapStateToProps = state => {\n return {\n language: state.users.language,\n storeCategoryList: state.store.storeCategoryList,\n storeSubCategoryList: state.store.storeSubCategoryList,\n storeSelectedSubCategoryIDs: state.store.storeSelectedSubCategoryIDs,\n };\n};\n\nfunction StoreCategoryDropdown({\n language,\n storeCategoryList,\n storeSubCategoryList,\n storeSelectedSubCategoryIDs,\n onHide,\n}) {\n const [newCategoryID, setNewCategoryID] = useState([]);\n const [newSubCategoryIDs, setNewSubCategoryIDs] = useState([]);\n const [categoryData, setCategoryData] = useState([]);\n\n const history = useHistory();\n const location = useLocation();\n\n const updateCategoryFilter = (newCategoryID, newSubCategoryIDs) => {\n const queryDict = {\n 'sf_category': !!newCategoryID ? newCategoryID : null,\n 'sf_sub_category': newSubCategoryIDs?.length > 0 ? newSubCategoryIDs : null,\n };\n const newUrl = updateQueryString(location, queryDict);\n history.push(newUrl);\n };\n\n useEffect(() => {\n if (\n storeCategoryList?.length > 0\n && storeSubCategoryList?.length > 0\n ) {\n const items = [];\n for (const category of storeCategoryList) {\n const item = {\n id: category.id,\n name: category.name,\n subItems: [],\n };\n for (const x of storeSubCategoryList) {\n if (Number(x.categoryId) !== Number(category.id)) {\n continue;\n }\n for (const subCategory of x.subcategories) {\n const subItem = {\n id: subCategory.id,\n name: subCategory.name,\n };\n item.subItems.push(subItem);\n }\n }\n items.push(item);\n }\n setCategoryData(items);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [storeCategoryList, storeSubCategoryList]);\n\n return (\n \n \n
\n \n \n {i18n.t('records:record_filter')}\n onHide()} />\n
\n \n setShowLocation(!showLocation)} >\n {i18n.t('store:Location')}\n {\n showLocation\n ? (\n
\n {\n showLocation\n ? (\n \n {\n setNewDistrictIDs(IDs);\n }}/>\n
\n ) : <>\n }\n \n setShowBrand(!showBrand)} >\n {i18n.t('store:Brand')}\n {\n showBrand\n ? (\n
\n {\n showBrand\n ? (\n \n {storeBrands.map((brand, index) => {\n console.log('brand', brand);\n return (\n onBrandButtonClicked(brand.id)} >\n {brand.name}\n \n );\n })}\n
\n ) : <>\n }\n \n \n \n \n \n {storeData?.name}\n \n \n {storeData?.brandName}\n \n
\n \n {categoryTags}\n
\n \n {districtName\n ? <>\n
\n \n {offerTags}\n
\n \n {\n if (showDropdown) {\n hideCategoriesDropdown();\n } else {\n showCategoriesDropdown();\n }\n }}\n >\n \n {dropdownTextButton\n ? dropdownTextButton\n : i18n.t('store_categories')}\n \n
\n \n \n \n \n \n
\n \n \n
\n \n
\n \n \n
\n \n \n {this.props.t(\"rejectNonEssential\")}\n \n \n {this.props.t(\"acceptAll\")}\n \n
\n \n {this.props.t(\"cookie_settings_alert\")}\n
\n \n \n \n
\n \n \n )\n );\n }\n}\n\nexport default withTranslation()(withRouter(CookieBar));\n","export const ToastMessageType = {\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 const ToastType = {\n image: \"image\",\n text: \"text\",\n};\n\nexport default {\n namespace: \"navBars\",\n state: {\n isOnCreateMode: true,\n toastShowing: {\n value: false,\n content: null,\n type: ToastType.text,\n toastIcon: null,\n },\n backBtnAction: null,\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, { useState, useEffect } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { Toast } from \"react-bootstrap\";\n\nimport AlertIcon from \"assets/images/alert.svg\";\nimport { ToastType } from \"models/NavBarModel\";\n\nexport function CustomToast() {\n const dispatch = useDispatch();\n const { toastShowing } = useSelector((state) => ({\n toastShowing: state.navBars.toastShowing,\n }));\n const [show, setShow] = useState(toastShowing.value);\n\n useEffect(() => {\n setShow(toastShowing.value);\n }, [toastShowing.value]);\n\n const onClose = () => {\n setShow(false);\n dispatch({\n type: \"navBars/updateState\",\n payload: {\n toastShowing: { value: false, content: null, toastIcon: null },\n },\n });\n };\n\n return (\n \n {show ? (\n \n \n {toastShowing.type === ToastType.image ? (\n toastShowing.content\n ) : (\n <>\n 
\n \n \n )}\n \n )\n : null\n }\n
\n );\n}\n","import React, { Component } from \"react\";\nimport { Container, Dropdown } from \"react-bootstrap\";\nimport { withRouter, Link } from \"react-router-dom\";\nimport { connect } from \"react-redux\";\nimport \"./Footer.scss\";\nimport i18n from \"../../I18n\";\nimport { withTranslation } from \"react-i18next\";\n\nconst LANGUAGE_MAPPING = {\n en: \"English\",\n \"zh-Hant\": \"繁體中文\",\n \"zh-Hans\": \"简体中文\",\n};\n\n@connect(({ users }) => ({\n language: users.language,\n}))\nclass Footer extends Component {\n CustomToggle = React.forwardRef(({ children, onClick }, ref) => (\n \n \n \n
\n\n \n {this.props.t(data['name'])}\n {data['name'] === 'home_inbox' && this.getInboxUnreadCount()}\n
\n \n {this.props.t(data['name'])}\n {data['name'] === 'home_inbox' && this.getInboxUnreadCount()}\n
\n \n {this.props.t(profileItemsData[profileIndex]['name'])}\n
\n \n \n \n \n
\n );\n };\n\n loginLogoutNavItem = (key) => {\n if (this.props.users?.isOpenInOtherSite) {\n return;\n }\n return (\n \n \n
\n );\n };\n\n loginLogoutNavItemDidClicked = () => {\n if (this.props.users.isLogin) {\n this.props.dispatch(createAction('users/logout')());\n if (this.state.showMobileDropDown) {\n this.mobileDropDownDidClick();\n }\n if (this.state.showWebDropDown) {\n this.webDropDownDidClick();\n }\n this.props.history.push('/home');\n } else {\n window.location.href = ssoAPIHelper.getLoginWebUri(\n this.props.i18n?.language || 'en',\n );\n }\n };\n\n getMobileDropDownMenuItems = () => {\n let commonNavItems = this.commonNavItems(!this.props.users.isLogin);\n let getDropDownMenuItems = [];\n getDropDownMenuItems = getDropDownMenuItems.concat(commonNavItems);\n\n if (this.props.users.isLogin) {\n getDropDownMenuItems.push(this.separateLine(getDropDownMenuItems.length));\n\n let profileNavItems = this.getMobileProfileNavItems();\n getDropDownMenuItems = getDropDownMenuItems.concat(profileNavItems);\n\n getDropDownMenuItems.push(this.separateLine(getDropDownMenuItems.length));\n } else {\n return (\n \n {this.props.users.isLogin\n ? this.props.t('account_logout')\n : this.props.t('login')}\n
\n \n \n \n 
\n {!this.props.users?.isOpenInOtherSite ? (\n
\n );\n }\n getDropDownMenuItems.push(\n this.loginLogoutNavItem(getDropDownMenuItems.length),\n );\n return getDropDownMenuItems;\n };\n\n getWebDropDownMenuItems = () => {\n let profileNavItems = this.getWebProfileNavItems();\n profileNavItems.push(this.loginLogoutNavItem(profileNavItems.length));\n return profileNavItems;\n };\n\n changeLanguage = (lang) => {\n i18n.changeLanguage(lang);\n\n this.props.dispatch({\n type: 'users/updateState',\n payload: { language: lang },\n });\n };\n\n translationSection = () => {\n return (\n \n {!this.props.users?.isOpenInOtherSite ? (\n \n \n
\n ) : null}\n {getDropDownMenuItems}
\n \n {\n this.changeLanguage('en');\n }}\n >\n EN\n {' '}\n /{' '}\n {\n this.changeLanguage('zh-Hant');\n }}\n >\n 繁\n \n {' '}\n /{' '}\n {\n this.changeLanguage('zh-Hans');\n }}\n >\n 简\n \n
\n 
window.open(\"https://www.egltours.com\", \"_blank\", \"noopener noreferrer\") }\n />\n )\n }\n\n render() {\n if (this.props.location.pathname.indexOf('/unsubscribe_email') !== -1) {\n return (\n \n
\n );\n }\n if (this.topLeftDisplay === TOP_LEFT_DISPLAY_TYPE.text) {\n return (\n {i18n.t('home_hello') + '!'}
\n {this.props.users?.displayName}
\n \n
\n );\n }\n return (\n <>\n { this.logoImage({ className: `float-left logo ${showBackButton ? 'hide_logo' : ''}` }) }\n {showBackButton && (\n {this.topLeftText}
\n \n {this.getMobileDropDownMenuItems()}\n
\n \n \n \n
\n }\n \n )\n}\n\nexport default withRouter(OpenAppBanner);","import { Component } from \"react\";\nimport { withRouter } from \"react-router-dom\";\n\nclass ScrollToTop extends Component {\n componentDidUpdate(prevProps, prevState, snapshot) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n window.scrollTo(0, 0);\n // if (\n // this._isCampaignDetail() ||\n // this._isCouponDetail() ||\n // this._isTransactionPage()\n // ) {\n // window.scrollTo(0, 0);\n // }\n }\n }\n\n _isCampaignDetail = () => {\n if (this.props.location.pathname.indexOf(\"/campaign/\") !== -1) {\n return true;\n } else {\n return false;\n }\n };\n\n _isCouponDetail = () => {\n if (this.props.location.pathname.indexOf(\"/coupon\") !== -1) {\n return true;\n } else {\n return false;\n }\n };\n\n _isTransactionPage = () => {\n if (this.props.location.pathname.indexOf(\"/transaction\") !== -1) {\n return true;\n } else {\n return false;\n }\n };\n\n render() {\n return this.props.children;\n }\n}\n\nexport default withRouter(ScrollToTop);\n","import React, { Component } from 'react';\nimport { Card } from 'react-bootstrap';\nimport { withRouter } from 'react-router-dom';\n\nimport i18n from 'I18n';\n\nimport RightArrow from 'assets/chevron-right.svg';\n\nimport './CouponCard.scss';\nimport { isPadOrMobile } from 'utils/ScreenUtils';\n\nclass CouponCard extends Component {\n cardBeClicked = () => {\n if (this.props.coupon.unavailable) {\n if (this.props.clickAction) {\n this.props.clickAction(\n i18n.t('coupon:unavailablePopUpTitle'),\n i18n.t('coupon:unavailablePopUpMessage', {\n date: this.props.coupon.displayDate,\n }),\n );\n }\n } else {\n this.props.history.push('/coupon/' + this.props.coupon.id, {\n couponId: this.props.coupon.id,\n coverPhotoUrl: this.props.coupon.coverPhotoUrl,\n });\n }\n };\n\n showUsedOrExpiredTag = () => {\n if (this.props.coupon.isUsed) {\n return ;\n } else if (this.props.coupon.isExpired) {\n return ;\n }\n };\n\n render() {\n const dimmedClass = (className) => {\n if (this.props.coupon.isUsed || this.props.coupon.isExpired) {\n const dimmedClassName = className + ' coupon_dimmed';\n return dimmedClassName;\n } else {\n return className;\n }\n };\n\n return (\n \n
\n \n
\n {APP_NAME}
\n {i18n.t(\"open_with_app\")}
\n \n
\n */}\n \n {/* {this.showUsedOrExpiredTag()} */}\n {this.props.coupon.unavailable\n ? i18n.t('coupon:startDate')\n : i18n.t('coupon:expireDate')}\n
\n \n {this.props.coupon.name}\n
\n \n {this.state.modalTitle} \n
\n {this.state.modalContent}
\n\n {\n this.setState({ modalShow: false });\n }}\n >\n {this.props.t('campaign_ok')}\n \n
\n \n \n {displayName}\n \n {`ID: ${userInfo?.memberShipID}`}\n \n
\n {!NO_LEVEL && (\n \n
\n {enLocaleNumberFormatter(availablePoints)}
\n{i18n.t('points')}
\n\n
\n {hideTab ?\n tabs?.[0]?.content :\n {title}
\n \n
\n \n {item?.icon && (\n
\n \n
\n {item.name}
\n {item?.subTitle && (\n {item?.subTitle}
\n )}\n {this.isMobile && (\n {item?.date}
\n )}\n {content}
;\n })}\n \n {this.props.t('no_record_click')}{' '}\n {this.props.t('here')}{' '}\n {this.props.t('to_earn_points')}\n
\n\n {\n if (\n event.nativeEvent.target.scrollTop +\n event.nativeEvent.target.clientHeight >\n event.nativeEvent.target.scrollHeight * 0.9 &&\n !isLoadingMore\n ) {\n this.loadMore();\n }\n }}\n >\n \n {this.renderTableData({\n title,\n dataList: displayItemList,\n isLoading,\n isLoadingMore,\n })}\n
\n
\n \n );\n };\n\n handleClick = () => {\n if (this.isMobile) {\n this.props.history.push('/activity_log');\n } else {\n this.setState({ showModal: true });\n }\n };\n\n render() {\n const tabs = [\n {\n name: '',\n content: (\n \n
\n {title}
\n {!this.isMobile && (\n \n {this.props.t('ticket_date')}\n
\n )}\n \n {this.props.t('earn_burn')}\n
\n \n
\n {this.props.t('profile_activity_log')}
\n \n {this.props.t('viewAll')}\n
\n \n ![\"icon\"\n]({\"/profile/currentPoint/point.png\"}\n)
\n
\n \n \n
\n \n );\n }\n}\n\nexport default withTranslation()(CurrentPointsSection);\n","import React, { Component } from \"react\";\nimport \"./LevelBenefit.scss\";\nimport { withTranslation } from \"react-i18next\";\nimport CustomModal from \"../base/CustomModal\"\nimport { withRouter } from \"react-router-dom\";\nimport { isPadOrMobile } from \"utils/ScreenUtils\";\n\nexport const levelConfig = {\n level1: \"level1\",\n level2: \"level2\",\n level3: \"level3\",\n level4: \"level4\",\n}\n\nclass LevelBenefit extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showModal: false,\n activeTab: levelConfig.level1\n }\n this.isMobile = isPadOrMobile();\n }\n\n getSingleBenefit = (item, index) => {\n return (\n \n {this.props.t(\"my_current_points\")}\n
\n \n {numberFormatter(this.props.currentPoints)}\n
\n \n
\n )\n }\n\n getLevelBenefit = (level = 1) => {\n const itemList = [\n {\n title: this.props.t(\"levelBenfitsDiscountTitle\"),\n content: this.props.t(\"levelBenfitsDiscountText\"),\n isActive: level > 0\n },\n {\n title: this.props.t(\"levelBenfits7daysInsuredTitle\"),\n content: this.props.t(\"levelBenfits7daysInsuredText\"),\n isActive: level > 2\n },\n {\n title: this.props.t(\"levelBenfitsCustomerServiceTitle\"),\n content: this.props.t(\"levelBenfitsCustomerServiceText\"),\n isActive: level > 3\n },\n ]\n return (\n \n \n \n
\n \n
\n {item?.title}
\n {item?.content}
\n \n {itemList && itemList?.length > 0 &&\n itemList.map((item) => this.getSingleBenefit(item))\n }\n
\n )\n }\n\n handleClick = () => {\n if (this.isMobile) {\n this.props.history.push(\"/level_benefit\")\n } else {\n this.setState({ showModal: true })\n }\n }\n\n render() {\n const tabs = [\n { \n key: levelConfig.level1,\n name: this.props.t(levelConfig.level1),\n content: this.getLevelBenefit(1)\n },\n {\n key: levelConfig.level2,\n name: this.props.t(levelConfig.level2),\n content: this.getLevelBenefit(2)\n },\n {\n key: levelConfig.level3,\n name: this.props.t(levelConfig.level3),\n content: this.getLevelBenefit(3)\n },\n {\n key: levelConfig.level4,\n name: this.props.t(levelConfig.level4),\n content: this.getLevelBenefit(4)\n },\n ]\n return (\n <>\n \n
\n \n
\n \n ![\"icon\"]({\"/profile/right-arrow.png\"})
\n
\n\n \n \n \n
\n {i18n.t(\"levelRules\")}
\n \n
\n \n {i18n.t(\"levelRulesIntroductionTitle\")}\n
\n \n {i18n.t(\"levelRulesIntroductionText\")}\n
\n \n
\n \n {i18n.t(\"levelRulesValidityTitle\")}\n
\n \n {i18n.t(\"levelRulesValidityText\")}\n
\n \n
\n \n {i18n.t(\"levelRulesRetainDowngradeTitle\")}\n
\n \n {i18n\n .t(\"levelRulesRetainDowngradeText\")\n .split(\"\\n\")\n .map((content, index) => (\n
\n {content}
\n ))}\n\n
\n \n {i18n.t(\"levelRulesTableTitle\")}\n
\n {/* \n {i18n.t(\"levelRulesTableText\")}\n
*/}\n \n \n \n
\n
\n | {i18n.t(\"level\")} | \n{\"Total spending\"} | \n
|---|---|
| {levelRule.name} | \n{i18n.t(\"HKD\",{TPE: levelRule.targetTPE})} | \n
\n
\n \n
\n \n \n
\n \n \n \n
\n )\n }\n}\n\nexport default withRouter(withTranslation()(LevelSection));\n","import { encode } from 'base-64';\nimport stringify from 'json-stable-stringify';\n\nconst QR_CODE_REFRESH_INTERVAL = 5 * 60 * 1000;\n\nexport const getQRCode = (object) => {\n const encodeOriginal = object;\n encodeOriginal.date = Date.now();\n const unEncodeString = stringify(encodeOriginal);\n const encoded = encode(unEncodeString);\n return { codeString: stringify({ code: encoded }) };\n};\n\nexport const refreshQRCode = (object, interval) => {\n const intervalID = setInterval(() => {\n interval(getQRCode(object));\n }, QR_CODE_REFRESH_INTERVAL);\n return { ...getQRCode(object), id: intervalID };\n};\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { Modal } from \"react-bootstrap\";\n\nimport moment from \"moment\";\nimport i18n from \"I18n\";\nimport QRCode from 'qrcode.react';\n\nimport { getQRCode } from \"utils/QrCodeUtils\";\n\nimport \"./UseCashQRCodeModal.scss\"\n\nconst CODE_EXPIRED_SECONDS = 120;\n\nfunction UseCashQRCodeModal({\n show = false,\n onHide = () => { },\n cashDollar,\n code = \"\",\n refreshQRCodeAction = () => { }\n}) {\n const [currentDatetime, setCurrentDateTime] = useState(new Date());\n const [expiredSeconds, setExpiredSeconds] = useState(CODE_EXPIRED_SECONDS);\n const [qrCodeString, setQRCodeString] = useState(\"\");\n const codeKeyRef = useRef(code);\n const todayDate = moment(currentDatetime).format(\"D MMM, YYYY\");\n const currentTime = moment(currentDatetime).format(\"H:mm:ss\");\n\n const refreshQRCodeString = (codeKey) => {\n if (!codeKey) {\n return;\n }\n const codeContent = {\n key: codeKey,\n };\n const { codeString } = getQRCode(codeContent)\n setQRCodeString(codeString)\n }\n\n useEffect(() => {\n codeKeyRef.current = code\n refreshQRCodeString(code)\n setExpiredSeconds(() => CODE_EXPIRED_SECONDS)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [code])\n\n useEffect(() => {\n if (!show) {\n return;\n }\n const timerId = setInterval(() => {\n setCurrentDateTime(new Date())\n setExpiredSeconds((prevTime) => {\n if (prevTime === 0) {\n refreshQRCodeAction();\n refreshQRCodeString(codeKeyRef.current)\n return CODE_EXPIRED_SECONDS\n } else {\n return prevTime - 1\n }\n })\n }, 1000)\n return (() => {\n clearInterval(timerId)\n setExpiredSeconds(() => CODE_EXPIRED_SECONDS)\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [show])\n\n return (\n \n
\n \n
\n {this.props.showLevelUpProgress &&\n \n
\n {`${ this.props.userName }`}
\n {this.props.levelName}
\n this.props.history.push(\"/user/myCard\")}>\n ![\"icon\"](\"/profile/level/qr-code.png\"/)
\n
\n \n \n
\n }\n \n {this.props.t(\"spend\")}\n {this.props.t(\"HKD\", { TPE: enLocaleNumberFormatter(this.props.TPE) })}\n
\n \n
\n \n {this.props.t(\"spend\")}\n
\n {this.props.t(\"HKD\", { TPE: enLocaleNumberFormatter(upgradeTPE) })}
\n {this.props.t(\"toUpgrade\", { nextLevelName: this.props.levelConfig[this.props.level]?.name })}\n\n {i18n.t(\"pay\")}\n
\n \n
\n {cashDollar || ''}
\n {i18n.t(\"cash_dollar\")}
\n {todayDate}
\n {currentTime}
\n {i18n.t(\"expiring_seconds\", { seconds: expiredSeconds })}
\n {t(\"use_cash_dollar_description\")}
*/}\n \n
\n \n
\n {t(\"balance\")}
\n \n {t(\"cash_dollar_points\", {\n cashDollar: enLocaleNumberFormatter(maxCashDollar),\n points: enLocaleNumberFormatter(currentPoints)\n })}\n
\n \n {t(\"point_to_cash_rule\", {\n points: enLocaleNumberFormatter(POINT_TO_CASH_CONVERT_RATE),\n cashDollar: 1\n })}\n
\n \n
\n {t(\"will_spend\")}
\n \n \n {cashDollarInputError ? getErrorMsg()\n : inputCashDollar ? t(\"points_will_be_used\", {\n points: enLocaleNumberFormatter(inputCashDollar * POINT_TO_CASH_CONVERT_RATE)\n }) : null}\n
\n \n {\n let maxLengthValue = e.target.value;\n if (maxLengthValue && maxLengthValue.length > 10) {\n maxLengthValue = maxLengthValue.substring(0, 10);\n }\n const inputData = maxLengthValue > 0 ? parseInt(maxLengthValue) : \"\";\n setInputCashDollar(inputData)\n if (cashDollarInputError) {\n setCashDollarInputError()\n }\n }}\n />\n
\n {t(\"cash_dollar\")}
\n \n \n {t(\"pay_now\")}\n \n
\n \n \n\n )\n }\n ]\n\n return (\n <>\n {t(\"confirm_pay_cash_tips\")}
\n \n \n {/*
\n {t(\"use_cash_dollar\")}
*/}\n \n */}\n
\n \n
\n {/* \n
\n {t(\"my_points\")}
\n {enLocaleNumberFormatter(currentPoints)}
\n {\"=\"}
\n \n
\n \n
\n {t(\"cash_dollar\")}
\n {enLocaleNumberFormatter(maxCashDollar)}
\n */}\n {this.props.t(\"retainTheMembership\")}
\n {this.props.t(\"retaindescription\")}
\n \n {\n this.setState({ showModal: false })\n }}\n >\n {this.props.t(\"gotIt\")}\n \n
\n \n
\n );\n }\n}\n\nexport default withTranslation()(RetainMembershipSection);\n","import React from \"react\";\nimport { withRouter, useHistory, Link } from \"react-router-dom\";\nimport { Table } from \"react-bootstrap\";\nimport { withTranslation } from \"react-i18next\";\nimport LoadMoreSpinner from \"../common/LoadMoreSpinner\";\nimport { enLocaleNumberFormatter } from \"utils\";\nimport { getLevelRenewTime, getRewardStatusExpireDate } from \"utils/DateTimeUtils\";\n\nexport const rewardStatusModalTab = {\n level: \"level\",\n coupon: \"coupon\",\n points: \"points\",\n stamp: \"stamp\",\n}\n\nexport const parsePointsStatus = (pointStatus) => {\n let parsedPointsList = [];\n if (pointStatus && pointStatus.length > 0) {\n parsedPointsList = pointStatus.map((item) => {\n return {\n name: enLocaleNumberFormatter(item.points),\n date: `${getLevelRenewTime(\n item.expiration_date\n )}`,\n };\n });\n }\n return parsedPointsList;\n};\n\nexport const parseCouponListData = (availableCoupons) => {\n return availableCoupons.map((coupon) => {\n const couponCardInfo = coupon.card;\n let couponExpiryDate = couponCardInfo.displayDate;\n if (coupon.original.effective_date) {\n couponExpiryDate = `${couponExpiryDate}`;\n }\n return {\n name: couponCardInfo.name,\n date: couponExpiryDate,\n };\n });\n};\n\nexport const parseStampStatus = (stampStatus) => {\n let parsedStampList = [];\n if (stampStatus && stampStatus.length > 0) {\n parsedStampList = stampStatus.map((item) => {\n return {\n name: item.name,\n stampCampaignId: item.stampCampaignId,\n earnedStamps: item.earnedStamps,\n date: `${getRewardStatusExpireDate(\n item.expirationDate\n )}`,\n };\n });\n }\n return parsedStampList;\n};\n\n\nconst navigateToStampCampaign = (history, isStamp, stampCampaignId) => {\n if (history && isStamp && stampCampaignId) {\n history.push(`/campaign/${stampCampaignId}`);\n }\n}\n\nconst getNoRecordMessage = (t, type) => {\n let message = \"to_earn_points\";\n if (type === rewardStatusModalTab.coupon) {\n message = \"to_redeem_coupon\";\n } else if (type === rewardStatusModalTab.stamp) {\n message = \"to_earn_stamp\";\n }\n return t(message);\n}\n\n\nconst RenderTableData = ({ t, type, title, dataList, isLoading = false, isLoadingMore = false }) => {\n const history = useHistory();\n const isStamp = type === rewardStatusModalTab.stamp;\n\n if (isLoading) {\n return (\n \n \n
\n {this.props.t(\"retainTheMembership\")}
\n this.setState({ showModal: true })}>\n ![\"icon\"]({\"/profile/retainLevel/info.png\"})
\n
\n \n \n {this.props.t(\"HKD\", { TPE: this.props.currentSpendingToRetain })}\n
\n \n {`${this.props.t('retainSpend')} `}\n
\n {`${this.props.t(\"HKD\", { TPE: enLocaleNumberFormatter(retainTPE) })}`}
\n {` ${this.props.t('more')} `}\n{this.props.t('retainDue', { renewDate: getLevelRenewTime(this.props.renewDate) })}
\n {this.props.t('toRetain', { retainLevelName: this.props.t(`level${this.props.level || ''}`) })}\n{item.earnedStamps}
\n : null\n }\n \n \n {\n isStamp\n ?
\n \n {t(\"no_record_click\")}\n {\" \" + t(\"here\") + \" \"}\n {getNoRecordMessage(t, type)}\n
\n\n {\n if (\n event.nativeEvent.target.scrollTop +\n event.nativeEvent.target.clientHeight >\n event.nativeEvent.target.scrollHeight * 0.9\n && !isLoadingMore\n ) {\n loadMore();\n }\n }}>\n \n
\n
\n \n );\n};\n\nexport default withRouter(withTranslation()(RewardStatusTableView));","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport \"./RewardStatusSection.scss\";\nimport { withTranslation } from \"react-i18next\";\nimport { getLevelRenewTime } from \"../../utils/DateTimeUtils\";\nimport { createAction } from \"../../utils\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport CustomModal from \"../base/CustomModal\";\nimport RewardStatusTableView, {\n parseCouponListData,\n parsePointsStatus,\n parseStampStatus,\n rewardStatusModalTab\n} from \"./RewardStatusTableView\";\nimport { NO_LEVEL } from \"utils/Config\";\nimport { isPadOrMobile } from \"utils/ScreenUtils\";\n\n@connect(({ users, myCoupon, pullrefreshandloadmore }) => ({\n levelName: users.levelName,\n levelExpiryDate: users.renewDate,\n pointStatus: users.pointStatus,\n pointStatusNextLink: users.pointStatusNextLink,\n isRefreshingPoints: users.isRefreshingPointsStatus || false,\n couponNextLink: myCoupon.nextLink,\n availableCoupons: myCoupon.coupons,\n ...pullrefreshandloadmore,\n language: users.language,\n isRefreshingStamp: users.isRefreshingStamp,\n totalEarnedStamps: users.totalEarnedStamps,\n stampStatus: users.stampStatus,\n stampStatusNextLink: users.stampStatusNextLink,\n}))\nclass RewardStatusSection extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showModal: false,\n activeTab: NO_LEVEL ? rewardStatusModalTab.points : rewardStatusModalTab.level,\n };\n this.isMobile = isPadOrMobile();\n this.showLevel = !NO_LEVEL\n }\n componentDidMount() {\n this.props.dispatch(createAction(\"users/fetchRewardStatus\")());\n }\n\n componentWillUnmount() {\n this.props.dispatch(createAction(\"users/clearRewardStatus\")());\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.language !== prevProps.language) {\n this.props.dispatch(createAction(\"users/fetchRewardStatus\")());\n }\n }\n\n loadMore = () => {\n if (this.state.activeTab === rewardStatusModalTab.coupon && this.props.couponNextLink) {\n this.props.dispatch(\n createAction(\"pullrefreshandloadmore/updateState\")({\n MyCouponIsLoadingMore: true,\n })\n );\n this.props.dispatch(createAction(\"myCoupon/loadMoreCoupon\")());\n }\n if (this.state.activeTab === rewardStatusModalTab.points && this.props.pointStatusNextLink) {\n this.props.dispatch(\n createAction(\"pullrefreshandloadmore/updateState\")({\n PointStatusIsLoadingMore: true,\n })\n );\n this.props.dispatch(createAction(\"users/loadMorePointStatus\")());\n }\n if (this.state.activeTab === rewardStatusModalTab.stamp && this.props.stampStatusNextLink) {\n this.props.dispatch(\n createAction(\"pullrefreshandloadmore/updateState\")({\n StampStatusIsLoadingMore: true,\n })\n );\n this.props.dispatch(createAction(\"users/loadMoreStampStatus\")());\n }\n }\n\n onTabChange = (key) => {\n this.setState({ activeTab: key })\n }\n\n render() {\n const tabs = [\n ...(this.showLevel ? [{\n key: rewardStatusModalTab.level,\n name: this.props.t(rewardStatusModalTab.level),\n content: (\n \n
\n {`${title}${type === rewardStatusModalTab.stamp ? ` (${totalEarnedStamps})` : \"\"}`}
\n \n {t(\"account_expiry_date\")}\n
\n \n
\n {this.showLevel &&\n \n {this.props.t(\"profile_reward_status\")}\n
\n this.props.history.push(\"/reward_status\")}>\n {this.props.t(\"viewAll\")}\n
\n \n
\n {this.showLevel &&\n \n {this.props.t(\"profile_reward_status\")}\n
\n this.setState({ showModal: true })}>\n {this.props.t(\"viewAll\")}\n
\n \n {discounts?.map((item) => (\n
\n );\n};\n\nconst DiscountTags = ({\n extraStyle = '',\n discounts,\n}) => {\n return (\n \n {item.code || item.title}\n
\n ))}\n \n
\n );\n}\n\nexport default DiscountTags;\n\n","import React from 'react';\n\nimport { DiscountTagRow } from './DiscountTags';\n\nimport { createAction, enLocaleNumberFormatter } from 'utils';\n\nimport './ProductItem.scss';\nimport i18n from 'I18n';\n\nconst ProductItem = ({ extraStyle, data }) => {\n const showOriginPrice = Number(data.originalPrice) !== Number(data.value);\n const isRefunded = data.status === 'REFUNDED';\n\n return (\n \n
\n );\n};\n\nexport default ProductItem;\n","import React, { useEffect } from 'react';\nimport Markdown from 'react-markdown';\nimport { connect, useDispatch } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\n\nimport i18n from 'I18n';\n\nimport DiscountTags from 'component/records/DiscountTags';\nimport ProductItem from 'component/records/ProductItem';\n\nimport { createAction, enLocaleDollarFormatter } from 'utils';\n\nimport './TransactionDetailContent.scss';\n\nconst DisplayRow = ({ label, value }) => {\n return (\n \n
\n {data?.discounts?.length > 0 && (\n {data.name}
\n {`x${data.quantity}`}
\n \n {showOriginPrice && (\n
\n \n {`HK$ ${enLocaleNumberFormatter(data.originalPrice)}`}\n
\n )}\n {isRefunded ? (\n \n {`HK$ ${enLocaleNumberFormatter(Math.abs(data.value))} (${i18n.t(\"records:transaction_refunded\")})`}\n
\n ) : (\n \n {`HK$ ${enLocaleNumberFormatter(Math.abs(data.value))}`}\n
\n )}\n \n
\n );\n};\n\nconst mapStateToProps = (state) => {\n return {\n language: state.users.language,\n detailLoading: state.transaction.transactionDetailLoading,\n detailData: state.transaction.transactionDetail,\n detailNetworkError: state.transaction.transactionDetailNetworkError,\n };\n};\n\nconst TransactionDetailContent = ({\n transactionID,\n language,\n detailLoading,\n detailData,\n detailNetworkError,\n}) => {\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(\n createAction('transaction/getTransactionDetail')({ transactionID }),\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [transactionID]);\n\n useEffect(() => {\n console.log('detailData', detailData);\n }, [detailData]);\n return (\n {label}
\n {value}
\n \n
\n );\n};\n\nexport default connect(mapStateToProps)(TransactionDetailContent);\n","import React, { Component } from 'react';\nimport { Col, Container, Image, Row, Table } from 'react-bootstrap';\nimport { withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { Link, withRouter } from 'react-router-dom';\n\nimport LoadMoreSpinner from 'component/common/LoadMoreSpinner';\nimport CustomModal from 'component/base/CustomModal';\nimport TransactionDetailContent from 'component/records/TransactionDetailContent';\n\nimport { createAction, enLocaleNumberFormatter } from 'utils';\n\nimport LeftArrow from 'assets/back-btn.svg';\nimport RightArrow from 'assets/chevron-right.svg';\n\nimport './TransactionHistorySection.scss';\nimport { isPadOrMobile } from 'utils/ScreenUtils';\n\n@connect(({ users, transaction, pullrefreshandloadmore }) => ({\n language: users.language,\n\n transactionOriginList: transaction.transactionOriginList,\n transactionNetWorkError: transaction.transactionNetWorkError,\n transactionNextLink: transaction.transactionNextLink,\n transactionLoading: transaction.transactionLoading,\n\n ...pullrefreshandloadmore,\n}))\nclass TransactionHistorySection extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showModal: false,\n transactionID: null,\n };\n this.isMobile = isPadOrMobile();\n }\n\n componentDidMount() {\n this.props.dispatch(\n createAction('transaction/clearTransactionList')()\n );\n this.props.dispatch(\n createAction('transaction/refreshTransactionHistory')(),\n );\n }\n\n componentWillUnmount() {\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.language !== this.props.language) {\n this.props.dispatch(\n createAction('transaction/refreshTransactionHistory')(),\n );\n }\n }\n\n transactionClicked = (transactionID) => {\n if (!transactionID) {\n return;\n }\n if (!this.isMobile) {\n this.setState({\n showModal: true,\n transactionID,\n });\n } else {\n this.props.history.push(`/transaction_history_detail/${transactionID}`);\n }\n };\n\n loadMore = () => {\n if (this.props.transactionNextLink) {\n this.props.dispatch(\n createAction('transaction/loadMoreTransactionHistory')(),\n );\n }\n };\n\n parseTransaction = () => {\n if (\n this.props.transactionOriginList &&\n this.props.transactionOriginList.length > 0\n ) {\n const parsedList = this.props.transactionOriginList.map((item) => {\n return {\n id: item.id,\n name: item.receiptNumber,\n date: item.receiptDateTime,\n content: item.receiptAmount,\n };\n });\n return parsedList;\n }\n return [];\n };\n\n renderTableData = ({\n dataList,\n isLoading = false,\n isLoadingMore = false,\n }) => {\n if (isLoading) {\n return (\n \n \n
\n \n
\n {detailData.remarks && (\n \n {i18n.t('records:transaction_order_summary')}\n
\n {detailData?.purchasedItems?.map((itemData) => (\n \n
\n {!!detailData.paidAmount && (\n \n {!!detailData.paidAmount\n ? i18n.t('records:transaction_total_eligible')\n : i18n.t('records:transaction_total')}\n
\n \n {enLocaleDollarFormatter(detailData.total)}\n
\n \n
\n )}\n {!!detailData.refund && (\n <>\n \n \n {i18n.t('records:transaction_total')}\n
\n \n {enLocaleDollarFormatter(detailData.paidAmount)}\n
\n \n
\n \n )}\n \n {i18n.t('records:transaction_refunded')}\n
\n \n {enLocaleDollarFormatter(detailData.refund)}\n
\n \n \n {detailData.remarks}\n \n
\n )}\n \n {i18n.t('records:transaction_remark')}\n
\n {item.name}
\n \n {`${this.props.t('records:transaction_ordered')} ${item?.date}`}\n
\n )}\n {item?.content}
\n \n {this.props.t('no_record')}\n
\n\n {\n if (\n event.nativeEvent.target.scrollTop +\n event.nativeEvent.target.clientHeight >\n event.nativeEvent.target.scrollHeight * 0.9 &&\n !isLoadingMore\n ) {\n this.loadMore();\n }\n }}\n >\n \n {this.renderTableData({\n dataList: displayItemList,\n isLoading,\n isLoadingMore,\n })}\n
\n
\n \n );\n };\n\n handleClick = () => {\n if (this.isMobile) {\n this.props.history.push('/transaction_history');\n } else {\n this.setState({ showModal: true });\n }\n };\n\n render() {\n const tabs = [\n {\n name: '',\n content: (\n \n {!this.isMobile ? (\n <>\n
\n \n {this.props.t('records:transaction_invoice_id')}\n
\n \n {this.props.t('records:transaction_ordered')}\n
\n \n ) : (\n \n {this.props.t('records:transaction_invoice_id')}\n
\n )}\n \n {this.props.t('records:transaction_total')}\n
\n \n
\n \n {this.props.t('records:transaction_detail_title')}\n
\n \n );\n\n const showDetail = !!this.state.transactionID;\n\n return (\n \n
\n {this.props.t('profile_transaction')}
\n \n {this.props.t('viewAll')}\n
\n \n
\n )\n}\nexport default connect(mapStateToProps)(withRouter(NoLevelSection));\n","import React, { Component } from 'react';\nimport { Row } from 'react-bootstrap';\nimport { connect } from 'react-redux';\n\nimport OfferFloatActionButton from 'component/offer/OfferFloatActionButton';\nimport ActivityLogSection from 'component/profile/ActivityLogSection';\nimport CurrentPointsSection from 'component/profile/CurrentPointsSection';\nimport LevelBenefit from 'component/profile/LevelBenefit';\nimport LevelRuleSection from 'component/profile/LevelRuleSection';\nimport LevelSectionV2 from 'component/profile/LevelSectionV2';\nimport PointAndCashSection from 'component/profile/PointAndCashSection';\nimport RetainMembershipSection from 'component/profile/RetainMembershipSection';\nimport RewardStatusSection from 'component/profile/RewardStatusSection';\nimport TransactionHistorySection from 'component/profile/TransactionHistorySection';\nimport { NO_LEVEL, NO_TRANSACTION_HISTORY } from 'utils/Config';\n\nimport './MyProfileContentSection.scss';\nimport NoLevelSection from './NoLevelSection';\nimport { isPadOrMobile } from 'utils/ScreenUtils';\n\n@connect(({ users }) => ({\n isShowLevel: users.isShowLevel,\n displayName: users.displayName,\n levelConfig: users.levelConfig,\n currentLevel: users.level,\n renewDate: users.renewDate,\n TPE: users.TPE,\n showLevelRetianProgress: users.showLevelRetianProgress,\n}))\nclass MyProfileContentSection extends Component {\n constructor(props) {\n super(props);\n this.state = {\n currentSelectedLevelView: 0,\n isMobile: isPadOrMobile(),\n };\n this.showLevel = !NO_LEVEL\n }\n\n updateWindowDimensions = () => {\n this.setState({ isMobile: isPadOrMobile() });\n };\n\n componentDidMount() {\n window.addEventListener('resize', this.updateWindowDimensions);\n }\n componentWillUnmount() {\n window.removeEventListener('resize', this.updateWindowDimensions);\n }\n\n MyProfileContentDesktop = (showRetainMembershipSection) => {\n return (\n <>\n \n
\n \n
\n \n
\n {`${userName}`}
\n history.push(\"/user/myCard\")}>\n ![\"icon\"](\"/profile/level/qr-code.png\")
\n
\n \n \n {this.showLevel ?
\n {showRetainMembershipSection && (\n \n
\n \n
\n }\n \n
\n );\n };\n\n render() {\n const showRetainMembershipSection = this.props.showLevelRetianProgress;\n return (\n <>\n {this.state.isMobile\n ? this.MyProfileContentMobile(showRetainMembershipSection)\n : this.MyProfileContentDesktop(showRetainMembershipSection)}\n \n {this.showLevel ?
\n \n
\n }\n \n
\n );\n };\n\n resetPassword = () => {\n if (\n this.state.newPassword === undefined ||\n this.state.newPassword === null\n ) {\n return;\n }\n const validationResult = this.passwordValidate();\n if (validationResult) {\n this.props.dispatch(\n createAction(\"users/resetPassword\")({\n password: this.state.newPassword,\n })\n );\n return;\n }\n this.setState({\n passwordError: true,\n });\n };\n\n render() {\n const hintPasswordError = this.props.t(this.state.errorResource) === this.props.t(\"account_password_must_contain_at_least\");\n return (\n \n {this.props.i18n.t(\"account_change_password_lower\")}\n
\n \n
\n */}\n \n {this.props.i18n.t(\"account_current_password\")}\n
\n {this.passwordInput(this.state.showCurrentPassword, () => {\n this.setState({\n showCurrentPassword: !this.state.showCurrentPassword,\n });\n })}\n \n
\n \n \n {this.props.i18n.t(\"account_new_password\")}\n
\n {this.passwordInput(\n this.state.showNewPassword,\n () => {\n this.setState({\n showNewPassword: !this.state.showNewPassword,\n });\n },\n null,\n (e) => {\n this.setState({\n newPassword: e.target.value,\n });\n if (e.target.value) {\n this.setState({\n updateButtonDisable: false,\n });\n } else {\n this.setState({\n updateButtonDisable: true,\n });\n }\n }\n )}\n {this.state.passwordError && !hintPasswordError && (\n \n {this.state.passwordErrorMessage}\n
)\n }\n \n {this.props.t(\"account_password_must_contain_at_least\")}\n
\n \n {\n this.setState({\n password: e.target.value,\n });\n if (e.target.value) {\n this.setState({\n deleteButtonDisable: false,\n });\n } else {\n this.setState({\n deleteButtonDisable: true,\n });\n }\n }}\n />\n
\n );\n\n render() {\n return (\n \n {this.props.t('account_confirm_description')}\n
\n \n {this.props.t('account_delete_account_lower')}\n
\n\n \n {props.t('account_direct_marketing')}\n
\n\n \n
\n \n {\n setHasAgreedDirectMarketing(isChecked);\n setDirectMarketingViaEmail(isChecked);\n }}\n />\n
\n \n {props.t('account_direct_marketing')}\n
\n \n {props.t('personal_info_receive_marketing_reminder')}\n
\n \n
\n \n \n {\n if (isChecked) {\n setHasAgreedDirectMarketing(true);\n }\n setDirectMarketingViaEmail(isChecked);\n }}\n />\n
\n \n {props.t('personal_info_receive_marketing_via_email')}\n
\n \n {\n setShowGenderOptions(isOpen);\n }}\n onSelect={(gender) => {\n if (gender === selectedGender) {\n return;\n }\n selectValue(gender);\n setSelectedGender(gender);\n }}\n >\n \n \n \n {sections?.map((item) => (\n \n {item?.name}\n \n ))}\n \n \n
\n );\n};\n\nexport default GenderPicker;\n","export const COUPON_REDEMPTION_METHOD = {\n MERCHANT_APP_SCAN_COUPON_QR_CODE: 'MERCHANT_APP_SCAN_COUPON_QR_CODE',\n USERS_SCAN_STORE_QR_CODE: 'USERS_SCAN_STORE_QR_CODE',\n USERS_COPY_THE_DISCOUNT_CODE: 'USERS_COPY_THE_DISCOUNT_CODE',\n INPUT_STORE_STAFF_CODE: 'INPUT_STORE_STAFF_CODE',\n POS_UPDATED_CODE: 'POS_UPDATED_CODE',\n};\n\nexport const COUPON_FORMATS = {\n COUPON_QR_CODE: 'COUPON_QR_CODE',\n COUPON_BAR_CODE: 'COUPON_BAR_CODE',\n TEXT: 'TEXT',\n};\n\nexport const BARCODE_METHOD = {\n 'EAN-13': 'EAN13',\n 'UPC-A': 'upc',\n 'Code 39': 'CODE39',\n 'Code 128': 'CODE128',\n};\n\nexport const COUPON_TEMPLATE_TYPE = {\n IMPORT_EXISTING_COUPON: 'IMPORT_EXISTING_COUPON',\n SYSTEM_GENERATED: 'SYSTEM_GENERATED',\n};\n\nexport const ProfileEditType = {\n FirstName: 1,\n LastName: 2,\n Gender: 3,\n Birthday: 4,\n LoginAndContact: 5,\n Email: 6,\n PhoneNumber: 7,\n};\n\nexport const ProfileEditState = {\n Normal: 1,\n Editing: 2,\n Disable: 3,\n};\n\nexport const GenderType = {\n Female: 'FEMALE',\n Male: 'MALE',\n NotDisclosed: 'NOT_DISCLOSED',\n};\n\nexport const CUSTOMER_SIGN_UP_METHOD = {\n MOBILE_PHONE_NUMBER: 'MOBILE_PHONE_NUMBER',\n EMAIL_ADDRESS: 'EMAIL_ADDRESS',\n MOBILE_PHONE_NUMBER_AND_EMAIL_ADDRESS:\n 'MOBILE_PHONE_NUMBER_AND_EMAIL_ADDRESS',\n 'GOOGLE-OAUTH2': 'GOOGLE-OAUTH2',\n FACEBOOK: 'FACEBOOK',\n 'APPLE-ID': 'APPLE-ID',\n};\n\nexport const SupportedCountryCodeList = ['852', '853', '86'];\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Modal } from 'react-bootstrap';\nimport { connect, useDispatch } from 'react-redux';\n\nimport i18n from 'I18n';\n\nimport GenderPicker from 'component/account/GenderPicker';\nimport CustomButton from 'component/base/CustomButton';\n\nimport { createAction, validateEmail } from 'utils';\nimport {\n CUSTOMER_SIGN_UP_METHOD,\n SupportedCountryCodeList,\n} from 'utils/CustomEnums';\n\nimport { SHOW_ONLINE_EMAIL_REMINDER, SECOND_CONTACT_FOR_LOGIN } from 'utils/Config';\n\nimport './LoginMethodContactModal.scss';\n\nconst sections = SupportedCountryCodeList.map((item) => ({\n name: item,\n pk: item,\n}));\n\nconst MaxTimeCount = 599;\n\nconst mapStateToProps = ({ users, userInfoTemp }) => {\n return {\n language: users.language,\n signUpMethod: users.userInfo.signUpMethod,\n contactError: userInfoTemp.loginMethodContact.error,\n contactErrorMessage: userInfoTemp.loginMethodContact.errorMessage,\n verifyChallenge: userInfoTemp.verifyChallenge,\n verifyError: userInfoTemp.verifyError,\n };\n};\n\nconst LoginMethodContactModal = ({\n language,\n signUpMethod,\n contactError,\n contactErrorMessage,\n verifyChallenge,\n verifyError,\n showModal,\n onClose = () => { },\n}) => {\n const dispatch = useDispatch();\n\n const [countryCode, setCountryCode] = useState(SupportedCountryCodeList?.[0]);\n const selectCountryCode = useCallback((value) => setCountryCode(value), []);\n const [nationalNumber, setNationalNumber] = useState(null);\n const [email, setEmail] = useState(null);\n const [requiringOPT, setRequiringOPT] = useState(false);\n const [verifyCode, setVerifyCode] = useState(null);\n\n // timer\n const [refreshDatetime, setRefreshDatetime] = useState(Date.now());\n useEffect(() => {\n setRefreshDatetime(Date.now());\n const intervalID = setInterval(() => {\n setRefreshDatetime(Date.now());\n }, 100);\n return () => {\n // cancel refresh qrcode\n if (intervalID) {\n clearInterval(intervalID);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n const [callOTPTime, setCallOTPTime] = useState(null);\n\n const method = useMemo(() => {\n if (signUpMethod === CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS) {\n return CUSTOMER_SIGN_UP_METHOD.MOBILE_PHONE_NUMBER;\n } else if (signUpMethod === CUSTOMER_SIGN_UP_METHOD.MOBILE_PHONE_NUMBER) {\n return CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS;\n }\n return null;\n }, [signUpMethod]);\n\n const verifyEnable = useMemo(() => {\n const isValidEmail = validateEmail(email)\n if (!isValidEmail) { \n return false;\n }\n if (requiringOPT) {\n return false;\n }\n if (callOTPTime !== null) {\n const ms = Number(refreshDatetime) - Number(callOTPTime);\n const seconds = Math.round(ms / 1000);\n if (seconds < MaxTimeCount) {\n return false;\n }\n }\n return true;\n }, [requiringOPT, refreshDatetime, callOTPTime, email]);\n\n const verifyText = useMemo(() => {\n if (callOTPTime !== null) {\n const ms = Number(refreshDatetime) - Number(callOTPTime);\n const seconds = Math.round(ms / 1000);\n if (seconds < MaxTimeCount) {\n return i18n.t('account_verify') + ` (${MaxTimeCount - seconds}s)`;\n }\n }\n return i18n.t('account_verify');\n }, [refreshDatetime, callOTPTime]);\n\n const confirmEnable = useMemo(\n () => verifyChallenge !== null && verifyCode !== null,\n [verifyCode, verifyChallenge],\n );\n\n useEffect(() => {\n dispatch(createAction('userInfoTemp/clearState')());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [email, countryCode, nationalNumber]);\n\n useEffect(() => {\n setEmail(null);\n setCountryCode(SupportedCountryCodeList?.[0]);\n setNationalNumber(null);\n setVerifyCode(null);\n setCallOTPTime(null);\n dispatch(createAction('userInfoTemp/clearState')());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showModal]);\n\n const callApiRequireOTP = () => {\n setRequiringOPT(true);\n dispatch(\n createAction('userInfoTemp/requireOTPForUpdateLoginMethod')({\n method: CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS,\n countryCode,\n nationalNumber,\n email,\n successCallback: () => {\n setRequiringOPT(false);\n setCallOTPTime(Date.now());\n },\n failureCallback: () => setRequiringOPT(false),\n }),\n );\n };\n\n const callApiUpdateLoginMethod = () => {\n dispatch(\n createAction('userInfoTemp/verifyOTPAndUpdateLoginMethod')({\n method: CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS,\n countryCode,\n nationalNumber,\n email,\n verifyCode,\n successCallback: () => {\n onClose();\n },\n failureCallback: () => { },\n }),\n );\n };\n\n return (\n \n {displayValue || i18n.t('personal_info_i_am')}\n
\n \n
\n \n {method === CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS ? (\n \n {SECOND_CONTACT_FOR_LOGIN ? (i18n.t('settings_login_and_contact') +\n i18n.t('personal_info_optional')) : i18n.t('additional_contact_title')}\n
\n \n
\n \n
\n ) : null}\n {method === CUSTOMER_SIGN_UP_METHOD.MOBILE_PHONE_NUMBER ? (\n \n {\n const text = e.target.value;\n setEmail(text);\n }}\n />\n callApiRequireOTP()}\n />\n
\n {SHOW_ONLINE_EMAIL_REMINDER ?\n \n {i18n.t('settings_email_tip')}\n
: null\n }\n\n \n
\n \n {\n const text = e.target.value;\n setNationalNumber(text);\n }}\n />\n callApiRequireOTP()}\n />\n
\n \n ) : null}\n \n {contactError ? contactErrorMessage : null}\n
\n \n {verifyError || ''}\n
\n \n changeYear(year - 1)}\n >\n {\n setYearDropDown(prevState => {\n return !prevState\n });\n }}\n >\n {year}\n \n {\n if (year + 1 > maxDateInfo.year) {\n return;\n }\n changeYear(year + 1)\n }}\n >\n
\n \n {getMonthNames(lang).map((monthName, index) => {\n return (\n = yearList?.[0] && (index + 1) > maxDateInfo.month}\n key={index}\n className={`month birthday-button ${index + 1 === month && checkYear === year\n ? 'active'\n : ''\n } field-text`}\n onClick={(e) => changeMonth(index + 1)}\n >\n {monthName}\n \n );\n })}\n
\n \n {\n const birthday = getMonthDate({ year: checkYear, month: month });\n onChange(maxMonthDate < birthday ? maxMonthDate : birthday)\n }}\n >\n \n {i18n.t('birthday_done')}\n \n \n onChange()}\n >\n \n {i18n.t('birthday_cancel')}\n \n \n
\n {\n yearDropDown\n ? \n {yearList.map((item, index) => (\n
\n : null\n }\n \n );\n}\n\n\nexport default MonthPicker\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { Col, Container, Row } from 'react-bootstrap';\nimport { withTranslation } from 'react-i18next';\nimport { connect, useDispatch } from 'react-redux';\n\nimport i18n from 'I18n';\n\nimport GenderPicker from 'component/account/GenderPicker';\nimport LoginMethodContactModal from 'component/account/LoginMethodContactModal';\nimport CustomButton from 'component/base/CustomButton';\nimport MonthPicker, {\n CustomDatePickerInput,\n} from 'component/profile/MonthPicker';\n\nimport { createAction } from 'utils';\nimport {\n CUSTOMER_SIGN_UP_METHOD,\n GenderType,\n ProfileEditState,\n ProfileEditType,\n} from 'utils/CustomEnums';\nimport {\n getMyAccountUserBirthdayForDisplay,\n getMyAccountUserBirthdayForUpdate,\n} from 'utils/DateTimeUtils';\n\nimport { SECOND_CONTACT_FOR_LOGIN } from 'utils/Config';\n\nimport './MyAccountInfoSection.scss';\n\nconst EditButton = ({ state, editClick }) => {\n const onClick = () => {\n if (state === ProfileEditState.Normal) {\n editClick(true);\n } else if (state === ProfileEditState.Editing) {\n editClick(false);\n }\n };\n return (\n \n {\n setYear(item);\n }}\n >\n {item}\n \n
\n ))}\n \n {props.t('account_information')}\n
\n \n
\n \n \n {props.t('personal_info_first_name')}\n {allowedEditFields?.includes('first_name') && (\n {\n if (startEdit) {\n setEditType(ProfileEditType.FirstName);\n } else {\n setEditType(null);\n }\n }}\n />\n )}\n
\n {firstNameEditState === ProfileEditState.Editing ? (\n \n {\n const text = e.target.value;\n setFirstName(text);\n }}\n />\n {\n dispatch(\n createAction('userInfoTemp/updateUserInfoOneField')({\n serverKey: 'first_name',\n modelKey: 'firstName',\n value: firstName,\n successCallback: () => {\n setEditType(null);\n },\n }),\n );\n }}\n />\n
\n ) : (\n \n {userInfo.firstName || '-'}\n
\n )}\n \n
\n \n \n {props.t('personal_info_last_name')}\n {allowedEditFields?.includes('last_name') && (\n {\n if (startEdit) {\n setEditType(ProfileEditType.LastName);\n } else {\n setEditType(null);\n }\n }}\n />\n )}\n
\n {lastNameEditState === ProfileEditState.Editing ? (\n \n {\n const text = e.target.value;\n setLastName(text);\n }}\n />\n {\n dispatch(\n createAction('userInfoTemp/updateUserInfoOneField')({\n serverKey: 'last_name',\n modelKey: 'lastName',\n value: lastName,\n successCallback: () => {\n setEditType(null);\n },\n }),\n );\n }}\n />\n
\n ) : (\n \n {userInfo.lastName || '-'}\n
\n )}\n \n showSecondLoginMethodModal()}\n >\n {SECOND_CONTACT_FOR_LOGIN ? i18n.t('settings_login_add_second_method') : i18n.t('additional_contact_title')}\n \n )}\n
\n \n \n {props.t('account_for_login_and_contact')}\n
\n {showMobile && (\n \n {countryCodeAndPhoneNumber || '-'}\n
\n )}\n {showEmail && (\n <>\n \n {email || '-'}\n {/* setShowLoginMethodModal(!showLoginMethodModal)}>\n {i18n.t('message_edit')}\n */}\n
\n \n\n )}\n {showAddAccountButton && (\n \n
\n \n \n {props.t('personal_info_gender') +\n props.t('personal_info_optional')}\n {allowedEditFields?.includes('gender') && (\n {\n if (startEdit) {\n setEditType(ProfileEditType.Gender);\n } else {\n setEditType(null);\n }\n }}\n />\n )}\n
\n {genderEditState === ProfileEditState.Editing ? (\n \n {\n setSelectedGender(value);\n }}\n />\n {\n dispatch(\n createAction('userInfoTemp/updateUserInfoOneField')({\n serverKey: 'gender',\n modelKey: 'gender',\n value: selectedGender,\n successCallback: () => {\n setEditType(null);\n },\n }),\n );\n }}\n />\n
\n ) : (\n \n {displayGender}\n
\n )}\n \n
\n \n \n {props.t('account_birth_month_year') +\n props.t('personal_info_optional')}\n {allowedEditFields?.includes('date_of_birth') && (\n {\n if (startEdit) {\n setEditType(ProfileEditType.Birthday);\n } else {\n setEditType(null);\n }\n }}\n />\n )}\n
\n {birthdayEditState !== ProfileEditState.Editing ? (\n \n {userInfo.birthday\n ? getMyAccountUserBirthdayForDisplay(userInfo.birthday)\n : i18n.t('not_provided')}\n
\n ) : (\n \n {\n setShowBirthMonthOptions(!showBirthMonthOptions);\n }}\n showBirthMonthOptions={showBirthMonthOptions}\n />\n {\n if (!!date) {\n setBirthday(date);\n }\n setShowBirthMonthOptions(false);\n }}\n />\n {\n dispatch(\n createAction('userInfoTemp/updateUserInfoOneField')({\n serverKey: 'date_of_birth',\n modelKey: 'birthday',\n value: getMyAccountUserBirthdayForUpdate(birthday),\n successCallback: () => {\n setEditType(null);\n },\n }),\n );\n }}\n />\n
\n )}\n \n hideSecondLoginMethodModal()}\n />\n
\n );\n};\n\nexport default connect(mapStateToProps)(withTranslation()(MyAccountMobile));\n","import React, { Component } from 'react';\nimport { Container } from 'react-bootstrap';\nimport { withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\n\nimport MyAccountChangePassword from 'component/account/MyAccountChangePassword';\nimport MyAccountDeleteAccount from 'component/account/MyAccountDeleteAccount';\nimport MyAccountDirectMarketing from 'component/account/MyAccountDirectMarketing';\nimport MyAccountInfoSection from 'component/account/MyAccountInfoSection';\nimport MyAccountMobile from 'component/account/MyAccountMobile';\nimport OfferFloatActionButton from 'component/offer/OfferFloatActionButton';\n\nimport { createAction } from 'utils';\nimport { isPadOrMobile } from 'utils/ScreenUtils';\n\nimport './MyAccount.scss';\n\n@connect(({ users }) => ({\n language: users.language,\n updateUserInfoSuccess: users.updateUserInfoSuccess,\n updateDirectMarketing: users.updateDirectMarketing,\n resetPasswordSuccess: users.resetPasswordSuccess,\n}))\nclass MyAccount extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showToast: false,\n };\n props.dispatch(createAction('users/fetchUserInfo')());\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.language !== this.props.language) {\n this.props.dispatch(createAction('users/fetchUserInfo')());\n }\n if (\n prevProps.updateUserInfoSuccess !== this.props.updateUserInfoSuccess ||\n prevProps.updateDirectMarketing !== this.props.updateDirectMarketing ||\n prevProps.resetPasswordSuccess !== this.props.resetPasswordSuccess\n ) {\n this.props.dispatch({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n toastIcon: '/coupon/copyCodeSuccessIcon/check.svg',\n content: this.props.t('successfullyUpdated'),\n },\n },\n });\n }\n }\n\n render() {\n return (\n <>\n {isPadOrMobile() ? (\n \n
\n\n \n {props.t('account_information')}\n
\n \n
\n \n {props.t('personal_info_first_name')}\n {allowedEditFields?.includes('first_name') && (\n {\n if (startEdit) {\n setEditType(ProfileEditType.FirstName);\n } else {\n setEditType(null);\n }\n }}\n />\n )}\n
\n {firstNameEditState === ProfileEditState.Editing ? (\n \n {\n const text = e.target.value;\n setFirstName(text);\n }}\n />\n {\n dispatch(\n createAction('userInfoTemp/updateUserInfoOneField')({\n serverKey: 'first_name',\n modelKey: 'firstName',\n value: firstName,\n successCallback: () => {\n setEditType(null);\n },\n }),\n );\n }}\n />\n
\n ) : (\n \n {userInfo.firstName || '-'}\n
\n )}\n \n
\n \n {props.t('personal_info_last_name')}\n {allowedEditFields?.includes('last_name') && (\n {\n if (startEdit) {\n setEditType(ProfileEditType.LastName);\n } else {\n setEditType(null);\n }\n }}\n />\n )}\n
\n {lastNameEditState === ProfileEditState.Editing ? (\n \n {\n const text = e.target.value;\n setLastName(text);\n }}\n />\n {\n dispatch(\n createAction('userInfoTemp/updateUserInfoOneField')({\n serverKey: 'last_name',\n modelKey: 'lastName',\n value: lastName,\n successCallback: () => {\n setEditType(null);\n },\n }),\n );\n }}\n />\n
\n ) : (\n \n {userInfo.lastName || '-'}\n
\n )}\n \n
\n \n {props.t('personal_info_gender') +\n props.t('personal_info_optional')}\n {allowedEditFields?.includes('gender') && (\n {\n if (startEdit) {\n setEditType(ProfileEditType.Gender);\n } else {\n setEditType(null);\n }\n }}\n />\n )}\n
\n {genderEditState === ProfileEditState.Editing ? (\n \n {\n setSelectedGender(value);\n }}\n />\n {\n dispatch(\n createAction('userInfoTemp/updateUserInfoOneField')({\n serverKey: 'gender',\n modelKey: 'gender',\n value: selectedGender,\n successCallback: () => {\n setEditType(null);\n },\n }),\n );\n }}\n />\n
\n ) : (\n {displayGender}
\n )}\n \n
\n \n {props.t('account_birth_month_year') +\n props.t('personal_info_optional')}\n {allowedEditFields?.includes('date_of_birth') && (\n {\n if (startEdit) {\n setEditType(ProfileEditType.Birthday);\n } else {\n setEditType(null);\n }\n }}\n />\n )}\n
\n {birthdayEditState !== ProfileEditState.Editing ? (\n \n {userInfo.birthday\n ? getMyAccountUserBirthdayForDisplay(userInfo.birthday)\n : i18n.t('not_provided')}\n
\n ) : (\n \n {\n setShowBirthMonthOptions(!showBirthMonthOptions);\n }}\n showBirthMonthOptions={showBirthMonthOptions}\n />\n {\n if (!!date) {\n setBirthday(date);\n }\n setShowBirthMonthOptions(false);\n }}\n />\n {\n dispatch(\n createAction('userInfoTemp/updateUserInfoOneField')({\n serverKey: 'date_of_birth',\n modelKey: 'birthday',\n value: getMyAccountUserBirthdayForUpdate(birthday),\n successCallback: () => {\n setEditType(null);\n },\n }),\n );\n }}\n />\n
\n )}\n \n showSecondLoginMethodModal()}\n >\n {SECOND_CONTACT_FOR_LOGIN ? i18n.t('settings_login_add_second_method') : i18n.t('additional_contact_title')}\n \n )}\n
\n \n {props.t('account_for_login_and_contact')}\n
\n {showMobile && (\n \n {countryCodeAndPhoneNumber || '-'}\n
\n )}\n {showEmail && (\n \n {email || '-'}\n {/* setShowLoginMethodModal(!showLoginMethodModal)}>\n {i18n.t('message_edit')}\n */}\n
\n )}\n {showAddAccountButton && (\n \n
\n\n \n
\n\n \n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n }\n}\n\nexport default withTranslation()(UserNavigator);\n","import React, { Component } from 'react';\nimport { Collapse, Image, Media } from 'react-bootstrap';\nimport Markdown from 'react-markdown';\nimport { isPadOrMobile } from 'utils/ScreenUtils';\n\nclass Brand extends Component {\n constructor(props) {\n super(props);\n this.state = {\n opened: false,\n };\n }\n\n setOpened(openState) {\n this.setState({ opened: openState });\n }\n\n render() {\n const isPadOrMobileView = isPadOrMobile();\n return (\n \n \n \n \n
\n \n \n \n \n this.setOpened(!this.state.opened)}\n aria-controls=\"store_collapse_section\"\n aria-expanded={this.state.opened}\n className={this.state.opened ? 'up_arrow_btn' : 'down_arrow_btn'}\n hidden={this.props.brand.description?.length > 0 ? false : true}\n >\n \n \n\n \n \n
\n );\n }\n}\n\nexport default Brand;\n","import React, { Component } from 'react';\nimport { Container } from 'react-bootstrap';\nimport Markdown from 'react-markdown';\n\nimport i18n from '../../I18n';\nimport { isPadOrMobile } from 'utils/ScreenUtils';\n\nclass DetailDescription extends Component {\n constructor(props) {\n super(props);\n this.state = {\n descriptionFold: this.props.description?.content?.length > 200,\n };\n }\n\n render() {\n const isPadOrMobileView = isPadOrMobile();\n return (\n {this.props.brand.name}
\n\n
\n \n {this.props.brand.description} \n
\n \n {this.props.description.title} \n
\n \n \n {this.props.description.content} \n \n
\n\n \n
\n \n }\n prevIcon={\n \n \n
\n \n }\n onSlide={this.dismissIcon}\n // wrap={this.carouselTouchable || false}\n >\n {this.props.images.map((image, index) => (\n \n 1}\n swipeable={this.props.images.length < 2 ? false : true}\n >\n {this.props.images.map((image, index) => (\n
\n \n \n );\n }\n}\n\nexport default ImageSlider;\n","import React, { Component } from 'react';\nimport { Container } from 'react-bootstrap';\nimport Markdown from 'react-markdown';\n\nimport i18n from '../../I18n';\nimport { isPadOrMobile } from 'utils/ScreenUtils';\n\nclass Instruction extends Component {\n constructor(props) {\n super(props);\n this.state = {\n fold: this.props.instructions?.content?.length > 200,\n };\n }\n\n render() {\n const isPadOrMobileView = isPadOrMobile();\n return (\n \n 
\n
\n ))}\n \n \n {this.props.instructions.title} \n
\n \n
\n \n {i18n.t('coupon:couponBarcodeMessage')}\n
\n \n
\n \n );\n }\n return (\n <>\n \n
\n \n {i18n.t('coupon:couponQrcodeMessage')}\n
\n \n {baseInfo?.code &&
\n \n );\n };\n\n const showCouponCode = () => {\n if (baseInfo?.showCopiableString) {\n return (\n <>\n \n { this.handleApplyCoupon(baseInfo.code) }}>\n {\"Apply Coupon\"}\n : null\n }\n {\n this.clickCopyCode();\n }}\n >\n {i18n.t('coupon:copyCode')}\n \n
\n \n );\n }\n if (\n !baseInfo.showMerchantScanQRCode &&\n baseInfo.showScanableCouponCode &&\n baseInfo?.couponCodeFormat === COUPON_FORMATS.COUPON_BAR_CODE\n ) {\n return (\n <>\n {baseInfo.code}
\n {baseInfo?.isExpired || baseInfo?.isUsed ? null : (\n <>\n {this.props?.isOpenInOtherSite && baseInfo.usageMedium === \"ONLINE\" ?\n {i18n.t('coupon:copyCouponCodeMessage')}
\n \n )}\n \n
\n \n );\n }\n return (\n {baseInfo.code}
\n \n {i18n.t('coupon:view_large_barcode_1')}\n {\n this.setState({ showBarcodeModal: true });\n }}\n >\n {i18n.t('coupon:view_large_barcode_2')}\n \n
\n \n
\n );\n };\n const showMerchantScanCode = () => {\n if (!baseInfo.showMerchantScanQRCode) {\n return null;\n }\n return (\n <>\n \n {baseInfo.showScanableCouponCode\n ? baseInfo.code\n : baseInfo.serialNumber}\n
\n \n
\n \n {i18n.t('coupon:couponQrcodeMessage')}\n
\n \n
\n \n );\n };\n\n return (\n \n {/* {couponBackgroundUp()} */}\n {/* {couponBackgroundDown()} */}\n
\n {baseInfo?.isVirtualCoupon ? null : (\n <>\n \n {showMerchantScanCode()}\n {showQRCodeOrBarcode()}\n {showCouponCode()}\n \n \n {this.validDate()}\n
\n \n {i18n.t('coupon:viewBarcode')}\n
\n {baseInfo.code &&\n {\n this.setState({ showBarcodeModal: false });\n }}\n >\n {i18n.t('campaign_ok')}\n \n
\n \n
\n \n
\n \n );\n })}\n {store.name}
\n \n {store?.is_online_store ? i18n.t(\"product:Online store\") : i18n.t(\"product:Physical store\")}\n \n {store.address}
\n {!store?.stock_count && (\n \n {i18n.t(\"product:Out of stock\")}\n \n )}\n \n
\n \n
\n \n );\n })}\n {item.name}
\n {item.description}
\n \n
)\n }\n if (this.props.selectedUsageMedium?.key) {\n return (\n {this.props.selectedStore.name}
\n \n {this.props.selectedStore?.is_online_store ? i18n.t(\"product:Online store\") : i18n.t(\"product:Physical store\")}\n \n {this.props.selectedStore.address}
\n \n
)\n }\n\n }\n\n return (\n <>\n {this.state.showConfirmView && !this.isMobileView ?\n {this.props.selectedUsageMedium.name}
\n {this.props.selectedUsageMedium.description}
\n \n {\n if (this.state.showConfirmView) {\n this.confirmStoreAction()\n } else {\n this.setState({ showConfirmView: true })\n }\n }}\n >\n {this.state.showConfirmView ? i18n.t(\"coupon:Confirm\") : i18n.t(\"coupon:Next\")}\n \n {this.state.showConfirmView &&\n
\n }\n \n
}\n {i18n.t(\"coupon:processNotRedeemCoupon\")}
\n \n \n {this.state.showConfirmView ?\n {\n if (this.state.showConfirmView) {\n this.confirmStoreAction()\n } else {\n this.setState({ showConfirmView: true })\n }\n }}\n >\n {this.state.showConfirmView ? 'Confirm' : 'Next'}\n \n \n
: null}\n \n );\n }\n}\n\nexport default withRouter(PickupStore);\n","import React, { Component } from \"react\";\nimport { Media } from \"react-bootstrap\";\nimport i18n from \"../../I18n\";\nimport \"./SelectedStore.scss\";\n\nclass SelectedStore extends Component {\n render() {\n return (\n \n
\n : null\n }\n {i18n.t(\"coupon:processNotRedeemCoupon\")}
\n \n
\n );\n }\n}\n\nexport default SelectedStore;\n","import axios from \"axios\";\n// import { USING_FAKE_API } from '../config/Config';\n\nconst USING_FAKE_API = false;\nconst TEST_DATA_BASE_URL = \"http://manb.no-ip.net:9280/aillia/v1/\";\nconst CMS_DATA_BASE_URL =\n process.env.REACT_APP_DOMAIN || \"https://aillia.hkdev.motherapp.com\";\nconst BASEURL = USING_FAKE_API ? TEST_DATA_BASE_URL : CMS_DATA_BASE_URL;\nexport const TAB_INDEX_PARAMS_MAP = [\n \"?sort=-date_of_acquisition,expiry_date,-id&filter[is_available]=true&page[size]=20&page[number]=1\",\n \"?sort=-date_of_acquisition,expiry_date,-id&filter[is_unavailable]=true&page[size]=20&page[number]=1\",\n \"?sort=-date_of_use_or_expiration,usage_record,-id&filter[is_used_or_expired]=true&page[size]=20&page[number]=1\",\n];\nexport const TEST_TAB_INDEX_MAP = [\"available\", \"unavailable\", \"used_expired\"];\n\nconst couponAPIinstance = axios.create({\n baseURL: BASEURL,\n timeout: 3000,\n headers: {\n Accept: \"application/json\",\n \"Content-Type\": \"application/json\",\n },\n});\nclass APIHelper {\n constructor() {\n couponAPIinstance.interceptors.request.use(\n (config) => {\n if (\n this.authorizationToken !== undefined &&\n this.authorizationToken != null\n ) {\n config.headers.Authorization = `Bearer ${this.authorizationToken}`;\n }\n return config;\n },\n (error) => Promise.reject(error)\n );\n }\n\n addAuthorization = (token) => {\n this.authorizationToken = token;\n };\n\n removeAuthorization = () => {\n this.authorizationToken = undefined;\n };\n\n getMyCoupon = (testCaseID, tabIndex, customerID, pageLink = null) => {\n if (USING_FAKE_API) {\n return couponAPIinstance\n .get(`Coupon/${testCaseID}/${TEST_TAB_INDEX_MAP[tabIndex]}.json`)\n .catch((error) => error);\n }\n if (pageLink !== null && pageLink !== \"\") {\n return couponAPIinstance.get(pageLink).catch((error) => error);\n }\n const params = TAB_INDEX_PARAMS_MAP[tabIndex];\n return couponAPIinstance\n .get(`/customers/${customerID}/coupons${params}`)\n .catch((error) => error);\n };\n\n getAllMyCoupons = (customerID) => {\n return couponAPIinstance\n .get(\n `/customers/${customerID}/coupons?sort=-date_of_use_or_expiration,usage_record,-id`\n )\n .catch((error) => error);\n };\n\n getCouponDetail = (testCaseID, customerID, couponID) => {\n if (USING_FAKE_API) {\n return couponAPIinstance\n .get(`Coupon/${testCaseID}/CouponDetail/${couponID}.json`)\n .catch((error) => error);\n }\n return couponAPIinstance\n .get(`/customers/${customerID}/coupons/${couponID}`)\n .catch((error) => error);\n };\n\n getCouponApplicableStores = (customerID, couponID) => {\n return couponAPIinstance\n .get(`/customers/${customerID}/coupons/${couponID}/applicable_stores`)\n .catch((error) => error);\n }\n\n convertCouponVirtualToReal = (couponID, storeID, usageMedium) => {\n return couponAPIinstance\n .post(`/coupons/${couponID}/virtual_convert`, {\n store_id: storeID,\n usage_medium: usageMedium\n })\n .catch((error) => error);\n }\n\n useCoupon = (couponID, staffCode, qrCode) =>\n couponAPIinstance.post(`/coupons/${couponID}/usage_record`, {\n store_qr_code: qrCode,\n staff_code: staffCode,\n });\n}\nexport const CouponAPIHelper = new APIHelper();\n","import i18n from 'I18n';\n\nimport { CouponAPIHelper } from 'services/CouponAPIHelper';\n\nimport { createAction, delay, getTranslationData } from 'utils';\nimport { subHeaderLink } from 'utils/CampaignUtil';\nimport {\n COUPON_FORMATS,\n COUPON_REDEMPTION_METHOD,\n COUPON_TEMPLATE_TYPE,\n} from 'utils/CustomEnums';\nimport {\n convertDateToStamp,\n getCouponDetailExpireDate,\n getCouponEffectiveDate,\n getCouponListExpireDate,\n getCurrentDate,\n getLeftDays,\n} from 'utils/DateTimeUtils';\n\n// const COUPON_EXPIRE_DATE_FIXED_TIME = \"T23:59:59+08:00\";\nexport const USE_COUPON_STATUS = {\n TYPING: 0,\n SUCCESS: 1,\n FAILED: 2,\n NO_NETWORK: 3,\n INVALID: 4,\n BLACKOUT: 5,\n USED: 6,\n INACTIVE: 7,\n EXPIRED: 8,\n UNAVAIABLE: 9,\n STORE_ERROR: 10,\n};\nexport const COUPON_STATUS_INFO = {\n [USE_COUPON_STATUS.SUCCESS]: {\n titleKey: 'coupon:useSuccessTitle',\n contentKey: 'coupon:useSuccessContent',\n },\n [USE_COUPON_STATUS.FAILED]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'coupon:useFailedContent',\n },\n [USE_COUPON_STATUS.USED]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'coupon:couponIsUsed',\n },\n [USE_COUPON_STATUS.INACTIVE]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'coupon:couponIsInactive',\n },\n [USE_COUPON_STATUS.EXPIRED]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'coupon:couponIsExpired',\n },\n [USE_COUPON_STATUS.UNAVAIABLE]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'coupon:couponIsUnavaiable',\n },\n [USE_COUPON_STATUS.BLACKOUT]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'coupon:useFailedBlackoutContent',\n },\n [USE_COUPON_STATUS.STORE_ERROR]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'coupon:storeError',\n },\n [USE_COUPON_STATUS.NO_NETWORK]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'ticket_no_internet_connection',\n },\n [USE_COUPON_STATUS.INVALID]: {\n titleKey: 'coupon:useFailedTitle',\n contentKey: 'coupon:useFailedContent',\n },\n};\nconst COUPON_USE_RESULT = [\n {\n statusKey: USE_COUPON_STATUS.INVALID,\n errorDetail: 'Invalid staff code',\n },\n {\n statusKey: USE_COUPON_STATUS.USED,\n errorDetail: 'Coupon is used.',\n },\n {\n statusKey: USE_COUPON_STATUS.INACTIVE,\n errorDetail: 'Coupon has been disabled',\n },\n {\n statusKey: USE_COUPON_STATUS.BLACKOUT,\n errorDetail: 'The Coupon cannot be used today.',\n },\n {\n statusKey: USE_COUPON_STATUS.EXPIRED,\n errorDetail: 'Coupon is expired.',\n },\n {\n statusKey: USE_COUPON_STATUS.UNAVAIABLE,\n errorDetail: 'Coupon is not effective yet',\n },\n {\n statusKey: USE_COUPON_STATUS.STORE_ERROR,\n errorDetail: 'Invalid store QR code',\n },\n]\nconst getCardData = (coupon, now) => {\n const effectiveDate = convertDateToStamp(coupon.effective_date);\n const expiryDate = convertDateToStamp(\n coupon.expiry_date\n ? // ? `${coupon.expiry_date}${COUPON_EXPIRE_DATE_FIXED_TIME}`\n `${coupon.expiry_date}`\n : '',\n );\n const redemptionDate = convertDateToStamp(\n coupon.date_of_earning || coupon.date_of_purchase || coupon.date_of_grant,\n );\n const translatedData = getTranslationData(coupon.template);\n\n const data = {\n id: coupon.id,\n coverPhotoUrl: translatedData.cover_photo_url,\n name: translatedData.name,\n brandIconUrl: coupon.template.brand?.icon_url,\n isNew: now - redemptionDate < 3600 * 1000 * 24,\n isUsed: coupon.is_used,\n unavailable: effectiveDate === null ? false : now < effectiveDate,\n displayDate:\n effectiveDate && now < effectiveDate\n ? getCouponEffectiveDate(effectiveDate)\n : getCouponListExpireDate(now, expiryDate),\n lessThan6Days:\n expiryDate === null ? false : getLeftDays(now, expiryDate) <= 6,\n isExpired: coupon.is_expired,\n ...getCouponOMOData(coupon),\n };\n return data;\n};\n\nconst getStore = (coupon) => {\n const shown = 'store' in coupon && coupon.store !== null;\n if (!shown) {\n return {\n shown: false,\n };\n }\n const baseData = getTranslationData(coupon.store);\n return {\n shown: true,\n id: baseData.id,\n name: baseData.name,\n address: baseData.address,\n isOnlineStore: baseData?.is_online_store,\n };\n};\n\nconst getBrand = (coupon) => {\n const { brand } = coupon.template;\n if (brand === null) {\n return { shown: false };\n }\n const baseData = getTranslationData(brand);\n console.log('@@94: ', baseData);\n return {\n shown: true,\n iconUrl: coupon.template.brand.icon_url,\n name: baseData.name,\n description: baseData.description,\n };\n};\n\nconst getSerialNumber = (coupon) => {\n const brandID = coupon.template.brand ? coupon.template.brand.id : 0;\n const storeID = coupon.store ? coupon.store.id : 0;\n return `${coupon.template.id}-${brandID}-${storeID}-${coupon.id}`;\n};\n\nconst getCouponOMOData = (coupon) => {\n let usageMedium = coupon.usage_medium;\n const userSelectedUsageMedium = coupon.user_selected_usage_medium;\n if (\n usageMedium === 'NOT_LIMIT' &&\n userSelectedUsageMedium !== 'NOT_SELECT' &&\n coupon?.template?.should_select_usage_medium\n ) {\n usageMedium = userSelectedUsageMedium;\n }\n const templateMediumType = coupon?.template?.medium_type;\n if (\n usageMedium === 'NOT_LIMIT' &&\n ['ONLINE', 'OFFLINE'].includes(templateMediumType)\n ) {\n usageMedium = templateMediumType;\n }\n let lookupFieldPrefix = '';\n if (usageMedium === 'ONLINE') {\n lookupFieldPrefix = 'online_';\n } else if (usageMedium === 'OFFLINE') {\n lookupFieldPrefix = 'offline_';\n }\n const isVirtualCoupon =\n coupon?.virtual_real_type === 'VIRTUAL' && coupon?.real_coupon === null;\n const shouldSelectStore =\n isVirtualCoupon && coupon?.template?.should_use_in_store;\n const shouldSelectOnlineOrOffline =\n isVirtualCoupon &&\n !shouldSelectStore &&\n coupon?.template?.show_online_offline_selection;\n const shouldCallSelectUsageMedium =\n shouldSelectOnlineOrOffline && coupon?.template?.should_select_usage_medium;\n return {\n usageMedium,\n lookupFieldPrefix,\n isVirtualCoupon,\n shouldSelectStore,\n shouldSelectOnlineOrOffline,\n shouldCallSelectUsageMedium,\n };\n};\n\nconst getCouponDetailData = (coupon, now) => {\n const expiryDate = convertDateToStamp(coupon.expiry_date);\n const baseData = getTranslationData(coupon.template);\n const hasDetail = (baseData.detail_section_content || '').length > 0;\n const hasInstruction =\n (baseData.instruction_section_content || '').length > 0;\n const { lookupFieldPrefix, ...others } = getCouponOMOData(coupon);\n const redemptionMethod =\n coupon?.template?.[`${lookupFieldPrefix}redemption_method`];\n const couponTemplateType =\n coupon?.template?.[`${lookupFieldPrefix}coupon_template_type`];\n const inBlackoutPeriod = coupon?.template?.is_within_blackout_period;\n const isExpired = coupon.is_expired;\n const isUsed = coupon.is_used;\n const showMerchantScanQRCode =\n redemptionMethod ===\n COUPON_REDEMPTION_METHOD.MERCHANT_APP_SCAN_COUPON_QR_CODE &&\n !isUsed &&\n !isExpired;\n const couponCodeFormat = coupon?.template?.[`${lookupFieldPrefix}formats`];\n let showScanableCouponCode = false;\n let showCopiableString =\n coupon?.template?.[`${lookupFieldPrefix}show_copiable_string`];\n if (couponTemplateType === COUPON_TEMPLATE_TYPE.IMPORT_EXISTING_COUPON) {\n if (redemptionMethod === COUPON_REDEMPTION_METHOD.POS_UPDATED_CODE) {\n showScanableCouponCode = couponCodeFormat !== COUPON_FORMATS.TEXT;\n } else if (\n isUsed &&\n redemptionMethod !==\n COUPON_REDEMPTION_METHOD.MERCHANT_APP_SCAN_COUPON_QR_CODE\n ) {\n showScanableCouponCode = couponCodeFormat !== COUPON_FORMATS.TEXT;\n }\n if (lookupFieldPrefix === 'online_') {\n showCopiableString = true;\n }\n }\n\n const data = {\n id: coupon.id,\n base: {\n images: baseData?.photos_url || [],\n name: baseData.name,\n serialNumber: getSerialNumber(coupon),\n displayDate: getCouponDetailExpireDate(now, expiryDate),\n code: coupon?.code,\n isUsed,\n isExpired,\n redemptionMethod,\n couponTemplateType,\n inBlackoutPeriod,\n showMerchantScanQRCode,\n showScanableCouponCode,\n couponCodeFormat,\n showCopiableString,\n barcodeFormat: coupon?.template?.[`${lookupFieldPrefix}barcode_format`],\n ...others,\n },\n store: getStore(coupon),\n brand: getBrand(coupon),\n instruction: {\n shown: hasInstruction,\n title:\n baseData.instruction_section_title || i18n.t('campaignDetail:howToUse'),\n content: baseData.instruction_section_content,\n },\n detail: {\n shown: hasDetail,\n title: baseData.detail_section_title || i18n.t('campaignDetail:details'),\n content: baseData.detail_section_content,\n },\n };\n return data;\n};\n\nconst processCouponCardData = (item) => {\n const now = getCurrentDate();\n return {\n original: { ...item },\n card: getCardData(item, now),\n };\n};\n\nconst processCouponDetailData = (coupon) => {\n const now = getCurrentDate();\n return getCouponDetailData(coupon, now);\n};\n\nconst processCouponList = (couponList) => {\n const processedData = [];\n couponList.forEach((item, index) => {\n if (!item.is_forced_inactive) {\n processedData.push(processCouponCardData(item));\n }\n });\n return processedData;\n};\n\nexport default {\n namespace: 'myCoupon',\n state: {\n coupons: [],\n nextLink: null,\n currentTabIndex: 0,\n detailDataMap: {},\n couponApplicableStoreMap: {},\n useCouponStatus: USE_COUPON_STATUS.TYPING, // 0: typing, 1: success, 2:falied, 3: no network, 4: invalid\n selectedTestCase: null,\n selectedStore: {},\n },\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n addDetailData(state, { payload }) {\n const { couponID, data } = payload;\n return {\n ...state,\n detailDataMap: { ...state.detailDataMap, [couponID]: data },\n };\n },\n addCouponStores(state, { payload }) {\n const { couponID, stores } = payload;\n return {\n ...state,\n couponApplicableStoreMap: {\n ...state.couponApplicableStoreMap,\n [couponID]: stores,\n },\n };\n },\n resetState(state, { payload }) {\n return {\n coupons: [],\n currentTabIndex: 0,\n detailDataMap: {},\n useCouponStatus: USE_COUPON_STATUS.TYPING,\n };\n },\n updateUseCouponStatus(state, { payload }) {\n return {\n ...state,\n useCouponStatus: payload.status,\n };\n },\n updateCurrentTabIndex(state, { payload }) {\n console.log('@175 update tab key');\n return {\n ...state,\n currentTabIndex: payload,\n };\n },\n selectStore(state, { payload }) {\n return {\n ...state,\n selectedStore: payload,\n };\n },\n },\n effects: {\n refreshMyCoupon: [\n function* ({ payload }, { select, call, put }) {\n const currentTabIndex = yield select(\n (state) => state.myCoupon.currentTabIndex,\n );\n const selectedTestCase = yield select(\n (state) => state.myCoupon.selectedTestCase,\n );\n const customerID = yield select((state) => state.users.userInfo.uid);\n const startTime = Date.now();\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n MyCouponIsRefreshing: true,\n MyCouponHasMoreData: true,\n }),\n );\n const response = yield call(\n CouponAPIHelper.getMyCoupon,\n selectedTestCase,\n currentTabIndex,\n customerID,\n );\n const endTime = Date.now();\n if (endTime - startTime < 1500) {\n yield call(delay, 1500 - endTime + startTime);\n }\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n MyCouponIsRefreshing: false,\n }),\n );\n if (response.status === 200) {\n const { data, headers } = response;\n const nextLink = subHeaderLink(headers.link);\n if (nextLink) {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n MyCouponHasMoreData: true,\n }),\n );\n } else {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n MyCouponHasMoreData: false,\n }),\n );\n }\n\n yield put(\n createAction('updateState')({\n coupons: processCouponList(data),\n nextLink,\n }),\n );\n } else {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n MyCouponHasMoreData: false,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n loadMoreCoupon: [\n function* ({ payload }, { select, put, call }) {\n const nextLink = yield select((state) => state.myCoupon.nextLink);\n if (nextLink === null || nextLink === '') {\n return;\n }\n const currentCoupons = yield select((state) => state.myCoupon.coupons);\n const currentTabIndex = yield select(\n (state) => state.myCoupon.currentTabIndex,\n );\n const selectedTestCase = yield select(\n (state) => state.myCoupon.selectedTestCase,\n );\n const customerID = yield select((state) => state.users.userInfo.uid);\n const startTime = Date.now();\n const response = yield call(\n CouponAPIHelper.getMyCoupon,\n selectedTestCase,\n currentTabIndex,\n customerID,\n nextLink,\n );\n const endTime = Date.now();\n if (endTime - startTime < 1000) {\n yield call(delay, 1000 - endTime + startTime);\n }\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n MyCouponIsLoadingMore: false,\n }),\n );\n if (response.status === 200) {\n const { data, headers } = response;\n const nextLink = subHeaderLink(headers.link);\n if (data.length >= 20) {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n MyCouponHasMoreData: true,\n }),\n );\n } else {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n MyCouponHasMoreData: false,\n }),\n );\n }\n const coupons = [...currentCoupons, ...processCouponList(data)];\n yield put(createAction('updateState')({ coupons, nextLink }));\n }\n },\n { type: 'takeLatest' },\n ],\n changeTab: [\n function* ({ payload }, { select, put }) {\n const currentTabIndex = yield select(\n (state) => state.myCoupon.currentTabIndex,\n );\n const { index } = payload;\n if (currentTabIndex === index) {\n return;\n }\n yield put(\n createAction('updateState')({\n coupons: [],\n currentTabIndex: index,\n nextLink: null,\n }),\n );\n yield put(createAction('refreshMyCoupon')());\n },\n { type: 'takeLatest' },\n ],\n prepareDetailData: [\n function* ({ payload }, { select, put, call }) {\n // using list data first, then fetch detail data from coupon detail api\n const { couponID } = payload;\n const customerID = yield select((state) => state.users.userInfo.uid);\n // const selectedTestCase = yield select((state) => state.testCase.selectedTestCase);\n const selectedTestCase = yield select(\n (state) => state.myCoupon.selectedTestCase,\n );\n let coupon = null;\n const allCoupons = yield select((state) => state.myCoupon.coupons);\n allCoupons.forEach((item, index) => {\n if (item.original.id === couponID) {\n coupon = processCouponDetailData({ ...item.original });\n }\n });\n if (coupon !== null) {\n // yield put(createAction(\"addDetailData\")({ couponID, data: coupon }));\n yield put({\n type: 'addDetailData',\n payload: { couponID, data: coupon },\n });\n }\n\n const response = yield call(\n CouponAPIHelper.getCouponDetail,\n selectedTestCase,\n customerID,\n couponID,\n );\n if (response.status === 200) {\n coupon = processCouponDetailData(response.data);\n // yield put(createAction(\"addDetailData\")({ couponID, data: coupon }));\n yield put({\n type: 'addDetailData',\n payload: { couponID, data: coupon },\n });\n }\n },\n { type: 'takeEvery' },\n ],\n getCouponApplicableStores: [\n function* ({ payload }, { select, put, call }) {\n const { couponID } = payload;\n const customerID = yield select((state) => state.users.userInfo.uid);\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n couponApplicableStoreIsLoading: true,\n }),\n );\n const response = yield call(\n CouponAPIHelper.getCouponApplicableStores,\n customerID,\n couponID,\n );\n\n if (response.status === 200) {\n const { data } = response;\n yield put({\n type: 'addCouponStores',\n payload: { couponID, stores: data },\n });\n }\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n couponApplicableStoreIsLoading: false,\n }),\n );\n },\n { type: 'takeLatest' },\n ],\n convertVirtualToReal: [\n function* ({ payload }, { select, put, call }) {\n const { couponID, storeID, usageMedium, afterSuccessAction } = payload;\n const response = yield call(\n CouponAPIHelper.convertCouponVirtualToReal,\n couponID,\n storeID,\n usageMedium,\n );\n if (response.status < 300) {\n const { data } = response;\n afterSuccessAction && afterSuccessAction(data);\n } else {\n const errorMessage = response.response?.data?.detail;\n yield put({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: errorMessage,\n },\n },\n });\n }\n },\n { type: 'takeLatest' },\n ],\n useCoupon: [\n function* ({ payload }, { put, call }) {\n const { couponID, code, qrCode } = payload;\n let result = null;\n try {\n const response = yield call(\n CouponAPIHelper.useCoupon,\n couponID,\n code,\n qrCode,\n );\n\n const { status } = response;\n if (status < 300) {\n result = USE_COUPON_STATUS.SUCCESS;\n }\n } catch (error) {\n if ('response' in error) {\n const errorDetail = error.response.data?.detail;\n const statusKey = COUPON_USE_RESULT.find(\n (item) => item.errorDetail === errorDetail,\n )?.statusKey;\n result = statusKey || USE_COUPON_STATUS.FAILED;\n } else {\n result = USE_COUPON_STATUS.FAILED;\n }\n }\n if (result !== null) {\n yield put(\n createAction('updateUseCouponStatus')({\n status: result,\n }),\n );\n }\n const afterActions = payload.afterActions || (() => {});\n yield afterActions();\n },\n { type: 'takeLatest' },\n ],\n fetchAllCoupons: [\n function* ({ payload }, { put, call, select }) {\n const customerID = yield select((state) => state.users.userInfo.uid);\n console.log('@416', customerID);\n const response = yield call(\n CouponAPIHelper.getAllMyCoupons,\n customerID,\n );\n if (response.status === 200) {\n const { data } = response;\n const coupons = processCouponList(data);\n yield put(createAction('updateState')({ coupons }));\n }\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","import React, { Component } from 'react';\nimport { Container, Media, Modal } from 'react-bootstrap';\nimport ReactCodeInput from 'react-code-input';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\n\nimport i18n from 'I18n';\n\nimport Scanner from 'component/campaign/Scanner';\nimport { COUPON_STATUS_INFO, USE_COUPON_STATUS } from 'models/MyCoupon';\n\nimport { createAction, detectIsMobile } from 'utils';\nimport { COUPON_REDEMPTION_METHOD } from 'utils/CustomEnums';\n\nimport './StaffUse.scss';\nimport CustomAlert from 'component/base/CustomAlert';\nimport { isMobile, isPadOrMobile } from 'utils/ScreenUtils';\n\n@connect(({ myCoupon }) => ({ ...myCoupon }))\nclass StaffUse extends Component {\n constructor(props) {\n super(props);\n this.couponID = this.props.match.params?.id;\n this.couponDetail = this.props.detailDataMap[this.couponID];\n this.redemptionMethod =\n this.props.detailDataMap[this.couponID].base.redemptionMethod;\n this.state = {\n modalShow: false,\n useCouponStatusModal: false,\n inputCouponCode: '',\n showNoCameraModal: false,\n showScanner: false,\n qrCodeString: null,\n };\n }\n componentDidUpdate(prevProps) {\n if (this.props.language !== prevProps.language) {\n this.props.dispatch(\n createAction('myCoupon/prepareDetailData')({ couponID: this.couponID }),\n );\n }\n if (this.state.qrCodeString !== null) {\n const qrCodeString = this.state.qrCodeString;\n this.setState({\n qrCodeString: null,\n });\n this.props.dispatch(\n createAction('myCoupon/useCoupon')({\n couponID: this.couponID,\n qrCode: qrCodeString,\n afterActions: () =>\n this.setState({\n useCouponStatusModal: true,\n }),\n }),\n );\n }\n }\n\n useButtonClicked = () => {\n if (this.couponDetail.base.inBlackoutPeriod) {\n this.props.dispatch(\n createAction('myCoupon/updateUseCouponStatus')({\n status: USE_COUPON_STATUS.BLACKOUT,\n }),\n );\n this.setState({\n modalShow: false,\n useCouponStatusModal: true,\n });\n return;\n }\n this.props.dispatch(\n createAction('myCoupon/updateUseCouponStatus')({\n status: USE_COUPON_STATUS.TYPING,\n }),\n );\n if (isPadOrMobile()) {\n this.props.history.push('/use_coupon', {\n couponID: this.couponID,\n });\n } else {\n this.setState({\n modalShow: true,\n });\n }\n };\n\n // codeInputOnChange = (text) => {\n // if (text.length === 6) {\n // this.props.dispatch(\n // createAction(\"myCoupon/useCoupon\")({\n // couponID: this.couponID,\n // code: text,\n // })\n // );\n // this.setState({\n // modalShow: false,\n // useCouponStatusModal: true,\n // });\n // }\n // };\n\n handleUseCoupon = () => {\n if (this.state.inputCouponCode.length === 6) {\n this.props.dispatch(\n createAction('myCoupon/useCoupon')({\n couponID: this.couponID,\n code: this.state.inputCouponCode,\n }),\n );\n this.setState({\n modalShow: false,\n useCouponStatusModal: true,\n });\n }\n };\n\n modalBody = (titleKey, contentKey, buttonAction = () => {}) => {\n return (\n \n {i18n.t(\"coupon:applicableStores\")}\n
\n \n \n \n \n \n \n : null}\n
\n {this.props.store.name}
\n \n {this.props.store?.isOnlineStore ? i18n.t(\"product:Online store\") : i18n.t(\"product:Physical store\")}\n \n {!this.props.store?.isOnlineStore ?\n \n
\n \n {i18n.t('campaignDetail:noCamera')}\n
\n\n {\n this.setState({ showNoCameraModal: false });\n this.props.dispatch(\n createAction('myCoupon/updateUseCouponStatus')({\n status: USE_COUPON_STATUS.TYPING,\n }),\n );\n }}\n >\n {i18n.t('campaign_ok')}\n \n
\n \n {\n if (detectIsMobile()) {\n this.setState({ showScanner: true });\n } else {\n this.setState({\n showNoCameraModal: true,\n });\n }\n }}\n disabled={this.props.useCouponStatus}\n >\n {i18n.t('coupon:scanQRCode')}\n \n {showStaffUse && (\n \n {i18n.t('coupon:useCouponText')}\n \n )}\n
\n \n ) : (\n <>\n \n {i18n.t('campaign_show_coupon_to_staff')}\n
\n\n \n
\n \n )}\n \n
\n {i18n.t('coupon:useCoupon')}
\n\n {i18n.t('campaign_simply_allow_enter_pin')}\n
\n\n {\n this.setState({ modalShow: false });\n }}\n >\n {i18n.t('message_cancel')}\n \n {\n this.handleUseCoupon();\n }}\n >\n {i18n.t('campaign_confirm')}\n \n
\n \n {i18n.t('coupon:used')}\n
\n \n \n {\n this.props.history.push(\n `/coupon/${this.couponID}/select_store`,\n );\n }}\n >\n
\n \n \n );\n }\n\n if (!baseInfo.isUsed && !baseInfo.isExpired) {\n return (\n {i18n.t('store:select_store')}
\n \n
\n );\n }\n };\n\n const showLeftSection = () => {\n if (couponDetail) {\n return (\n \n {this.showImageSlider()}
\n {this.showCouponUsedtag()}\n \n
\n {this.showCouponUsedtag(true)}\n
\n {this.showSelectedStore()}\n {baseInfo.name}
\n \n
\n \n {showStorePickSction()}\n {!isVirtualCoupon &&
\n );\n }\n };\n\n return (\n \n \n \n {i18n.t('home_home')}\n
\n \n {showLeftSection()}\n\n
\n \n
\n );\n }\n}\n\nexport default withRouter(CouponDetail);\n","import React, { Component } from \"react\";\nimport { Container } from \"react-bootstrap\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\n\nimport PickupStore from \"component/coupon/PickUpStoreSection\";\nimport { createAction } from \"utils\";\n\n@connect(({ myCoupon, users, pullrefreshandloadmore }) => ({\n detailData: myCoupon.detailDataMap,\n applicableStoreMap: myCoupon.couponApplicableStoreMap,\n applicableStoreIsLoading: pullrefreshandloadmore.couponApplicableStoreIsLoading,\n language: users.language,\n ...myCoupon,\n}))\nclass CouponSelectStore extends Component {\n constructor(props) {\n super(props);\n this.couponID = props.match.params?.id;\n this.state = {\n applicableStore: [],\n }\n }\n\n componentDidMount() {\n this.props.dispatch(\n createAction(\"myCoupon/prepareDetailData\")({ couponID: this.couponID })\n );\n this.props.dispatch(\n createAction(\"myCoupon/getCouponApplicableStores\")({ couponID: this.couponID })\n );\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.language !== prevProps.language) {\n this.props.dispatch(\n createAction(\"myCoupon/prepareDetailData\")({ couponID: this.couponID })\n );\n this.props.dispatch(\n createAction(\"myCoupon/getCouponApplicableStores\")({ couponID: this.couponID })\n );\n }\n if (this.state.applicableStore?.length < 1\n && this.props.applicableStoreMap?.[this.couponID]?.length > 0\n ) {\n this.setState({ applicableStore: this.props.applicableStoreMap?.[this.couponID] })\n }\n }\n render() {\n const couponDetail = this.props.detailData?.[this.couponID]\n return (\n {'>'}
\n {i18n.t('profile_my_coupons')}\n {'>'}
\n {i18n.t('coupon_detail')}\n \n {\n this.codeInputOnChange(text);\n }}\n />\n
\n {this.showUseCouponStatusModal()}\n {i18n.t('coupon:useCoupon')}
\n\n {i18n.t('campaign_simply_allow_enter_pin')}\n
\n\n 
\n\n \n\n \n\n {\n history.push(\"/home\");\n }}\n >\n \n \n
\n );\n}\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { createAction } from \"../../utils\";\nimport { withRouter } from \"react-router-dom\";\n\n@connect(({ users }) => ({ ...users }))\nclass Login extends Component {\n componentDidMount() {\n const search = this.props.location.search;\n const params = new URLSearchParams(search);\n const code = params.get(\"token\");\n console.log(\"@@13: \", params);\n if (code) {\n // this.props.cookies.remove('user')\n console.log(code);\n this.props.dispatch(createAction(\"users/login\")({ code }));\n }\n this.props.history.push(\"/home\");\n }\n\n render() {\n return (\n \n {/*
\n );\n }\n}\n\nexport default withRouter(Login);\n","import React, { Component } from 'react';\nimport { Col, Container, Row, Table } from 'react-bootstrap';\nimport { withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\n\nimport LoadMoreSpinner from 'component/common/LoadMoreSpinner';\n\nimport { createAction, enLocaleNumberFormatter } from 'utils';\n\nimport './ActivityLogMobile.scss';\n\n@connect(({ users, activityLogs, pullrefreshandloadmore }) => ({\n availablePoints: users.availablePoints,\n activityLogOriginList: activityLogs.activityLogOriginList,\n activityLogPageLink: activityLogs.activityLogPageLink,\n isLoadingLogs: activityLogs.isLoading,\n ...pullrefreshandloadmore,\n language: users.language,\n}))\nclass ActivityLogMobile extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n componentDidMount() {\n this.props.dispatch(createAction('activityLogs/fetchUserActivityLogs')());\n }\n\n componentWillUnmount() {\n this.props.dispatch(createAction('activityLogs/clearLogs')());\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.language !== this.props.language) {\n this.props.dispatch(createAction('activityLogs/fetchUserActivityLogs')());\n }\n }\n\n loadMore = () => {\n if (this.props.activityLogPageLink) {\n this.props.dispatch(\n createAction('pullrefreshandloadmore/updateState')({\n ActivityLogLoadingMore: true,\n }),\n );\n this.props.dispatch(\n createAction('activityLogs/uerActivityLogsLoadMore')(),\n );\n }\n };\n\n parseActicityLog = () => {\n let parsedActicityLogList = [];\n if (\n this.props.activityLogOriginList &&\n this.props.activityLogOriginList.length > 0\n ) {\n parsedActicityLogList = this.props.activityLogOriginList.map((item) => {\n let content = [];\n if (!!item.points) {\n content.push(\n item?.points > 0\n ? `+${enLocaleNumberFormatter(item.points)} pts`\n : `${enLocaleNumberFormatter(item.points)} pts`,\n );\n }\n if (!!item.tpe) {\n content.push(\n item?.tpe > 0\n ? `+${enLocaleNumberFormatter(item.tpe)} pp`\n : `${enLocaleNumberFormatter(item.tpe)} pp`,\n );\n }\n if (item?.coupon) {\n content.push(`+${item.coupon} ${this.props.t('home_coupons')}`);\n }\n if (item.stamps != null) {\n content.push(\n item?.stamps > 0\n ? `+${item?.stamps} stamps`\n : `${item?.stamps} stamps`,\n );\n }\n return {\n name: this.props.t(item.title),\n date: item.activityTime,\n content: content,\n icon: item.icon,\n srcSet: item?.srcSet,\n subTitle: item.subTitle,\n };\n });\n }\n return parsedActicityLogList;\n };\n\n renderTableData = ({\n dataList,\n isLoading = false,\n isLoadingMore = false,\n }) => {\n if (isLoading) {\n return (\n \n \n loading..\n*/}\n
\n {item?.icon && (\n
\n \n
\n {item.name}
\n {item?.subTitle && (\n {item?.subTitle}
\n )}\n {item?.date}
\n {content}
;\n })}\n \n {this.props.t('no_record_click')}{' '}\n {this.props.t('here')}{' '}\n {this.props.t('to_earn_points')}\n
\n\n {\n if (\n event.nativeEvent.target.scrollTop +\n event.nativeEvent.target.clientHeight >\n event.nativeEvent.target.scrollHeight * 0.9 &&\n !isLoadingMore\n ) {\n this.loadMore();\n }\n }}\n >\n \n {this.renderTableData({\n dataList: itemList,\n isLoading,\n isLoadingMore,\n })}\n
\n
\n \n );\n };\n\n render() {\n return (\n \n
\n {title}
\n \n {this.props.t('earn_burn')}\n
\n \n
\n )\n }\n\n getLevelBenefit = (level=1) => {\n const itemList = [\n {\n title: this.props.t(\"levelBenfitsDiscountTitle\"),\n content: this.props.t(\"levelBenfitsDiscountText\"),\n isActive: level > 0\n },\n {\n title: this.props.t(\"levelBenfits7daysInsuredTitle\"),\n content: this.props.t(\"levelBenfits7daysInsuredText\"),\n isActive: level > 2\n },\n {\n title: this.props.t(\"levelBenfitsCustomerServiceTitle\"),\n content: this.props.t(\"levelBenfitsCustomerServiceText\"),\n isActive: level > 3\n },\n ]\n return (\n \n \n \n
\n \n
\n {item?.title}
\n {item?.content}
\n \n {itemList && itemList?.length > 0 &&\n itemList.map((item) => this.getSingleBenefit(item))\n }\n
\n )\n }\n\n render() {\n const tabs = [\n {\n key: levelConfig.level1,\n name: this.props.t(levelConfig.level1),\n content: this.getLevelBenefit(1)\n },\n {\n key: levelConfig.level2,\n name: this.props.t(levelConfig.level2),\n content: this.getLevelBenefit(2)\n },\n {\n key: levelConfig.level3,\n name: this.props.t(levelConfig.level3),\n content: this.getLevelBenefit(3)\n },\n {\n key: levelConfig.level4,\n name: this.props.t(levelConfig.level4),\n content: this.getLevelBenefit(4)\n },\n ]\n return (\n \n }\n\n render() {\n return (\n \n \n\n );\n }\n}\n\nexport default withRouter(withTranslation()(LevelRuleMobile));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport \"./RewardStatusMobile.scss\";\nimport { withTranslation } from \"react-i18next\";\nimport { getLevelRenewTime } from \"../../utils/DateTimeUtils\";\nimport { createAction } from \"../../utils\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport { TabContainer, TabPane, Nav, TabContent } from \"react-bootstrap\";\nimport RewardStatusTableView, { parseCouponListData, parsePointsStatus, parseStampStatus, rewardStatusModalTab } from \"./RewardStatusTableView\";\nimport { NO_LEVEL } from \"utils/Config\";\n\n@connect(({ users, myCoupon, pullrefreshandloadmore }) => ({\n levelName: users.levelName,\n levelExpiryDate: users.renewDate,\n pointStatus: users.pointStatus,\n isRefreshingPoints: users.isRefreshingPointsStatus || false,\n pointStatusNextLink: users.pointStatusNextLink,\n couponNextLink: myCoupon.nextLink,\n availableCoupons: myCoupon.coupons,\n ...pullrefreshandloadmore,\n language: users.language,\n isRefreshingStamp: users.isRefreshingStamp,\n totalEarnedStamps: users.totalEarnedStamps,\n stampStatus: users.stampStatus,\n stampStatusNextLink: users.stampStatusNextLink,\n}))\nclass RewardStatusMobile extends Component {\n constructor(props) {\n super(props);\n this.state = {\n activeTab: NO_LEVEL ? rewardStatusModalTab.points : rewardStatusModalTab.level,\n };\n }\n\n componentDidMount() {\n this.props.dispatch(createAction(\"users/fetchRewardStatus\")());\n }\n\n componentWillUnmount() {\n this.props.dispatch(createAction(\"users/clearRewardStatus\")());\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.language !== prevProps.language) {\n this.props.dispatch(createAction(\"users/fetchRewardStatus\")());\n }\n }\n\n loadMore = () => {\n if (this.state.activeTab === rewardStatusModalTab.coupon && this.props.couponNextLink) {\n this.props.dispatch(\n createAction(\"pullrefreshandloadmore/updateState\")({\n MyCouponIsLoadingMore: true,\n })\n );\n this.props.dispatch(createAction(\"myCoupon/loadMoreCoupon\")());\n }\n if (this.state.activeTab === rewardStatusModalTab.points && this.props.pointStatusNextLink) {\n this.props.dispatch(\n createAction(\"pullrefreshandloadmore/updateState\")({\n PointStatusIsLoadingMore: true,\n })\n );\n this.props.dispatch(createAction(\"users/loadMorePointStatus\")());\n }\n if (this.state.activeTab === rewardStatusModalTab.stamp && this.props.stampStatusNextLink) {\n this.props.dispatch(\n createAction(\"pullrefreshandloadmore/updateState\")({\n StampStatusIsLoadingMore: true,\n })\n );\n this.props.dispatch(createAction(\"users/loadMoreStampStatus\")());\n }\n }\n\n render() {\n const tabs = [\n ...(NO_LEVEL ? [] : [{\n key: rewardStatusModalTab.level,\n name: this.props.t(\"profile_level\"),\n content: (\n \n
\n )\n }]),\n {\n key: rewardStatusModalTab.points,\n name: this.props.t(\"profile_points\"),\n content: (\n \n
\n )\n },\n {\n key: rewardStatusModalTab.coupon,\n name: this.props.t(\"profile_coupons\"),\n content: (\n \n
\n )\n },\n // {\n // key: rewardStatusModalTab.stamp,\n // name: this.props.t(\"profile_stamps\"),\n // content: (\n // \n //
\n // )\n // },\n ]\n return (\n \n this.setState({ activeTab: key })}\n >\n \n \n {tabs.map((tab, index) => (\n \n {tab.content}\n \n ))}\n \n \n )\n }\n}\n\nexport default withTranslation()(RewardStatusMobile);\n","import i18n from 'I18n';\nimport axios from 'axios';\nimport queryString from 'query-string';\n\nconst CMS_DATA_BASE_URL =\n process.env.REACT_APP_DOMAIN || 'https://aillia.hkdev.motherapp.com';\nconst BASEURL = CMS_DATA_BASE_URL;\n\nconst transactionAPIinstance = axios.create({\n baseURL: BASEURL,\n timeout: 5000,\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n});\n\nclass APIHelper {\n constructor() {\n this.isFakeEnvLogin = false;\n transactionAPIinstance.interceptors.request.use(\n (config) => {\n if (\n this.authorizationToken !== undefined &&\n this.authorizationToken != null\n ) {\n config.headers.Authorization = `Bearer ${this.authorizationToken}`;\n config.headers.language = i18n.language;\n config.headers['Accept-Language'] = i18n.language;\n }\n return config;\n },\n (error) => Promise.reject(error),\n );\n }\n\n addAuthorization = (token) => {\n this.authorizationToken = token;\n };\n\n removeAuthorization = () => {\n this.authorizationToken = undefined;\n };\n\n getRewardClaimList = ({ userId, pageLink }) => {\n if (pageLink) {\n return transactionAPIinstance.get(pageLink).catch((error) => error);\n }\n if (!userId) {\n return null;\n }\n return transactionAPIinstance\n .get(`/customers/${userId}/transactions?page[number]=1&page[size]=50`)\n .catch((error) => error);\n };\n\n getRewardClaimDetail = ({ userId, transactionId }) => {\n return transactionAPIinstance\n .get(`/customers/${userId}/transactions/${transactionId}`)\n .catch((error) => error);\n };\n\n createRewardClaim = ({ userId, input }) => {\n return transactionAPIinstance\n .post(`/customers/${userId}/transactions`, input)\n .catch((error) => error);\n };\n\n deleteRewardClaim = ({ userId, transactionId }) => {\n return transactionAPIinstance\n .delete(`/customers/${userId}/transactions/${transactionId}`)\n .catch((error) => error);\n };\n\n getStoreList = ({ pageLink, searchName, language }) => {\n if (pageLink) {\n return transactionAPIinstance.get(pageLink).catch((error) => error);\n }\n return transactionAPIinstance\n .get(\n `/stores?sort=name&page[number]=1&page[size]=10${\n searchName ? '&name=' + searchName : ''\n }${\n language ? '&language=' + language : ''\n }`,\n )\n .catch((error) => error);\n };\n\n getTransactionDetail = ({ customerID, transactionID }) => {\n const link = `/customers/${customerID}/transaction_history/${transactionID}`;\n return transactionAPIinstance.get(link).catch((error) => error);\n };\n\n getTransactionList = ({ pageLink, customerID }) => {\n if (pageLink) {\n return transactionAPIinstance.get(pageLink).catch((error) => error);\n }\n const query = queryString.stringify({\n 'page[number]': 1,\n 'page[size]': 10,\n sort: '-date',\n });\n const link = `/customers/${customerID}/transaction_history?${query}`;\n return transactionAPIinstance.get(link).catch((error) => error);\n };\n}\nexport const TransactionAPIHelper = new APIHelper();\n","import axios from \"axios\";\nimport i18n from \"../I18n\";\n\nconst CMS_DATA_BASE_URL =\n process.env.REACT_APP_DOMAIN || \"https://aillia.hkdev.motherapp.com\";\nconst BASEURL = CMS_DATA_BASE_URL;\n\nconst uploadFileAPIinstance = axios.create({\n baseURL: BASEURL,\n timeout: 5000,\n headers: {\n Accept: \"application/json\",\n \"Content-Type\": \"multipart/form-data; charset=utf-8;\",\n },\n});\n\nclass APIHelper {\n constructor() {\n this.isFakeEnvLogin = false;\n uploadFileAPIinstance.interceptors.request.use(\n (config) => {\n if (\n this.authorizationToken !== undefined &&\n this.authorizationToken != null\n ) {\n config.headers.Authorization = `Bearer ${this.authorizationToken}`;\n config.headers.language = i18n.language;\n }\n return config;\n },\n (error) => Promise.reject(error)\n );\n }\n\n addAuthorization = (token) => {\n this.authorizationToken = token;\n };\n\n uploadFile = ({ input }) => {\n return uploadFileAPIinstance\n .post(`/customer-app/files`, input)\n .catch((error) => error);\n };\n}\nexport const UploadFileAPIHelper = new APIHelper();\n\nexport const getFileData = (file) => {\n const formData = new FormData();\n formData.append(\"file\", file);\n return formData;\n};\n","import { call, put } from 'redux-saga/effects';\nimport { createAction, delay } from 'utils';\nimport { subHeaderLink } from 'utils/CampaignUtil';\n\nexport function* getDataWithDelay(\n apiService,\n params = null,\n key = '',\n isLoadMore = true,\n delayMillins = 1000,\n) {\n let updateKey = `${key}IsLoadingMore`;\n if (!isLoadMore) {\n updateKey = `${key}IsRefreshing`;\n }\n yield put(createAction('pullrefreshandloadmore/updateState')({ [updateKey]: true }))\n const startTime = Date.now();\n const data = yield call(apiService, params);\n const endTime = Date.now();\n if (endTime - startTime < delayMillins) {\n yield call(delay, delayMillins - endTime + startTime);\n }\n yield put(createAction('pullrefreshandloadmore/updateState')({ [updateKey]: false }));\n return data;\n}\n\nexport function* hasMoreData(key, pageLink) {\n yield put(createAction('pullrefreshandloadmore/updateState')({ [`${key}HasMoreData`]: pageLink.length !== 0 }));\n}\n\nexport function* refresh(\n pageName, hasOldData, apiServiceWithArgs,\n onSuccess, onFailed,\n) {\n yield put(createAction('pullrefreshandloadmore/startRefresh')({ pageName }));\n\n const startTime = Date.now();\n const apiResult = yield call(...apiServiceWithArgs);\n const endTime = Date.now();\n if (endTime - startTime < 1500) {\n yield call(delay, 1500 - endTime + startTime);\n }\n if (apiResult && apiResult.status < 300) {\n yield put(createAction('pullrefreshandloadmore/updateState')({ [`${pageName}IsRefreshing`]: false }));\n const { headers } = apiResult;\n const nextLink = subHeaderLink(headers.link);\n if (nextLink) {\n yield put(createAction('pullrefreshandloadmore/updateState')({ [`${pageName}HasMoreData`]: true }));\n } else {\n yield put(createAction('pullrefreshandloadmore/updateState')({ [`${pageName}HasMoreData`]: false }));\n }\n yield onSuccess(apiResult, nextLink);\n return;\n }\n if (!hasOldData) {\n yield put(createAction('pullrefreshandloadmore/refreshFailed')({ pageName }));\n }\n if (onFailed) {\n yield onFailed(apiResult);\n }\n}\n","import i18n from 'I18n';\n\nimport { TransactionAPIHelper } from 'services/TransactionAPIHelper';\nimport { UploadFileAPIHelper, getFileData } from 'services/UploadFileHelper';\n\nimport {\n createAction,\n enLocaleDollarFormatter,\n enLocaleNumberFormatter,\n} from 'utils';\nimport { subHeaderLink } from 'utils/CampaignUtil';\nimport {\n getActivityLogDate,\n getActivityLogDateTime,\n getReceiptDate,\n} from 'utils/DateTimeUtils';\nimport {\n getDataWithDelay,\n hasMoreData,\n refresh,\n} from 'utils/PullAndRefreshUtil';\n\nexport const ClaimType = {\n APPROVED: 'records:record_approval',\n REJECTED: 'records:record_rejected',\n RECALLED: 'records:record_recalled',\n WAITING_FOR_APPROVAL: 'records:record_pending',\n};\n\nexport const TransactionEventTypeDict = {\n PENDING: 'records:record_pending',\n AUTHORIZED: 'records:transaction_authorized',\n PAID: 'records:transaction_paid',\n PARTIALLY_PAID: 'records:transaction_partially_paid',\n REFUNDED: 'records:transaction_refunded',\n PARTIALLY_REFUNDED: 'records:transaction_partially_refunded',\n VOIDED: 'records:transaction_voided',\n VOID: 'records:transaction_void',\n WAITING_FOR_APPROVAL: 'records:transaction_waiting_for_approval',\n APPROVED: 'records:transaction_approved',\n RECALLED: 'records:transaction_recalled',\n REJECTED: 'records:transaction_rejected',\n COMPLETED: 'records:transaction_completed',\n PROCESSING: 'records:transaction_processing',\n REFUND: 'records:transaction_refund',\n EXCHANGE: 'records:transaction_exchange',\n};\n\nexport const TransactionHistoryKey = 'TransactionHistory';\n\nconst getStoreTranslation = (store) => {\n const currentLanguage = i18n.language;\n let { name } = store;\n const { translations } = store;\n const translation = translations?.find(\n (trans) => trans.language === currentLanguage,\n );\n if (translation) {\n name = translation.name || name;\n }\n return {\n id: store.id,\n name,\n };\n};\n\nconst getBrand = (brand) => {\n if (!brand) {\n return brand;\n }\n const currentLanguage = i18n.language;\n let brandName = brand.name;\n const { translations } = brand;\n const translation = translations?.find(\n (trans) => trans.language === currentLanguage,\n );\n if (translation?.name) {\n brandName = translation.name;\n }\n return {\n brandImage: brand?.icon_url,\n brandName,\n };\n};\n\nconst getReward = (data) => {\n if (!data) {\n return null;\n }\n let value = 0;\n const campaignList = [];\n const earningRuleList = [];\n data.forEach((item) => {\n value += item.value;\n if (!!item?.campaign) {\n campaignList.push(item.campaign);\n } else if (!!item?.earning_rule) {\n earningRuleList.push(item.earning_rule);\n }\n });\n if (value === 0) {\n return null;\n }\n return {\n count: enLocaleNumberFormatter(value),\n campaignList,\n earningRuleList,\n };\n};\n\nfunction parseSingleRewardClaim(transaction) {\n const eventType = transaction.offline_event_type;\n const store = getStoreTranslation(transaction.store);\n const brand = getBrand(transaction?.store?.brand);\n return {\n id: transaction.id,\n memberId: transaction.customer?.membership_id,\n eventType: eventType,\n status: ClaimType[eventType],\n tenant: store.name,\n receiptNumber: transaction.invoice_id,\n receiptDate: getReceiptDate(transaction.date),\n createDate: getReceiptDate(transaction.creation_date),\n receiptAmount: `HK$ ${enLocaleNumberFormatter(transaction.total_value)}`,\n pointsRewards: getReward(transaction?.rewards?.points_rewards),\n couponRewards: getReward(transaction?.rewards?.coupons_rewards),\n stampRewards: getReward(transaction?.rewards?.stamps_rewards),\n receiptImage: transaction.receipt_image_url || '',\n creditImage: transaction.credit_card_slip_image_url || '',\n updateDate: getReceiptDate(transaction.last_modified_date),\n brandImage: brand?.brandImage,\n brandTitle: brand?.brandName,\n };\n}\n\nfunction assembleStore(store) {\n const storeWithTranslation = getStoreTranslation(store);\n return {\n id: store.id,\n name: storeWithTranslation.name || store.name,\n };\n}\n\nfunction parseRewardClaimList(transactions) {\n return transactions.map((transaction) => parseSingleRewardClaim(transaction));\n}\n\nfunction getStoreList(stores) {\n return stores.map((store) => assembleStore(store));\n}\n\nconst parseDiscount = (item) => {\n const discount = {\n id: item.id,\n code: item.code,\n type: item.type,\n value: Number(item.value),\n title: item.title?.toUpperCase() || \"\",\n };\n return discount;\n};\n\nconst parsePurchasedItem = (item, purchaseForceRefund) => {\n const filteredDiscounts = item.discounts?.filter(\n (discount) => discount.type !== 'TRANSACTION',\n );\n const discounts = filteredDiscounts.map((discount) => {\n const itemData = parseDiscount(discount);\n return itemData;\n });\n // if transaction data from cms admin,\n // item.original_price will be None\n const isRefund =\n item.status === 'REFUNDED' ||\n Number(item.quantity) < 0 ||\n Number(item.value) < 0;\n const status = isRefund ? 'REFUNDED' : item.status;\n const showNegative = purchaseForceRefund || isRefund;\n const quantity = showNegative\n ? -Math.abs(item.quantity)\n : Math.abs(item.quantity);\n const value = Math.abs(item.value) * quantity;\n const originalPrice = item.original_price\n ? Math.abs(Number(item.original_price) * quantity)\n : Math.abs(value);\n const purchasedItem = {\n id: item.id,\n name: item.name,\n quantity,\n originalPrice,\n value,\n status,\n discounts,\n };\n return purchasedItem;\n};\n\nconst parseSingleTransaction = (data) => {\n console.log('data', data);\n const transactionRefund = [\n 'REFUNDED',\n 'PARTIALLY_REFUNDED',\n 'REFUND',\n ].includes(data.event_type);\n const purchaseForceRefund = ['REFUNDED', 'REFUND'].includes(data.event_type);\n let subtotal = 0.0;\n const purchasedItems = data.purchased_items?.map((purchasedItem) => {\n const itemData = parsePurchasedItem(purchasedItem, purchaseForceRefund);\n subtotal += Number(itemData.value);\n return itemData;\n });\n const shoppingFee = Number(data.shipping_fee);\n const otherCharge = Number(data.other_charge);\n subtotal += shoppingFee + otherCharge;\n const discounts = data.discounts\n ?.filter((discount) => discount.type !== 'ITEM')\n ?.map((discount) => {\n const itemData = parseDiscount(discount);\n return itemData;\n });\n\n const eventType = data.event_type;\n const orderStatus = TransactionEventTypeDict[eventType];\n let paidAmount = null;\n if (data?.paid_amount) {\n if (transactionRefund) {\n paidAmount = -Math.abs(data.paid_amount);\n } else {\n paidAmount = Number(data.paid_amount);\n }\n }\n const item = {\n id: data.id,\n receiptNumber: data.invoice_id,\n receiptDateTime: getActivityLogDateTime(data.date),\n createDateTime: getActivityLogDateTime(data.creation_date),\n eventType,\n orderStatus,\n\n purchasedItems,\n\n shoppingFee,\n otherCharge,\n\n subtotal,\n pointToCash: -Math.abs(data.point_to_cash),\n discountAmount: -Math.abs(data.discount_amount),\n discounts,\n\n paidAmount,\n total: transactionRefund\n ? -Math.abs(data.total_value)\n : Number(data.total_value),\n refund: transactionRefund && data.refund ? -Math.abs(data.refund) : null,\n\n remarks: data.remarks,\n };\n console.log('data@item', item);\n return item;\n};\n\nconst parseTransactionList = (data) => {\n if (!data || data.length === 0) {\n return null;\n }\n const dataList = data.map((item) => {\n const totalValue =\n item.paid_amount === null ? item.total_value : item.paid_amount;\n const receiptAmount = Math.abs(totalValue);\n const isRefund = ['REFUNDED', 'PARTIALLY_REFUNDED', 'REFUND'].includes(\n item.event_type,\n );\n const parsedData = {\n id: item.id,\n groupName: getActivityLogDate(item.date),\n receiptNumber: item.invoice_id,\n receiptDate: getReceiptDate(item.date),\n receiptDateTime: getActivityLogDateTime(item.date),\n receiptAmount: isRefund\n ? enLocaleDollarFormatter(-Math.abs(receiptAmount))\n : enLocaleDollarFormatter(receiptAmount),\n createDateTime: getActivityLogDateTime(item.creation_date),\n };\n return parsedData;\n });\n return dataList;\n};\n\nexport default {\n namespace: 'transaction',\n state: {\n rewardClaimList: [],\n pageLink: '',\n storeList: [],\n storePageLink: '',\n\n transactionDetail: {},\n transactionDetailNetworkError: false,\n transactionDetailLoading: false,\n\n transactionOriginList: [],\n transactionNetWorkError: false,\n transactionNextLink: '',\n },\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n\n assembleRewardClaimList(state, { payload }) {\n const rewardClaimList = parseRewardClaimList(payload.data);\n const { pageLink } = payload;\n return {\n ...state,\n ...payload,\n rewardClaimList,\n pageLink,\n };\n },\n\n assembleRewardClaimListLoadMore(state, { payload }) {\n const rewardClaimList = parseRewardClaimList(payload.data);\n const { pageLink } = payload;\n return {\n ...state,\n ...payload,\n rewardClaimList: [...state.rewardClaimList, ...rewardClaimList],\n pageLink,\n };\n },\n\n assembleStore(state, { payload }) {\n const storeList = getStoreList(payload.data);\n const { storePageLink } = payload;\n return {\n ...state,\n ...payload,\n storeList,\n storePageLink,\n };\n },\n\n storeLoadMoreAssemble(state, { payload }) {\n const storeList = getStoreList(payload.data);\n const { storePageLink } = payload;\n return {\n ...state,\n ...payload,\n storeList: [...state.storeList, ...storeList],\n storePageLink,\n };\n },\n assembleSingleTransaction(state, { payload }) {\n const { data } = payload;\n console.log('data', data);\n const transactionDetail = parseSingleTransaction(data);\n console.log('transactionDetail', transactionDetail);\n return {\n ...state,\n transactionDetail,\n transactionDetailNetworkError: false,\n transactionDetailLoading: false,\n };\n },\n assembleTransactionList(state, { payload }) {\n const { data, pageLink } = payload;\n const transactionOriginList = parseTransactionList(data);\n console.log('kevin@317', typeof pageLink, pageLink);\n return {\n ...state,\n transactionOriginList,\n transactionNextLink: pageLink,\n };\n },\n assembleTransactionListLoadmore(state, { payload }) {\n const { data, pageLink } = payload;\n const transactionOriginList = parseTransactionList(data);\n console.log('kevin@327', typeof pageLink, pageLink);\n return {\n ...state,\n transactionOriginList: [\n ...state.transactionOriginList,\n ...transactionOriginList,\n ],\n transactionNextLink: pageLink,\n };\n },\n clearTransactionList(state, { payload }) {\n return {\n ...state,\n transactionOriginList: [],\n transactionNetWorkError: false,\n transactionNextLink: '',\n };\n },\n },\n\n effects: {\n refreshRewardClaimList: [\n function* ({ payload }, { call, put, select }) {\n const userId = yield select((state) => state.users.userInfo.uid);\n const pageLink = yield select((state) => state.transaction.pageLink);\n const oldData = yield select(\n (state) => state.transaction.rewardClaimList,\n );\n const hasOldData = oldData && oldData.length;\n const transactionApiServiceWithArgs = [\n TransactionAPIHelper.getRewardClaimList,\n { userId, pageLink },\n ];\n function* onGetDataSuccess(response, nextLink) {\n const { data } = response;\n yield put(\n createAction('assembleRewardClaimList')({\n data,\n pageLink: nextLink,\n }),\n );\n }\n yield refresh(\n 'TransactionList',\n hasOldData,\n transactionApiServiceWithArgs,\n onGetDataSuccess,\n );\n },\n { type: 'takeLatest' },\n ],\n\n loadMoreRewardClaimList: [\n function* (_action, { put, select }) {\n const pageLink = yield select((state) => state.transaction.pageLink);\n const data = yield getDataWithDelay(\n TransactionAPIHelper.getRewardClaimList,\n { pageLink },\n 'TransactionList',\n true,\n );\n let nextLink = '';\n if (data?.status === 200) {\n nextLink = subHeaderLink(data.headers.link);\n yield put(\n createAction('assembleRewardClaimListLoadMore')({\n data: data.data,\n pageLink: nextLink,\n }),\n );\n }\n yield hasMoreData('TransactionList', nextLink);\n },\n { type: 'takeLatest' },\n ],\n\n deleteRewardClaim: [\n function* ({ payload }, { call, put, select }) {\n const customerId = yield select((state) => state.users.userInfo.uid);\n const { transactionId, onDone } = payload;\n const response = yield call(TransactionAPIHelper.deleteRewardClaim, {\n userId: customerId,\n transactionId: transactionId,\n });\n onDone();\n if (response.status === 204) {\n yield put({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: i18n.t('Delete successfully'),\n toastIcon: '/coupon/copyCodeSuccessIcon/check.svg',\n },\n },\n });\n yield put({ type: 'updateState', payload: { rewardClaimList: [] } });\n yield put({ type: 'refreshRewardClaimList' });\n } else {\n yield put({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: i18n.t('records:please_check_back_again_later'),\n },\n },\n });\n }\n },\n { type: 'takeLatest' },\n ],\n\n createRewardClaim: [\n function* ({ payload }, { call, put, select }) {\n const customerId = yield select((state) => state.users.userInfo.uid);\n const { data, onSuccess } = payload;\n // const sleep = (ms) => new Promise((r) => setTimeout(r, ms));\n // yield sleep(5000);\n const response = yield call(TransactionAPIHelper.createRewardClaim, {\n userId: customerId,\n input: data,\n });\n if (response.status === 201) {\n onSuccess();\n yield put({ type: 'updateState', payload: { rewardClaimList: [] } });\n yield put({ type: 'refreshRewardClaimList' });\n } else {\n yield put({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: i18n.t('records:please_check_back_again_later'),\n },\n },\n });\n }\n },\n { type: 'takeLatest' },\n ],\n\n uploadFile: [\n function* ({ payload }, { call, put, select }) {\n const { file, onDone } = payload;\n // const sleep = (ms) => new Promise((r) => setTimeout(r, ms));\n // yield sleep(3000);\n const response = yield call(UploadFileAPIHelper.uploadFile, {\n input: getFileData(file),\n });\n if (response.status !== 200) {\n yield put({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: i18n.t('records:please_check_back_again_later'),\n },\n },\n });\n }\n onDone(response.data?.file);\n },\n { type: 'takeEvery' },\n ],\n\n *refreshStoreList({ payload }, { call, put, select }) {\n // const storePageLink = yield select(\n // (state) => state.transaction.storePageLink\n // );\n const oldData = yield select((state) => state.transaction.storeList);\n const hasOldData = oldData && oldData.length;\n\n const transactionApiServiceWithArgs = [\n TransactionAPIHelper.getStoreList,\n {\n pageLink: null,\n searchName: payload?.searchName,\n language: i18n.language,\n },\n ];\n function* onGetDataSuccess(response, nextLink) {\n const { data } = response;\n yield put(\n createAction('assembleStore')({ data, storePageLink: nextLink }),\n );\n }\n yield refresh(\n 'StoreList',\n hasOldData,\n transactionApiServiceWithArgs,\n onGetDataSuccess,\n );\n },\n\n storeLoadMore: [\n function* ({ payload }, { put, select }) {\n const storePageLink = yield select(\n (state) => state.transaction.storePageLink,\n );\n const data = yield getDataWithDelay(\n TransactionAPIHelper.getStoreList,\n {\n pageLink: storePageLink,\n searchName: payload?.searchName,\n language: i18n.language,\n },\n 'StoreList',\n true,\n );\n let nextLink = '';\n if (data?.status === 200) {\n nextLink = subHeaderLink(data.headers.link);\n yield put(\n createAction('storeLoadMoreAssemble')({\n data: data.data,\n storePageLink: nextLink,\n }),\n );\n }\n yield hasMoreData('StoreList', nextLink);\n },\n { type: 'takeLatest' },\n ],\n\n refreshTransactionHistory: [\n function* ({ payload }, { call, put, select }) {\n console.log('kevin@562', payload);\n const { oldData, customerID } = yield select((state) => ({\n oldData: state.transaction.transactionOriginList,\n customerID: state.users.userInfo.uid,\n }));\n const hasOldData = oldData && oldData.length > 0;\n const onlyLoadNotRefresh = payload?.onlyLoadNotRefresh;\n if (onlyLoadNotRefresh && hasOldData) {\n return;\n }\n yield put({\n type: 'updateState',\n payload: {\n transactionNetWorkError: false,\n },\n });\n const serviceArgs = [\n TransactionAPIHelper.getTransactionList,\n {\n pageLink: '',\n customerID,\n },\n ];\n function* onSuccess(response, nextLink) {\n const { data } = response;\n yield put({\n type: 'assembleTransactionList',\n payload: {\n data,\n pageLink: nextLink,\n },\n });\n }\n function* onFailure() {\n yield put({\n type: 'updateState',\n payload: {\n transactionNetWorkError: true,\n },\n });\n }\n yield refresh(\n TransactionHistoryKey,\n hasOldData,\n serviceArgs,\n onSuccess,\n onFailure,\n );\n },\n { type: 'takeLatest' },\n ],\n\n loadMoreTransactionHistory: [\n function* ({ payload }, { call, put, select }) {\n const pageLink = yield select(\n (state) => state.transaction.transactionNextLink,\n );\n if (!pageLink) {\n return;\n }\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n TransactionHistoryLoadingMore: true,\n }),\n );\n const data = yield getDataWithDelay(\n TransactionAPIHelper.getTransactionList,\n { pageLink },\n TransactionHistoryKey,\n true,\n );\n let nextLink = '';\n if (data?.status === 200) {\n nextLink = subHeaderLink(data.headers.link);\n yield put(\n createAction('assembleTransactionListLoadmore')({\n data: data.data,\n pageLink: nextLink,\n }),\n );\n }\n yield hasMoreData(TransactionHistoryKey, nextLink);\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n TransactionHistoryLoadingMore: false,\n }),\n );\n },\n { type: 'takeLatest' },\n ],\n\n getTransactionDetail: [\n function* ({ payload }, { call, put, select }) {\n yield put({\n type: 'updateState',\n payload: {\n transactionDetailLoading: true,\n transactionDetailNetworkError: false,\n },\n });\n const customerID = yield select((state) => state.users.userInfo.uid);\n const { transactionID } = payload;\n\n const response = yield call(TransactionAPIHelper.getTransactionDetail, {\n customerID,\n transactionID,\n });\n if (response.status === 200) {\n yield put({\n type: 'assembleSingleTransaction',\n payload: { data: response.data },\n });\n } else {\n yield put({\n type: 'updateState',\n payload: {\n transactionDetailLoading: false,\n transactionDetailNetworkError: true,\n },\n });\n }\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","import React, { Component } from 'react';\nimport { Col, Container, Row, Table } from 'react-bootstrap';\nimport { withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { Link, withRouter } from 'react-router-dom';\n\nimport LoadMoreSpinner from 'component/common/LoadMoreSpinner';\nimport { TransactionHistoryKey } from 'models/Records';\n\nimport { createAction } from 'utils';\nimport {\n getDocumentHeight,\n getScrollTop,\n getWindowHeight,\n} from 'utils/ScreenUtils';\n\nimport RightArrow from 'assets/chevron-right.svg';\n\nimport './TransactionHistoryListMobile.scss';\n\n@connect(({ users, transaction, pullrefreshandloadmore }) => ({\n language: users.language,\n\n transactionOriginList: transaction.transactionOriginList,\n transactionNetWorkError: transaction.transactionNetWorkError,\n transactionNextLink: transaction.transactionNextLink,\n\n hasMoreData: pullrefreshandloadmore[`${TransactionHistoryKey}HasMoreData`],\n isRefreshing: pullrefreshandloadmore[`${TransactionHistoryKey}IsRefreshing`],\n isLoadingMore:\n pullrefreshandloadmore[`${TransactionHistoryKey}IsLoadingMore`],\n}))\nclass TransactionHistoryListMobile extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n componentDidMount() {\n this.props.dispatch(\n createAction('transaction/refreshTransactionHistory')({\n onlyLoadNotRefresh: true,\n }),\n );\n window.addEventListener('scroll', this.bindHandleWindowScroll);\n }\n\n componentWillUnmount() {\n window.removeEventListener('scroll', this.bindHandleWindowScroll);\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.language !== this.props.language) {\n this.props.dispatch(\n createAction('transaction/refreshTransactionHistory')(),\n );\n }\n }\n\n transactionItemDidClicked = (id) => {\n if (id) {\n this.props.history.push(`/transaction_history_detail/${id}`);\n }\n };\n\n shouldLoadMore = () => {\n return (\n this.props.hasMoreData &&\n !(this.props.isRefreshing || this.props.isLoadingMore)\n );\n };\n\n bindHandleWindowScroll = () => {\n const scrollTopLength = getScrollTop();\n const windowHeight = getWindowHeight();\n const documentHeight = getDocumentHeight();\n const isLoadArea = scrollTopLength + windowHeight > documentHeight - 100;\n if (isLoadArea && this.shouldLoadMore()) {\n this.props.dispatch(\n createAction('transaction/loadMoreTransactionHistory')(),\n );\n }\n };\n\n parseTransaction = () => {\n if (\n this.props.transactionOriginList &&\n this.props.transactionOriginList.length > 0\n ) {\n const parsedList = this.props.transactionOriginList.map((item) => {\n return {\n id: item.id,\n name: item.receiptNumber,\n date: item.receiptDateTime,\n content: item.receiptAmount,\n };\n });\n return parsedList;\n }\n return [];\n };\n\n renderTableData = ({\n dataList,\n isLoading = false,\n isLoadingMore = false,\n }) => {\n if (isLoading) {\n return (\n \n \n \n \n );\n }\n if (dataList && dataList.length > 0) {\n return (\n \n {dataList.map((item, index) => {\n return (\n \n \n \n \n \n \n );\n })}\n {isLoadingMore && (\n \n \n )}\n \n );\n }\n return (\n \n \n \n \n \n \n );\n };\n\n tableView = (itemList, isLoading = false, isLoadingMore = false) => {\n return (\n \n \n
\n \n );\n }\n}\n\nexport default withRouter(withTranslation()(TransactionHistoryListMobile));\n","import React, { useEffect, useState, useRef } from \"react\";\nimport { connect, useDispatch } from \"react-redux\";\nimport { POINT_TO_CASH_CONVERT_RATE } from \"./PointAndCashSection\";\nimport i18n from \"I18n\";\n\nimport { enLocaleNumberFormatter, createAction, getOuterSiteOrigin } from \"utils\";\nimport { SHOPIFY_API_HOST as ENV_SHOPIFY_API_HOST } from 'utils/Config';\nimport CustomAlert from \"component/base/CustomAlert\";\nimport UseCashQRCodeModal from \"./UseCashQRCodeModal\";\n\nimport \"./UseCashDollar.scss\"\n\nconst SHOPIFY_API_HOST = getOuterSiteOrigin(ENV_SHOPIFY_API_HOST);\n\nconst mapStateToProps = state => {\n return {\n currentPoints: state.users.availablePoints,\n isOpenInOtherSite: state.users.isOpenInOtherSite,\n cashCodeKey: state.users.cashCodeKey,\n notShowPointToCashTipsModalAgain: state.users.notShowPointToCashTipsModalAgain,\n };\n};\n\nfunction UseCashDollar({\n currentPoints,\n isOpenInOtherSite,\n cashCodeKey,\n notShowPointToCashTipsModalAgain\n}) {\n const maxCashDollar = parseInt(currentPoints / POINT_TO_CASH_CONVERT_RATE) || 0;\n const [inputCashDollar, setInputCashDollar] = useState();\n const [selectedStore, setSelectedStore] = useState();\n const [showConfirmUseCashModal, setShowConfirmUseCashModal] = useState(false);\n const [showUseCashModal, setShowUseCashModal] = useState(false);\n const [notShowModalAgain, setNotShowModalAgain] = useState(notShowPointToCashTipsModalAgain || false);\n const [cashDollarInputError, setCashDollarInputError] = useState();\n const dispatch = useDispatch()\n const payBtnRef = useRef();\n\n const isButtonDisabled = !inputCashDollar || inputCashDollar < 1 || (isOpenInOtherSite && !selectedStore);\n\n const storeType = {\n shopifyStore: \"shopifyStore\",\n physicalStore: \"physicalStore\"\n }\n const storeTypeConfig = [\n {\n key: storeType.shopifyStore,\n displayTitle: i18n.t(i18n.t(\"shopify_store\")),\n imgSrc: \"/profile/currentPoint/shopify-cart.png\",\n imgSrcSet: \"/profile/currentPoint/shopify-cart@2x.png 2x, /profile/currentPoint/shopify-cart@3x.png 3x\"\n },\n {\n key: storeType.physicalStore,\n displayTitle: i18n.t(i18n.t(\"product:Physical store\")),\n imgSrc: \"/profile/currentPoint/physical-store.png\",\n imgSrcSet: \"/profile/currentPoint/physical-store@2x.png 2x, /profile/currentPoint/physical-store@3x.png 3x\"\n },\n ]\n\n const validateInput = () => {\n if (inputCashDollar > maxCashDollar) {\n setCashDollarInputError(\"exceed_point_balance\")\n return false\n }\n return true;\n }\n\n const handlePayCashDollar = () => {\n if (!validateInput()) {\n return;\n }\n payBtnRef.current.disabled = true;\n if (isOpenInOtherSite) {\n if (selectedStore.key === storeType.shopifyStore) {\n if (notShowPointToCashTipsModalAgain) {\n shopifyCreateCashDiscount()\n } else {\n setShowConfirmUseCashModal(true)\n }\n return;\n }\n if (selectedStore.key === storeType.physicalStore) {\n fetchCashCode({\n successAction: () => {\n setShowUseCashModal(true)\n },\n afterAction: () => {\n payBtnRef.current.disabled = isButtonDisabled\n }\n })\n return;\n }\n } else {\n fetchCashCode({\n successAction: () => {\n setShowUseCashModal(true)\n },\n afterAction: () => {\n payBtnRef.current.disabled = isButtonDisabled\n }\n })\n }\n }\n\n const shopifyCreateCashDiscount = () => {\n dispatch(createAction(\"users/shopifyCreatePointToCash\")({\n cashDollarAmount: parseInt(inputCashDollar),\n afterSuccessAction: (discountCode) => {\n window.top.postMessage(\n { type: \"APPLY_CASH_CODE\", value: discountCode },\n SHOPIFY_API_HOST\n )\n },\n afterAction: () => {\n payBtnRef.current.disabled = isButtonDisabled;\n }\n }))\n }\n const fetchCashCode = ({ successAction, afterAction = () => { } }) => {\n if (inputCashDollar) {\n dispatch(createAction(\"users/createPointToCash\")({\n cashDollarAmount: parseInt(inputCashDollar),\n successAction,\n afterAction\n }))\n }\n }\n const cancelPointToCash = () => {\n if (cashCodeKey) {\n dispatch(createAction(\"users/cancelPointToCash\")())\n }\n }\n\n const refreshPointToCashCode = ({ failedAction }) => {\n dispatch(createAction(\"users/refreshPointToCash\")({\n failedAction\n }))\n }\n\n const refreshQRCodeAction = () => {\n refreshPointToCashCode({\n failedAction: () => {\n cancelPointToCash()\n setShowUseCashModal(false)\n }\n })\n }\n\n const handleMessageFromOtherSite = (e) => {\n const { data } = e;\n if (data?.type === 'APPLY_CASH_CODE') {\n if (data?.status === 'SUCCESS') {\n dispatch({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: i18n.t('successfully_applied'),\n toastIcon: '/coupon/copyCodeSuccessIcon/check.svg',\n },\n },\n });\n }\n if (data?.status === 'FAILED') {\n dispatch({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: data?.error,\n },\n },\n });\n }\n\n }\n\n }\n\n const getErrorMsg = () => {\n if (cashDollarInputError === \"exceed_point_balance\") {\n return i18n.t(\"exceed_point_balance\", {\n points: enLocaleNumberFormatter(inputCashDollar * POINT_TO_CASH_CONVERT_RATE)\n })\n }\n return \"\";\n }\n\n useEffect(() => {\n window.addEventListener(\"message\", handleMessageFromOtherSite)\n return () => {\n window.removeEventListener(\"message\", handleMessageFromOtherSite)\n dispatch(createAction(\"users/updateState\")({\n cashCodeKey: \"\"\n }))\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return (\n
\n \n
\n {this.props.t(\"levelRules\")}
\n \n
\n \n
\n {this.getSplitLine()}\n \n {this.props.t(\"levelRulesIntroductionTitle\")}\n
\n \n {this.props.t(\"levelRulesIntroductionText\")}\n
\n \n
\n {this.getSplitLine()}\n \n {this.props.t(\"levelRulesValidityTitle\")}\n
\n \n {this.props.t(\"levelRulesValidityText\")}\n
\n \n
\n {this.getSplitLine()}\n \n {this.props.t(\"levelRulesRetainDowngradeTitle\")}\n
\n \n {this.props\n .t(\"levelRulesRetainDowngradeText\")\n .split(\"\\n\")\n .map((content) => (\n
\n {content}
\n ))}\n\n
\n \n {this.props.t(\"levelRulesTableTitle\")}\n
\n {/* \n {this.props.t(\"levelRulesTableText\")}\n
*/}\n \n \n \n
\n
\n | {this.props.t(\"level\")} | \n{\"Total spending\"} | \n
|---|---|
| {levelRule.name} | \n{this.props.t(\"HKD\", { TPE: levelRule.targetTPE })} | \n
this.transactionItemDidClicked(item.id)}>\n
\n {item.name}
\n \n {`${this.props.t('records:transaction_ordered')} ${\n item?.date\n }`}\n
\n {item?.content}
\n {this.props.t('no_record')}
\n\n
\n );\n };\n\n render() {\n return (\n \n
\n \n {this.props.t('records:transaction_invoice_id')}\n
\n \n {this.props.t('records:transaction_total')}\n
\n \n \n {this.renderTableData({\n dataList: itemList,\n isLoading,\n isLoadingMore,\n })}\n
\n
\n \n
\n \n
\n {i18n.t(\"use_cash_dollar\")}
\n {i18n.t(\"use_cash_dollar_description\")}
\n \n
\n : null\n }\n \n
\n {isOpenInOtherSite ?\n {i18n.t(\"balance\")}
\n \n {i18n.t(\"cash_dollar_points\", {\n cashDollar: enLocaleNumberFormatter(maxCashDollar),\n points: enLocaleNumberFormatter(currentPoints)\n })}\n
\n \n {i18n.t(\"point_to_cash_rule\", {\n points: enLocaleNumberFormatter(POINT_TO_CASH_CONVERT_RATE),\n cashDollar: 1\n })}\n
\n \n
\n {i18n.t(\"store:select_store\")}
\n \n {storeTypeConfig.map((item) => {\n const isSelected = selectedStore?.key === item.key\n return (\n {\n !isSelected && setSelectedStore(item)\n isSelected && setSelectedStore()\n }}\n >\n 
\n
\n )\n })}\n \n {item.displayTitle}\n
\n \n
\n {i18n.t(\"will_spend\")}
\n \n \n {cashDollarInputError ? getErrorMsg()\n : inputCashDollar ? i18n.t(\"points_will_be_used\", {\n points: enLocaleNumberFormatter(inputCashDollar * POINT_TO_CASH_CONVERT_RATE)\n }) : null}\n
\n \n {\n const inputData = e.target.value > 0 ? parseInt(e.target.value) : \"\";\n setInputCashDollar(inputData)\n if (cashDollarInputError) {\n setCashDollarInputError()\n }\n }}\n />\n
\n {i18n.t(\"cash_dollar\")}
\n \n \n {i18n.t(\"pay_now\")}\n \n
\n {i18n.t(\"confirm_pay_cash_tips\")}
\n \n
\n }\n leftbtn={i18n.t(\"message_cancel\")}\n leftAction={() => {\n payBtnRef.current.disabled = isButtonDisabled;\n setNotShowModalAgain(false)\n setShowConfirmUseCashModal(false)\n }}\n rightbtn={i18n.t(\"campaign_confirm\")}\n rightAction={() => {\n payBtnRef.current.disabled = isButtonDisabled;\n shopifyCreateCashDiscount()\n setShowConfirmUseCashModal(false)\n dispatch(createAction(\"users/updateState\")({\n notShowPointToCashTipsModalAgain: notShowModalAgain\n }))\n }}\n />\n \n {i18n.t(\"confirm_use_cash_dollar_tips\")}\n
\n \n {notShowModalAgain ?\n {\n setNotShowModalAgain(false)\n }}\n /> :\n {\n setNotShowModalAgain(true)\n }}\n />}\n
\n {i18n.t(\"dont_show_again\")}
\n \n
\n \n {this.getModalDescription()}\n
\n\n {actionModalButton()}\n
\n \n \n {actionBar.textTitle}\n \n \n {actionBar.point}\n \n
\n \n {this.props.description} \n
\n );\n }\n}\n\nexport default ShortDescription;\n","import React from 'react';\nimport Lottie from \"lottie-react\";\nimport i18n from '../../I18n';\nimport { getCampaignAvailableOnDate } from '../../utils/DateTimeUtils';\nimport { ACTION_BUTTON_STATUS } from './CheckInSection';\n\n\nfunction StampCampaignActionButton({\n campaignID,\n text,\n buttonStatus,\n onGetBadgeEventStart,\n onTickFinished,\n earningRuleID,\n earningRuleType,\n rewardStampCount,\n isStarted,\n startDate,\n endDate,\n}) {\n const renderButton = () => {\n console.log(\"render stamp task button - Init\");\n if (buttonStatus === ACTION_BUTTON_STATUS.LOADING) {\n console.log(\"render stamp task button - Loading\");\n return (\n \n
\n );\n};\n\nconst MyTask = ({\n data,\n onGetBadgeEventStart,\n campaignID,\n onTickFinished,\n badgeAcquired,\n}) => {\n return (\n \n
\n \n {rewardString}\n
\n \n {data?.map((props, index) => {\n const key = `taskcard_${index}`;\n return (\n
\n );\n};\n\nconst BadgeCard = ({\n text,\n style,\n icon,\n onPress,\n active,\n rowNumber,\n isGift,\n isGiftOpened,\n autoPlay,\n useLottie,\n}) => {\n const isAcquireGift = active && isGift;\n\n return (\n \n \n
\n {text}\n \n \n \n );\n};\n\nconst MyStamp = ({\n stampInOneLine,\n campaignID,\n badges,\n earnedStamps,\n redeemedRewards,\n stampBadge,\n}) => {\n const dispatch = useDispatch();\n const [couponAlertShow, setCouponAlertShow] = useState(false);\n const [buttonRewardId, setButtonRewardId] = useState(null);\n const [buttonCouponName, setButtonCouponName] = useState(null);\n const [buttonCouponQuantity, setButtonCouponQuantity] = useState(null);\n\n const gifts = badges.map(\n ({ required_stamps: requiredBadges }) => requiredBadges,\n );\n const total = gifts[gifts.length - 1];\n const badgeGet = earnedStamps;\n\n const { badgeSlot, badgeAcquired, giftSlot, giftAcquire } = stampBadge;\n\n const data = [];\n let subList = [];\n for (let i = 0; i < total; i += 1) {\n if (i >= stampInOneLine && i % stampInOneLine === 0) {\n data.push(subList);\n subList = [];\n }\n subList.push(i + 1);\n }\n data.push(subList);\n return (\n <>\n \n \n \n {isGiftOpened\n ? i18n.t('campaignDetail:acquired')\n : i18n.t('campaignDetail:acquire')}\n \n
\n )}\n \n {data.map((aList, index1) => {\n let lineStyle = index1 % 2 === 0 ? 'left' : 'right';\n return (\n \n {aList.map((textNumber, index2) => {\n if (textNumber % stampInOneLine === 0) {\n lineStyle = 'bottom';\n }\n const dataPropsFilter = badges.filter(\n (aData) => aData.required_stamps === textNumber,\n );\n const dataProps = dataPropsFilter ? dataPropsFilter[0] : null;\n const active = textNumber <= badgeGet;\n const isGift = gifts.includes(textNumber);\n const rewardID = dataProps?.id;\n const isGiftOpened = redeemedRewards.includes(rewardID);\n\n const mBadgeSlot = badgeSlot || badgeSlotImage;\n const mBadgeAcquired = badgeAcquired || badgeAcquiredJson;\n const mGiftSlot = giftSlot || giftSlotImage;\n const mGiftAcquire = giftAcquire || giftAcquireJson;\n\n let badgeIcon = mBadgeSlot;\n let useLottie = false;\n if (isGift) {\n badgeIcon = active ? mGiftAcquire : mGiftSlot;\n useLottie = active && !giftAcquire;\n } else {\n badgeIcon = active ? mBadgeAcquired : mBadgeSlot;\n useLottie = active && !badgeAcquired;\n }\n\n if (textNumber === total) {\n lineStyle = null;\n }\n\n return (\n {\n if (isGiftOpened) {\n return;\n }\n const rewardType = dataProps?.reward_type;\n if (rewardType === 'POINTS') {\n dispatch({\n type: 'campaignDetail/customerAcquireStampReward',\n payload: {\n campaignID,\n rewardID,\n stampRewardData: dataProps,\n },\n });\n } else if (rewardType === 'COUPON') {\n console.log('@@253', dataProps);\n const baseCouponData = getTranslationData(\n dataProps.coupon_template,\n );\n dispatch({\n type: 'campaignDetail/updateState',\n payload: {\n actionButtonStatus: ACTION_BUTTON_STATUS.NORMAL,\n },\n });\n setButtonRewardId(rewardID);\n setButtonCouponName(baseCouponData.name);\n setButtonCouponQuantity(dataProps.quantity);\n setCouponAlertShow(true);\n }\n }}\n />\n );\n })}\n
\n );\n })}\n \n \n
\n {isMobile && showScanQRCode ? (\n \n \n
\n \n \n
\n {modalDescription}
\n{actionModalButton()}
\n \n \n
\n
\n );\n }\n}\n\nexport default Stock;\n","import React from 'react';\nimport { Col, Container, Row } from 'react-bootstrap';\nimport { withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\n\nimport i18n from 'I18n';\n\nimport ActionBottom from 'component/campaign/ActionBottomSection';\nimport Brand from 'component/campaign/Brand';\nimport CheckInSection, {\n ACTION_BUTTON_STATUS,\n} from 'component/campaign/CheckInSection';\nimport DetailDescription from 'component/campaign/DetailDescription';\nimport ImageSlider from 'component/campaign/ImageSlider';\nimport Instruction from 'component/campaign/Instruction';\nimport PointRequiredSection from 'component/campaign/PointRequiredSection';\nimport SharedSection from 'component/campaign/SharedSection';\nimport ShortDescription from 'component/campaign/ShortDescription';\nimport StampSection from 'component/campaign/StampSection';\nimport Stock from 'component/campaign/Stock';\nimport { EARNING_RULE_PURCHASE } from 'services/CampaignAPIHelper';\n\nimport { createAction } from 'utils';\nimport { APP_NAME, DOWNLOAD_APP_DOMAIN, WEB_DOMAIN } from 'utils/Config';\n\nimport './CampaignDetail.scss';\nimport CustomAlert from 'component/base/CustomAlert';\nimport { isMobile, isPadOrMobile } from 'utils/ScreenUtils';\n\n@connect(({ campaignDetail, users }) => ({\n ...campaignDetail,\n language: users.language,\n membershipID: users.userInfo.memberShipID,\n isLogin: users.isLogin,\n}))\nclass CampaignDetail extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // showScanQRCodeModal: false,\n qrCodeString: '',\n showScanner: false,\n showUnavailable: false,\n };\n }\n\n componentDidMount() {\n this.campaignID =\n this.props.history.location.state?.campaignID ||\n this.props.match.params?.id;\n this.props.dispatch(\n createAction('campaignDetail/getCampaignDetail')({\n campaignID: this.campaignID,\n }),\n );\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.language !== prevProps.language) {\n this.props.dispatch(\n createAction('campaignDetail/getCampaignDetail')({\n campaignID: this.campaignID,\n }),\n );\n }\n if (prevProps.hasError !== this.props.hasError && this.props.hasError && !this.state.showUnavailable) {\n this.setState({ showUnavailable: true });\n }\n }\n\n componentWillUnmount() {\n this.props.dispatch(\n createAction('campaignDetail/updateState')({\n actionButtonStatus: ACTION_BUTTON_STATUS.NORMAL,\n }),\n );\n }\n\n hideModal = () => {\n this.setState({ showUnavailable: false });\n };\n\n showImageSlider = () => {\n if (this.props[this.campaignID]) {\n return \n \n
\n \n
\n \n {i18n.t(\"campaignDetail:couponLeft\")}\n
\n \n {`${i18n.t(\"campaignDetail:lastUpdated\")} `}\n {this.props.coupon.lastUpdateTime}\n
\n \n
\n {enLocaleNumberFormatter(this.props.coupon.leftStock)}
\n \n \n \n {this.props.t('home_home')} {'>'}\n {this.props.t('home_offers')}\n {'>'}\n {this.props.t('campaign_detail')}\n
\n \n {this.showImageSlider()}
\n {this.showTag()}\n \n
\n \n {this.showExpriyDate()}\n \n
\n {this.showStock()}\n {this.showBrand()}\n {this.showShortDescription()}
\n {this.showInstruction()}
\n \n {this.showDescription()}
\n {this.props[this.campaignID] &&\n this.props[this.campaignID].data.campaignType ===\n 'STAMP_CAMPAIGN' ? (\n \n
\n \n {this.showActionBar()}\n
\n \n\n {\n this.hideModal();\n this.props.history.push('/home');\n this.props.dispatch(\n createAction('campaignDetail/updateState')({\n hasError: false,\n }),\n );\n }}\n />\n \n
\n );\n }\n}\n\nexport default withTranslation()(CampaignDetail);\n","import React, { useState, createRef, useRef } from \"react\";\nimport { connect, useDispatch } from \"react-redux\";\nimport { createAction, getFileName } from \"utils\";\nimport NothingPage from \"component/error/Nothing\";\nimport LoadMoreSpinner from \"component/common/LoadMoreSpinner\";\nimport i18n from \"I18n\";\n\n@connect(({ transaction, pullrefreshandloadmore, users }) => ({\n ...transaction,\n ...pullrefreshandloadmore,\n language: users.language,\n}))\nclass TenantPicker extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedTenant: null,\n showTenantPicker: false,\n searchName: \"\",\n delaySearchName: \"\",\n };\n this.tenantPickerRef = createRef(null);\n }\n\n handleClickOutside = (event) => {\n if (\n this.tenantPickerRef &&\n this.tenantPickerRef.current &&\n !this.tenantPickerRef.current.contains(event.target)\n ) {\n this.setState({\n showTenantPicker: false,\n });\n }\n };\n\n componentDidMount() {\n document.addEventListener(\"mousedown\", this.handleClickOutside);\n if (this.tenantPickerRef && this.tenantPickerRef.current)\n this.tenantPickerRef.current.addEventListener(\n \"scroll\",\n this.bindHandleListScroll\n );\n }\n\n componentWillUnmount() {\n document.removeEventListener(\"mousedown\", this.handleClickOutside);\n if (this.tenantPickerRef && this.tenantPickerRef.current)\n this.tenantPickerRef.current.removeEventListener(\n \"scroll\",\n this.bindHandleListScroll\n );\n }\n\n shouldLoadMore = () => {\n return (\n this.props.StoreListHasMoreData &&\n !(this.props.StoreListIsRefreshing || this.props.StoreListIsLoadingMore)\n );\n };\n\n bindHandleListScroll = (event) => {\n const clientHeight = event.target.clientHeight;\n const scrollHeight = event.target.scrollHeight;\n const scrollTop = event.target.scrollTop;\n const isLoadArea = clientHeight + scrollTop > scrollHeight - 50;\n if (isLoadArea && this.shouldLoadMore()) {\n this.props.dispatch(\n createAction(\"transaction/storeLoadMore\")({\n searchName: this.state.searchName,\n })\n );\n }\n };\n\n getStoreItems = () => {\n if (this.props.storeList?.length > 0) {\n return this.props.storeList.map((store) => {\n return (\n {this.name()}
\n \n
\n ) : (\n <>\n )}\n \n {this.showRightSection()}\n
\n \n \n \n \n {\n this.setState({\n selectedTenant: store,\n showTenantPicker: false,\n });\n this.props.selectedTenantChange(store);\n }}\n >\n {store.name}\n
\n \n );\n });\n }\n\n if (\n !this.props[\"StoreListIsRefreshing\"] &&\n !this.props[\"StoreListIsLoadingMore\"]\n )\n return \n {\n this.setState({\n showTenantPicker: true,\n });\n }}\n value={this.state.selectedTenant?.name || \"\"}\n readOnly={true}\n />\n {this.state.showTenantPicker ? (\n {\n this.setState({\n showTenantPicker: true,\n });\n }}\n />\n )}\n
\n \n {\n e.preventDefault();\n this.setState({\n searchName: e.target.value,\n });\n this.props.dispatch(\n createAction(\"transaction/refreshStoreList\")({\n searchName: e.target.value,\n })\n );\n }}\n />\n {\n this.setState({\n searchName: \"\",\n });\n this.props.dispatch(\n createAction(\"transaction/refreshStoreList\")()\n );\n }}>\n
\n \n {this.getStoreItems()}\n \n {(this.props[\"StoreListIsRefreshing\"] ||\n this.props[\"StoreListIsLoadingMore\"]) &&
\n \n \n );\n }\n}\n\nexport default TenantPicker;\n\nconst ReceiptImage = (props) => {\n const [loading, setLoading] = useState(false);\n const [previewImage, setPreviewImage] = useState(null);\n\n const selectFileRef = useRef();\n const dispatch = useDispatch();\n\n const pickImage = (withPreview) => {\n if (withPreview) {\n // preview();\n return;\n }\n selectFileRef.current.click();\n };\n\n const selectFile = (event) => {\n if (!event.target.files[0]) {\n return;\n }\n setPreviewImage(URL.createObjectURL(event.target.files[0]));\n dispatch(\n createAction(\"transaction/uploadFile\")({\n file: event.target.files[0],\n onDone: (imageURL) => {\n setLoading(false);\n const imageName = imageURL ? getFileName(imageURL) : null;\n props.onChange(imageName);\n if (!imageName) {\n setPreviewImage(null);\n }\n },\n })\n );\n setLoading(true);\n };\n\n return (\n \n
\n );\n};\n\nexport const Receipts = (props) => {\n const receiptChange = props.receiptChange || (() => {});\n const creditChange = props.creditChange || (() => {});\n\n const [receiptImage, setReceiptImage] = useState(null);\n const [creditImage, setCreditImage] = useState(null);\n\n return (\n <>\n \n {loading ? (\n pickImage(previewImage)}\n alt=\"\"\n />\n )}\n
\n \n
\n ) : (\n {props.text}
\n {previewImage ? (\n pickImage(false)}>\n {i18n.t(\"records:re_upload\")}\n
\n ) : (\n <>\n )}\n \n
\n );\n\n return (\n \n \n \n {i18n.t('home_home')}\n {'>'}\n {i18n.t('records:home_rewards')}\n {'>'}\n {i18n.t('records:record_create_rewards_claim')}\n
\n \n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n {i18n.t(\"records:tenant\")}\n
\n \n \n this.setState({ selectedTenant: id })\n }\n setRefNode={(node) => (this.StoreListNode = node)}\n props={this.props}\n />\n
\n \n
\n \n
\n \n {i18n.t(\"records:receipt_number\")}\n
\n \n {\n const value = e.target.value\n ? e.target.value.trimLeft().trimEnd()\n : \"\";\n this.setState({ receiptNumber: value });\n }}\n />\n
\n \n
\n \n
\n \n
\n \n {i18n.t(\"records:receipt_issue_date\")}\n
\n \n {\n this.setState({\n receiptIssueDate: date,\n });\n }}\n customInput={
\n \n
\n \n
\n \n {i18n.t(\"records:receipt_amount\")}\n
\n \n {\n const value = e.target.value?.match(/(\\d*[.])?\\d*/, \"\")\n ? e.target.value.match(/(\\d*[.])?\\d*/, \"\")[0]\n : \"\";\n e.target.value = value;\n this.setState({ receiptAmount: value });\n }}\n />\n
\n \n
\n \n
\n \n
\n \n {i18n.t(\"records:record_upload_receipt\")}\n
\n \n this.setState({ receiptImage: r })}\n creditChange={(c) => this.setState({ creditImage: c })}\n />\n
\n \n
\n \n
\n \n {\n if (!disabledSubmit) this.SubmitReceipt();\n }}\n >\n {i18n.t(\"records:submit\")}\n
\n \n \n {campaginActionButtonText}\n \n )}\n {\n this.props.data.totalStamps && (\n
\n \n );\n }\n}\n\nexport default withRouter(OnlyForYouWebCard);\n","import React, {Component} from \"react\";\nimport {Carousel, Container, Image} from \"react-bootstrap\";\nimport \"./OnlyForYouWeb.scss\";\n\nimport OnlyForYouWebCard from \"./OnlyForYouWebCard\";\nimport {findDOMNode} from \"react-dom\";\nimport i18n from \"../../I18n\";\n\nclass OnlyForYouWeb extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n _activateCarouselControl = () => {\n let carouselObj = document.getElementById(\"home_carousel\");\n if (carouselObj) {\n if (this.props.data.length < 2) {\n findDOMNode(carouselObj).style.setProperty(\n \"--carouselPrevControlShow\",\n \"none\"\n );\n findDOMNode(carouselObj).style.setProperty(\n \"--carouselNextControlShow\",\n \"none\"\n );\n } else {\n findDOMNode(carouselObj).style.setProperty(\n \"--carouselNextControlShow\",\n \"flex\"\n );\n findDOMNode(carouselObj).style.setProperty(\n \"--carouselNextButtonEvent\",\n \"auto\"\n );\n }\n }\n };\n\n componentDidUpdate() {\n this._activateCarouselControl();\n }\n\n _getOnlyForYouItems = () => {\n if (this.props.data) {\n return this.props.data.map((itemData, index) => (\n \n
\n \n \n {i18n.t(\"campaignDetail:campaign_card_out_of_stock_tag\")}\n
\n )}\n {this.props.data.campaignActionButtonAvaiable &&\n campaginActionButtonText && (\n \n {this.props.data.campaignDescription}\n
\n {this.props.data.leftDays && (\n \n {this.props.data.leftDays}\n
\n )}\n {this.props.data.outOfStock && (\n \n \n
\n )\n }\n \n
\n \n 
\n
\n \n \n
\n \n {i18n.t(\"home_only_for_you\")}\n
\n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(OnlyForYouMobileCard);\n","import React, { Component } from \"react\";\nimport { Container } from \"react-bootstrap\";\nimport i18n from \"../../I18n\";\nimport \"./OnlyForYouMobile.scss\";\n\nimport OnlyForYouMobileCard from \"./OnlyForYouMobileCard\";\nclass OnlyForYouMobile extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n _getOnlyForYouItems = () => {\n if (this.props.data) {\n const items = this.props.data.map((itemData, index) => {\n let isLastItem = false;\n if (index === this.props.data.length - 1) {\n isLastItem = true;\n }\n return (\n \n
\n \n
\n {this.props.data.outOfStock && (\n {this.props.data.leftDays}
\n )}\n {\n this.props.data.outOfStock\n ? \n : null\n }\n \n \n
\n )}\n \n {this.props.data.campaignDescription}\n
\n {this.props.data.campaignActionButtonAvaiable &&\n campaginActionButtonText && (\n \n )}\n {this.props.data.totalStamps && (\n \n \n
\n )}\n \n
\n \n
\n \n {i18n.t(\"home_only_for_you\")}\n
\n \n {this._getOnlyForYouItems()}\n
\n \n \n \n \n ))}\n \n
\n );\n }\n}\nexport default withRouter(withTranslation()(HomeBanner));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Modal } from \"react-bootstrap\";\nimport \"./BuyCouponModal.scss\";\n\nimport { createAction } from \"utils\";\nimport PointRequiredSection from \"./PointRequiredSection\";\n\n@connect(({ campaignDetail }) => ({ ...campaignDetail }))\nclass BuyCouponModal extends Component {\n\n componentDidMount() {\n this.props.dispatch(\n createAction(\"campaignDetail/getCampaignDetail\")({\n campaignID: this.props.campaignID,\n })\n );\n }\n\n componentWillUnmount() {\n }\n\n render() {\n const campaginData = this.props?.[this.props.campaignID]?.data || {};\n const getModalContent = () => {\n return (\n \n
\n \n }\n prevIcon={\n \n \n
\n \n }\n >\n {this.props.homeBanner.map((item)=>(\n this.clickBannerImg(item)}>\n 
\n
\n \n {\n this.props.onHide()\n }}\n />\n
\n )\n }\n\n return (\n \n
\n {\n this.state.showBuyCouponModal &&\n \n
\n \n
\n {this.props.cardData.outOfStock && (\n \n
\n \n {this.props.cardData.brandImage && (\n
\n {this.props.cardData.campaignTag &&\n this.props.shouldShowCampaignTag && (\n \n {this.props.cardData.campaignTag}\n
\n )}\n {this.props.cardData.leftDays && (\n \n {this.props.cardData.leftDays}\n
\n )}\n {\n this.props.cardData.outOfStock\n ? \n : null\n }\n \n \n
\n )}\n \n {this.props.cardData.campaignDescription}\n
\n {/*\n {campaginActionButtonText && (\n \n
\n )}\n {this.props.cardData.totalStamps && (\n \n \n {campaginActionButtonText}\n \n
\n \n
\n )} */}\n \n \n
\n\n \n \n
\n 0 ? '' : 'no-banner'}`}>\n
\n );\n }\n };\n\n loginButtonDidClicked = () => {\n window.location.href = ssoAPIHelper.getLoginWebUri(\n this.props.i18n?.language || 'en'\n );\n }\n\n render() {\n return (\n \n {!this.props.users.isLogin && !this.props.users.isOpenInOtherSite &&\n
\n }\n {this.props.homeBanner?.length > 0 &&\n \n \n \n {this.props.t(\"sign_up_login\")}\n
\n \n {this.props.t(\"home_signup_text\")}
\n \n \n {this.onlyForYouSection()}\n \n
\n \n {i18n.t(\"home_inbox\")}\n
\n \n {actionButtonList()}\n
\n \n {\n this.props.hasSeparateLine &&\n \n }\n \n {\n !!this.props.inboxIsEditing\n ? (\n
\n {\n !this.props.inboxIsEditing\n ? (\n \n
\n )\n : null\n }\n \n
\n \n {\n !this.props.messageData.isMessageRead &&\n
\n \n \n
\n }\n \n {this.props.messageData.messageTitle}\n
\n \n {\n !!this.props.messageData.messagePhotoUrl &&\n \n
\n \n {this.props.messageData.messageContent}\n
\n \n {this.props.messageData.messageDate}\n
\n \n
\n )\n : null\n }\n \n \n );\n }\n}\n\nexport default InboxListItem;\n\n","import React from 'react';\nimport { Button, Image } from 'react-bootstrap';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\n\nimport i18n from 'I18n';\nimport LoadMoreSpinner from 'component/common/LoadMoreSpinner';\n\nimport { createAction } from 'utils';\nimport { getMessageTime } from 'utils/DateTimeUtils';\nimport { processDeepLink } from 'utils/UrlUtils';\n\nimport './InboxContent.scss';\n\n@connect(({ inboxMessages, users }) => ({\n ...inboxMessages,\n language: users.language,\n}))\nclass InboxContent extends React.Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n this.loadDetail();\n }\n\n componentDidUpdate(preProps) {\n if (preProps.messageId !== this.props.messageId) {\n this.loadDetail();\n }\n if (preProps.language !== this.props.language && this.props.isDetailPage) {\n this.loadDetail();\n }\n }\n\n loadDetail() {\n const messageID = Number(this.props.messageId);\n this.props.dispatch(\n createAction('inboxMessages/getMessageDetail')({\n messageID,\n }),\n );\n }\n\n linkButtonDidClicked(link, clickTrackUrl) {\n console.log('link: ', link, 'click_track_url: ', clickTrackUrl);\n if (clickTrackUrl) {\n fetch(`${clickTrackUrl}?track_only=1`);\n }\n const re = new RegExp(`${process.env.REACT_APP_CUSTOM_DEEP_LINK_SCHEMA}.*://`, \"g\");\n if (re.exec(link)) {\n const webUrl = processDeepLink(link);\n console.log('webUrl', webUrl);\n if (webUrl !== '') {\n this.props.history.push(webUrl);\n }\n } else {\n window.location.href = link;\n }\n }\n\n render() {\n const messageDetail = this.props.messageDetail;\n const messageDetailLoading = this.props.messageDetailLoading;\n return (\n {messageDetail?.title}
\n \n {messageDetail?.creation_date\n ? getMessageTime(messageDetail.creation_date)\n : ''}\n
\n {messageDetail?.photo_url && (\n \n
\n )}\n {messageDetail?.content}
\n {messageDetail?.url && (\n \n \n
\n \n \n \n \n
\n \n \n (this.inboxListNode = node)}\n >\n {this.getMessageItems()}\n
\n \n {(this.props['MessageListIsRefreshing'] ||\n this.props['MessageListIsLoadingMore']) && (\n
\n \n \n
\n \n
\n {this.props.activeMessageId && (\n \n (this.inboxListNode = node)}\n >\n {this.getMessageItems()}\n
\n \n
\n \n \n {(this.props['MessageListIsRefreshing'] ||\n this.props['MessageListIsLoadingMore']) && (\n
\n \n
\n \n {\n if (webNavbar) {\n const scrollTo =\n currentNavbarPosition - SCROLL_DISTANCE < 0\n ? 0\n : currentNavbarPosition - SCROLL_DISTANCE;\n // webNavbar.current.scrollLeft = scrollTo;\n webNavbar.current.scrollTo({\n top: 0,\n left: scrollTo,\n behavior: \"smooth\",\n });\n setCurrentNavbarPosition(scrollTo);\n }\n }}\n />\n
\n }\n \n {(currentNavbarPosition !==\n webNavbar.current?.scrollWidth - webNavbar.current?.offsetWidth) &&\n \n {\n if (webNavbar) {\n console.log(\"@@155: \", webNavbar.current);\n const scrollTo =\n currentNavbarPosition +\n SCROLL_DISTANCE +\n webNavbar.current.offsetWidth >\n webNavbar.current.scrollWidth\n ? webNavbar.current.scrollWidth -\n webNavbar.current.offsetWidth\n : currentNavbarPosition + SCROLL_DISTANCE;\n\n // webNavbar.current.scrollLeft = scrollTo;\n webNavbar.current.scrollTo({\n top: 0,\n left: scrollTo,\n behavior: \"smooth\",\n });\n // webNavbar.current.style.transform = `translateX(${-scrollTo}px)`;\n setCurrentNavbarPosition(scrollTo);\n }\n }}\n />\n
}\n \n \n
\n \n
\n {t(\"redemptionSuccessful\")}
\n {t(\"point_added_to_account\", {\n points: enLocaleNumberFormatter(points),\n cash: enLocaleNumberFormatter(giftCardCash)\n })}
\n {t(\"redeemGiftCardSuccessTips\")}
\n \n \n {\n NO_SHOPIFY\n ? null\n : \n }\n
\n \n )\n }\n if (loginStatus === USER_LOGIN_STATUS.LOGIN_FAILURE) {\n return (\n <>\n \n
\n \n
\n {t(\"redemptionFailed\")}
\n {t(\"giftCardRedeemed\")}
\n \n \n {\n NO_SHOPIFY\n ? null\n : \n }\n
\n \n )\n }\n return (\n \n \n \n \n \n
\n )\n}\n\nexport default connect(mapStateToProps)(withTranslation()(RedeemGiftCard));","import React from 'react';\nimport { Col, Container, Image, Row } from 'react-bootstrap';\nimport { connect } from 'react-redux';\nimport { Link, withRouter } from 'react-router-dom';\n\nimport i18n from 'I18n';\nimport queryString from 'query-string';\n\nimport { ACTION_BUTTON_STATUS } from 'component/campaign/CheckInSection';\nimport ImageSlider from 'component/campaign/ImageSlider';\nimport SharedSection from 'component/campaign/SharedSection';\nimport ShortDescription from 'component/campaign/ShortDescription';\nimport CampaignCard from 'component/common/CampaignCard';\nimport OfferFloatActionButton from 'component/offer/OfferFloatActionButton';\n\nimport { createAction } from 'utils';\nimport { APP_NAME, WEB_DOMAIN } from 'utils/Config';\nimport { isMobile } from 'utils/ScreenUtils';\n\nimport './StoreDetail.scss';\n\n@connect(({ users, store }) => ({\n language: users.language,\n membershipID: users.userInfo.memberShipID,\n isLogin: users.isLogin,\n storeDetailDict: store.store,\n storeDistricts: store.storeDistricts,\n}))\nclass StoreDetail extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // showScanQRCodeModal: false,\n qrCodeString: '',\n showScanner: false,\n storeDetail: {},\n storeDistrict: '',\n phoneNumber: '-',\n email: '-',\n };\n }\n\n componentDidMount() {\n this.storeID = this.props.match.params?.id;\n this.props.dispatch(\n createAction('store/getOneStore')({\n id: this.storeID,\n }),\n );\n this.props.dispatch(createAction('store/getStoreRegions')());\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.language !== prevProps.language) {\n this.props.dispatch(\n createAction('store/getOneStore')({\n id: this.storeID,\n }),\n );\n }\n if (this.props.storeDetailDict !== prevProps.storeDetailDict) {\n const storeDetail = this.props.storeDetailDict[this.storeID];\n console.log('storeDetail', storeDetail);\n let phoneNumber = '-';\n if (\n !!storeDetail?.phoneNumberCountryCode &&\n !!storeDetail?.subscriberNumber\n ) {\n phoneNumber = `+${storeDetail?.phoneNumberCountryCode} ${storeDetail?.subscriberNumber}`;\n }\n let email = '-';\n if (!!storeDetail?.emailAddress) {\n email = storeDetail?.emailAddress;\n }\n this.setState({\n storeDetail: storeDetail,\n phoneNumber,\n email,\n });\n }\n if (\n this.props.storeDetailDict !== prevProps.storeDetailDict ||\n this.props.storeDistricts !== prevProps.storeDistricts\n ) {\n const storeDetail = this.props.storeDetailDict[this.storeID];\n const storeDistricts = this.props.storeDistricts;\n\n const districtID = storeDetail?.district;\n if (storeDistricts?.length > 0) {\n for (const x of storeDistricts) {\n for (const district of x.district) {\n if (district.id === districtID) {\n const districtName = district.name;\n this.setState({\n storeDistrict: districtName,\n });\n return;\n }\n }\n }\n }\n\n this.setState({\n storeDistrict: '',\n });\n }\n }\n\n componentWillUnmount() {\n this.props.dispatch(\n createAction('campaignDetail/updateState')({\n actionButtonStatus: ACTION_BUTTON_STATUS.NORMAL,\n }),\n );\n }\n\n clickSubCategoryTab(subItem) {\n const newUrl = `/about/store?sf_category=${subItem.categoryId}&sf_sub_category[0]=${subItem.id}`;\n this.props.history.push(newUrl);\n }\n\n showImageSlider = () => {\n if (this.state.storeDetail?.photoUrl) {\n return \n
\n\n \n
\n {t(\"redeemTheGiftCard\")}
\n {t(\"redeemGiftCardTips\")}
\n \n {frameOrRedeemResultSection()}\n
\n \n
\n {t(\"instruction\")}
\n - \n
- {t(\"redeemGiftCardInstruction1\")} \n
- {t(\"redeemGiftCardInstruction2\")} \n {/*
- {t(\"redeemGiftCardInstruction3\")} */}\n
{t(\"confirmation\")}
\n - \n
- \n
- {t(\"point_added_to_account\", {\n points: enLocaleNumberFormatter(points),\n cash: enLocaleNumberFormatter(giftCardCash)\n })} \n
\n \n {t('message_cancel')}\n \n \n {t('redeem')}\n \n
\n \n {i18n.t('store:store_description')}\n
\n \n
\n );\n }\n return <>;\n };\n\n detectIsMobile = () => {\n const userAgent = navigator.userAgent;\n const platform = navigator.platform;\n const maxTouchPoints = navigator.maxTouchPoints;\n const toMatch = [\n /Android/i,\n /webOS/i,\n /iPhone/i,\n /iPad/i,\n /iPod/i,\n /BlackBerry/i,\n /Windows Phone/i,\n ];\n const matchMobileResult = toMatch.some((matchItem) => {\n return userAgent.match(matchItem);\n });\n if (matchMobileResult || (platform === 'MacIntel' && maxTouchPoints > 1)) {\n return true;\n } else {\n return false;\n }\n };\n\n render() {\n const title = `${APP_NAME} - ${this.state.storeDetail?.name}`;\n const url = `${WEB_DOMAIN}/storeDetail/${this.storeID}?fromDeepLink=true`;\n const subject = `${APP_NAME} - ${this.state.storeDetail?.name}`\n const message = `東瀛遊 - ${this.state.storeDetail?.name}: \\n ${url} `;\n return (\n \n {i18n.t('store:related_campaign')}\n
\n \n {this.state.storeDetail?.campaigns?.map((data, index) => (\n
\n \n \n \n {i18n.t('home_home')}\n {'>'}\n {i18n.t('profile_store_directory')}\n {'>'}\n {i18n.t('store:store_detail')}\n
\n \n {this.showImageSlider()}
\n \n
\n \n
\n \n
\n \n {!!this.state.storeDistrict ? (\n \n
\n ) : (\n <>\n )}\n \n {\n const latitude = this.state.storeDetail?.latitude; // -90, 90\n const longitude = this.state.storeDetail?.longitude; // -180, 180\n if (latitude !== null && longitude !== null) {\n const search = queryString.stringify(\n {\n api: '1',\n query: `${latitude},${longitude}`,\n },\n {\n encode: true,\n },\n );\n const googleMapUrl =\n 'https://www.google.com/maps/search/?' + search;\n window.open(googleMapUrl);\n }\n }}\n >\n
\n \n {\n this.state.phoneNumber !== '-' || this.state.email !== '-'\n ? \n {this.state.storeDetail?.name}\n
\n \n {this.state.storeDetail?.brandName}\n
\n \n {this.subCategoryTags()}\n
\n {this.state.storeDistrict}
\n \n {\n if (\n this.detectIsMobile() &&\n this.state.phoneNumber !== '-'\n ) {\n window.open(`tel:${this.state.phoneNumber}`);\n }\n }}\n >\n
\n \n \n \n {this.state.phoneNumber}\n
\n \n \n {this.state.email}\n
\n \n \n \n {this.showCampaignList()}\n
\n \n \n \n
\n );\n };\n\n handlePreviewImage = (previewImage) => {\n if (!previewImage) return;\n this.setState({\n showPreview: true,\n previewImage: previewImage,\n });\n };\n\n receiptImage = (customClassName, source, defaultSource, text) => {\n return (\n {title}
\n {content}
\n \n
\n );\n };\n\n getRewardItem = (value, campaigns, earningRules) => {\n return (\n <>\n \n this.handlePreviewImage(source)}\n />\n
\n {text}
\n {value}
\n {campaigns?.length > 0\n ? (\n \n
\n \n )\n : <>\n }\n {earningRules?.length > 0\n ? (\n \n {i18n.t(\"records:record_from_campaign\")}\n
\n \n {campaigns.map((campaign, index) => (\n \n {campaign}\n
\n ))}\n \n
\n \n )\n : <>\n }\n \n );\n };\n\n getReward = () => {\n const pointsRewards = this.state.validatedData?.pointsRewards;\n const couponRewards = this.state.validatedData?.couponRewards;\n const stampRewards = this.state.validatedData?.stampRewards;\n if (!pointsRewards && !couponRewards) {\n return null;\n }\n return (\n \n {i18n.t(\"records:record_from_earning_rule\")}\n
\n \n {earningRules.map((earningRule, index) => (\n \n {earningRule}\n
\n ))}\n \n
\n );\n };\n\n render() {\n return (\n \n {i18n.t(\"records:claim_detail_create_reward\")}\n
\n \n {pointsRewards?.count && this.getRewardItem(\n i18n.t(\"records:record_points\", {\n count: pointsRewards?.count,\n }),\n pointsRewards?.campaignList,\n pointsRewards?.earningRuleList,\n )}\n {couponRewards?.count && this.getRewardItem(\n i18n.t(\"records:record_coupons\", {\n count: couponRewards?.count,\n }),\n couponRewards?.campaignList,\n couponRewards?.earningRuleList,\n )}\n {stampRewards?.count && this.getRewardItem(\n i18n.t(\"records:record_stamps\", {\n count: stampRewards?.count,\n }),\n stampRewards?.campaignList,\n stampRewards?.earningRuleList,\n )}\n
\n \n
\n {this.getReward()}\n {this.state.validatedData?.status !==\n ClaimType.WAITING_FOR_APPROVAL ? null : (\n \n {i18n.t(\"records:record_upload_receipt\")}\n
\n \n {this.receiptImage(\n \"receipt_image_container\",\n this.state.validatedData?.receiptImage,\n \"\",\n i18n.t(\"records:merchants_receipts\")\n )}\n {this.receiptImage(\n \"credit_image_container\",\n this.state.validatedData?.creditImage,\n \"\",\n i18n.t(\"records:credit_slip\")\n )}\n
\n \n this.setState({ showPreview: false })}\n />\n
\n ) : null}\n \n );\n }\n}\n\nexport default withRouter(TransactionContent);\n","import React from \"react\";\nimport Container from \"react-bootstrap/Container\";\nimport \"./TransactionDetail.scss\";\nimport TransactionContent from \"../component/records/TransactionContent\";\nimport OfferFloatActionButton from \"component/offer/OfferFloatActionButton\";\n\nclass TransactionDetail extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n render() {\n return (\n \n \n \n
\n );\n }\n}\n\nexport default TransactionDetail;\n","import React from 'react';\nimport Container from 'react-bootstrap/Container';\n\nimport i18n from 'I18n';\n\nimport TransactionDetailContent from 'component/records/TransactionDetailContent';\n\nimport './TransactionHistoryDetail.scss';\n\nconst TransactionHistoryDetail = ({ match }) => {\n const transactionID = match?.params?.id;\n\n return (\n \n
\n );\n};\n\nexport default TransactionHistoryDetail;\n","import React from \"react\";\nimport \"./TransactionListItem.scss\";\nimport { connect } from \"react-redux\";\nimport i18n from \"../../I18n\";\n\n@connect(({ transaction }) => ({ ...transaction }))\nclass TransactionListItem extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n transactionItemDidClicked = () => {\n this.props.clickAction();\n this.setState({\n didClicked: true,\n });\n };\n\n render() {\n return (\n \n {i18n.t('records:transaction_detail_title')}\n
\n \n {this.props.hasseparateLine && (\n \n )}\n \n
\n
\n {this.props.isActive && }\n \n \n );\n }\n}\n\nexport default TransactionListItem;\n","import React from \"react\";\nimport { Button, Container } from \"react-bootstrap\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\n\nimport LoadMoreSpinner from \"component/common/LoadMoreSpinner\";\nimport TransactionListItem from \"component/records/TransactionListItem\";\nimport TransactionContent from \"component/records/TransactionContent\";\nimport OfferFloatActionButton from \"component/offer/OfferFloatActionButton\";\nimport NothingPage from \"component/error/Nothing\";\nimport { createAction } from \"utils\";\nimport {\n getScrollTop,\n getDocumentHeight,\n getWindowHeight,\n getScreenWidth,\n isMobile,\n} from \"utils/ScreenUtils\";\nimport i18n from \"I18n\";\n\nimport \"./TransactionList.scss\";\n\n\n@connect(({ transaction, pullrefreshandloadmore, users }) => ({\n ...transaction,\n ...pullrefreshandloadmore,\n language: users.language,\n}))\nclass TransactionList extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeTransactionId: null,\n };\n }\n\n componentDidMount() {\n this.props.dispatch(createAction(\"transaction/refreshRewardClaimList\")());\n this.transactionListNode.addEventListener(\n \"scroll\",\n this.bindHandleListScroll\n );\n window.addEventListener(\"scroll\", this.bindHandleWindowScroll);\n if (!isMobile() && this.props.rewardClaimList?.length > 0) {\n this.setState({\n activeTransactionId: this.props.rewardClaimList[0].id,\n });\n }\n }\n\n componentWillUnmount() {\n this.transactionListNode.removeEventListener(\n \"scroll\",\n this.bindHandleListScroll\n );\n window.removeEventListener(\"scroll\", this.bindHandleWindowScroll);\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.language !== prevProps.language) {\n this.props.dispatch(createAction(\"transaction/refreshRewardClaimList\")());\n }\n if (this.props.rewardClaimList !== prevProps.rewardClaimList) {\n if (\n !isMobile() &&\n !(prevProps.rewardClaimList?.length > 0) &&\n this.props.rewardClaimList?.length > 0\n ) {\n const transactionData = this.props.rewardClaimList[0];\n this.setState({\n activeTransactionId: transactionData.id,\n });\n }\n }\n }\n\n shouldLoadMore = () => {\n return (\n this.props.TransactionListHasMoreData &&\n !(\n this.props.TransactionListIsRefreshing ||\n this.props.TransactionListIsLoadingMore\n )\n );\n };\n\n bindHandleListScroll = (event) => {\n let screenWidth = getScreenWidth();\n if (screenWidth >= 769) {\n const clientHeight = event.target.clientHeight;\n const scrollHeight = event.target.scrollHeight;\n const scrollTop = event.target.scrollTop;\n const isLoadArea = clientHeight + scrollTop > scrollHeight - 50;\n if (isLoadArea && this.shouldLoadMore()) {\n this.props.dispatch(createAction(\"transaction/loadMoreRewardClaimList\")());\n }\n }\n };\n\n bindHandleWindowScroll = () => {\n let screenWidth = getScreenWidth();\n if (screenWidth < 769) {\n let scrollTopLength = getScrollTop();\n let windowHeight = getWindowHeight();\n let documentHeight = getDocumentHeight();\n let isLoadArea = scrollTopLength + windowHeight > documentHeight - 50;\n if (isLoadArea && this.shouldLoadMore()) {\n this.props.dispatch(createAction(\"transaction/loadMoreRewardClaimList\")());\n }\n }\n };\n\n transactionItemDidClicked = (transactionId) => {\n this.setState({\n activeTransactionId: transactionId,\n });\n let screenWidth = getScreenWidth();\n if (screenWidth < 769) {\n this.props.history.push(`/transactionDetail/${transactionId}`);\n }\n };\n\n getTransactionItems = () => {\n if (this.props.rewardClaimList?.length > 0) {\n return this.props.rewardClaimList.map((transactionItemData, index) => (\n \n
\n {/* */}\n \n {\n this.props.transactionData.brandImage &&\n (\n
\n \n
\n )\n }\n \n
\n \n \n {i18n.t(this.props.transactionData?.status)}\n
\n \n {this.props.transactionData.createDate}\n
\n \n {this.props.transactionData.brandTitle}\n
\n \n
\n
\n \n {i18n.t(\"records:record_upload_receipt\")}:\n \n {this.props.transactionData.receiptNumber}\n \n
\n \n {i18n.t(\"records:receipt_issue_date\")}:\n \n {this.props.transactionData.receiptDate}\n \n
\n \n {i18n.t(\"records:receipt_amount\")}:\n \n {this.props.transactionData.receiptAmount}\n \n
\n \n \n
\n {this.state.activeTransactionId && (\n \n (this.transactionListNode = node)}\n // className=\"transaction_list_listArea\"\n className={`transaction_list_listArea ${\n !this.props.rewardClaimList?.length > 0 &&\n !this.props[\"TransactionListIsRefreshing\"] &&\n !this.props[\"TransactionListIsLoadingMore\"]\n ? \"with-nothing-area\"\n : \"\"\n }`}\n >\n {this.getTransactionItems()}\n
\n \n {i18n.t(\"records:reward_claim_tab\")}\n
\n \n \n {(this.props[\"TransactionListIsRefreshing\"] ||\n this.props[\"TransactionListIsLoadingMore\"]) && (\n
\n \n this.props.history.push(\"/transaction/create\")}\n >\n {i18n.t(\"records:record_upload_receipt\")}\n \n
\n \n {i18n.t('account_direct_marketing')}\n
\n \n
\n \n {i18n.t('settings_email')}\n {': '}\n {email}\n
\n \n
\n \n {\n setDirectMarketingViaEmail(isChecked);\n }}\n />\n
\n \n {i18n.t('personal_info_receive_marketing_via_email')}\n
\n \n {i18n.t('personal_info_receive_marketing_via_email_reminder')}\n
\n \n {hideNavigator ? (\n noNavigatorPage()\n ) : (\n <>\n \n
\n \n 
\n\n \n\n \n\n
\n );\n}\n","import i18n from 'I18n';\n\nimport {\n CAMPAIGN_TYPE_STAMP,\n EARNING_RULE_BIRTH,\n EARNING_RULE_GPS,\n EARNING_RULE_LEVEL_UPGRADE,\n EARNING_RULE_NEW_MEMBER,\n EARNING_RULE_PURCHASE,\n EARNING_RULE_QR_CODE,\n EARNING_RULE_REFER,\n} from 'services/CampaignAPIHelper';\nimport { ssoAPIHelper } from 'services/SSOAPIHelper';\n\nimport { createAction } from 'utils';\nimport { subHeaderLink } from 'utils/CampaignUtil';\nimport { NO_LEVEL } from 'utils/Config';\nimport {\n getActivityLogDate,\n getActivityLogDateTime,\n} from 'utils/DateTimeUtils';\nimport { getCMSLanguage } from 'utils/LanguageCheckUtil';\n\nfunction groupBy(objectArray, property) {\n return objectArray.reduce((array, obj) => {\n const key = obj[property];\n const newArray = array;\n if (!newArray[key]) {\n newArray[key] = [];\n }\n newArray[key].push(obj);\n return newArray;\n }, {});\n}\n\nexport const ACTIVITY_LOG_TYPES = {\n CUSTOMER_REWARD_EARNED: 'CUSTOMER_REWARD_EARNED',\n CUSTOMER_POINTS_USED: 'CUSTOMER_POINTS_USED',\n CUSTOMER_POINTS_EXPIRED: 'CUSTOMER_POINTS_EXPIRED',\n CUSTOMER_POINTS_ADMIN_ADDED: 'CUSTOMER_POINTS_ADMIN_ADDED',\n CUSTOMER_POINTS_ADMIN_REMOVED: 'CUSTOMER_POINTS_ADMIN_REMOVED',\n CUSTOMER_REWARD_RECALL: 'CUSTOMER_REWARD_RECALL',\n CUSTOMER_LEVEL_CHANGED: 'CUSTOMER_LEVEL_CHANGED',\n CUSTOMER_LEVEL_RETAINED: 'CUSTOMER_LEVEL_RETAINED',\n CUSTOMER_COUPON_EXPIRED: 'CUSTOMER_COUPON_EXPIRED',\n CUSTOMER_COUPON_USED: 'CUSTOMER_COUPON_USED',\n CUSTOMER_COUPON_ADMIN_RECLAIM: 'CUSTOMER_COUPON_ADMIN_RECLAIM',\n CUSTOMER_COUPON_ADMIN_GRANT: 'CUSTOMER_COUPON_ADMIN_GRANT',\n CUSTOMER_STAMP_EARNED: 'CUSTOMER_STAMPS_EARNED',\n CUSTOMER_STAMP_EXPIRED: 'CUSTOMER_STAMPS_EXPIRED',\n CUSTOMER_STAMPS_ADMIN_RECLAIM: 'CUSTOMER_STAMPS_ADMIN_RECLAIM',\n CUSTOMER_LOGIN: 'CUSTOMER_LOGIN',\n CUSTOMER_LOGOUT: 'CUSTOMER_LOGOUT',\n CUSTOMER_CASH_DOLLAR: 'CUSTOMER_CASH_DOLLAR',\n CUSTOMER_USE_GIFT_CARD: 'CUSTOMER_USE_GIFT_CARD',\n};\n\nconst EARNING_TYPES_MAP = {\n [EARNING_RULE_GPS]: {\n title: 'gpsCheckIn',\n icon: '/activityLog/GPS.png',\n srcSet: '/activityLog/GPS@2x.png 2x, /activityLog/GPS@3x.png 3x',\n },\n [EARNING_RULE_QR_CODE]: {\n title: 'offer_scan_qr_code',\n icon: '/activityLog/scan.png',\n srcSet: '/activityLog/scan@2x.png 2x, /activityLog/scan@3x.png 3x',\n },\n [EARNING_RULE_REFER]: {\n title: 'referral',\n icon: '/activityLog/referral.png',\n srcSet: '/activityLog/referral@2x.png 2x, /activityLog/referral@3x.png 3x',\n },\n [EARNING_RULE_PURCHASE]: {\n title: 'generalPurchase',\n icon: '/activityLog/purchase.png',\n srcSet: '/activityLog/purchase@2x.png 2x, /activityLog/purchase@3x.png 3x',\n },\n [EARNING_RULE_NEW_MEMBER]: {\n title: 'newMember',\n icon: '/activityLog/newMember.png',\n srcSet:\n '/activityLog/newMember@2x.png 2x, /activityLog/newMember@3x.png 3x',\n },\n [EARNING_RULE_BIRTH]: {\n title: 'birthday',\n icon: '/activityLog/birthday.png',\n srcSet: '/activityLog/birthday@2x.png 2x, /activityLog/birthday@3x.png 3x',\n },\n [EARNING_RULE_LEVEL_UPGRADE]: {\n title: 'levelUpgrade',\n icon: '/activityLog/level-upgrade.png',\n srcSet:\n '/activityLog/level-upgrade@2x.png 2x, /activityLog/level-upgrade@3x.png 3x',\n },\n};\n\nconst ADMIN_EDIT_NAMES_MAP = {\n [ACTIVITY_LOG_TYPES.CUSTOMER_POINTS_ADMIN_ADDED]: 'adminPointsAdded',\n [ACTIVITY_LOG_TYPES.CUSTOMER_POINTS_ADMIN_REMOVED]: 'adminPointsRemoved',\n [ACTIVITY_LOG_TYPES.CUSTOMER_REWARD_RECALL]: 'adminPointsRecall',\n [ACTIVITY_LOG_TYPES.CUSTOMER_COUPON_ADMIN_GRANT]: 'adminCouponGrant',\n [ACTIVITY_LOG_TYPES.CUSTOMER_COUPON_ADMIN_RECLAIM]: 'adminCouponReclaim',\n};\n\nconst COUPON_LOGS_NAME_MAP = {\n [ACTIVITY_LOG_TYPES.CUSTOMER_COUPON_USED]: 'couponUsed',\n [ACTIVITY_LOG_TYPES.CUSTOMER_COUPON_EXPIRED]: 'couponExpired',\n [ACTIVITY_LOG_TYPES.CUSTOMER_POINTS_USED]: 'couponRedemption',\n};\n\nconst STAMP_LOGS_NAME_MAP = {\n [ACTIVITY_LOG_TYPES.CUSTOMER_STAMP_EARNED]: 'stampEarned',\n [ACTIVITY_LOG_TYPES.CUSTOMER_STAMP_EXPIRED]: 'stampExpired',\n [ACTIVITY_LOG_TYPES.CUSTOMER_STAMPS_ADMIN_RECLAIM]: 'stampUpdatedByAdmin',\n};\n\nconst CUSTOMER_LOGIN_NAME_MAP = {\n [ACTIVITY_LOG_TYPES.CUSTOMER_LOGIN]: 'customerLoginLog',\n};\n\nconst CUSTOMER_LOGOUT_NAME_MAP = {\n [ACTIVITY_LOG_TYPES.CUSTOMER_LOGOUT]: 'customerLogoutLog',\n};\n\nfunction getDisplayActivityLog(activityLog) {\n switch (activityLog.activity_type) {\n case ACTIVITY_LOG_TYPES.CUSTOMER_REWARD_EARNED:\n if (activityLog.log_info.campaign_type === CAMPAIGN_TYPE_STAMP) {\n let title = 'campaign_point_earned';\n let icon = '/activityLog/stamp-points.png';\n let srcSet =\n '/activityLog/stamp-points@2x.png 2x, /activityLog/stamp-points@3x.png 3x';\n if (activityLog.log_info?.coupon && activityLog.log_info.coupon > 0) {\n title = 'campaign_coupon_earned';\n icon = '/activityLog/stamp-coupon.png';\n srcSet =\n '/activityLog/stamp-coupon@2x.png 2x, /activityLog/stamp-coupon@3x.png 3x';\n }\n return {\n title,\n icon,\n srcSet,\n };\n }\n if (!activityLog.log_info.campaign_earning_type) {\n return {\n title: 'campaign_point_earned',\n icon: null,\n srcSet: null,\n };\n }\n const data =\n EARNING_TYPES_MAP[activityLog.log_info.campaign_earning_type];\n return {\n title: data?.title,\n icon: data?.icon,\n srcSet: data?.srcSet,\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_POINTS_EXPIRED:\n return {\n title: 'campaign_point_expired',\n icon: '/activityLog/points-expired.png',\n srcSet:\n '/activityLog/points-expired@2x.png 2x, /activityLog/points-expired@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_POINTS_ADMIN_ADDED:\n case ACTIVITY_LOG_TYPES.CUSTOMER_POINTS_ADMIN_REMOVED:\n case ACTIVITY_LOG_TYPES.CUSTOMER_REWARD_RECALL:\n case ACTIVITY_LOG_TYPES.CUSTOMER_COUPON_ADMIN_GRANT:\n case ACTIVITY_LOG_TYPES.CUSTOMER_COUPON_ADMIN_RECLAIM:\n return {\n title: ADMIN_EDIT_NAMES_MAP[activityLog.activity_type],\n icon: '/activityLog/admin-edit.png',\n srcSet:\n '/activityLog/admin-edit@2x.png 2x, /activityLog/admin-edit@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_LEVEL_CHANGED:\n return {\n title: 'campaign_level_changed',\n icon: '/activityLog/level-change.png',\n srcSet:\n '/activityLog/level-change@2x.png 2x, /activityLog/level-change@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_LEVEL_RETAINED:\n return {\n title: 'campaign_level_retained',\n icon: '/activityLog/level-change.png',\n srcSet:\n '/activityLog/level-change@2x.png 2x, /activityLog/level-change@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_COUPON_EXPIRED:\n case ACTIVITY_LOG_TYPES.CUSTOMER_COUPON_USED:\n case ACTIVITY_LOG_TYPES.CUSTOMER_POINTS_USED:\n return {\n title: COUPON_LOGS_NAME_MAP[activityLog.activity_type],\n icon: '/activityLog/coupon-redemption.png',\n srcSet:\n '/activityLog/coupon-redemption@2x.png 2x, /activityLog/coupon-redemption@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_STAMP_EARNED:\n case ACTIVITY_LOG_TYPES.CUSTOMER_STAMP_EXPIRED:\n case ACTIVITY_LOG_TYPES.CUSTOMER_STAMPS_ADMIN_RECLAIM:\n return {\n title: STAMP_LOGS_NAME_MAP[activityLog.activity_type],\n icon: '/activityLog/stamp-badge.png',\n srcSet:\n '/activityLog/stamp-badge@2x.png 2x, /activityLog/stamp-badge@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_LOGIN:\n return {\n title: CUSTOMER_LOGIN_NAME_MAP[activityLog.activity_type],\n icon: '/activityLog/login.png',\n srcSet: '/activityLog/login@2x.png 2x, /activityLog/login@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_LOGOUT:\n return {\n title: CUSTOMER_LOGOUT_NAME_MAP[activityLog.activity_type],\n icon: '/activityLog/logout.png',\n srcSet: '/activityLog/logout@2x.png 2x, /activityLog/logout@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_CASH_DOLLAR:\n return {\n title: 'cash_dollar_log',\n icon: '/profile/currentPoint/cash-dollar-log.png',\n srcSet:\n '/profile/currentPoint/cash-dollar-log@2x.png 2x, /profile/currentPoint/cash-dollar-log@3x.png 3x',\n };\n case ACTIVITY_LOG_TYPES.CUSTOMER_USE_GIFT_CARD:\n return {\n title: 'gift_card_point',\n icon: '/activityLog/gift.png',\n srcSet:\n '/activityLog/gift@2x.png 2x, /activityLog/gift@3x.png 3x', \n };\n default:\n return {\n title: '',\n icon: '',\n srcSet: '',\n };\n }\n}\n\nfunction assembleActivityLog(activityLog) {\n const activityType = activityLog.activity_type;\n const logInfo = activityLog.log_info || {};\n const {\n campaign_name: campaignName,\n coupon_name: couponName,\n coupon,\n content,\n points,\n tpe,\n stamps,\n new_level_name: levelName,\n campaign_type: campaignType,\n campaign_earning_type: earningType,\n cash_dollar: cashDollar,\n } = logInfo;\n const { title, icon, srcSet } = getDisplayActivityLog(activityLog);\n\n const activityDate = getActivityLogDate(activityLog.activity_time);\n const activityTime = getActivityLogDateTime(activityLog.activity_time);\n const activityId = activityLog.id;\n const language = getCMSLanguage(i18n.language);\n let campaignTitle = campaignName?.en;\n if (campaignName && language in campaignName) {\n campaignTitle = campaignName[language] || campaignTitle;\n }\n let level = levelName?.en;\n if (levelName && language in levelName) {\n level = levelName[language] || level;\n }\n let couponTitle = couponName?.en;\n if (couponName && language in couponName) {\n couponTitle = couponName[language] || couponTitle;\n }\n const cashDollarContent = cashDollar\n ? i18n.t('x_cash_dollar', { cashDollar: cashDollar })\n : null;\n let subTitle = campaignTitle || couponTitle || cashDollarContent || content;\n if (\n [\n ACTIVITY_LOG_TYPES.CUSTOMER_LEVEL_CHANGED,\n ACTIVITY_LOG_TYPES.CUSTOMER_LEVEL_RETAINED,\n ].includes(activityType)\n ) {\n subTitle = '';\n }\n\n return {\n activityType,\n campaignType,\n earningType,\n activityDate,\n title,\n subTitle,\n icon,\n srcSet,\n activityTime,\n points,\n tpe,\n coupon,\n stamps,\n level,\n activityId,\n };\n}\n\nfunction groupActivityLogs(logs, key) {\n const logInfo = logs[key];\n return {\n title: key,\n data: logInfo,\n };\n}\n\nexport default {\n namespace: 'activityLogs',\n state: {\n activityLogList: [],\n activityLogOriginList: [],\n activityLogPageLink: null,\n isLoading: false,\n },\n\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n\n setUserLogs(state, { payload }) {\n const newLogs = payload.logs;\n if (!newLogs) {\n return {\n ...state,\n };\n }\n const formattedLog = newLogs.map((log) => assembleActivityLog(log));\n const originalLogs = state.activityLogOriginList;\n const totalLog = payload.init\n ? formattedLog\n : originalLogs.concat(formattedLog);\n const groupedLogs = groupBy(totalLog, 'activityTime');\n const activityLogList = Object.keys(groupedLogs).map((key) =>\n groupActivityLogs(groupedLogs, key),\n );\n return {\n ...state,\n activityLogList,\n activityLogOriginList: totalLog,\n activityLogPageLink: payload.activityLogPageLink,\n };\n },\n\n clearLogs() {\n return {\n activityLogList: [],\n activityLogOriginList: [],\n activityLogPageLink: null,\n };\n },\n },\n effects: {\n fetchUserActivityLogs: [\n function* (action, { call, put, select }) {\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n yield put(\n createAction('updateState')({\n isLoading: true,\n }),\n );\n const response = yield call(ssoAPIHelper.getUserActivityLogs, {\n accessToken,\n uid,\n levelRelated: !NO_LEVEL\n });\n if (response.status === 200) {\n const { data } = response;\n const activityLogPageLink = subHeaderLink(response.headers.link);\n yield put(\n createAction('setUserLogs')({\n logs: data,\n activityLogPageLink,\n init: true,\n }),\n );\n yield put(\n createAction('updateState')({\n isLoading: false,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n uerActivityLogsLoadMore: [\n function* (action, { call, put, select }) {\n const accessToken = yield select((state) => state.users.accessToken);\n const pageLink = yield select(\n (state) => state.activityLogs.activityLogPageLink,\n );\n if (!pageLink) {\n return;\n }\n const response = yield call(ssoAPIHelper.getUserActivityLogs, {\n accessToken,\n pageLink,\n });\n if (response.status === 200) {\n const { data } = response;\n const activityLogPageLink = subHeaderLink(response.headers.link);\n yield put(\n createAction('setUserLogs')({ logs: data, activityLogPageLink, levelRelated: true }),\n );\n }\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n ActivityLogLoadingMore: false,\n }),\n );\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","import i18n from 'I18n';\n\nimport { ACTION_BUTTON_STATUS } from 'component/campaign/CheckInSection';\nimport {\n CAMPAIGN_TYPE_COUPON,\n CAMPAIGN_TYPE_EARNING,\n CampaignAPIHelper,\n EARNING_RULE_BIRTH,\n EARNING_RULE_GPS,\n EARNING_RULE_NEW_MEMBER,\n EARNING_RULE_PURCHASE,\n EARNING_RULE_QR_CODE,\n EARNING_RULE_REFER,\n CAMPAIGN_TYPE_STAMP,\n EARNING_RULE_LEVEL_UPGRADE,\n} from 'services/CampaignAPIHelper';\n\nimport {\n createAction,\n delay,\n getTranslationData,\n generateTakeLeading,\n enLocaleNumberFormatter,\n} from 'utils';\nimport {\n checkIfStarted,\n errorMessageIfFailedToGetRewards,\n} from 'utils/CampaignUtil';\nimport { NO_LEVEL } from 'utils/Config';\nimport {\n convertDateToStamp,\n formatDate,\n getCampaignDetailEndDate,\n getCurrentDateFormatted,\n} from 'utils/DateTimeUtils';\n\nconst takeLeading = generateTakeLeading('campaignDetail');\n\nconst getDefaultInstructionTitle = (campaignType) => {\n if (campaignType === CAMPAIGN_TYPE_COUPON) {\n return i18n.t('campaignDetail:howToUse');\n }\n if (campaignType === CAMPAIGN_TYPE_EARNING) {\n return i18n.t('campaignDetail:howToEarn');\n }\n return null;\n};\n\nconst checkIsCoupon = (campaignType) => campaignType === CAMPAIGN_TYPE_COUPON;\n\nconst parseCouponCampaignData = (apiData) => {\n const requiredPoint = apiData.coupon_campaign_type_required_points || 0;\n const point = enLocaleNumberFormatter(requiredPoint);\n let status =\n requiredPoint > 0 ? ACTION_BUTTON_STATUS.NORMAL : ACTION_BUTTON_STATUS.GET;\n if (!checkIfStarted(apiData.start_date)) {\n status = ACTION_BUTTON_STATUS.UNAVAILABLE;\n }\n return {\n campaignType: CAMPAIGN_TYPE_COUPON,\n earningRuleType: null,\n textTitle: i18n.t('campaignDetail:pointsRequired'),\n point,\n status,\n startDate: convertDateToStamp(apiData.start_date),\n endDate: convertDateToStamp(apiData.end_date),\n };\n};\n\nconst parseEarning = (apiData) => {\n const earningRule = apiData.earning_campaign_type_earning_rule;\n const earningType = earningRule.type;\n let keyPrefix = null;\n if (earningType === EARNING_RULE_GPS) {\n keyPrefix = 'gps_check_in_type_';\n } else if (earningType === EARNING_RULE_QR_CODE) {\n keyPrefix = 'qr_code_scanning_type_';\n } else if (earningType === EARNING_RULE_REFER) {\n keyPrefix = 'member_referral_type_';\n } else if (earningType === EARNING_RULE_BIRTH) {\n keyPrefix = 'birthday_type_';\n } else if (earningType === EARNING_RULE_NEW_MEMBER) {\n keyPrefix = 'new_member_type_';\n } else if (earningType === EARNING_RULE_PURCHASE) {\n keyPrefix = 'general_purchase_type_';\n }\n\n if (keyPrefix === null) {\n return {};\n }\n let point = null;\n let textTitle = null;\n let rewardType = 'POINTS';\n if (earningRule[`${keyPrefix}reward_type`] === 'COUPON') {\n point = `X ${earningRule[`${keyPrefix}coupon_reward_type_quantity`]}`;\n textTitle = i18n.t('campaignDetail:couponsEarn');\n rewardType = 'COUPON';\n } else {\n if (earningType === EARNING_RULE_PURCHASE) {\n point =\n `${enLocaleNumberFormatter(\n earningRule[\n `general_purchase_type_points_reward_type_points_per_x_dollars_spent`\n ] || 0,\n )} ` + i18n.t('points');\n } else {\n point = `+${enLocaleNumberFormatter(\n earningRule[`${keyPrefix}points_reward_type_points`] || 0,\n )}`;\n }\n textTitle = i18n.t('campaignDetail:pointsEarn');\n }\n return {\n campaignType: CAMPAIGN_TYPE_EARNING,\n earningRuleType: earningType,\n rewardType,\n textTitle,\n point,\n status: checkIfStarted(apiData.start_date)\n ? ACTION_BUTTON_STATUS.NORMAL\n : ACTION_BUTTON_STATUS.UNAVAILABLE,\n startDate: convertDateToStamp(apiData.start_date),\n endDate: convertDateToStamp(apiData.end_date),\n };\n};\n\nconst parseStamp = (apiData) => {\n return {\n campaignType: apiData.type,\n earningRuleType: null,\n redeemedRewards: apiData.stamp_redeemed_rewards || [],\n earnedStamps: apiData.earned_stamps,\n startDate: convertDateToStamp(apiData.start_date),\n endDate: convertDateToStamp(apiData.end_date),\n stampBadge: {\n badgeSlot: apiData.stamp_campaign_type_empty_slot_stamp_image,\n badgeAcquired: apiData.stamp_campaign_type_acquired_stamp_image,\n giftSlot: apiData.stamp_campaign_type_empty_gift_slot_image,\n giftAcquire: apiData.stamp_campaign_type_collected_gift_image,\n },\n };\n};\n\nconst parseActionBarData = (apiData) => {\n let campaignType = apiData.type;\n const status = ACTION_BUTTON_STATUS.NORMAL;\n if (campaignType === CAMPAIGN_TYPE_COUPON) {\n return parseCouponCampaignData(apiData);\n }\n if (campaignType === CAMPAIGN_TYPE_EARNING) {\n return parseEarning(apiData);\n }\n if (campaignType === CAMPAIGN_TYPE_STAMP) {\n return parseStamp(apiData);\n }\n campaignType = null;\n return {\n campaignType,\n status,\n };\n};\n\nconst getBrand = (brand, currentLanguage) => {\n const brandData = {\n shown: false,\n iconUrl: null,\n name: '',\n description: null,\n };\n\n if (brand) {\n brandData.shown = brand.name ? true : false;\n brandData.iconUrl = brand.icon_url;\n // const baseData = getTranslationData(brand, currentLanguage);\n const baseData = brand;\n brandData.name = baseData.name;\n brandData.description = baseData.description;\n }\n return brandData;\n};\n\nconst parseCampaignDetail = (\n apiData,\n currentLanguage,\n lastUpdateTime = null,\n) => {\n const baseData = getTranslationData(apiData, i18n.language);\n // const baseData = apiData;\n const hasDescription = (baseData.detail_section_content || '').length > 0;\n const hasInstructions =\n (baseData.instruction_section_content || '').length > 0;\n\n const data = {\n campaignType: apiData.type,\n inBlackoutPeriod: apiData.is_within_blackout_period,\n images: baseData.photos_url || [\n 'campaignDetail/slider/test1.jpg',\n 'campaignDetail/slider/test2.jpeg',\n 'campaignDetail/slider/test3.jpg',\n ],\n basic: {\n endDate: getCampaignDetailEndDate(apiData.end_date),\n isFeatured: apiData.is_featured,\n isOnlyForYou: apiData.is_only_for_you,\n isActive: apiData.is_active,\n outOfStock: !!(apiData.coupon_campaign_type_coupon_stock === 0),\n name: baseData.name,\n },\n brand: getBrand(getTranslationData(apiData.brand), currentLanguage),\n // brand: apiData.brand_section,\n summary: baseData.short_description,\n description: {\n shown: hasDescription,\n title: baseData.detail_section_title || i18n.t('campaignDetail:details'),\n content: baseData.detail_section_content,\n showTopDiver: hasDescription && hasInstructions,\n },\n instructions: {\n shown: hasInstructions,\n title:\n baseData.instruction_section_title ||\n getDefaultInstructionTitle(apiData.type),\n content: baseData.instruction_section_content,\n showBottomDivder: false,\n },\n coupon: {\n isCoupon: checkIsCoupon(apiData.type),\n requiredPoints: apiData.coupon_campaign_type_required_points,\n leftStock: apiData.coupon_campaign_type_coupon_stock,\n lastUpdateTime:\n lastUpdateTime === null\n ? getCurrentDateFormatted(true, false)\n : formatDate(lastUpdateTime, null, true, false),\n // stores:\n // (apiData.coupon_campaign_type_coupon_template || {})\n // .applicable_stores || [],\n stores: apiData.campaign_stores?.map((store) =>\n getTranslationData(store),\n ),\n title: (apiData.coupon || {}).title,\n perLimit: apiData.coupon_campaign_type_per_head_limit,\n },\n };\n return data;\n};\n\nconst parseStampTask = (\n data,\n currentLanguage,\n actionBar\n) => {\n const typeEarningRule = {\n MEMBER_REFERRAL: {\n text: i18n.t('campaignDetail:referAFriend'),\n cardType: 'button',\n },\n QR_CODE_SCANNING: {\n text: i18n.t('campaignDetail:scanQrCode'),\n cardType: 'button',\n },\n GPS_CHECK_IN: {\n text: i18n.t('campaignDetail:checkIn'),\n cardType: 'button',\n },\n GENERAL_PURCHASE: {\n text: i18n.t('records:record_upload_receipt'),\n cardType: '', // Egl hide general purchase button\n },\n };\n\n const parseList = data.map((aData) => {\n const translateData = getTranslationData(aData, currentLanguage);\n const { type } = translateData;\n const startDate = convertDateToStamp(actionBar.startDate)\n const isStarted = checkIfStarted(startDate);\n\n let rewardStampCount;\n let rewardString;\n let rewardStringSecond = '';\n if (aData.type === EARNING_RULE_PURCHASE) {\n rewardString = `+${aData.general_purchase_type_stamp_reward_type_stamps_per_x_dollars_spent}`\n rewardStringSecond = `/HK$${aData.general_purchase_type_stamp_reward_type_x}`\n } else {\n const rewardKeyPostfix = '_type_stamp_reward_type_quantity';\n const earningRuleKeyMapping = {\n [EARNING_RULE_REFER]: 'member_referral',\n [EARNING_RULE_BIRTH]: 'birthday',\n [EARNING_RULE_GPS]: 'gps_check_in',\n [EARNING_RULE_QR_CODE]: 'qr_code_scanning',\n [EARNING_RULE_NEW_MEMBER]: 'new_member',\n [EARNING_RULE_LEVEL_UPGRADE]: 'level_upgrade',\n }\n const key = earningRuleKeyMapping[aData.type] + rewardKeyPostfix;\n rewardStampCount = aData[key];\n rewardString = `+${rewardStampCount}`;\n }\n\n return {\n title: translateData.name,\n rewardStampCount,\n rewardString,\n rewardStringSecond,\n earningRuleID: translateData.id,\n disabled: !isStarted,\n ...typeEarningRule[type],\n buttonStatus: checkIfStarted(startDate)\n ? ACTION_BUTTON_STATUS.NORMAL\n : ACTION_BUTTON_STATUS.UNAVAILABLE,\n earningRuleType: type,\n endDate: convertDateToStamp(actionBar.endDate),\n startDate,\n isStarted,\n }\n })\n\n return {\n apiResult: data,\n parseList\n }\n}\n\n\nconst parseBadge = (\n data,\n) => {\n return data.sort((a, b) => a.required_stamps - b.required_stamps)\n}\n\nexport const getParticipateCampaignSuccessToast = ({\n points,\n tpe,\n couponTemplate,\n couponQuantity,\n inStampCampaign,\n stampCampaign,\n}) => {\n let toastMessage = \"\"\n if (NO_LEVEL) {\n toastMessage = i18n.t('campaignDetail:earnPointsNoLevelToast', {\n points: points || 0,\n });\n } else {\n toastMessage = i18n.t('campaignDetail:earnPointsToast', {\n points: points || 0,\n tpe: tpe || 0,\n });\n }\n \n\n if (couponTemplate && couponQuantity) {\n const couponTemplateTranslationData = getTranslationData(couponTemplate);\n toastMessage = i18n.t('campaignDetail:earnCouponToast', {\n couponTemplateName: couponTemplateTranslationData?.name || '',\n couponQuantity: couponQuantity || 0,\n })\n }\n\n if (inStampCampaign) {\n const stampCampaignName = stampCampaign?.data?.basic?.name || '';\n toastMessage = i18n.t('campaignDetail:stampEarnPointsToast', {\n points: points || 0,\n stampCampaignName,\n });\n\n if (couponQuantity) {\n toastMessage = i18n.t('campaignDetail:stampEarnCouponToast', {\n stampCampaignName,\n couponQuantity: couponQuantity || 0,\n })\n }\n }\n\n return toastMessage;\n}\n\n\nexport default {\n namespace: 'campaignDetail',\n state: {\n // data: {},\n // apiResult: {},\n // isLoading: false,\n // actionBar: {},\n selectedStore: {},\n },\n reducers: {\n updateState(state, { payload }) {\n console.log('@156 update state');\n return { ...state, ...payload };\n },\n updateCampaignDetail(state, { payload }) {\n const { data, campaignID } = payload;\n\n return {\n ...state,\n [campaignID]: {\n ...state[campaignID],\n ...(data.stores\n ? { data: { ...state[campaignID].data, ...data } }\n : data),\n },\n };\n },\n selectStore(state, { payload }) {\n return {\n ...state,\n selectedStore: payload,\n };\n },\n updateStampActionBarStatus (state, { payload }) {\n const { data, campaignID, earningRuleID} = payload;\n const { buttonStatus } = data;\n const { parseList } = state[campaignID].data.stampCampaigns.tasks;\n const newList = parseList.map((aData) => {\n const newData = { ...aData };\n if (newData.earningRuleID === earningRuleID) {\n newData.buttonStatus = buttonStatus;\n }\n return newData;\n });\n return {\n ...state,\n [campaignID]: {\n ...state[campaignID],\n data: {\n ...state[campaignID].data,\n stampCampaigns: {\n ...state[campaignID].data.stampCampaigns,\n tasks: {\n ...state[campaignID].data.stampCampaigns.tasks,\n parseList: newList,\n }\n }\n }\n }\n }\n },\n },\n effects: {\n *setCampaignID({ payload }, { put }) {\n const { campaignID } = payload;\n yield put(createAction('updateState')({ campaignID, isLoading: true }));\n },\n updateCampaignDetailActionBar: [\n function* ({ payload }, { call, put, select }) {\n const { campaignID } = payload;\n const details = yield select((state) => state.campaignDetail);\n if (campaignID in details) {\n const currentLanguage = yield select(\n (state) => state.users.language\n );\n const response = yield call(\n CampaignAPIHelper.getCampaignDetail,\n campaignID\n );\n if (response.status === 200) {\n const actionBarData = parseActionBarData(response.data, currentLanguage);\n yield put.resolve(\n createAction('updateState')({\n [campaignID]: {\n ...details[campaignID],\n actionBar: actionBarData,\n },\n })\n );\n }\n }\n },\n { type: 'takeLatest' },\n ],\n getCampaignDetail: [\n function* ({ payload }, { call, put, select }) {\n const { campaignID } = payload;\n\n const details = yield select((state) => state.campaignDetail);\n if (campaignID in details) {\n yield put(\n createAction('updateCampaignDetail')({\n campaignID,\n data: { isLoading: true, hasError: false },\n }),\n );\n }\n const response = yield call(\n CampaignAPIHelper.getCampaignDetail,\n campaignID,\n );\n\n if (response.status === 200) {\n const data = parseCampaignDetail(response.data, \"\");\n yield put(\n createAction('updateState')({\n [campaignID]: {\n data,\n apiResult: response.data,\n isLoading: true,\n actionBar: parseActionBarData(response.data),\n },\n }),\n );\n const { campaignType } = data;\n if (campaignType === CAMPAIGN_TYPE_STAMP) {\n yield put(\n createAction('getEarningRulesForStampCampaign')({\n campaignID,\n })\n );\n } else {\n yield put(\n createAction('updateCampaignDetail')({\n campaignID,\n data: {\n isLoading: false,\n },\n })\n )\n }\n } else {\n yield put(\n createAction('updateState')({\n hasError: true,\n })\n )\n }\n },\n { type: 'takeLatest' },\n ],\n getCampaignBlackout: [\n function* ({ payload }, { call, put, select }) {\n const { campaignID, onSuccess, onFailure } = payload;\n const response = yield call(\n CampaignAPIHelper.getCampaignBlackout,\n campaignID,\n );\n\n if (response.status === 200) {\n console.log('response.data', response.data);\n const inBlackoutPeriod = response.data?.in_blackout_period;\n if (inBlackoutPeriod) {\n onFailure();\n } else {\n onSuccess();\n }\n } else {\n onFailure();\n }\n },\n { type: 'takeLatest' },\n ],\n *getCampaignDetailAndGoRedeemPage({ payload }, { call }) {\n const { campaignID, callBackFunction } = payload;\n const response = yield call(\n CampaignAPIHelper.getCampaignDetail,\n campaignID,\n );\n if (response.status === 200) {\n const data = parseCampaignDetail(response.data, '');\n\n callBackFunction(data);\n }\n },\n verifyQrCode: [\n function* ({ payload }, { call, put, select }) {\n const { \n qrCodeString, \n campaignID, \n earningRuleID, \n inStampCampaign,\n rewardStampCount,\n } = payload;\n const customerID = yield select((state) => state.users.userInfo.uid);\n const appInstallationID = yield select(\n (state) => state.users.appInstallationID,\n );\n const startTime = Date.now();\n yield put(\n createAction('updateActionButtonStatus')({\n earningRuleID,\n campaignID,\n status: ACTION_BUTTON_STATUS.LOADING,\n inStampCampaign,\n })\n );\n const response = yield call(\n CampaignAPIHelper.participateCampaign,\n customerID,\n {\n qr_code: qrCodeString,\n app_installation: appInstallationID, // hardcoded now\n stamp_earning_rule: earningRuleID,\n campaign: campaignID,\n customer: customerID,\n },\n );\n const endTime = Date.now();\n if (endTime - startTime < 1000) {\n yield call(delay, 1000 - endTime + startTime);\n }\n if (response.status < 300) {\n yield put(\n createAction('participateCampaignSuccess')({\n earningRuleID,\n campaignID,\n inStampCampaign,\n rewardStampCount,\n responseData: response.data,\n })\n );\n } else {\n yield put(\n createAction('participateCampaignFailed')({\n campaignID,\n response,\n earningRuleID,\n inStampCampaign,\n })\n );\n }\n },\n { type: 'takeLatest' },\n ],\n verifyGPS: [\n function* ({ payload }, { call, put, select }) {\n const {\n latitude, \n longitude, \n campaignID, \n earningRuleID, \n inStampCampaign,\n rewardStampCount,\n } = payload;\n const customerID = yield select((state) => state.users.userInfo.uid);\n const appInstallationID = yield select(\n (state) => state.users.appInstallationID,\n );\n const startTime = Date.now();\n yield put(\n createAction('updateActionButtonStatus')({\n earningRuleID,\n campaignID,\n status: ACTION_BUTTON_STATUS.LOADING,\n inStampCampaign,\n })\n );\n const response = yield call(\n CampaignAPIHelper.participateCampaign,\n customerID,\n {\n check_in_latitude: latitude.toFixed(6),\n check_in_longitude: longitude.toFixed(6),\n app_installation: appInstallationID,\n stamp_earning_rule: earningRuleID,\n campaign: campaignID,\n customer: customerID,\n },\n );\n const endTime = Date.now();\n if (endTime - startTime < 1000) {\n yield call(delay, 1000 - endTime + startTime);\n }\n if (response.status < 300) {\n yield put(\n createAction('participateCampaignSuccess')({\n earningRuleID,\n campaignID,\n inStampCampaign,\n rewardStampCount,\n responseData: response.data,\n })\n );\n } else {\n yield put(\n createAction('participateCampaignFailed')({\n campaignID,\n response,\n earningRuleID,\n inStampCampaign,\n })\n );\n }\n },\n { type: 'takeLatest' },\n ],\n participateCampaignSuccess: [\n function* ({ payload }, { call, put, select }) {\n const { \n earningRuleID, \n campaignID, \n inStampCampaign,\n rewardStampCount,\n responseData,\n } = payload;\n if (earningRuleID) {\n yield put.resolve(\n createAction('updateCampaignDetailActionBar')({\n campaignID,\n })\n );\n const updateStampCountPayload = {\n campaignID,\n rewardStampCount,\n };\n yield put.resolve(createAction('campaignList/updateStampCampaignEarnedStampCount')(updateStampCountPayload));\n yield put.resolve(createAction('offerList/updateStampCampaignEarnedStampCount')(updateStampCountPayload));\n }\n yield put(\n createAction('updateActionButtonStatus')({\n earningRuleID,\n campaignID,\n status: ACTION_BUTTON_STATUS.TICK,\n inStampCampaign,\n })\n );\n yield put(createAction('users/fetchAvailablePoints')());\n if (rewardStampCount) {\n yield put({\n type: \"navBars/updateState\",\n payload: {\n toastShowing: {\n value: true,\n content: i18n.t('campaignDetail:successfullyEarnedStamp', {\n count: rewardStampCount\n }),\n },\n },\n });\n }\n if (!inStampCampaign) {\n const toastMessage = getParticipateCampaignSuccessToast({\n points: responseData.reward_points,\n tpe: responseData.reward_tpe,\n couponQuantity: responseData.reward_coupon_quantity,\n couponTemplate: responseData.reward_coupon,\n inStampCampaign: false,\n })\n yield put({\n type: \"navBars/updateState\",\n payload: {\n toastShowing: {\n value: true,\n content: toastMessage,\n },\n },\n });\n }\n },\n { type: 'takeLatest' },\n ],\n\n participateCampaignFailed: [\n function* ({ payload }, { call, put }) {\n const { campaignID, response, error, earningRuleID, inStampCampaign } = payload;\n let errorMessage = errorMessageIfFailedToGetRewards(response, error);\n yield put(\n createAction('updateActionButtonStatus')({\n earningRuleID,\n campaignID,\n status: ACTION_BUTTON_STATUS.NORMAL,\n inStampCampaign,\n })\n );\n yield put({\n type: \"navBars/updateState\",\n payload: {\n toastShowing: {\n value: true,\n content: errorMessage,\n },\n },\n });\n },\n { type: 'takeLatest' },\n ],\n\n updateActionButtonStatus: [\n function* ({ payload }, { call, put, select }) {\n const { earningRuleID, campaignID, status, inStampCampaign } = payload;\n if (inStampCampaign) {\n yield put(\n createAction('updateStampActionBarStatus')({\n campaignID,\n earningRuleID,\n data: { buttonStatus: status },\n })\n )\n } else {\n yield put(\n createAction('updateState')({\n actionButtonStatus: status,\n })\n )\n }\n },\n { type: 'takeLatest' },\n ],\n\n\n getEarningRulesForStampCampaign: [\n function* ({ payload }, { call, put, select }) {\n const { campaignID } = payload;\n const { data, actionBar } = yield select((state) => state.campaignDetail[campaignID]);\n const currentLanguage = yield select(\n (state) => state.users.language,\n );\n const response = yield call(\n CampaignAPIHelper.getEarningRulesForStamp,\n campaignID\n );\n if (response.status < 300) {\n const stampCampaigns = { tasks: parseStampTask(response.data, currentLanguage, actionBar) }\n const newData = { ...data, stampCampaigns }\n yield put.resolve(\n createAction('updateCampaignDetail')({\n campaignID,\n data: {\n data: newData,\n },\n })\n );\n yield put(\n createAction('getRewardsForStampCampaign')({\n campaignID,\n })\n );\n } else {\n yield put(\n createAction('updateCampaignDetail')({\n campaignID,\n data: {\n isLoading: false,\n },\n })\n )\n }\n },\n { type: 'takeLatest' },\n ],\n\n getRewardsForStampCampaign: [\n function* ({ payload }, { call, put, select }) {\n const { campaignID } = payload;\n const { data } = yield select((state) => state.campaignDetail[campaignID]);\n const response = yield call(\n CampaignAPIHelper.getRewardsForStampCampaign,\n campaignID,\n )\n if (response.status < 300) {\n const { stampCampaigns } = data;\n const badges = parseBadge(response.data);\n const newStampCampaign = { ...stampCampaigns, badges };\n const newData = { ...data, stampCampaigns: newStampCampaign };\n yield put(\n createAction('updateCampaignDetail')({\n campaignID,\n data: {\n data: newData,\n isLoading: false,\n },\n })\n );\n } else {\n yield put(\n createAction('updateCampaignDetail')({\n campaignID,\n data: {\n isLoading: false,\n },\n })\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n \n watcher: takeLeading(\n 'customerAcquireStampReward',\n function* ({ payload }, { call, put, select }) {\n const { campaignID, storeID, rewardID, stampRewardData, stampRewardCouponQuantity } = payload;\n const startTime = Date.now();\n yield put(\n createAction('updateState')({\n actionButtonStatus: ACTION_BUTTON_STATUS.LOADING,\n })\n );\n try {\n const response = yield call(CampaignAPIHelper.customerAcquireStampReward, campaignID, {\n store_id: storeID,\n reward_id: rewardID,\n app_installation: null,\n });\n const endTime = Date.now();\n if (endTime - startTime < 1000) {\n yield call(delay, 1000 - endTime + startTime);\n }\n if (response.status < 300) {\n // duplicate acquire will raise 409 error\n // to update badge icon status status\n yield put(\n createAction('campaignDetail/updateCampaignDetailActionBar')({\n campaignID,\n })\n );\n yield call(delay, 1000);\n const campaignDetail = yield select((state) => {\n const campaignDetails = state.campaignDetail;\n if (campaignID in campaignDetails) {\n return campaignDetails[campaignID]\n }\n return null\n });\n // console.log(\"@@stamp campaign detail:\", campaignDetail)\n const toastMessage = getParticipateCampaignSuccessToast({\n points: stampRewardData && stampRewardData.reward_type === \"POINTS\" ? stampRewardData.quantity : 0,\n tpe: 0,\n couponQuantity: stampRewardCouponQuantity || 0,\n inStampCampaign: true,\n stampCampaign: campaignDetail,\n })\n\n yield put({\n type: \"navBars/updateState\",\n payload: {\n toastShowing: {\n value: true,\n content: toastMessage,\n },\n },\n });\n\n yield put(\n createAction('updateState')({\n actionButtonStatus: ACTION_BUTTON_STATUS.MYCOUPON,\n })\n );\n } else {\n yield put(\n createAction('campaignDetail/updateCampaignDetailActionBar')({\n campaignID,\n })\n );\n yield put(\n createAction('acquireRewardFailed')({\n response,\n })\n );\n }\n } catch (error) {\n const endTime = Date.now();\n if (endTime - startTime < 1000) {\n yield call(delay, 1000 - endTime + startTime);\n }\n yield put(\n createAction('acquireRewardFailed')({\n error,\n })\n );\n }\n // Wait 1 more seconds for animation/ navigation\n yield call(delay, 1000);\n }\n ),\n\n acquireRewardFailed: [\n function* ({ payload }, { put }) {\n const { response, error } = payload;\n const errorMessage = errorMessageIfFailedToGetRewards(response, error);\n yield put(\n createAction('updateState')({\n actionButtonStatus: ACTION_BUTTON_STATUS.NORMAL,\n }),\n );\n yield put({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: errorMessage,\n },\n },\n });\n },\n ],\n\n },\n};\n","export const campaignValidation = {\n type: \"array\",\n default: [],\n items: {\n type: \"object\",\n default: {},\n required: [\n \"id\",\n \"type\",\n \"cover_photo_url\",\n \"name\",\n \"translations\",\n \"end_date\",\n \"coupon_campaign_type_required_points\",\n \"brand_section\",\n ],\n properties: {\n id: {\n type: \"string\",\n default: \"\",\n },\n type: {\n type: [\"string\"],\n default: \"\",\n },\n cover_photo_url: {\n type: [\"string\"],\n default: \"\",\n },\n is_featured: {\n type: \"boolean\",\n default: false,\n },\n is_only_for_you: {\n type: \"boolean\",\n default: false,\n },\n square_cover_photo: {\n type: [\"string\"],\n default: \"\",\n },\n name: {\n type: [\"string\"],\n default: \"\",\n },\n translations: {\n type: \"array\",\n default: [],\n },\n end_date: {\n type: \"string\",\n default: \"\",\n },\n brand_section: {\n type: \"object\",\n default: { brand: {} },\n properties: {\n should_show_brand_section: {\n type: \"boolean\",\n default: false,\n },\n brand: {\n type: \"object\",\n default: {},\n },\n },\n },\n coupon_campaign_type_required_points: {\n type: \"number\",\n default: 0,\n },\n },\n },\n};\n\nexport const campaignCheck = {\n type: \"array\",\n items: {\n type: \"object\",\n required: [\n \"id\",\n \"type\",\n \"cover_photo_url\",\n \"name\",\n \"translations\",\n \"end_date\",\n \"coupon_campaign_type_required_points\",\n ],\n properties: {\n id: {\n type: \"string\",\n },\n type: {\n type: [\"string\"],\n },\n cover_photo_url: {\n type: [\"string\"],\n },\n is_featured: {\n type: \"boolean\",\n },\n is_only_for_you: {\n type: \"boolean\",\n },\n square_cover_photo: {\n type: [\"string\"],\n },\n name: {\n type: [\"string\"],\n },\n translations: {\n type: \"array\",\n },\n end_date: {\n type: \"string\",\n },\n brand_section: {\n type: \"object\",\n properties: {\n should_show_brand_section: {\n type: \"boolean\",\n },\n brand: {\n type: \"object\",\n },\n },\n },\n coupon_campaign_type_required_points: {\n type: \"number\",\n },\n },\n },\n};\n","const Ajv = require('ajv');\n\nconst ajv = new Ajv({\n useDefaults: true,\n coerceTypes: true,\n allErrors: true,\n});\nexport const validateApi = (data, fillSchema, checkSschema) => {\n checkApiData(data, checkSschema);\n return fillDataWithDefault(data, fillSchema);\n};\n\nfunction fillDataWithDefault(data, fillSchema) {\n const validate = ajv.compile(fillSchema);\n validate(data);\n return data;\n}\n\nfunction checkApiData(data, checkSschema) {\n const validate = ajv.compile(checkSschema);\n const validateResult = validate(data);\n if (!validateResult) {\n // Toast.show(`Invalid: ${ajv.errorsText(validate.errors)}`);\n console.log(`Invalid: ${ajv.errorsText(validate.errors)}`);\n }\n}\n","import { createAction } from '../utils';\nimport { CampaignAPIHelper, BANNER_TYPES } from '../services/CampaignAPIHelper';\nimport { campaignValidation, campaignCheck } from '../services/CampaignValidation';\nimport { validateApi } from '../utils/ValidateApi';\nimport { subHeaderLink, assembleCampaign, campaignListWithUpdatedEarnedStamp } from '../utils/CampaignUtil';\nimport { hasMoreData, getDataWithDelay } from '../utils/PullAndRefreshUtil';\nimport i18n from '../I18n';\n\nconst USING_FAKE_API = false;\n\nexport default {\n namespace: 'campaignList',\n state: {\n homeOnlyForYouList: [],\n homeOnlyForYouListOriginData: [],\n homeFeatureList: [],\n homeFeaturesOriginData: [],\n homeFeaturelUrl: null,\n homeBanner: [],\n },\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n homeOnlyForYouListRefreshWithAssemble(state, { payload }) {\n const homeOnlyForYouList = assembleCampaign(payload.onlyForYou);\n return {\n ...state,\n homeOnlyForYouList,\n homeOnlyForYouListOriginData: payload.onlyForYou,\n };\n },\n homeFeatureListRefreshWithAssemble(state, { payload }) {\n const homeFeatureList = assembleCampaign(payload.features);\n console.log(\"xbxbxbxxbxb\",homeFeatureList)\n return {\n ...state,\n homeFeatureList,\n homeFeaturesOriginData: payload.features,\n homeFeaturelUrl: payload.featuresLink,\n };\n },\n homeFeatureListLoadMoreWithAssemble(state, { payload }) {\n const newFeatures = assembleCampaign(payload.features);\n return {\n ...state,\n homeFeatureList: [...state.homeFeatureList, ...newFeatures],\n homeFeaturesOriginData: [...state.homeFeaturesOriginData, ...payload.features],\n homeFeaturelUrl: payload.featuresLink,\n };\n },\n updateStampCampaignEarnedStampCount(state, { payload }) {\n return {\n ...state,\n homeOnlyForYouList: campaignListWithUpdatedEarnedStamp(state.homeOnlyForYouList, payload),\n homeFeatureList: campaignListWithUpdatedEarnedStamp(state.homeFeatureList, payload)\n }\n },\n },\n\n effects: {\n * homeOnlyForYouListRefresh(_action, { put }) {\n const homeOnlyForYouData = yield getDataWithDelay(CampaignAPIHelper.getHomeOnlyForYouData, {}, 'homeONLYFORYOU', false);\n if (homeOnlyForYouData?.status === 200) {\n const validatedApiData = validateApi(homeOnlyForYouData.data, campaignValidation, campaignCheck);\n yield put(createAction('homeOnlyForYouListRefreshWithAssemble')({ onlyForYou: validatedApiData }));\n }\n },\n * homeFeatureListRefresh(_action, { put }) {\n const featuresData = yield getDataWithDelay(CampaignAPIHelper.getHomeFeaturedData, {}, 'homeFEATURE', false);\n let nextLink = '';\n if (featuresData?.status === 200) {\n nextLink = subHeaderLink(featuresData.headers.link);\n const validatedApiData = validateApi(featuresData.data, campaignValidation, campaignCheck);\n yield put(createAction('homeFeatureListRefreshWithAssemble')({ features: validatedApiData, featuresLink: nextLink }));\n } \n yield hasMoreData('homeFEATURE', nextLink);\n },\n\n *homeFeatureListLoadMore(_action, { put, select }) {\n const featuresLoadMoreUrl = yield select((state) => state.campaignList.homeFeaturelUrl);\n const featuresData = yield getDataWithDelay(CampaignAPIHelper.getHomeFeaturedData, { pageLink: featuresLoadMoreUrl }, 'homeFEATURE', true);\n let nextLink = '';\n if (featuresData?.status === 200) {\n nextLink = subHeaderLink(featuresData.headers.link);\n const validatedApiData = validateApi(featuresData.data, campaignValidation, campaignCheck);\n yield put(createAction('homeFeatureListLoadMoreWithAssemble')({ features: validatedApiData, featuresLink: nextLink }));\n }\n yield hasMoreData('homeFEATURE', nextLink);\n },\n\n * homeBannnerRefresh(_action, { put, call }) {\n const getTranslatedBanner = (banner) => {\n const { translations } = banner;\n let coverPhotoUrl = banner.cover_photo_url;\n if (translations !== null) {\n for (let index = 0; index < translations.length; index++) {\n const translation = translations[index];\n if (i18n.language === translation.language) {\n coverPhotoUrl = translation.cover_photo_url || banner.cover_photo_url;\n break;\n }\n }\n }\n return {\n url: coverPhotoUrl,\n targetType: banner.content_type,\n targetID: banner.content_reference_id,\n id: banner.id,\n };\n }\n const response = yield call(CampaignAPIHelper.getHomeBanners);\n if (response?.status === 200) {\n const banners = response.data.slice(0, 5).map((banner) => {\n if (USING_FAKE_API) {\n return {\n url: banner,\n targetType: BANNER_TYPES.TYPE_PRODUCT,\n targetID: null,\n };\n }\n return getTranslatedBanner(banner);\n });\n yield put(\n createAction('updateState')({\n homeBanner: banners,\n })\n );\n }\n },\n\n }\n};\n","import i18n from 'I18n';\nimport axios from 'axios';\n\nimport BaseAPIHelper from 'services/BaseAPIHelper';\n\nconst CMS_DATA_BASE_URL =\n process.env.REACT_APP_DOMAIN || 'https://aillia.hkdev.motherapp.com';\nconst BASEURL = CMS_DATA_BASE_URL;\n\nconst messageAPIinstance = axios.create({\n baseURL: BASEURL,\n timeout: 5000,\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n});\n\nclass APIHelper {\n constructor() {\n this.isFakeEnvLogin = false;\n messageAPIinstance.interceptors.request.use(\n (config) => {\n if (\n this.authorizationToken !== undefined &&\n this.authorizationToken != null\n ) {\n config.headers.Authorization = `Bearer ${this.authorizationToken}`;\n config.headers.language = i18n.language;\n config.headers['Accept-Language'] = i18n.language;\n }\n return config;\n },\n (error) => Promise.reject(error),\n );\n }\n\n addAuthorization = (token) => {\n this.authorizationToken = token;\n };\n\n removeAuthorization = () => {\n this.authorizationToken = undefined;\n };\n\n markMessageRead = ({ userId, messageId }) =>\n messageAPIinstance\n .patch(`/customers/${userId}/inbox_messages/${messageId}`, {\n is_read: true,\n })\n .catch((error) => error);\n\n deleteMessages = ({ userId, messageIds }) =>\n messageAPIinstance\n .post(`/customers/${userId}/inbox_messages_deletion`, { ids: messageIds })\n .catch((error) => error);\n\n getMessages = ({ userId, pageLink }) => {\n if (pageLink) {\n return messageAPIinstance.get(pageLink).catch((error) => error);\n }\n if (!userId) {\n return null;\n }\n return messageAPIinstance\n .get(`/customers/${userId}/inbox_messages?page[number]=1&page[size]=50`)\n .catch((error) => error);\n };\n\n getMessageDetail = ({ userID, messageID }) => {\n const link = `/customers/${userID}/inbox_messages/${messageID}`;\n return messageAPIinstance.get(link).catch((error) => error);\n };\n\n getUnreadMessageCount = ({ userId }) =>\n messageAPIinstance\n // .get(`/customers/${userId}/unread_messages_count`)\n .get(`customers/unread_messages_count/?uid=${userId}`)\n .catch((error) => error);\n}\nexport const MessageAPIHelper = new APIHelper();\n","import i18n from 'I18n';\nimport { MessageAPIHelper } from 'services/MessageAPIHelper';\n\nimport { createAction } from 'utils';\nimport { subHeaderLink } from 'utils/CampaignUtil';\nimport { getMessageTime } from 'utils/DateTimeUtils';\nimport { switchOneOfSelectedList } from 'utils/MultiChoiceUtils';\nimport {\n getDataWithDelay,\n hasMoreData,\n refresh,\n} from 'utils/PullAndRefreshUtil';\n\nconst MESSAGE_LIST_KEY = 'MessageList';\n\nfunction markMessage(messageForMark, message) {\n if (messageForMark.messageId === message.messageId) {\n return messageForMark;\n }\n return message;\n}\n\nfunction checkIsAllMessageRead(messages) {\n return messages.every((message) => message.isMessageRead);\n}\n\nfunction parseMessage(message) {\n const data = {\n messageId: message.id,\n messageTitle: message.title,\n messageContent: message.content,\n messageDate: getMessageTime(message.creation_date),\n isMessageRead: message.is_read,\n messageLink: message.url,\n messagePhotoUrl: message?.photo_url,\n messageOpenTrackUrl: message.open_track_url,\n messageClickTrackUrl: message.click_track_url,\n };\n return data;\n}\n\nfunction getMessageList(messages) {\n return messages.map((message) => parseMessage(message));\n}\n\nexport default {\n namespace: 'inboxMessages',\n state: {\n isAllMessageRead: true,\n messageList: [],\n messageDetail: {},\n messageDetailLoading: false,\n activeMessageId: null,\n pageLink: '',\n unReadCount: -1,\n inboxIsEditing: false,\n inboxCheckedList: [],\n },\n reducers: {\n updateState(state, { payload }) {\n return {\n ...state,\n ...payload,\n };\n },\n\n resetMessage(state, { payload }) {\n return {\n ...state,\n ...payload,\n messageList: [],\n activeMessageId: null,\n pageLink: '',\n isAllMessageRead: true,\n };\n },\n\n assembleMessage(state, { payload }) {\n const messageList = getMessageList(payload.data);\n const { pageLink } = payload;\n const isAllMessageRead = checkIsAllMessageRead(messageList);\n return {\n ...state,\n ...payload,\n messageList,\n pageLink,\n isAllMessageRead,\n };\n },\n\n messageLoadMoreAssemble(state, { payload }) {\n const messageList = getMessageList(payload.data);\n const { pageLink } = payload;\n let { isAllMessageRead } = state;\n if (isAllMessageRead) {\n isAllMessageRead = checkIsAllMessageRead(messageList);\n }\n return {\n ...state,\n ...payload,\n messageList: [...state.messageList, ...messageList],\n pageLink,\n isAllMessageRead,\n };\n },\n\n markMessageAsRead(state, { payload }) {\n const { message } = payload;\n message.isMessageRead = true;\n const oldMessages = state.messageList;\n const newMessageList = oldMessages.map((item) =>\n markMessage(message, item),\n );\n const isAllMessageRead = checkIsAllMessageRead(newMessageList);\n return {\n ...state,\n ...payload,\n messageList: newMessageList,\n isAllMessageRead,\n };\n },\n\n switchMessageChecked(state, { payload }) {\n const { messageId } = payload;\n const { inboxCheckedList } = state;\n const newList = switchOneOfSelectedList(inboxCheckedList, messageId);\n return {\n ...state,\n inboxCheckedList: newList,\n };\n },\n\n clearMessageChecked(state, { payload }) {\n return {\n ...state,\n inboxCheckedList: [],\n };\n },\n },\n\n effects: {\n refreshMessages: [\n function* ({ payload }, { call, put, select }) {\n const userId = yield select((state) => state.users.userInfo.uid);\n const oldData = yield select(\n (state) => state.inboxMessages.messageList,\n );\n const hasOldData = oldData && oldData.length;\n yield put(createAction('resetMessage')());\n const messageApiServiceWithArgs = [\n MessageAPIHelper.getMessages,\n {\n userId,\n pageLink: null,\n },\n ];\n function* onGetDataSuccess(response, nextLink) {\n const { data } = response;\n yield put(\n createAction('assembleMessage')({\n data,\n pageLink: nextLink,\n }),\n );\n }\n yield refresh(\n MESSAGE_LIST_KEY,\n hasOldData,\n messageApiServiceWithArgs,\n onGetDataSuccess,\n );\n yield put(createAction('getUnreadMessageCount')());\n },\n { type: 'takeLatest' },\n ],\n\n messageLoadMore: [\n function* (_action, { put, select }) {\n const pageLink = yield select((state) => state.inboxMessages.pageLink);\n const data = yield getDataWithDelay(\n MessageAPIHelper.getMessages,\n { pageLink },\n MESSAGE_LIST_KEY,\n true,\n );\n let nextLink = '';\n if (data?.status === 200) {\n nextLink = subHeaderLink(data.headers.link);\n yield put(\n createAction('messageLoadMoreAssemble')({\n data: data.data,\n pageLink: nextLink,\n }),\n );\n }\n yield hasMoreData(MESSAGE_LIST_KEY, nextLink);\n yield put(createAction('getUnreadMessageCount')());\n },\n { type: 'takeLatest' },\n ],\n\n getMessageDetail: [\n function* ({ payload }, { call, put, select }) {\n const userID = yield select((state) => state.users.userInfo.uid);\n const { messageID } = payload;\n yield put(\n createAction('updateState')({\n messageDetail: {},\n messageDetailLoading: true,\n }),\n );\n const response = yield call(MessageAPIHelper.getMessageDetail, {\n userID,\n messageID,\n });\n console.log(response);\n if (response.status === 200) {\n yield put(\n createAction('updateState')({\n messageDetail: response.data,\n messageDetailLoading: false,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n markMessageRead: [\n function* ({ payload }, { call, put, select }) {\n const userId = yield select((state) => state.users.userInfo.uid);\n const { message } = payload;\n yield call(MessageAPIHelper.markMessageRead, {\n userId,\n messageId: message.messageId,\n });\n\n yield put(createAction('markMessageAsRead')({ message }));\n yield put(createAction('getUnreadMessageCount')());\n },\n { type: 'takeEvery' },\n ],\n\n removeSelectedMessages: [\n function* ({ payload }, { call, put, select }) {\n const userId = yield select((state) => state.users.userInfo.uid);\n const inboxCheckedList = yield select(\n (state) => state.inboxMessages.inboxCheckedList,\n );\n if (inboxCheckedList.length === 0) {\n yield put(\n createAction('updateState')({\n inboxIsEditing: false,\n }),\n );\n yield put(createAction('clearMessageChecked')());\n return;\n }\n const response = yield call(MessageAPIHelper.deleteMessages, {\n userId,\n messageIds: inboxCheckedList,\n });\n if (response.status === 204) {\n yield put(\n createAction('updateState')({\n inboxIsEditing: false,\n }),\n );\n yield put(createAction('clearMessageChecked')());\n yield put(createAction('refreshMessages')());\n yield put(\n createAction('navBars/updateState')({\n toastShowing: {\n value: true,\n content: i18n.t('Delete successfully'),\n toastIcon: '/coupon/copyCodeSuccessIcon/check.svg',\n },\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n getUnreadMessageCount: [\n function* (_action, { put, select, call }) {\n const userId = yield select((state) => state.users.userInfo.uid);\n const response = yield call(MessageAPIHelper.getUnreadMessageCount, {\n userId,\n });\n\n if (response.status <= 200) {\n yield put({\n type: 'updateState',\n payload: { unReadCount: response.data.unread_count },\n });\n }\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","import queryString from 'query-string';\n\nimport BaseAPIHelper from 'services/BaseAPIHelper';\n\nexport const getCustomerSubscribeDetail = (token) => {\n const url = `/customers/subscribe/subscribe-email?token=${token}`;\n return BaseAPIHelper.get({ link: url });\n};\n\nexport const updateCustomerSubscribeEmail = (input) => {\n const url = `/customers/subscribe/subscribe-email`;\n return BaseAPIHelper.post({\n link: url,\n input,\n });\n};\n\nexport const getRequireOTP = ({ uid, paramDict }) => {\n const query = queryString.stringify(paramDict, {\n encode: true,\n });\n const link = `/customers/${uid}/update-login-method?${query}`;\n return BaseAPIHelper.get({ link });\n};\n\nexport const verifyOTPAndUpdateLoginMethod = ({ uid, paramDict }) => {\n const link = `/customers/${uid}/update-login-method`;\n return BaseAPIHelper.post({ link, input: paramDict });\n};\n","import {\n getCustomerSubscribeDetail,\n updateCustomerSubscribeEmail,\n} from 'services/CustomerAPIHelper';\n\nimport { createAction } from 'utils';\n\nexport default {\n namespace: 'unsubscribe',\n state: {\n unsubscribeCustomerDetail: {},\n unsubscribeCustomerDetailLoading: false,\n unsubscribeCustomerDetailError: false,\n },\n reducers: {\n updateState(state, { payload }) {\n return {\n ...state,\n ...payload,\n };\n },\n\n assembleUnsubscribeEmailDetail(state, { payload }) {\n const { data } = payload;\n const phoneNumber =\n Number(data?.mobile_phone_number_country_code) &&\n Number(data?.mobile_phone_number_subscriber_number)\n ? `+${data.mobile_phone_number_country_code} ${data.mobile_phone_number_subscriber_number}`\n : null;\n const unsubscribeCustomerDetail = {\n uid: data?.sso_uid,\n signUpMethod: data?.sign_up_method,\n email: data?.email_address,\n phoneNumber: phoneNumber,\n directMarketingViaEmail: data?.direct_marketing_via_email,\n };\n return {\n ...state,\n unsubscribeCustomerDetail,\n unsubscribeCustomerDetailLoading: false,\n unsubscribeCustomerDetailError: false,\n };\n },\n\n resetSubscribeEmail(state, { payload }) {\n return {\n ...state,\n unsubscribeCustomerDetail: {},\n unsubscribeCustomerDetailLoading: false,\n unsubscribeCustomerDetailError: false,\n };\n },\n },\n\n effects: {\n getCustomerSubscribeEmailDetail: [\n function* ({ payload }, { call, put, select }) {\n const { token } = payload;\n yield put(\n createAction('updateState')({\n unsubscribeCustomerDetail: {},\n unsubscribeCustomerDetailLoading: true,\n unsubscribeCustomerDetailError: false,\n }),\n );\n const response = yield call(getCustomerSubscribeDetail, token);\n console.log('response.status', response.status);\n if (response.status === 200) {\n yield put(\n createAction('assembleUnsubscribeEmailDetail')({\n data: response.data,\n }),\n );\n } else {\n yield put(\n createAction('updateState')({\n unsubscribeCustomerDetailLoading: false,\n unsubscribeCustomerDetailError: true,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n updateCustomerSubscribeEmail: [\n function* ({ payload }, { call, put, select }) {\n const { token, directMarketingViaEmail, resultCallback } = payload;\n const input = {\n direct_marketing_via_email: directMarketingViaEmail,\n token,\n };\n const response = yield call(updateCustomerSubscribeEmail, input);\n if (response.status === 200) {\n yield put(\n createAction('assembleUnsubscribeEmailDetail')({\n data: response.data,\n }),\n );\n if (resultCallback) {\n yield resultCallback();\n }\n }\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","export const offerCategoryValidation = {\n type: \"array\",\n default: [],\n items: {\n type: \"object\",\n default: {},\n required: [\"id\", \"name\", \"is_active\", \"display_priority\", \"translations\"],\n properties: {\n id: {\n type: \"string\",\n default: \"\",\n },\n name: {\n type: \"string\",\n default: \"\",\n },\n is_active: {\n type: \"boolean\",\n default: true,\n },\n display_priority: {\n type: \"integer\",\n default: 0,\n },\n translations: {\n type: \"array\",\n default: [],\n },\n },\n },\n};\n\nexport const checkOfferCategory = {\n type: \"array\",\n items: {\n type: \"object\",\n required: [\"id\", \"name\", \"is_active\", \"display_priority\", \"translations\"],\n properties: {\n id: {\n type: \"string\",\n },\n name: {\n type: \"string\",\n },\n is_active: {\n type: \"boolean\",\n },\n display_priority: {\n type: \"integer\",\n },\n translations: {\n type: \"array\",\n },\n },\n },\n};\n","import { createAction } from \"../utils\";\nimport { CampaignAPIHelper } from \"../services/CampaignAPIHelper\";\nimport {\n offerCategoryValidation,\n checkOfferCategory,\n} from \"../services/OfferCategoryValidation\";\nimport { validateApi } from \"../utils/ValidateApi\";\n\nexport default {\n namespace: \"offerContainer\",\n state: {\n tabList: [],\n },\n reducers: {\n updateTabList(state, { payload }) {\n if (payload === undefined || payload === null) {\n return state;\n }\n\n const activeTabList = payload.filter(\n (tabItem) => tabItem.is_active === true\n );\n return { ...state, tabList: activeTabList };\n },\n },\n\n effects: {\n *getOfferTabData({ payload }, { call, put }) {\n const data = yield call(CampaignAPIHelper.getOfferCategories);\n let validatedApiData = [];\n if (data?.status === 200) {\n validatedApiData = validateApi(\n data.data,\n offerCategoryValidation,\n checkOfferCategory\n );\n if (payload.callBackFunction) {\n payload.callBackFunction();\n }\n }\n yield put(createAction(\"updateTabList\")(validatedApiData));\n },\n },\n};\n","import { createAction } from \"../utils\";\nimport { CampaignAPIHelper } from \"../services/CampaignAPIHelper\";\nimport {\n campaignValidation,\n campaignCheck,\n} from \"../services/CampaignValidation\";\nimport { validateApi } from \"../utils/ValidateApi\";\nimport { subHeaderLink, assembleCampaign, campaignListWithUpdatedEarnedStamp } from \"../utils/CampaignUtil\";\nimport { hasMoreData, getDataWithDelay } from \"../utils/PullAndRefreshUtil\";\n\nexport default {\n namespace: \"offerList\",\n state: {\n offerDataMap: {},\n offerLinkMap: {},\n },\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n offerListRefreshWithAssemble(state, { payload }) {\n const offerList = assembleCampaign(payload.offers);\n return {\n ...state,\n offerDataMap: {\n ...state.offerDataMap,\n [payload.storeDataKey]: offerList,\n },\n offerLinkMap: {\n ...state.offerLinkMap,\n [payload.storeDataKey]: payload.nextLink,\n },\n };\n },\n offerListLoadMoreWithAssemble(state, { payload }) {\n const newOfferList = assembleCampaign(payload.offers);\n const offerList = state.offerDataMap[payload.storeDataKey];\n return {\n ...state,\n offerDataMap: {\n ...state.offerDataMap,\n [payload.storeDataKey]: [...offerList, ...newOfferList],\n },\n offerLinkMap: {\n ...state.offerLinkMap,\n [payload.storeDataKey]: payload.nextLink,\n },\n };\n },\n updateStampCampaignEarnedStampCount(state, { payload }) {\n const oldOfferDataMap = state.offerDataMap;\n let newOfferDataMap = {};\n for (const offerKey in oldOfferDataMap) {\n newOfferDataMap[offerKey] = campaignListWithUpdatedEarnedStamp(oldOfferDataMap[offerKey], payload);\n }\n return {\n ...state,\n offerDataMap: newOfferDataMap\n }\n },\n },\n effects: {\n *loadOfferList({ payload }, { put }) {\n const { categoryId, storeDataKey } = payload;\n\n let services = CampaignAPIHelper.getOfferWithCategory;\n if (storeDataKey === \"LATEST\") {\n services = CampaignAPIHelper.getLatestOffer;\n }\n\n const data = yield getDataWithDelay(\n services,\n { offerCategoryId: categoryId },\n `offer${storeDataKey}`,\n false\n );\n let nextLink = \"\";\n if (data?.status === 200) {\n nextLink = subHeaderLink(data.headers.link);\n const offers = validateApi(\n data.data,\n campaignValidation,\n campaignCheck\n );\n\n yield put(\n createAction(\"offerListRefreshWithAssemble\")({\n offers,\n storeDataKey,\n nextLink,\n })\n );\n }\n yield hasMoreData(`offer${storeDataKey}`, nextLink);\n },\n\n *offerListLoadMore({ payload }, { put, select }) {\n const { categoryId, storeDataKey } = payload;\n const offerLinkMap = yield select(\n (state) => state.offerList.offerLinkMap\n );\n const offerLink = offerLinkMap[storeDataKey];\n let service = CampaignAPIHelper.getOfferWithCategory;\n if (storeDataKey === \"LATEST\") {\n service = CampaignAPIHelper.getLatestOffer;\n }\n\n const data = yield getDataWithDelay(\n service,\n { pageLink: offerLink, offerCategoryId: categoryId },\n `offer${storeDataKey}`,\n true\n );\n let nextLink = \"\";\n if (data?.status === 200) {\n nextLink = subHeaderLink(data.headers.link);\n const offers = validateApi(\n data.data,\n campaignValidation,\n campaignCheck\n );\n yield put(\n createAction(\"offerListLoadMoreWithAssemble\")({\n offers,\n storeDataKey,\n nextLink,\n })\n );\n }\n yield hasMoreData(`offer${storeDataKey}`, nextLink);\n },\n },\n};\n","import { createAction } from '../utils';\n\nexport default {\n namespace: 'pullrefreshandloadmore',\n state: {\n },\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n startRefresh(state, { payload }) {\n const { pageName } = payload;\n return {\n ...state,\n [`${pageName}IsRefreshing`]: true,\n [`${pageName}HasMoreData`]: true,\n [`${pageName}HasError`]: false,\n };\n },\n refreshFailed(state, { payload }) {\n const { pageName } = payload;\n return {\n ...state,\n [`${pageName}IsRefreshing`]: false,\n [`${pageName}HasMoreData`]: false,\n [`${pageName}HasError`]: true,\n };\n },\n },\n effects: {\n finishRefreshing: [function* ({ payload }, { put }) {\n yield put(createAction('updateState')({ ...payload }));\n }, { type: 'takeLatest' }],\n\n finishLoadingMore: [function* ({ payload }, { put, call }) {\n yield put(createAction('updateState')({ ...payload }));\n }, { type: 'takeLatest' }],\n },\n};\n","import {\n createAction,\n getTranslationData,\n arrayEqual,\n} from 'utils';\nimport {\n hasMoreData,\n getDataWithDelay,\n refresh,\n} from \"utils/PullAndRefreshUtil\";\nimport { subHeaderLink, assembleCampaign } from \"utils/CampaignUtil\";\nimport {\n getRegions,\n getRegionDistricts,\n getStoreCategories,\n getStoreSubcategories,\n getAllBrands,\n getStores,\n getOneStore,\n STORE_LIST_KEY,\n} from \"services/StoreAPIHelper\";\n\n\nfunction assembleCategory(data) {\n const result = data.map((category) => {\n const translation = getTranslationData(category);\n let { name } = category;\n if (translation) {\n name = translation.name;\n }\n return {\n displayPriority: category.display_priority,\n id: category.id,\n name,\n categoryId: category.category,\n };\n });\n return result.sort((a, b) =>\n a.displayPriority > b.displayPriority ? -1 : 1\n );\n}\n\nconst assembleSubcategory = (data) => {\n if (!data) {\n return [];\n }\n return data.map((response) => {\n const subcategory = assembleCategory(response.data);\n const configList = response.config.url.split('/');\n return {\n categoryId: configList[2],\n subcategories: subcategory,\n };\n });\n}\n\nfunction assembleRegion(data) {\n return data.map((item) => {\n const translation = getTranslationData(item);\n let { name } = item;\n if (translation) {\n name = translation.name;\n }\n return {\n id: item.id,\n name,\n region: item.region,\n };\n });\n}\n\nfunction assembleDistricts(data) {\n return data?.map((response) => {\n const configList = response.config.url.split('/');\n return {\n region: configList[2],\n district: assembleRegion(response.data),\n };\n });\n}\n\nfunction getCampaigns(data) {\n return assembleCampaign(data);\n}\n\nfunction assembleStore(item) {\n let { name, address, description } = item;\n const translation = getTranslationData(item);\n if (translation) {\n name = translation.name;\n address = translation.address;\n description = translation.description;\n }\n const brandTranslation = getTranslationData(item.brand);\n const brandImage = brandTranslation?.icon_url || '';\n const campaigns = getCampaigns(item.campaigns);\n const campaignsWithBrandImage = campaigns.map(campaign => ({\n ...campaign,\n brandImage,\n }))\n\n const store = {\n address,\n brandId: item.brand?.id,\n brandName: brandTranslation?.name || item.brand?.name,\n creationDate: item.creation_date,\n description,\n displayPriority: item.display_priority,\n district: item.district,\n emailAddress: item.email_address,\n id: item.id,\n lastModifiedDate: item.last_modified_date,\n latitude: item.latitude,\n longitude: item.longitude,\n name,\n photoUrl: item.photo_url,\n subcategories: assembleCategory(item.subcategories),\n phoneNumberCountryCode: item.phone_number_country_code,\n subscriberNumber: item.phone_number_subscriber_number,\n campaigns: campaignsWithBrandImage,\n };\n return store;\n}\n\nfunction assembleStores(data) {\n const result = data.map((item) => {\n return assembleStore(item);\n });\n const uniqueStore = [];\n result.forEach((item) => {\n const exist = uniqueStore.some((unique) => unique.id === item.id);\n if (!exist) {\n uniqueStore.push(item);\n }\n });\n return uniqueStore;\n}\n\nconst getDefault = () => {\n return {\n storeCategoryList: [],\n storeSubCategoryList: [],\n storeSelectedCategoryID: null,\n storeSelectedSubCategoryIDs: [],\n\n storeBrands: [],\n storeSelectedBrandIDs: [],\n\n storeRegions: [],\n storeDistricts: [],\n storeSelectedDistrictIDs: [],\n\n store: {},\n\n stores: [],\n storesLanguage: null,\n pageLink: '',\n\n detailRefreshing: false,\n campaignStore: [],\n };\n};\n\nexport default {\n namespace: \"store\",\n state: {\n ...getDefault(),\n },\n reducers: {\n updateState(state, { payload }) {\n return {\n ...state,\n ...payload,\n };\n },\n\n assembleStore(state, { payload }) {\n const store = assembleStore(payload.store);\n\n return {\n ...state,\n store: {\n ...state.store,\n [store.id]: store,\n },\n detailRefreshing: false,\n };\n },\n\n assembleStoreRefresh(state, { payload }) {\n const stores = assembleStores(payload.stores);\n return {\n ...state,\n stores,\n storesLanguage: payload.language,\n pageLink: payload.nextLink,\n };\n },\n\n assembleStoreLoadmore(state, { payload }) {\n const stores = assembleStores(payload.stores);\n return {\n ...state,\n stores: [\n ...state.stores,\n ...stores\n ],\n pageLink: payload.nextLink,\n };\n },\n\n clearData(state, { payload }) {\n return {\n ...getDefault(),\n };\n },\n },\n\n effects: {\n storeInitData: [\n function*(action, { call, put, select, all }) {\n yield all([\n put(createAction('getStoreCategories')()),\n put(createAction('getBrands')()),\n put(createAction('getStoreRegions')()),\n ]);\n },\n { type: 'takeLatest' },\n ],\n\n updateFilter: [\n function*({ payload }, { call, put, select, all }) {\n const {\n storeSelectedCategoryID,\n storeSelectedSubCategoryIDs,\n storeSelectedBrandIDs,\n storeSelectedDistrictIDs,\n } = yield select((state) => state.store);\n\n const newStoreSelectedCategoryID = payload?.storeSelectedCategoryID;\n const newStoreSelectedSubCategoryIDs = payload?.storeSelectedSubCategoryIDs;\n const newStoreSelectedBrandIDs = payload?.storeSelectedBrandIDs;\n const newStoreSelectedDistrictIDs = payload?.storeSelectedDistrictIDs;\n\n const data = {};\n if (storeSelectedCategoryID !== newStoreSelectedCategoryID) {\n data.storeSelectedCategoryID = newStoreSelectedCategoryID;\n }\n if (!arrayEqual(storeSelectedSubCategoryIDs, newStoreSelectedSubCategoryIDs)) {\n data.storeSelectedSubCategoryIDs = newStoreSelectedSubCategoryIDs;\n }\n if (!arrayEqual(storeSelectedBrandIDs, newStoreSelectedBrandIDs)) {\n data.storeSelectedBrandIDs = newStoreSelectedBrandIDs;\n }\n if (!arrayEqual(storeSelectedDistrictIDs, newStoreSelectedDistrictIDs)) {\n data.storeSelectedDistrictIDs = newStoreSelectedDistrictIDs;\n }\n if (Object.keys(data).length > 0) {\n yield put(createAction('updateState')(data));\n yield put(createAction('getStoresWithRefresh')());\n }\n },\n { type: 'takeLatest' },\n ],\n\n getStoreRegions: [\n function*(action, { call, put, select, all }) {\n const response = yield call(getRegions);\n if (!response || response.status > 300) {\n return;\n }\n const regions = assembleRegion(response.data);\n const regionIds = regions.map((item) => item.id);\n const districtResponses = yield call(\n getRegionDistricts,\n regionIds\n );\n const districts = assembleDistricts(districtResponses);\n yield put(\n createAction('updateState')({\n storeRegions: regions,\n storeDistricts: districts,\n })\n );\n },\n { type: 'takeLatest' },\n ],\n\n\n getStoreCategories: [\n function* ({ payload }, { call, put, select }) {\n const categoryResponse = yield call(getStoreCategories);\n if (!categoryResponse || categoryResponse.status > 300) {\n return;\n }\n const categories = assembleCategory(categoryResponse.data);\n console.log(\"categories\", categories);\n\n const categoryIds = categories.map((category) => category.id);\n const subCategoryResponses = yield call(\n getStoreSubcategories,\n categoryIds\n );\n if (!subCategoryResponses || subCategoryResponses.status > 300) {\n return;\n }\n const subcategories = assembleSubcategory(subCategoryResponses);\n // console.log('subcategories', subcategories);\n yield put(\n createAction('updateState')({\n storeCategoryList: categories,\n storeSubCategoryList: subcategories,\n })\n );\n },\n { type: \"takeLatest\" },\n ],\n\n getBrands: [\n function*(action, { call, put, select, all }) {\n const response = yield call(getAllBrands);\n if (!response || response.status > 300) {\n return;\n }\n const brands = response.data;\n const storeBrands = brands.map((brand, index) => {\n const translation = getTranslationData(brand);\n if (translation) {\n return {\n id: translation.id,\n name: translation.name,\n description: translation.description,\n };\n }\n return {\n id: brand.id,\n name: brand.name,\n description: brand.description,\n };\n });\n yield put(\n createAction('updateState')({\n storeBrands,\n })\n );\n },\n { type: 'takeLatest' },\n ],\n\n getStoresWithRefresh: [\n function*({ payload }, { call, put, select, all }) {\n const {\n stores,\n storeSelectedSubCategoryIDs,\n storeSelectedBrandIDs,\n storeSelectedDistrictIDs,\n } = yield select((state) => state.store);\n const language = yield select((state) => state.users.language);\n const hasOldData = stores && stores.length;\n yield put({\n type: 'updateState',\n payload: {\n stores: [],\n storesLanguage: null,\n },\n });\n\n let subcategoryIds = null;\n if (storeSelectedSubCategoryIDs?.length > 0) {\n subcategoryIds = storeSelectedSubCategoryIDs;\n }\n let districtIds = null;\n if (storeSelectedDistrictIDs?.length > 0) {\n districtIds = storeSelectedDistrictIDs;\n }\n let brandIds = null;\n if (storeSelectedBrandIDs?.length > 0) {\n brandIds = storeSelectedBrandIDs;\n }\n let isAll = false;\n\n if (\n !subcategoryIds &&\n !districtIds &&\n !brandIds\n ) {\n isAll = true;\n }\n const serviceWithArgs = [\n getStores,\n {\n isAll,\n categoryId: null,\n subcategoryIds,\n regionId: null,\n districtIds,\n brandIds,\n pageLink: '',\n },\n ];\n function* onGetDataSuccess(response, nextLink) {\n yield put(\n createAction('assembleStoreRefresh')({\n stores: response.data,\n language,\n nextLink,\n })\n );\n yield hasMoreData(STORE_LIST_KEY, nextLink);\n }\n function* onFailed() {\n }\n yield refresh(\n STORE_LIST_KEY,\n hasOldData,\n serviceWithArgs,\n onGetDataSuccess,\n onFailed\n );\n },\n { type: 'takeLatest' },\n ],\n\n getStoresWithFilterLoadMore: [\n function*({ payload }, { call, put, select, all }) {\n const pageLink = yield select((state) => state.store.pageLink);\n if (!pageLink) {\n return;\n }\n const response = yield getDataWithDelay(\n getStores,\n { pageLink },\n STORE_LIST_KEY,\n true,\n );\n let nextLink = '';\n if (response?.status === 200) {\n nextLink = subHeaderLink(response.headers.link);\n yield put(\n createAction('assembleStoreLoadmore')({\n stores: response.data,\n nextLink,\n })\n );\n }\n yield hasMoreData(STORE_LIST_KEY, nextLink);\n },\n { type: 'takeLatest' },\n ],\n\n getOneStore: [\n function*({ payload }, { call, put, select }) {\n const storeId = payload.id;\n const store = yield select((state) => state.store.store);\n yield put(\n createAction('updateState')({\n detailRefreshing: true,\n })\n );\n const response = yield call(getOneStore, storeId);\n if (response && response.status === 200) {\n yield put(\n createAction('assembleStore')({\n store: response.data,\n })\n );\n return;\n }\n yield put(\n createAction('updateState')({\n store: { ...store, [storeId]: {} },\n detailRefreshing: false,\n })\n );\n },\n { type: 'takeLatest' },\n ],\n\n },\n};\n","import i18n from 'I18n';\nimport jwtDecode from 'jwt-decode';\n\nimport BaseAPIHelper from 'services/BaseAPIHelper';\nimport { CampaignAPIHelper } from 'services/CampaignAPIHelper';\nimport { CouponAPIHelper } from 'services/CouponAPIHelper';\nimport { MessageAPIHelper } from 'services/MessageAPIHelper';\nimport { TIERS_MAP, ssoAPIHelper } from 'services/SSOAPIHelper';\nimport { TransactionAPIHelper } from 'services/TransactionAPIHelper';\nimport { UploadFileAPIHelper } from 'services/UploadFileHelper';\n\nimport { createAction, delay, getDisplayName, getTranslationData } from 'utils';\nimport { subHeaderLink } from 'utils/CampaignUtil';\nimport { NO_LEVEL } from 'utils/Config';\nimport { getCMSLanguage } from 'utils/LanguageCheckUtil';\nimport { refresh } from 'utils/PullAndRefreshUtil';\n\nconst USING_FAKE_API = false;\n\nconst ACCESS_TOKEN_EXPIRED_TIME = 3600000;\nconst EXPIRED_TIME_UPDATE_BUFFER = 10 * 60 * 1000;\n\nfunction assembleUserInfo(user) {\n return {\n address: user.address,\n company: user.company,\n birthday: user.date_of_birth,\n emailAddress: user.email_address,\n firstName: user.first_name,\n lastName: user.last_name,\n nickname: user.nickname,\n gender: user.gender,\n countryCode: user.mobile_phone_number_country_code,\n phoneNumber: user.mobile_phone_number_subscriber_number,\n referredByCampaign: user.referred_by_campaign,\n referrer: user.referrer,\n tier: TIERS_MAP.SILVER, // hard coded\n memberShipID: user.membership_id,\n hasAgreedDirectMarketing: user.has_agreed_direct_marketing,\n directMarketingViaEmail: user.direct_marketing_via_email,\n totalCouponCount: user.number_of_coupons,\n willExpireCouponCount: user.number_of_coupons_about_to_expire,\n signUpMethod: user.sign_up_method,\n allowedEditFields: user.allowed_edit_fields,\n };\n}\n\nconst parseLevelConfig = (levels, stateLevelAnimated) => {\n let animatedChecking = {};\n const configs = levels.map((level) => {\n animatedChecking[level.id] = stateLevelAnimated[level.id]\n ? stateLevelAnimated[level.id]\n : false;\n\n const translatedData = getTranslationData(level);\n return {\n name: translatedData.level_name,\n id: level.id,\n targetTPE: level.target_total_points_earned,\n nextLevelID: level.next_level_id,\n benefitUrl: translatedData.level_benefit_url,\n };\n });\n\n return { configs, animatedChecking };\n};\n\nconst setUpAPIHelperToken = (token) => {\n BaseAPIHelper.addAuthorization(token)\n CampaignAPIHelper.addAuthorization(token);\n CouponAPIHelper.addAuthorization(token);\n MessageAPIHelper.addAuthorization(token);\n TransactionAPIHelper.addAuthorization(token);\n UploadFileAPIHelper.addAuthorization(token);\n};\n\nconst pareseStampStatus = (items) =>\n items.map((item) => {\n const translatedData = getTranslationData(item);\n return {\n name: translatedData.name,\n stampCampaignId: item.id,\n earnedStamps: item.total_stamps_earned,\n expirationDate: item.end_date,\n };\n });\n\nexport default {\n namespace: 'users',\n state: {\n userInfo: {\n uid: null,\n address: null,\n company: null,\n birthday: null,\n emailAddress: null,\n firstName: null,\n lastName: null,\n nickname: null,\n gender: null,\n countryCode: null,\n phoneNumber: null,\n referredByCampaign: null,\n referrer: null,\n tier: null,\n memberShipID: null,\n hasAgreedDirectMarketing: false,\n directMarketingViaEmail: false,\n totalCouponCount: null,\n willExpireCouponCount: null,\n signUpMethod: null,\n },\n resetPasswordSuccess: false,\n resetPasswordError: '',\n deleteAccountSuccess: false,\n deleteAccountError: '',\n deleteAccountLoading: false,\n updateUserInfoSuccess: false,\n updateDirectMarketing: false,\n displayName: null,\n\n isRefreshingPoints: false,\n availablePoints: 0,\n TPE: 0,\n showLevelUpProgress: false,\n levelUpProgress: 0, \n pointsToLevelUp: null,\n showLevelRetianProgress: false,\n levelRetainProgress: 0,\n pointsToRetainLevel: null,\n lastVisiableTPE: -1,\n level: 0,\n levelName: '',\n lastVisiableLevel: -1,\n renewDate: null,\n willExpirePoints: 0,\n willExpirePointsDate: null,\n\n isLogin: false,\n accessToken: null,\n refreshToken: null,\n expiresIn: 0,\n expiresDateTime: 0,\n tokenType: 'bearer',\n refreshTokenPendingActionList: [],\n isRefreshing: false,\n appInstallationID: null,\n pushToken: null,\n agreeCookiePolicy: false,\n levelConfig: [],\n levelAnimated: {},\n loginedLevelAnimated: false,\n showOpenAppBanner: true,\n\n isShowLevel: true,\n language: \"zh-Hant\",\n\n isRefreshingStamp: false,\n totalEarnedStamps: 0,\n stampStatus: [],\n stampStatusNextLink: null,\n },\n\n reducers: {\n updateState(state, { payload }) {\n return { ...state, ...payload };\n },\n loginUser(state, { payload }) {\n if (USING_FAKE_API) {\n return {\n ...state,\n isLogin: true,\n accessToken: payload.access,\n };\n }\n const accessTokenData = {\n accessToken: payload.access,\n refreshToken: payload.refresh,\n };\n accessTokenData.expiresDateTime = Date.now() + ACCESS_TOKEN_EXPIRED_TIME;\n const decoded = jwtDecode(accessTokenData.accessToken);\n console.log('@45', decoded, {\n ...state,\n ...accessTokenData,\n isLogin: true,\n });\n return {\n ...state,\n ...accessTokenData,\n isLogin: true,\n userInfo: { ...state.userInfo, uid: decoded.sub },\n };\n },\n logoutUser(state, { payload }) {\n return {\n ...state,\n accessToken: null,\n userInfo: {},\n refreshToken: null,\n expiresIn: 0,\n expiresDateTime: 0,\n tokenType: 'bearer',\n isLogin: false,\n displayName: null,\n availablePoints: 0,\n TPE: 0,\n lastVisiableTPE: -1,\n level: 0,\n lastVisiableLevel: -1,\n levelAnimated: {},\n loginedLevelAnimated: false,\n };\n },\n userAgreeCookiePolicy(state, { payload }) {\n return {\n ...state,\n agreeCookiePolicy: true,\n };\n },\n setNewUser(state, { payload }) {\n const formatedUser = assembleUserInfo(payload.user);\n const displayName = getDisplayName({\n nickname: formatedUser.nickname,\n firstName: formatedUser.firstName,\n lastName: formatedUser.lastName,\n });\n return {\n ...state,\n userInfo: {\n ...state.userInfo,\n ...formatedUser,\n },\n displayName,\n };\n },\n updateLastVisiableLevel(state, { payload }) {\n return {\n ...state,\n lastVisiableLevel: state.level,\n lastVisiableTPE: state.TPE,\n };\n },\n },\n effects: {\n *startUp({ payload }, { call, put, select }) {\n const token = yield select((state) => state.users.accessToken);\n setUpAPIHelperToken(token);\n\n const isLogin = yield select((state) => state.users.isLogin);\n\n if (isLogin) {\n yield put(createAction('users/fetchUserInfo')());\n yield put(createAction('users/fetchAvailablePoints')());\n yield put(createAction('users/fetchLevelConfig')());\n }\n },\n // * registerApp({ payload }, { call, select, put }) {\n // const appInstallationID = yield select((state) => state.users.appInstallationID);\n // const language = yield select((state) => state.settings.language);\n // const language = 'en';\n // const customerID = yield select((state) => state.users.userInfo.memberShipID); // TODO: need update this id\n // const pushToken = yield select((state) => state.users.pushToken);\n // const enableNotification = yield select(\n // (state) => state.settings.notifications.pushNotifications,\n // );\n // const data = {\n // operation_system: Platform.OS === 'ios' ? 'IOS' : 'ANDROID',\n // language: getCMSLanguage(language),\n // is_willing_to_receive_notifications: enableNotification,\n // push_notification_token: pushToken,\n // customer: customerID,\n // ...payload,\n // };\n // console.log('@128', data);\n // if (appInstallationID === null) {\n // const response = yield call(ssoAPIHelper.registerApp, data);\n // if (response.status < 300) {\n // console.log(response.data);\n // yield put(createAction('updateState')({ appInstallationID: response.data.id }));\n // }\n // } else {\n // yield call(ssoAPIHelper.patchRegistedApp, appInstallationID, data);\n // }\n // },\n // * patchAppInstallation({ payload }, { select, put, call }) {\n // const appInstallationID = yield select((state) => state.users.appInstallationID);\n // if (appInstallationID === null) {\n // yield put(createAction('registerApp')({ ...payload }));\n // } else {\n // yield call(ssoAPIHelper.patchRegistedApp, appInstallationID, { ...payload });\n // }\n // },\n *login({ payload }, { call, put, select }) {\n const response = yield call(ssoAPIHelper.getAccessToken, payload.code);\n if (!response?.data) {\n return;\n }\n setUpAPIHelperToken(response.data.access);\n\n yield put(createAction('loginUser')({ ...response.data }));\n yield put(createAction('users/fetchUserInfo')({ needRegisteApp: true }));\n yield put(createAction('users/fetchAvailablePoints')());\n },\n *refreshToken({ payload }, { call, put, select }) {\n console.log('start refresh token');\n yield put(createAction('updateState')({ isRefreshing: true }));\n const refreshToken = yield select((state) => state.users.refreshToken);\n const response = yield call(ssoAPIHelper.refreshToken, refreshToken);\n\n if (response?.data) {\n setUpAPIHelperToken(response.data.access);\n yield put(createAction('loginUser')({ ...response.data }));\n } else {\n yield put(createAction('logout')());\n }\n\n console.log('finish refresh token');\n yield put(createAction('updateState')({ isRefreshing: false }));\n yield put(createAction('fetchUserInfo')({ fromRefresh: true }));\n yield put(createAction('fetchAvailablePoints')({ fromRefresh: true }));\n },\n *logout({ payload }, { all, call, put, select }) {\n const refreshToken = yield select((state) => state.users.refreshToken);\n yield call(ssoAPIHelper.revokeToken, refreshToken);\n CampaignAPIHelper.removeAuthorization();\n yield put({ type: 'logoutUser' });\n yield all([\n put(createAction('campaignList/clearFeatureListAndOnlyForYouList')()),\n put(createAction('offerList/clearOfferPageData')()),\n ]);\n },\n\n getTempAccessToken: [\n function* (action, { call, put, select, all }) {\n const { refreshToken } = action.payload;\n const response = yield call(ssoAPIHelper.getAccessToken, refreshToken);\n if (!response?.data) {\n return;\n }\n yield put(\n createAction('updateState')({\n tempAccessToken: response.data?.access,\n }),\n );\n },\n { type: 'takeLatest' },\n ],\n\n getUserInfoWithoutLogin: [\n function* (action, { call, put, select, all }) {\n const { accessToken } = action.payload;\n const decoded = jwtDecode(accessToken);\n const uid = decoded.sub;\n const response = yield call(ssoAPIHelper.getUserInfo, {\n accessToken,\n uid,\n });\n\n if (response.status === 200) {\n const formatedUser = assembleUserInfo(response.data);\n yield put(\n createAction('updateState')({\n unloginUserInfo: {\n ...formatedUser,\n uid,\n },\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n updateUserInfo: [\n function* (action, { call, put, select, all }) {\n const { params, isDirectMarketing } = action.payload;\n const accessToken = yield select((state) => state.users.accessToken);\n const uid = yield select((state) => state.users.userInfo.uid);\n const response = yield call(ssoAPIHelper.updateUserInfo, {\n params,\n accessToken,\n uid,\n });\n if (response?.status === 200) {\n yield all([\n put(createAction('setNewUser')({ user: response.data })),\n put(createAction('updateState')(\n isDirectMarketing ? { updateDirectMarketing: true } : { updateUserInfoSuccess: true }\n )),\n ]);\n delay(1000);\n yield put(\n createAction('updateState')(\n isDirectMarketing ? { updateDirectMarketing: false } : { updateUserInfoSuccess: false }\n ));\n return;\n } else if (\n response?.response?.data?.email_address?.[0] === 'email must be unique'\n || response?.response?.data?.email_address?.[0] === '具有 email address 的 customer 已存在。'\n ) {\n yield put(\n createAction('userInfoTemp/updateState')({\n emailAddress: {\n error: true,\n errorResource: 'account_email_bound',\n errorMessage: i18n.t('account_email_bound'),\n },\n }),\n );\n }\n // Toast.show(i18n.t('ticket_no_internet_connection'));\n },\n { type: 'takeLatest' },\n ],\n\n resetPassword: [\n function* (action, { call, put, select }) {\n const { password } = action.payload;\n const accessToken = yield select((state) => state.users.accessToken);\n const uid = yield select((state) => state.users.userInfo.uid);\n const response = yield call(ssoAPIHelper.resetPassword, {\n params: { new_password: password },\n accessToken,\n uid,\n });\n if (response.status === 200) {\n yield put(\n createAction('updateState')({ resetPasswordSuccess: true }),\n );\n delay(1000);\n yield put(\n createAction('updateState')({ resetPasswordSuccess: false }),\n );\n } else {\n const { data } = response;\n let detail = data?.detail || '';\n if (detail === 'New password is same with origin.') {\n detail = 'account_same_password';\n } else {\n detail = 'account_failed_to_change_password';\n }\n yield put(\n createAction('updateState')({\n resetPasswordError: detail,\n resetPasswordSuccess: false,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n fetchUserInfo: [\n function* ({ payload }, { call, put, select }) {\n const isLogin = yield select((state) => state.users.isLogin);\n if (!isLogin) {\n return;\n }\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const response = yield call(ssoAPIHelper.getUserInfo, {\n accessToken,\n uid,\n });\n if (response.status === 200) {\n yield put(createAction('setNewUser')({ user: response.data }));\n }\n if (payload && payload.needRegisteApp && !USING_FAKE_API) {\n yield put(createAction('registerApp')());\n }\n yield put(createAction('inboxMessages/refreshMessages')());\n },\n { type: 'takeLatest' },\n ],\n\n fetchAvailablePoints: [\n function* (action, { call, put, select }) {\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const response = yield call(ssoAPIHelper.getPointsStatus, {\n accessToken,\n uid,\n });\n yield put(createAction('updateState')({ isRefreshingPoints: true }));\n\n if (response.status === 200) {\n const latestAvaiablePoints = response.data.balance;\n const currentTPE = response.data.total_points_earned;\n const currentLevel = response.data.current_level;\n const currentLevelName = getTranslationData(\n response.data.current_level_data,\n ).level_name;\n const renewDate = response.data.current_level_renew_datetime;\n const lastExpirePoints = response.data.points_about_to_expire;\n const lastExpirePointsDate = response.data.points_coming_expiry_date;\n const pointsToLevelUp = response.data.points_to_level_up;\n const totalLevelUpRequiredPoints = response.data.total_level_up_required_points;\n let showLevelUpProgress = true;\n let levelUpProgress = 0;\n if (pointsToLevelUp === null) {\n showLevelUpProgress = false;\n } else {\n levelUpProgress = currentTPE / totalLevelUpRequiredPoints;\n if (levelUpProgress > 1) {\n levelUpProgress = 1;\n }\n }\n const currentLevelRetainRequired = response.data?.current_level_data?.retain_required_value\n const pointsToRetainLevel = response.data.points_to_retain_level;\n let showLevelRetianProgress = true;\n let levelRetainProgress = 0;\n let currentSpendingToRetain = 0\n if (pointsToRetainLevel !== null && pointsToRetainLevel > 0 && currentLevelRetainRequired) {\n currentSpendingToRetain = currentLevelRetainRequired - pointsToRetainLevel\n levelRetainProgress = currentSpendingToRetain / currentLevelRetainRequired;\n } else {\n showLevelRetianProgress = false;\n }\n // console.log(\"@@368: \", currentLevelName, currentLevel);\n yield put(\n createAction('updateState')({\n availablePoints: latestAvaiablePoints,\n TPE: currentTPE,\n level: currentLevel,\n levelName: currentLevelName,\n isRefreshingPoints: false,\n renewDate,\n willExpirePoints: lastExpirePoints,\n willExpirePointsDate: lastExpirePointsDate,\n showLevelUpProgress,\n levelUpProgress, \n pointsToLevelUp,\n showLevelRetianProgress,\n levelRetainProgress, \n pointsToRetainLevel,\n currentSpendingToRetain,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n *refreshTokenIfNeed({ payload }, { put, select, all, call }) {\n const isLogin = yield select((state) => state.users.isLogin);\n const expiresDateTime = yield select(\n (state) => state.users.expiresDateTime,\n );\n\n const refreshTokenPendingActionList = yield select(\n (state) => state.users.refreshTokenPendingActionList,\n );\n\n // check user is active, if not will auto logout\n if (isLogin && payload.customer !== null) {\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const response = yield call(ssoAPIHelper.getUserInfo, {\n accessToken,\n uid,\n });\n if (response.data && response.data.is_forced_inactive) {\n yield put(createAction('logout')({ refreshTokenPendingActionList }));\n return;\n }\n }\n\n const currentDateTime = Date.now();\n\n if (\n isLogin &&\n expiresDateTime - currentDateTime <= EXPIRED_TIME_UPDATE_BUFFER\n ) {\n // const refreshTokenPendingActionList = yield select(\n // (state) => state.users.refreshTokenPendingActionList\n // );\n refreshTokenPendingActionList.push(payload.action);\n yield put(\n createAction('updateState')({ refreshTokenPendingActionList }),\n );\n\n const tokenIsRefreshing = yield select(\n (state) => state.users.isRefreshing,\n );\n\n if (!tokenIsRefreshing) {\n yield all([put.resolve({ type: 'refreshToken', payload })]);\n\n const redoActions = yield select(\n (state) => state.users.refreshTokenPendingActionList,\n );\n for (const action of redoActions) {\n const refreshPayload = payload || {};\n refreshPayload.fromRefresh = true;\n yield put(createAction(action)(refreshPayload));\n }\n\n yield put(\n createAction('updateState')({ refreshTokenPendingActionList: [] }),\n );\n }\n } else {\n const refreshPayload = payload || {};\n refreshPayload.fromRefresh = true;\n\n yield put(createAction(payload.action)(refreshPayload));\n }\n },\n\n startLogin: [\n function* (action, { call, put, select }) {\n yield call(ssoAPIHelper.getLoginWebUri(getCMSLanguage('en')));\n // if (USING_FAKE_API) {\n // navigate('LoginTest');\n // return;\n // }\n // navigate('Login');\n },\n { type: 'takeLatest' },\n ],\n\n fetchLevelConfig: [\n function* (action, { call, put, select }) {\n if (NO_LEVEL) {\n return;\n }\n try {\n const response = yield call(ssoAPIHelper.getLevelConfig);\n if (response?.status === 200) {\n const stateLevelAnimated = yield select(\n (state) => state.users.levelAnimated,\n );\n\n const data = parseLevelConfig(response.data, stateLevelAnimated);\n\n yield put(\n createAction('updateState')({\n levelConfig: data.configs,\n levelAnimated: data.animatedChecking,\n }),\n );\n }\n } catch (error) {\n console.log('Get level error', error);\n }\n },\n { type: 'takeLatest' },\n ],\n\n refreshPointStatus: [\n function* (action, { call, put, select }) {\n yield put(\n createAction('updateState')({\n isRefreshingPointsStatus: true,\n }),\n );\n yield put(createAction('fetchAvailablePoints')());\n const accessToken = yield select((state) => state.users.accessToken);\n const uid = yield select((state) => state.users.userInfo.uid);\n const oldData = yield select((state) => state.users.pointStatus);\n const hasOldData = oldData && oldData.length;\n const couponApiServiceWithArgs = [\n ssoAPIHelper.getPointStatus,\n accessToken,\n uid,\n ];\n function* onGetPointStatusSuccess(response, nextLink) {\n const { data } = response;\n console.log('@457', data);\n yield put(\n createAction('updateState')({\n pointStatus: data,\n pointStatusNextLink: nextLink,\n isRefreshingPointsStatus: false,\n }),\n );\n }\n yield refresh(\n 'PointStatus',\n hasOldData,\n couponApiServiceWithArgs,\n onGetPointStatusSuccess,\n );\n },\n { type: 'takeLatest' },\n ],\n\n loadMorePointStatus: [\n function* (action, { call, put, select }) {\n const nextLink = yield select(\n (state) => state.users.pointStatusNextLink,\n );\n if (nextLink === null || nextLink === '') {\n return;\n }\n const accessToken = yield select((state) => state.users.accessToken);\n const uid = yield select((state) => state.users.userInfo.uid);\n const oldData = yield select((state) => state.users.pointStatus);\n const response = yield call(\n ssoAPIHelper.getPointStatus,\n accessToken,\n uid,\n nextLink,\n );\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n PointStatusIsLoadingMore: false,\n }),\n );\n if (response && response?.status === 200) {\n const { data, headers } = response;\n const newNextLink = subHeaderLink(headers.link);\n if (newNextLink) {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n PointStatusHasMoreData: true,\n }),\n );\n } else {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n PointStatusHasMoreData: false,\n }),\n );\n }\n const pointStatus = [...oldData, ...data];\n yield put(\n createAction('updateState')({\n pointStatus,\n pointStatusNextLink: newNextLink,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n fetchTotalEarnedStamps: [\n function* (action, { call, put, select }) {\n const { accessToken, uid } = yield select((state) => ({\n accessToken: state.users.accessToken,\n uid: state.users.userInfo.uid,\n }));\n\n const response = yield call(ssoAPIHelper.getTotalEarnedStamps, {\n accessToken,\n uid,\n });\n if (response.status === 200) {\n const totalEarnedStamps = response.data.count;\n yield put(\n createAction('updateState')({\n totalEarnedStamps,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n refreshStampStatus: [\n function* (action, { put, select }) {\n yield put(\n createAction('updateState')({\n isRefreshingStamp: true,\n }),\n );\n yield put(createAction('fetchTotalEarnedStamps')());\n const { accessToken, uid, oldData } = yield select((state) => ({\n accessToken: state.users.accessToken,\n uid: state.users.userInfo.uid,\n oldData: state.users.stampStatus,\n }));\n\n const hasOldData = oldData && oldData.length;\n const stampApiServiceWithArgs = [\n ssoAPIHelper.getStampStatus,\n { accessToken, uid },\n ];\n function* onGetStampStatusSuccess(response, nextLink) {\n const data = pareseStampStatus(response.data);\n yield put(\n createAction('updateState')({\n isRefreshingStamp: false,\n stampStatus: data,\n stampStatusNextLink: nextLink,\n }),\n );\n }\n yield refresh(\n 'StampStatus',\n hasOldData,\n stampApiServiceWithArgs,\n onGetStampStatusSuccess,\n );\n },\n { type: 'takeLatest' },\n ],\n\n loadMoreStampStatus: [\n function* (action, { call, put, select }) {\n const nextLink = yield select(\n (state) => state.users.stampStatusNextLink,\n );\n if (nextLink === null || nextLink === '') {\n return;\n }\n const { accessToken, uid, oldData } = yield select((state) => ({\n accessToken: state.users.accessToken,\n uid: state.users.userInfo.uid,\n oldData: state.users.stampStatus,\n }));\n\n const response = yield call(ssoAPIHelper.getStampStatus, {\n accessToken,\n uid,\n pageLink: nextLink,\n });\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n StampStatusIsLoadingMore: false,\n }),\n );\n if (response && response?.status === 200) {\n const { data: originalData, headers } = response;\n const newNextLink = subHeaderLink(headers.link);\n if (newNextLink) {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n StampStatusHasMoreData: true,\n }),\n );\n } else {\n yield put(\n createAction('pullrefreshandloadmore/updateState')({\n StampStatusHasMoreData: false,\n }),\n );\n }\n const parsedData = pareseStampStatus(originalData);\n const stampStatus = [...oldData, ...parsedData];\n yield put(\n createAction('updateState')({\n stampStatus,\n stampStatusNextLink: newNextLink,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n fetchRewardStatus: [\n function* (action, { put }) {\n yield put(createAction('fetchLevelConfig')());\n yield put(createAction('refreshPointStatus')());\n yield put(createAction('refreshStampStatus')());\n yield put(\n createAction('myCoupon/refreshMyCoupon')({ forReward: true }),\n );\n },\n { type: 'takeLatest' },\n ],\n clearRewardStatus: [\n function* (action, { put }) {\n yield put(createAction('myCoupon/resetState')());\n },\n { type: 'takeLatest' },\n ],\n shopifyCreatePointToCash: [\n function* (action, { call, put, select }) {\n const { cashDollarAmount, afterSuccessAction, afterAction } =\n action.payload;\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const response = yield call(\n ssoAPIHelper.shopifyCreatePointToCash,\n accessToken,\n cashDollarAmount,\n uid,\n );\n\n if (response?.status < 300) {\n const { data } = response;\n yield put(createAction('fetchAvailablePoints')());\n afterSuccessAction(data?.code);\n }\n afterAction && afterAction();\n },\n { type: 'takeLatest' },\n ],\n createPointToCash: [\n function* (action, { call, put, select }) {\n const { cashDollarAmount, successAction, afterAction } = action.payload;\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const response = yield call(\n ssoAPIHelper.createPointToCash,\n accessToken,\n cashDollarAmount,\n uid,\n );\n\n if (response?.status < 300) {\n const { data } = response;\n yield put(\n createAction('updateState')({\n cashCodeKey: data?.cash_dollar_key,\n }),\n );\n yield put(createAction('fetchAvailablePoints')());\n successAction && successAction();\n } else {\n const errorMessage = response.response?.data?.detail;\n yield put({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: errorMessage,\n },\n },\n });\n }\n afterAction && afterAction();\n },\n { type: 'takeLatest' },\n ],\n cancelPointToCash: [\n function* (action, { call, put, select }) {\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const cashCodeKey = yield select((state) => state.users.cashCodeKey);\n const response = yield call(\n ssoAPIHelper.cancelPointToCash,\n accessToken,\n uid,\n cashCodeKey,\n );\n\n if (response?.status < 300) {\n yield put(\n createAction('updateState')({\n cashCodeKey: '',\n }),\n );\n yield put(createAction('fetchAvailablePoints')());\n }\n },\n { type: 'takeLatest' },\n ],\n refreshPointToCash: [\n function* (action, { call, put, select }) {\n const { failedAction } = action.payload;\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const cashCodeKey = yield select((state) => state.users.cashCodeKey);\n const response = yield call(\n ssoAPIHelper.refreshPointToCash,\n accessToken,\n uid,\n cashCodeKey,\n );\n\n if (response?.status < 300) {\n yield put(createAction('fetchAvailablePoints')());\n } else {\n failedAction && failedAction();\n const errorMessage = response.response?.data?.detail;\n yield put({\n type: 'navBars/updateState',\n payload: {\n toastShowing: {\n value: true,\n content: errorMessage,\n },\n },\n });\n }\n },\n { type: 'takeLatest' },\n ],\n\n deleteUserAccount: [\n function* (action, { call, put, select }) {\n yield put(createAction('updateState')({ deleteAccountLoading: true }));\n const { password } = action.payload;\n const accessToken = yield select((state) => state.users.accessToken);\n const uid = yield select((state) => state.users.userInfo.uid);\n const response = yield call(ssoAPIHelper.deleteUserAccount, {\n params: { password },\n accessToken,\n uid,\n });\n if (response?.status < 300) {\n yield put(\n createAction('updateState')({\n deleteAccountSuccess: true,\n deleteAccountLoading: false,\n }),\n );\n } else {\n const detail = 'account_password_incorrect';\n yield put(\n createAction('updateState')({\n deleteAccountError: detail,\n deleteAccountSuccess: false,\n deleteAccountLoading: false,\n }),\n );\n }\n },\n { type: 'takeLatest' },\n ],\n\n fetchGiftCardInfo: [\n function* (action, { call, put, select }) {\n const { token, code, successAction, failedAction } = action.payload;\n const response = yield call(ssoAPIHelper.getGiftCardInfo, {\n accessToken: token,\n code,\n });\n if (response?.status < 300) {\n successAction && successAction(response?.data);\n } else {\n failedAction && failedAction(response.response?.data?.detail);\n }\n },\n { type: 'takeLatest' },\n ],\n\n redeemGiftCard: [\n function* (action, { call, put, select }) {\n const { token, code, uid, successAction, failedAction } =\n action.payload;\n const response = yield call(ssoAPIHelper.redeemGiftCard, {\n accessToken: token,\n uid,\n code,\n });\n if (response?.status < 300) {\n successAction && successAction();\n } else {\n failedAction && failedAction();\n }\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","import i18n from 'I18n';\nimport moment from 'moment';\n\nimport {\n getRequireOTP,\n verifyOTPAndUpdateLoginMethod,\n} from 'services/CustomerAPIHelper.js';\nimport { ssoAPIHelper } from 'services/SSOAPIHelper';\n\nimport { createAction } from 'utils';\nimport { CUSTOMER_SIGN_UP_METHOD, GenderType } from 'utils/CustomEnums';\nimport {\n getMyAccountUserBirthdayForDisplay,\n getMyAccountUserBirthdayForUpdate,\n} from 'utils/DateTimeUtils';\n\nconst allNumber = (data) => {\n const isNum = `${data}`.match(/^[0-9]+$/);\n return isNum;\n};\n\nfunction validateEmail(email) {\n if (!email) {\n return false;\n }\n const re = /\\S+@\\S+\\.\\S+/;\n return re.test(email);\n}\n\nconst getInitialState = () => {\n return {\n verifyChallenge: null,\n verifyError: null,\n firstName: {\n error: false,\n errorMessage: '',\n },\n lastName: {\n error: false,\n errorMessage: '',\n },\n loginMethodContact: {\n error: false,\n errorMessage: '',\n },\n gender: {\n error: false,\n errorMessage: '',\n },\n birthday: {\n error: false,\n errorMessage: '',\n },\n };\n};\n\nexport default {\n namespace: 'userInfoTemp',\n state: getInitialState(),\n\n reducers: {\n updateState(state, { payload }) {\n return {\n ...state,\n ...payload,\n };\n },\n invalidContractFormat(state) {\n return {\n ...state,\n loginMethodContact: {\n error: true,\n errorMessage: i18n.t('setting_account_format_error'),\n },\n };\n },\n duplicateContactError(state) {\n return {\n ...state,\n loginMethodContact: {\n error: true,\n errorMessage: i18n.t('setting_account_contact_duplicate_error'),\n },\n };\n },\n overSendLimitError(state) {\n return {\n ...state,\n loginMethodContact: {\n error: true,\n errorMessage: i18n.t('account_verify_over_send_limit_error'),\n },\n };\n },\n failSendOTP(state) {\n return {\n ...state,\n loginMethodContact: {\n error: true,\n errorMessage: i18n.t('account_verify_fail_error'),\n },\n };\n },\n clearState() {\n return getInitialState();\n },\n },\n\n effects: {\n verifyOTPSentToast: [\n function* ({ payload }, { call, put, select, all }) {\n const { email, countryCode, nationalNumber, method } = payload;\n let content = i18n.t('verify_contact_otp_sent');\n if (method === CUSTOMER_SIGN_UP_METHOD.MOBILE_PHONE_NUMBER) {\n content = content + `+${countryCode} ${nationalNumber}`;\n } else if (method === CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS) {\n content = content + email;\n } else {\n return;\n }\n yield put(\n createAction('navBars/updateState')({\n toastShowing: {\n value: true,\n content,\n },\n }),\n );\n },\n { type: 'takeLatest' },\n ],\n\n verifyOTPSentToast: [\n function* ({ payload }, { call, put, select, all }) {\n const { email, countryCode, nationalNumber, method } = payload;\n let content = i18n.t('verify_contact_otp_sent');\n if (method === CUSTOMER_SIGN_UP_METHOD.MOBILE_PHONE_NUMBER) {\n content = content + `+${countryCode} ${nationalNumber}`;\n } else if (method === CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS) {\n content = content + email;\n } else {\n return;\n }\n yield put(\n createAction('navBars/updateState')({\n toastShowing: {\n value: true,\n content,\n },\n }),\n );\n },\n { type: 'takeLatest' },\n ],\n\n updateSuccessToast: [\n function* ({ payload }, { call, put, select, all }) {\n yield put(\n createAction('navBars/updateState')({\n toastShowing: {\n value: true,\n content: i18n.t('successfullyUpdated'),\n },\n }),\n );\n },\n { type: 'takeLatest' },\n ],\n\n noNetworkToast: [\n function* ({ payload }, { call, put, select, all }) {\n yield put(\n createAction('navBars/updateState')({\n toastShowing: {\n value: true,\n content: i18n.t('ticket_no_internet_connection'),\n },\n }),\n );\n },\n { type: 'takeLatest' },\n ],\n\n updateUserDirectMarketing: [\n function* ({ payload }, { call, put, select, all }) {\n const { hasAgreedDirectMarketing, directMarketingViaEmail } = payload;\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const params = {\n has_agreed_direct_marketing: hasAgreedDirectMarketing,\n direct_marketing_via_email: directMarketingViaEmail,\n };\n const response = yield call(ssoAPIHelper.updateUserInfo, {\n params,\n accessToken,\n uid,\n });\n console.log(\n 'r@MyAccountDirectMarketing',\n response.status,\n response.data,\n );\n if (response?.status === 200) {\n yield put(createAction('users/setNewUser')({ user: response.data }));\n yield put(createAction('updateSuccessToast')());\n }\n },\n { type: 'takeLatest' },\n ],\n\n updateUserInfoOneField: [\n function* ({ payload }, { call, put, select, all }) {\n const { serverKey, modelKey, value, successCallback } = payload;\n if (!serverKey || !modelKey || !value) {\n return;\n }\n const uid = yield select((state) => state.users.userInfo.uid);\n const accessToken = yield select((state) => state.users.accessToken);\n const params = {};\n params[serverKey] = value;\n const response = yield call(ssoAPIHelper.updateUserInfo, {\n params,\n accessToken,\n uid,\n });\n console.log('updateUserInfoOneField', response.status, response.data);\n if (response?.status === 200) {\n yield put(createAction('users/setNewUser')({ user: response.data }));\n yield put(createAction('updateSuccessToast')());\n if (successCallback) {\n successCallback();\n }\n } else if (response?.status === 400) {\n const stateDict = {};\n stateDict[modelKey] = {\n error: true,\n errorMessage: response?.data?.[serverKey]?.[0],\n };\n yield put(createAction('updateState')(stateDict));\n } else {\n yield put(createAction('noNetworkToast')());\n }\n },\n { type: 'takeLatest' },\n ],\n\n requireOTPForUpdateLoginMethod: [\n function* ({ payload }, { call, put, select, all }) {\n const {\n email,\n countryCode,\n nationalNumber,\n method,\n successCallback,\n failureCallback,\n } = payload;\n const mobile = `+${countryCode}${nationalNumber}`;\n const uid = yield select((state) => state.users.userInfo.uid);\n yield put(createAction('clearState')());\n const data = {\n method,\n };\n if (method === CUSTOMER_SIGN_UP_METHOD.MOBILE_PHONE_NUMBER) {\n if (!allNumber(nationalNumber)) {\n yield put(createAction('invalidContractFormat')());\n if (failureCallback) {\n failureCallback();\n }\n return;\n }\n data.mobile = mobile;\n } else if (method === CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS) {\n if (!validateEmail(email)) {\n yield put(createAction('invalidContractFormat')());\n if (failureCallback) {\n failureCallback();\n }\n return;\n }\n data.email = email;\n } else {\n console.log('requireOTPForUpdateLoginMethod method', method);\n return;\n }\n console.log('requireOTPForUpdateLoginMethod', data);\n const response = yield call(getRequireOTP, {\n paramDict: data,\n uid,\n });\n console.log(\n 'requireOTPForUpdateLoginMethod',\n response.status,\n response.data,\n );\n if (response.status === 201) {\n const verifyChallenge = response.data.result.verify_challenge;\n console.log('requireOTPForUpdateLoginMethod', verifyChallenge);\n yield put(\n createAction('updateState')({\n verifyChallenge: verifyChallenge,\n }),\n );\n yield put(\n createAction('verifyOTPSentToast')({\n method,\n email,\n countryCode,\n nationalNumber,\n }),\n );\n if (successCallback) {\n successCallback();\n }\n } else {\n const { result } = response.data;\n // \"over_send_limit_error\", \"user_already_exist\", \"send_verify_code_failed\"\n if (result === 'user_already_exist') {\n yield put(createAction('duplicateContactError')());\n } else if (result === 'over_send_limit_error') {\n yield put(createAction('overSendLimitError')());\n } else {\n // 'send_verify_code_failed', other error\n yield put(createAction('failSendOTP')());\n }\n if (failureCallback) {\n failureCallback(result);\n }\n }\n },\n { type: 'takeLatest' },\n ],\n\n verifyOTPAndUpdateLoginMethod: [\n function* ({ payload }, { call, put, select, all }) {\n const {\n method,\n email,\n countryCode,\n nationalNumber,\n verifyCode,\n successCallback,\n failureCallback,\n } = payload;\n const mobile = `+${countryCode}${nationalNumber}`;\n const uid = yield select((state) => state.users.userInfo.uid);\n const verifyChallenge = yield select(\n (state) => state.userInfoTemp.verifyChallenge,\n );\n const data = {\n method,\n };\n if (method === CUSTOMER_SIGN_UP_METHOD.MOBILE_PHONE_NUMBER) {\n data.mobile = mobile;\n } else if (method === CUSTOMER_SIGN_UP_METHOD.EMAIL_ADDRESS) {\n data.email = email;\n } else {\n console.log('verifyOTPAndUpdateLoginMethod', method);\n return;\n }\n data.verify_code = verifyCode;\n data.verify_challenge = verifyChallenge;\n console.log('verifyOTPAndUpdateLoginMethod', data);\n const response = yield call(verifyOTPAndUpdateLoginMethod, {\n paramDict: data,\n uid,\n });\n console.log(\n 'verifyOTPAndUpdateLoginMethod',\n response.status,\n response.data,\n );\n if (response.status === 200) {\n yield put(createAction('users/fetchUserInfo')());\n yield put(createAction('updateSuccessToast')());\n if (successCallback) {\n successCallback();\n }\n } else {\n const { result } = response.data;\n // \"update_login_method_already_registered\", \"error_challange_code\", \"error_verify_code\"\n if (result === 'update_login_method_already_registered') {\n yield put(createAction('duplicateContactError')());\n } else {\n // 'error_challange_code', 'error_verify_code', other error\n if (method === CUSTOMER_SIGN_UP_METHOD.MOBILE_PHONE_NUMBER) {\n yield put(\n createAction('updateState')({\n verifyError: i18n.t('setting_account_mobile_otp_error'),\n }),\n );\n } else {\n yield put(\n createAction('updateState')({\n verifyError: i18n.t('setting_account_email_otp_error'),\n }),\n );\n }\n }\n if (failureCallback) {\n failureCallback(result);\n }\n }\n },\n { type: 'takeLatest' },\n ],\n },\n};\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\n/* eslint-disable */\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost'\n // [::1] is the IPv6 localhost address.\n || window.location.hostname === '[::1]'\n // 127.0.0.0/8 are considered localhost for IPv4.\n || window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,\n ),\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service '\n + 'worker. To learn more, visit https://bit.ly/CRA-PWA',\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all '\n + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then((response) => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404\n || (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.',\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then((registration) => {\n registration.unregister();\n })\n .catch((error) => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport Cookies from 'cookies-js';\nimport { persistReducer, persistStore } from 'redux-persist';\nimport { CookieStorage } from 'redux-persist-cookie-storage';\nimport { createFilter } from 'redux-persist-transform-filter';\nimport { PersistGate } from 'redux-persist/integration/react';\nimport autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';\n\nimport App from './App';\nimport dva from './Dva';\nimport ActivityLogsModel from './models/ActivityLogs';\nimport BuyCouponModel from './models/BuyCoupon';\nimport CampaignModel from './models/Campaign';\nimport CampaignListModel from './models/HomeFeaturesAndOnlyForYou';\nimport InboxMessagesModel from './models/InboxMessagesModel';\nimport UnsubscribeModel from './models/UnsubscribeModel';\nimport MyCouponModel from './models/MyCoupon';\nimport NavBarModel from './models/NavBarModel';\nimport OfferContainerModel from './models/OfferContainer';\nimport OfferListModel from './models/OfferList';\nimport PullRefreshAndLoadMoreModel from './models/PullRefreshAndLoadMore';\nimport RecordsModel from './models/Records';\nimport StoreModel from './models/Store';\nimport UserModel from './models/User';\nimport UserInfoTempModel from './models/UserInfoTemp';\nimport * as serviceWorker from './serviceWorker';\nimport { createAction } from './utils';\n\nimport './index.css';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport './frontend_common/Font.scss'\nimport './frontend_common/ThemeConfig.scss';\n\nconst midwares = [];\n\nconst usersFilter = createFilter('users', [\n 'accessToken',\n 'refreshToken',\n 'expiresDateTime',\n 'userInfo',\n 'availablePoints',\n 'isLogin',\n 'displayName',\n 'agreeCookiePolicy',\n 'lastVisiableLevel',\n 'lastVisiableTPE',\n 'levelAnimated',\n 'loginedLevelAnimated',\n 'language',\n 'showOpenAppBanner',\n]);\n\nconst persistConfig = {\n key: 'root',\n storage: new CookieStorage(Cookies),\n whitelist: ['users'],\n stateReconciler: autoMergeLevel2,\n transforms: [usersFilter],\n};\n\nconst app = dva({\n initialState: {},\n models: [\n CampaignModel,\n OfferContainerModel,\n OfferListModel,\n PullRefreshAndLoadMoreModel,\n MyCouponModel,\n CampaignListModel,\n UserModel,\n BuyCouponModel,\n InboxMessagesModel,\n UnsubscribeModel,\n StoreModel,\n UserInfoTempModel,\n ActivityLogsModel,\n NavBarModel,\n RecordsModel,\n ],\n onReducer: (rootReducer) => persistReducer(persistConfig, rootReducer),\n // extraReducers: { router: routerReducer },\n onAction: midwares,\n onError(e) {\n console.log('onError', e);\n },\n});\n\nconst persistor = persistStore(app.getStore(), null, () => {\n app.getStore().dispatch(createAction('users/startUp')());\n});\nconst DvaApp = app.start(\n 
\n 
\n 
\n 
\n
\n