\n
\n\n \n \n
\n\n \n
\n\n \n SignInWithFacebook()}>\n {wording.homePage.dialogSignIn.signFb}\n \n
\n \n {wording.homePage.dialogSignIn.oR}\n
\n\n \n {isSignInForm === 'sign-in' && (\n <>\n
\n\n \n {firebaseAuthError && (\n
\n )}\n\n \n \n {firebaseAuthError.message}\n
\n \n
\n\n \n
\n
\n\n \n
\n
\n \n \n FormChange(\n 'forget-password'\n )\n }>\n {\n wording.homePage\n .dialogSignIn\n .forgetPassword\n }\n \n
\n \n
\n \n )}\n\n {isSignInForm === 'sign-up' && (\n <>\n \n {\n SignWithEmainAndPassword(\n login.values.email,\n login.values.password\n );\n this.clearFormInput();\n }}>\n {\n wording.homePage\n .dialogSignIn.signIn\n }\n \n
\n \n {firebaseAuthError && (\n
\n )}\n \n \n {firebaseAuthError.message}\n
\n \n
\n\n \n
\n
\n\n \n
\n
\n\n \n
\n
\n \n
\n
\n \n )}\n\n {isSignInForm === 'forget-password' && (\n <>\n \n {\n CreateUserWithEmailAndPassword(\n register.values.email,\n register.values\n .password,\n register.values.name,\n register.values.lastname\n );\n this.clearFormInput();\n }}>\n {\n wording.homePage\n .dialogSignIn.signUp\n }\n \n
\n \n
\n )}\n\n {firebaseResetEmail && (\n \n \n {\n wording.homePage\n .dialogSignIn\n .resetPassword\n }\n \n
\n\n {firebaseAuthError && (\n \n {\n wording.homePage\n .dialogSignIn.subReset\n }\n
\n\n \n {firebaseAuthError.message}\n
\n \n \n {firebaseResetEmail.message}\n
\n \n )}\n\n \n
\n \n\n \n
\n
\n \n )}\n\n \n \n {\n FirebaseForgetPassword(\n reset.values.email\n );\n this.clearFormInput();\n }}>\n {\n wording.homePage\n .dialogSignIn.buttonSent\n }\n \n
\n \n
\n \n {isSignInForm === 'sign-in' &&\n `${wording.homePage.dialogSignIn.dontAccount}`}\n {isSignInForm !== 'sign-in' &&\n `${wording.homePage.dialogSignIn.alreadyHaveAnAccount}`}\n
\n\n {isSignInForm === 'sign-in' && (\n \n FormChange('sign-up')\n }>\n {\n wording.homePage.dialogSignIn\n .signUp\n }\n \n )}\n\n {isSignInForm !== 'sign-in' && (\n \n FormChange('sign-in')\n }>\n {\n wording.homePage.dialogSignIn\n .signIn\n }\n \n )}\n
\n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = ({ login, language }) => ({\n isSignInForm: login.isSignInForm,\n dialogLogin: login.dialogLogin,\n firebaseAuthError: login.firebaseAuthError,\n firebaseResetEmail: login.firebaseResetEmail,\n wording: language.wording\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n CloseDialogLogin: Actions.CloseDialogLogin,\n FormChange: Actions.FormChange,\n SignInWithFacebook: Actions.SignInWithFacebook,\n SignWithEmainAndPassword: Actions.SignWithEmainAndPassword,\n CreateUserWithEmailAndPassword:\n Actions.CreateUserWithEmailAndPassword,\n FirebaseForgetPassword: Actions.FirebaseForgetPassword\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DialogLogin);\n","import React from \"react\";\nimport LayoutPreLoad from \"./layout.preload\";\nimport LayoutTopbar from \"./layout.top-bar\";\nimport LayoutNavbar from \"./layout.navbar\";\nimport LayoutFooter from \"./layout.footer\";\nimport LayoutBackToTop from \"./layout.back-to-top\";\nimport DialogLogin from \"../Dialog/dialog.login\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport * as Actions from \"../../store/actions\";\nimport \"./layout.css\";\nimport { withRouter } from \"react-router-dom\";\nimport _ from \"lodash\";\n\nclass LayoutMain extends React.Component {\n componentDidMount() {\n this.handlerSet();\n }\n\n componentDidUpdate(prevProps) {\n !_.isEqual(this.props.location, prevProps.location) && window.scrollTo(0, 0);\n }\n\n handlerSet = async () => {\n const { FirebaseAuthCurrentUser, getNavbarCategory, dispatch, GetCartData } = this.props;\n await FirebaseAuthCurrentUser();\n await getNavbarCategory();\n const classNameOfTop = window.innerWidth < 992 ? ['.navbar-header', '.top-bar.hidden-xs'] : ['.nav-fixed-layout'];\n const topHeight = _.sum(classNameOfTop.map(item => document.querySelector(item)?.offsetHeight || 0)) - 1;\n await dispatch({ type: Actions.HOME.SET_HEIGHT_OF_CONTAINER, payload: `calc(100vh - ${topHeight}px)` });\n const footterHeight = document.querySelector(\".footer.footer-type-3\")?.offsetHeight || 0;\n await dispatch({ type: Actions.HOME.SET_MIN_HEIGHT_OF_CONTAINER, payload: `calc(100vh - ${topHeight + footterHeight}px)` });\n await GetCartData();\n }\n\n render() {\n const { containerMinHeight } = this.props;\n return (\n <>\n \n \n \n
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ home, language, login }) => {\n return {\n containerMinHeight: home.containerMinHeight,\n currentLanguage: language.currentLanguage\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n ...bindActionCreators(\n {\n getNavbarCategory: Actions.getNavbarCategory,\n FirebaseAuthCurrentUser: Actions.FirebaseAuthCurrentUser,\n GetCartData: Actions.GetCartData\n },\n dispatch\n ),\n dispatch\n }\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(LayoutMain));\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nexport default function(ComposedComponent) {\n\tclass Authentication extends Component {\n\t\tcomponentWillMount() {\n\t\t\tif (!this.props.isAuthenticated) {\n\t\t\t\tthis.props.history.push('/');\n\t\t\t}\n\t\t}\n\n\t\tcomponentWillUpdate(nextProps) {\n\t\t\tif (!nextProps.isAuthenticated) {\n\t\t\t\tthis.props.history.push('/');\n\t\t\t}\n\t\t}\n\n\t\trender() {\n\t\t\treturn \n
\n \n {this.props.children}\n
\n \n \n {heroSlider.map((slide) => {\n return (\n
\n \n \n slide.url\n ? slide.url.search('http') !== -1\n ? (window.location.href = slide.url)\n : history.push(`${basenameURL}${slide.url}`)\n : null\n }\n />\n \n
\n );\n })}\n \n \n this.scrollDown()}>\n
\n \n
\n }\n \n )\n }\n}\n\nconst mapStateToProps = ({ home, language }) => ({\n popupPromotion: home.popupPromotion,\n basenameURL: language.basenameURL\n});\n\nexport default withRouter(connect(mapStateToProps)(PopupPromotion));\n\n","import React from \"react\";\nimport \"./new-arrivals.css\";\n\nexport default function MaskItemNewArrivals() {\n const maskData = [\n { id: 1, img: \"mask-new-arrivals.png\" },\n { id: 2, img: \"mask-new-arrivals.png\" },\n { id: 3, img: \"mask-new-arrivals.png\" },\n { id: 4, img: \"mask-new-arrivals.png\" },\n { id: 5, img: \"mask-new-arrivals.png\" },\n { id: 6, img: \"mask-new-arrivals.png\" },\n { id: 7, img: \"mask-new-arrivals.png\" },\n { id: 8, img: \"mask-new-arrivals.png\" }\n ];\n\n const CreateMaskItem = () => {\n return maskData.map(item => {\n return (\n \n
\n \n
\n \n \n 
displayItem.url\n ? displayItem.url.search('http') !== -1\n ? (window.location.href = displayItem.url)\n : history.push(`${basenameURL}${displayItem.url}`)\n : null}\n />\n
\n \n
\n );\n });\n };\n\n return CreateMaskItem();\n}\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { Link, withRouter } from 'react-router-dom';\nimport MaskItemNewArrivals from './mask-loading';\nimport { API, CURRENCY } from '../../../constants';\nimport { formatMoney } from '../../../services';\n\nclass HomeNewArraival extends Component {\n render() {\n const { newArrival, history, wording, basenameURL } = this.props;\n\n return (\n \n
\n \n
\n \n 
\n
\n \n \"Loading...\"
\n \n
\n \n );\n })\n )}\n \n \n \n {wording.homePage.newArrivals.newArr}\n
\n\n\n {!newArrival ? (\n \n
\n\n \n {\n history.push(\n `${basenameURL}/product/${item.name\n .split(' ')\n .join('-')}`\n );\n }}>
\n \n \n {/*
\n\n {item.overTag && (\n \n {wording.homePage.newArrivals.outOfStock}\n \n )}\n\n {item.tag && (\n \n \n {item.tag}xxx\n \n
\n )}\n {item.promotionName && (\n \n {item.promotionName}\n
\n )}\n\n \n \n
\n {item.promotionPrice > 0 && item.promotionPrice < item.price ? (\n \n \n {`${CURRENCY.B}${formatMoney(\n item.price\n )}`}\n \n \n {`${\n CURRENCY.B\n }${formatMoney(\n item.promotionPrice\n )}`}\n \n \n ) : (\n \n \n {`${\n CURRENCY.B\n }${formatMoney(\n item.price\n )}`}\n \n \n )}\n
\n \n \n \n {item.name}\n \n \n
\n {item.promotionPrice > 0 && item.promotionPrice < item.price ? (\n \n \n {item.name}\n
\n \n \n
\n \n
\n \n
\n \n {/*
\n \n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useSelector } from 'react-redux';\n\nexport default function SearchFilterByCategories({ filterByCategory }) {\n const currentLanguage = useSelector(({ language }) => language.currentLanguage);\n const navbarCategory = useSelector(({ navigation }) => navigation.navbarCategory);\n const wording = useSelector(({ language }) => language.wording);\n const searchData = useSelector(({ search }) => search.searchData);\n const [categoryFilter, setCategoryFilter] = useState([]);\n\n useEffect(() => {\n if (searchData) {\n const category = navbarCategory.filter(nav => searchData.some(data => data.categories.includes(nav.categoryNameEn)));\n setCategoryFilter(category);\n }\n }, [searchData])\n\n return (\n {wording.SearchPage.search.title}
*/}\n- \n
- \n \n {currentLanguage === \"TH\"\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n
- {wording.SearchPage.search.title} \n
- {searchText} \n
\n
\n );\n}\n","import React, { Component } from 'react';\nimport SearchTitle from './components/search.title';\nimport SearchFilterByCategories from './components/search.filter-by-categories';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../store/actions';\nimport { Link, withRouter } from 'react-router-dom';\nimport { API, CURRENCY } from '../../constants';\nimport { formatMoney } from '../../services';\nimport Pagination from 'rc-pagination';\nimport _ from 'lodash';\nimport { queryStringToJSON as qs } from '../../utils/'\n\nclass SearchMain extends Component {\n\n constructor(props) {\n super(props)\n\n this.state = {\n listResultSearch: props.searchData,\n totalItems: props.totalItems,\n rowsPerPage: 12,\n currentPage: 1\n }\n }\n\n onChange = currentPage => {\n this.setState({ currentPage });\n window.scrollTo(0, 0);\n };\n\n filterByCategory = (e, name) => {\n e.preventDefault();\n const { history, keyword, basenameURL } = this.props;\n const url = `${basenameURL}/search?keyword=${keyword}${name !== \"ALL\" ? `&category=${encodeURI(name)}` : ``}`;\n history.replace(url);\n }\n\n componentDidMount() {\n if (this.props.searchData) {\n this.setState({\n listResultSearch: this.props.searchData,\n totalItems: this.props.searchData.length\n });\n }\n }\n\n componentDidUpdate(prevProps) {\n if (!_.isEqual(prevProps.location.search, this.props.location.search)) {\n const { location, searchData } = this.props;\n const newListResultSearch = qs(location.search).hasOwnProperty(\"category\")\n ? searchData.filter(item =>\n item.categories.some(mc => mc === qs(location.search).category)\n )\n : searchData;\n this.setState({\n listResultSearch: newListResultSearch,\n totalItems: newListResultSearch.length,\n currentPage: 1\n });\n }\n }\n\n noItemShow = () => {\n const {\n wording,\n currentLanguage,\n navbarCategory,\n basenameURL\n } = this.props;\n\n return (\n \n {wording.SearchPage.categories.title}\n
\n- \n {\n categoryFilter.length != 0 &&\n [{ categoryNameEn: \"ALL\", categoryNameTh: \"ทั้งหมด\" }].concat(categoryFilter)\n .filter(nav => nav.categoryNameEn != \"HOME\")\n .map((nav, index) => (\n
- \n filterByCategory(e, nav.categoryNameEn)}>\n {currentLanguage === 'TH'\n ? nav.categoryNameTh\n : nav.categoryNameEn}\n \n \n ))\n }\n
\n
\n );\n }\n\n render() {\n const {\n searchText,\n history,\n wording,\n basenameURL\n } = this.props;\n\n const {\n listResultSearch,\n currentPage,\n rowsPerPage,\n totalItems,\n } = this.state;\n\n return (\n \n
\n \n 
\n
\n \n {wording.unableItem.bodyMessage}
\n\n {wording.unableItem.urlMessage1}{' '}\n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoryNameTh\n : navbarCategory[0].categoryNameEn}\n \n
\n\n \n \n )}\n {listResultSearch && listResultSearch.length !== 0 && (\n <>\n \n \n
\n )}\n \n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = ({ search, language, navigation }) => ({\n searchData: search.searchData,\n keyword: search.keyword,\n totalItems: search.totalItems,\n wording: language.wording,\n currentLanguage: language.currentLanguage,\n navbarCategory: navigation.navbarCategory,\n basenameURL: language.basenameURL\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n SearchItemFormKeyword: Actions.SearchItemFormKeyword\n },\n dispatch\n );\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(SearchMain));\n","import React, { useState, useEffect } from \"react\";\nimport _ from 'lodash'\nimport \"./preload.css\";\nimport { useSelector } from \"react-redux\";\n\nexport default function LayoutPreload() {\n\n const height = useSelector(({ home }) => home.containerHeight);\n\n useEffect(() => {\n window.scrollTo(0, 0)\n });\n\n return (\n \n
\n \n
\n \n
\n \n {this.noItemShow()}\n
\n \n
\n {totalItems > rowsPerPage && (\n \n \n
\n \n
\n \n {/* className=\"shop-catalogue grid-view left\" */}\n
\n \n {listResultSearch.length > 0 ? listResultSearch\n .slice(\n (currentPage - 1) * rowsPerPage,\n (currentPage - 1) * rowsPerPage + rowsPerPage\n )\n .map(item => {\n return (\n \n
\n );\n }) : this.noItemShow()}\n \n
\n \n \n history.push(\n `${basenameURL}/product/${item.name.replace(\n ' ',\n '-'\n )}`\n )\n }\n />\n
\n\n \n
\n\n {item.overTag && (\n \n {\n wording.homePage.newArrivals\n .outOfStock\n }\n \n )}\n\n {\n item.tag && (\n \n \n {item.tag}xxx\n \n
\n )\n }\n {\n item.promotionName && (\n \n \n {item.promotionName}\n \n
\n )\n }\n\n \n \n
\n {item.promotionPrice > 0 && item.promotionPrice < item.price ? (\n \n \n {`${CURRENCY.B}${formatMoney(\n item.price\n )}`}\n \n\n \n {`${\n CURRENCY.B\n }${formatMoney(\n item.promotionPrice\n )}`}\n \n \n ) : (\n \n \n {`${\n CURRENCY.B\n }${formatMoney(\n item.price\n )}`}\n \n \n )}\n
\n \n \n \n {item.name}\n \n \n
\n {item.promotionPrice > 0 && item.promotionPrice < item.price ? (\n \n \n {item.name}\n
\n \n \n
\n );\n}\n","import React, { Component } from 'react';\nimport SearchMain from '../../components/Search/search.main';\nimport LayoutPreload from '../../components/Preload/layout.preload';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../store/actions';\nimport queryString from 'query-string';\nimport _ from 'lodash';\n\nclass SearchPage extends Component {\n componentDidMount() {\n this.handlerSet();\n }\n\n componentDidUpdate(prevProps) {\n !_.isEqual(prevProps.currentLanguage, this.props.currentLanguage) && this.handlerSet();\n }\n\n handlerSet = () => {\n const {\n updateWording,\n location,\n keyword,\n KeywordChange,\n SearchItemFormKeyword\n } = this.props;\n\n const search = queryString.parse(location.search);\n updateWording();\n if (keyword === '') KeywordChange(search.keyword);\n SearchItemFormKeyword(search.keyword);\n }\n\n render() {\n const { location, searchFetching } = this.props;\n const search = queryString.parse(location.search);\n\n if (searchFetching) {\n return \n
\n \"Loading...\"
\n \n
\n - \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n\n
- {wording.notFoundPage.title} \n
\n
\n \n
\n \n
\n \n \n
\n \n {wording.notFoundPage.bodyMessage}
\n\n {wording.notFoundPage.urlMessage1} {wording.notFoundPage.urlMessage2}\n
\n\n
\n \n );\n}\n","import React from 'react';\nimport { API } from '../../../constants';\n\nexport default function ProductGalleryMain({ galleryResource, handleOpenLightbox }) {\n return (\n - \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n {\n category &&
- {categoryName} \n }\n
- {itemName} \n
\n
\n );\n}\n","import React from 'react';\nimport { STAR } from '../../../constants';\nimport StarRatings from 'react-star-ratings';\n\nexport default function ProductName({ name, rating }) {\n return (\n <>\n handleOpenLightbox()}>\n 
\n
\n \n
\n );\n}\n","import React from 'react';\n\nexport default function ProductDescription({ description, className }) {\n return (\n \n {promotionPrice > 0 && promotionPrice < price ? (\n \n \n {`${CURRENCY.B}${formatMoney(price)}`}\n \n \n {`${CURRENCY.B}${formatMoney(promotionPrice)}`}\n \n \n ) : (\n \n \n {`${CURRENCY.B}${formatMoney(price)}`}\n \n \n )}\n
\n {\n promotionName && (\n \n {\n promotionName.map((item, index) => (\n
\n )\n }\n \n {item}\n
\n ))\n }\n \n
\n );\n}\n","import React from 'react';\nimport { FacebookShareButton, TwitterShareButton, FacebookIcon, TwitterIcon } from 'react-share';\nimport { useSelector } from 'react-redux';\n\nexport default function ProductShare() {\n const wording = useSelector(app => app.language.wording);\n\n return (\n \n {\n typeof description == \"string\" \n ? description.split(\"\\n\").map(function(item, idx) {\n let tab = item[0];\n return (\n \n {item}\n
\n \n )\n })\n : description.map(item =>\n item.split(\"\\n\").map(function(item, idx) {\n let tab = item[0];\n return (\n \n {item}\n
\n \n )\n })\n )\n }\n
\n
\n );\n}\n","import React from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useSelector } from 'react-redux';\n\nfunction DialogProductOverStock({ open, closeDialog }) {\n const wording = useSelector(({ language }) => language.wording);\n\n return (\n \n {`${wording.productPage.product.share}:`}\n \n \n \n \n \n
\n \n
\n \n
\n {wording.productPage.dialogOutOfStock.title}
\n\n
\n {wording.productPage.dialogOutOfStock.bodyMessage}
\n\n
\n \n {`${wording.productPage.dialogAdd.title}`}\n
\n \n
\n {wording.productPage.dialogAdd.bodyMessage}
\n\n
\n\n {type != \"voucher\" &&\n product.items[0].review &&\n product.items[0].review.length > 0 && (\n \n
\n\n \n
\n \n {itemSelected.pictures.map((img, index) => {\n return (\n \n this.handleThumbSelected(index, img)\n }>\n
\n );\n })}\n \n
\n \n
\n )}\n {sizes.length > 0 &&\n sizes.every(\n (size) => !['null', 'undefined'].includes(size)\n ) && (\n {`${wording.productPage.product.color}:`}
\n- \n {colors.map(({ name }) => {\n return (\n
- \n
\n this.handleSizeChange(size)}>\n {size}\n \n );\n })}\n
\n )}\n {product.material && (\n {`${wording.productPage.product.size}:`}
\n {sizes.map((size) => {\n return (\n\n
\n )}\n {product.expireDate && (\n {`${wording.productPage.product.material}:`}
\n\n {product.material}\n
\n\n
\n )}\n {\n itemSelected.promotionCondition && (\n \n {`${wording.productPage.product.expireDate} `}\n {formatDate(product.expireDate)[currentLanguage]}\n
\n\n
\n )\n }\n {`${wording.productPage.product.promotionCondition}:`}
\n- \n
- \n \n\n \n
- \n
- \n
- \n
- \n
\n {product.items[0].review.map((item, i) => {\n let img = [];\n for (let i = 1; i <= Number(item.imageAmount); i++) {\n img.push(\n this.handleZoom(item.id, i)}\n />\n\n // this.handleZoom(item.id, i)}\n // />\n );\n }\n\n return (\n \n \n \n
\n \n\n {item.comment && (\n \n {item.reviewer}\n
\n \n
\n \n {item.comment}\n
\n )}\n\n {img.length > 0 && (\n \n
\n )}\n\n \n {moment(item.created).format(\n 'YYYY-MM-DD HH:mm:ss'\n )}\n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {wording.unableItem.bodyMessage}\n
\n\n {wording.unableItem.urlMessage1}{' '}\n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoryNameTh\n : navbarCategory[0].categoryNameEn}\n \n
\n\n {/*
\n \n {wording.cartPage.cartEmpty.titleEmpty}
*/}\n- \n
- \n \n {currentLanguage === \"TH\"\n ? navbarCategory[0].categoryNameTh\n : navbarCategory[0].categoryNameEn}\n \n \n
- \n {wording.cartPage.cartEmpty.titleEmpty}\n \n
\n
\n \n
\n \n
\n \n
\n \n {wording.cartPage.cartEmpty.bodyMessage}\n
\n\n {wording.cartPage.cartEmpty.urlMessage1}{\" \"}\n \n {currentLanguage === \"TH\"\n ? navbarCategory[0].categoryNameTh\n : navbarCategory[0].categoryNameEn}\n \n
\n\n {/*
\n \n );\n}\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nexport default function AvailiableItemTableHeader(props) {\n const wording = useSelector(({ language }) => language.wording);\n\n return (\n \n {wording.cartPage.avaliableOrder.cart}
*/}\n- \n
- \n \n {currentLanguage === \"TH\"\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n
- \n {wording.cartPage.avaliableOrder.cart}\n \n
\n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ cart, language }) => ({\n dialogDelete: cart.dialogDelete,\n deleteData: cart.deleteData,\n wording: language.wording\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n DeleteItemInCart: Actions.DeleteItemInCart,\n CloseDialogDeleteItemInCart: Actions.CloseDialogDeleteItemInCart,\n ClearBuyNow: Actions.ClearBuyNow\n },\n dispatch\n );\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(DialogDeleteItemInCart);\n","import React from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useSelector } from 'react-redux';\n\nexport default function DialogDeleteUnavailiableItem(props) {\n const wording = useSelector(({ language }) => language.wording);\n\n return (\n \n
\n \n {wording.cartPage.dialogDeleteItemInCart.title}\n
\n\n
\n \n {deleteData && deleteData.itemName}\n
\n\n
\n \n {\n if (deleteData.type === \"buyNow\") {\n await ClearBuyNow(deleteData);\n } else await DeleteItemInCart(deleteData, itemSelected);\n await updateCartAvailiableSelected(\n deleteData\n );\n }}>\n {wording.cartPage.dialogDeleteItemInCart.ok}\n \n
\n \n \n {wording.cartPage.dialogDeleteItemInCart.cancle}\n \n
\n \n
\n \n );\n}\n","import React from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useSelector } from 'react-redux';\n\nexport default function DialogBeforeConfirmingOrder({ open, closeDialog }) {\n const wording = useSelector(({ language }) => language.wording);\n\n return (\n \n
\n \n {\n wording.cartPage.dialogDeleteUnAvaliableItemInCart\n .title\n }\n
\n\n
\n \n {\n wording.cartPage.dialogDeleteUnAvaliableItemInCart\n .bodyMessage\n }\n
\n\n
\n \n props.actionDelete()}>\n {\n wording.cartPage\n .dialogDeleteUnAvaliableItemInCart.ok\n }\n \n
\n \n \n {\n wording.cartPage\n .dialogDeleteUnAvaliableItemInCart.cancle\n }\n \n
\n \n
\n \n );\n}\n","import React from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useSelector } from 'react-redux';\n\nfunction DialogCartOverStock({ open, closeDialog }) {\n const wording = useSelector(({ language }) => language.wording);\n\n return (\n \n
\n \n {wording.cartPage.cartBeforeConfirmOrder.title}\n
\n\n
\n \n {wording.cartPage.cartBeforeConfirmOrder.bodyMessage}\n
\n\n
\n \n closeDialog()}>\n {wording.cartPage.cartBeforeConfirmOrder.close}\n \n
\n \n
\n \n {`${wording.productPage.dialogOutOfStock.title}`}\n
\n \n {`${wording.productPage.dialogOutOfStock.bodyMessage}`}\n
\n \n
\n \n closeDialog()}>\n {`${wording.productPage.dialogOutOfStock.close}`}\n \n
\n \n \n UpdatePromotion(ItemSelected, this.state.discountCode)}>\n {\n isLoading\n ? \"Loading...\"\n : wording.cartPage.cartTotal.confirm\n }\n \n
\n { error && * {error} }\n \n\t\t\t\t\t\t{cartAvailiableItem.length > 0 && (\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{(promotion?.responcePromotionitem?.length > 0 && (colorselected || sizeselected)) && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t{promotion?.responcePromotionitem?.some(item => item.item) && (\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.avaliableOrder.avaliableOrder}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t| \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!buyNow.status && \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.itemName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
| \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.promotionPrice > 0 && item.promotionPrice < item.price ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{rowFocus === item.itemId\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? `${CURRENCY.B}${formatMoney(onChangeQty * (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.promotionPrice > 0 && item.promotionPrice < item.price\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? item.promotionPrice\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: item.price\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t))}`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: `${CURRENCY.B}${formatMoney(item.qty * (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.promotionPrice > 0 && item.promotionPrice < item.price\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? item.promotionPrice\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: item.price\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t))}`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{cartUnavailiableItem.length > 0 && (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.promotionCart.title}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t| \n\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.avaliableOrder.product}\n\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.avaliableOrder.price} | \n\t\t\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.avaliableOrder.quantity} | \n\t\t\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.avaliableOrder.total} | \n\t\t\t\t\t\t\t\t\t\t\t\t||
|---|---|---|---|---|---|---|
| \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{items.name}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t this.handleShowpro(index)}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t||
| \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{model.item.map((item,index) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{model.modelName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
| \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmodel.item?.length > 0 && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmodel.item.filter(item => \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titems.amount == 1 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|| items.item?.length == 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|| model.item?.length == 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|| (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisSelected \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t&& (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolorselected.includes(model.modelId+item.rgbColor) \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|| !item.rgbColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t&& sizeselected.includes(model.modelId+item.sizeName)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t).slice(0, 1).map((item, index) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst itemStock = item.itemStock > items.amount ? items.amount : item.itemStock;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst itemId = `${items.promotionid}|${model.modelId}|${item.itemId}`;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst valueItem = { ...item, itemStock, qty: item.qty || 1, itemId };\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn item && items.amount > 1 && (items.item?.length != 1 || model.item?.length != 1) && isSelected ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{`${CURRENCY.B}${formatMoney(items.amount * model.promotionPrice)}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t |
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 0\n\t\t\t\t\t\t\t\t\t\t})}>\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{`${wording.cartPage.unavaliableOrder.unavaliableOrder}`}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{cartUnavailiableItemSelected.length > 0 && (\n\t\t\t\t\t\t\t\t\t\t| \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.itemName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
| \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.promotionPrice > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\tOpenDialogDeleteUnAvailiableItem(cartUnavailiableItemSelected)\n\t\t\t\t\t\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.unavaliableOrder.btnDelUnAvaliableOrder}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{wording.cartPage.cartTotal.cartTotals}\n\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t| {wording.cartPage.cartTotal.order} | \n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.calOrder()}\n\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t
|---|---|
| \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.cartTotal.subTotal}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{`${CURRENCY.B}${formatMoney(this.calAvailiablePrice())}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
| \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.cartTotal.promotion}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{promotion.responcePromotionitem.map((item, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
| \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t|
| \n\t\t\t\t\t\t\t\t\t\t\t\t\t{wording.cartPage.cartTotal.total}\n\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{`${CURRENCY.B}${formatMoney(this.calAvailiablePrice() - (promotiontotal ? promotiontotal : 0))}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t this.handleCheckOut()}>\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLoading\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"Loading...\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: wording.cartPage.cartTotal.proceedToCheckout\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
\n - \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n
- \n {wording.cartPage.avaliableOrder.cart}\n \n
- {wording.checkoutPage.checkout.title} \n
\n
\n \n
\n {wording.checkoutPage.dialogPolicy.title}
\n\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.title}
\n{wording.checkoutPage.dialogPolicy.bodyMessage.paragraph1}
\n\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph2}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph3}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph4}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph5}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph6}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph7}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph8}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph9}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph10}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph11}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph12}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph13}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph14}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph15}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph16}\n
\n {wording.checkoutPage.dialogPolicy.bodyMessage.paragraph17}\n
\n
\n \n {\n onAcceptPolicy();\n CloseDialogCheckOutPolicy();\n }}>\n {wording.checkoutPage.dialogPolicy.ok}\n \n
\n \n CloseDialogCheckOutPolicy()}>\n {wording.checkoutPage.dialogPolicy.cancle}\n \n
\n \n
\n \n
\n {title}
\n\n
\n {message}
\n\n
\n \n closeDialog()}>\n {close}\n \n
\n \n
\n \n
\n \n {wording.checkoutPage.dialogPin.title}\n
\n\n \n {error}\n
\n )}\n \n
\n \n \n );\n}\n","import React from 'react';\nimport './preload.css';\n\nexport default function LayoutPreloadTransparent() {\n\treturn (\n\t\t\n \n {wording.checkoutPage.dialogPin.ok}\n \n
\n \n {\n clearPin();\n closeDialog();\n }}>\n {wording.checkoutPage.dialogPin.cancle}\n \n
\n \n\t\t\t
\n\t);\n}\n","import React, { Component } from 'react';\nimport Modal from 'react-awesome-modal';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../store/actions';\nimport validate from 'validate.js';\nimport _ from 'lodash';\nimport { THAI_PROVINCES, THAI_DISTRICTS,THAI_SUB_DISTRICTS } from '../../constants';\nimport './address.css';\nimport { sortCompare } from '../../utils/'\n\nconst jstrProvince = JSON.stringify({\n PROVINCE_ID: 0,\n PROVINCE_NAME: 'default'\n});\n\nconst jstrDistrict = JSON.stringify({\n DISTRICT_ID: 0,\n DISTRICT_NAME: 'default'\n});\n\nconst jstrSubDistrict = JSON.stringify({\n SUB_DISTRICT_ID: 0,\n SUB_DISTRICT_NAME: 'default',\n ZIP_CODE: ''\n});\n\nconst pattern = { zipCode: /\\d{5}/, phoneNumber: /\\d{10}/ };\n\nconst validateAddress = {\n name: {\n presence: { allowEmpty: false, message: 'is required' }\n },\n lastName: {\n presence: { allowEmpty: false, message: 'is required' }\n },\n phoneNumber: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: pattern.phoneNumber\n },\n zipCode: {\n presence: { allowEmpty: false, message: 'is required' },\n // numericality: { onlyInteger: true },\n // format: pattern.zipCode\n },\n address: {\n presence: { allowEmpty: false, message: 'is required' }\n }\n};\n\nconst formTemplate = {\n isValid: false,\n values: {\n name: '',\n lastName: '',\n phoneNumber: '',\n province: jstrProvince,\n district: jstrDistrict,\n subDistrict: jstrSubDistrict,\n zipCode: '',\n address: ''\n },\n touched: {},\n errors: {}\n};\n\nclass DialogCreateAddress extends Component {\n state = {\n ...formTemplate,\n isDefault: this.props.addressData && this.props.addressData.length === 0 ? 'Y' : 'N',\n ST_THAI_DISTRICTS: THAI_DISTRICTS,\n ST_THAI_SUB_DISTRICTS: THAI_SUB_DISTRICTS\n };\n\n componentDidUpdate(prevProps, prevState) {\n if (!_.isEqual(prevProps.dialogCreateAddress, this.props.dialogCreateAddress)) {\n this.setState({ ...formTemplate });\n }\n\n if (!_.isEqual(prevProps.addressData, this.props.addressData)) {\n const isDefault = this.props.addressData && this.props.addressData.length === 0 ? 'Y' : 'N';\n this.setState({ isDefault });\n }\n\n if (!_.isEqual(prevState.values, this.state.values)) {\n const { values } = this.state;\n\n const errors = validate(values, validateAddress);\n\n let isValid = !errors;\n\n const _isValid =\n isValid === true \n && values.province !== jstrProvince \n && values.district !== jstrDistrict\n && values.subDistrict !== jstrSubDistrict;\n\n this.setState(prevSt => ({\n ...prevSt,\n isValid: _isValid,\n errors: errors || {}\n }));\n }\n }\n\n handleAddressChange = event => {\n const { type, name, value, checked } = event.target;\n\n if (type !== 'checkbox') {\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, [name]: value },\n touched: { ...prevState.touched, [name]: true }\n }));\n } else {\n this.setState({ [name]: checked ? 'Y' : 'N' });\n }\n };\n\n hasError = field => this.state.touched[field] && this.state.errors[field];\n\n //handle\n handleSelectProvinceChange = value => {\n const { PROVINCE_ID, PROVINCE_NAME } = JSON.parse(value);\n\n const NEW_THAI_DISTRICTS =\n PROVINCE_NAME === 'default' ? THAI_DISTRICTS : _.filter(THAI_DISTRICTS, dis => dis.PROVINCE_ID === PROVINCE_ID);\n\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, province: value, district: jstrDistrict, subDistrict: jstrSubDistrict, zipCode:'' },\n ST_THAI_DISTRICTS: NEW_THAI_DISTRICTS\n }));\n };\n //handle\n handleSelectDistrictChange = value => {\n const { DISTRICT_ID, DISTRICT_NAME } = JSON.parse(value);\n\n const NEW_THAI_SUB_DISTRICTS = DISTRICT_NAME === 'default' ? THAI_SUB_DISTRICTS : _.filter(THAI_SUB_DISTRICTS, dis => dis.DISTRICT_ID === DISTRICT_ID);\n\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, district: value, subDistrict: jstrSubDistrict, zipCode:'' },\n ST_THAI_SUB_DISTRICTS: NEW_THAI_SUB_DISTRICTS\n }));\n };\n //handle\n handleSelectSubDistrictChange = value => {\n var subDistrict = JSON.parse(value);\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, subDistrict: value, zipCode: subDistrict.ZIP_CODE },\n }));\n };\n //canSelect\n canSelectDistrict = () => {\n return this.state.values.province !== jstrProvince;\n } \n canSelectSubDistrict = () => this.state.values.district !== jstrDistrict;\n \n disableCheckboxAddress() {\n const { addressData } = this.props;\n return !addressData || addressData.length > 0;\n }\n\n handleSubmit = () => {\n const { addressData, CreateAddress, AddOtherAddress, isAuthenticated } = this.props;\n if (!addressData || addressData.length === 0 || !isAuthenticated) {\n CreateAddress(this.state);\n } else {\n AddOtherAddress(this.state);\n }\n };\n\n render() {\n const { isValid, values, errors, isDefault, ST_THAI_DISTRICTS, ST_THAI_SUB_DISTRICTS } = this.state;\n\n const { dialogCreateAddress, CloseDialogCreateAddress, wording, isAuthenticated } = this.props;\n\n return (\n \"Loading...\"
\n\t\t\n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ address, language, login }) => ({\n addressData: address.data,\n dialogCreateAddress: address.dialogCreateAddress,\n wording: language.wording,\n isAuthenticated: login.isAuthenticated\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n CreateAddress: Actions.CreateAddress,\n AddOtherAddress: Actions.AddOtherAddress,\n CloseDialogCreateAddress: Actions.CloseDialogCreateAddress\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DialogCreateAddress);\n","import React, { Component } from 'react';\nimport Modal from 'react-awesome-modal';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../store/actions';\nimport validate from 'validate.js';\nimport _ from 'lodash';\nimport './address.css';\nimport { THAI_PROVINCES, THAI_DISTRICTS, THAI_SUB_DISTRICTS } from '../../constants';\nimport { sortCompare } from '../../utils/'\n\nconst jstrProvince = JSON.stringify({\n PROVINCE_ID: 0,\n PROVINCE_NAME: 'default'\n});\n\nconst jstrDistrict = JSON.stringify({\n DISTRICT_ID: 0,\n DISTRICT_NAME: 'default'\n});\n\nconst jstrSubDistrict = JSON.stringify({\n SUB_DISTRICT_ID: 0,\n SUB_DISTRICT_NAME: 'default',\n ZIP_CODE: ''\n});\n\nconst pattern = { taxId: /\\d{13}/, zipCode: /\\d{5}/, phoneNumber: /\\d{10}/ };\n\nconst validateTaxAddress = {\n name: {\n presence: { allowEmpty: false, message: 'is required' }\n },\n lastName: {\n presence: { allowEmpty: true, message: 'is required' }\n },\n taxId: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: pattern.taxId\n },\n phoneNumber: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: pattern.phoneNumber\n },\n email: {\n presence: { allowEmpty: false, message: 'is required' },\n email: true\n },\n address: {\n presence: { allowEmpty: false, message: 'is required' }\n },\n zipCode: {\n presence: { allowEmpty: false, message: 'is required' },\n // numericality: { onlyInteger: true },\n // format: pattern.zipCode\n }\n};\n\nconst formTaxInvoiceTemplate = {\n isValid: false,\n values: {\n name: '',\n lastName: '',\n taxId: '',\n phoneNumber: '',\n email: '',\n address: '',\n province: jstrProvince,\n district: jstrDistrict,\n subDistrict: jstrSubDistrict,\n zipCode: ''\n },\n touched: {},\n errors: {}\n};\n\nclass DialogCreateTaxAddress extends Component {\n state = {\n ...formTaxInvoiceTemplate,\n isDefault: this.props.userTaxInvoiceAddress && this.props.userTaxInvoiceAddress.length === 0 ? 'Y' : 'N',\n ST_THAI_DISTRICTS: THAI_DISTRICTS,\n ST_THAI_SUB_DISTRICTS: THAI_SUB_DISTRICTS\n };\n\n componentDidUpdate(prevProps, prevState) {\n if (!_.isEqual(prevProps.dialogCreateTaxAddress, this.props.dialogCreateTaxAddress)) {\n this.setState({ ...formTaxInvoiceTemplate });\n }\n\n if (!_.isEqual(prevProps.userTaxInvoiceAddress, this.props.userTaxInvoiceAddress)) {\n const isDefault =\n this.props.userTaxInvoiceAddress && this.props.userTaxInvoiceAddress.length === 0 ? 'Y' : 'N';\n this.setState({ isDefault });\n }\n\n if (!_.isEqual(prevState.values, this.state.values)) {\n const { values } = this.state;\n const errors = validate(values, validateTaxAddress);\n\n let isValid = errors ? false : true;\n\n const _isValid =\n isValid === true\n && values.province !== jstrProvince\n && values.district !== jstrDistrict\n && values.subDistrict !== jstrSubDistrict;\n\n this.setState(prevSt => ({\n ...prevSt,\n isValid: _isValid,\n errors: errors || {}\n }));\n }\n }\n\n handleFormChange = event => {\n const { type, name, value, checked } = event.target;\n\n if (type !== 'checkbox') {\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, [name]: value },\n touched: { ...prevState.touched, [name]: true }\n }));\n } else {\n this.setState({ [name]: checked ? 'Y' : 'N' });\n }\n };\n\n hasError = field => this.state.touched[field] && this.state.errors[field];\n\n //handle\n handleSelectProvinceChange = value => {\n const { PROVINCE_ID, PROVINCE_NAME } = JSON.parse(value);\n\n const NEW_THAI_DISTRICTS =\n PROVINCE_NAME === 'default' ? THAI_DISTRICTS : _.filter(THAI_DISTRICTS, dis => dis.PROVINCE_ID === PROVINCE_ID);\n\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, province: value, district: jstrDistrict, subDistrict: jstrSubDistrict, zipCode: '' },\n ST_THAI_DISTRICTS: NEW_THAI_DISTRICTS\n }));\n };\n //handle\n handleSelectDistrictChange = value => {\n const { DISTRICT_ID, DISTRICT_NAME } = JSON.parse(value);\n\n const NEW_THAI_SUB_DISTRICTS = DISTRICT_NAME === 'default' ? THAI_SUB_DISTRICTS : _.filter(THAI_SUB_DISTRICTS, dis => dis.DISTRICT_ID === DISTRICT_ID);\n\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, district: value, subDistrict: jstrSubDistrict, zipCode: '' },\n ST_THAI_SUB_DISTRICTS: NEW_THAI_SUB_DISTRICTS\n }));\n };\n //handle\n handleSelectSubDistrictChange = value => {\n var subDistrict = JSON.parse(value);\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, subDistrict: value, zipCode: subDistrict.ZIP_CODE },\n }));\n };\n //canSelect\n canSelectDistrict = () => {\n return this.state.values.province !== jstrProvince;\n }\n canSelectSubDistrict = () => this.state.values.district !== jstrDistrict;\n\n disableCheckboxAddress = () => this.props.serTaxInvoiceAddress && this.props.userTaxInvoiceAddress.length > 0\n\n handleSubmit = () => {\n const { userTaxInvoiceAddress, CreateTaxAddress, AddOtherTaxInvoiceAddress, isAuthenticated, applyFormChange } = this.props;\n const { values } = this.state;\n\n if (!isAuthenticated) {\n const province = JSON.parse(values.province);\n const district = JSON.parse(values.district);\n const subDistrict = JSON.parse(values.subDistrict);\n applyFormChange({\n ...values,\n province: province.PROVINCE_NAME,\n district: district.DISTRICT_NAME,\n subDistrict: subDistrict.SUB_DISTRICT_NAME,\n });\n }\n if (userTaxInvoiceAddress && userTaxInvoiceAddress.length === 0) {\n CreateTaxAddress(this.state);\n } else {\n AddOtherTaxInvoiceAddress(this.state);\n }\n };\n\n handleClose = () => {\n const { CloseDialogCreateTaxAddress, cancelForm } = this.props;\n CloseDialogCreateTaxAddress()\n cancelForm()\n }\n\n render() {\n const { isValid, values, errors, isDefault, ST_THAI_DISTRICTS, ST_THAI_SUB_DISTRICTS } = this.state;\n\n const { dialogCreateTaxAddress, wording } = this.props;\n\n return (\n \n
\n \n {wording.usermenu.address.dialogShippingAddress.titleCreate}\n
\n\n
\n {errors.name[0]}
: null}\n\n{errors.lastName[0]}
: null}\n\n{errors.address[0]}
: null}\n\n\n
\n
\n
{errors.zipCode[0]}
: null}\n\n{errors.phoneNumber[0]}
: null}\n\n {\n isAuthenticated && (\n\n event.stopPropagation()}\n onChange={this.handleAddressChange}\n />\n
\n )\n }\n {wording.usermenu.address.dialogShippingAddress.default}
\n\n
\n \n this.handleSubmit()}>\n {wording.usermenu.address.dialogShippingAddress.ok}\n \n
\n \n CloseDialogCreateAddress()}>\n {wording.usermenu.address.dialogShippingAddress.cancle}\n \n
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ taxaddress, language, login }) => ({\n isAuthenticated: login.isAuthenticated,\n userTaxInvoiceAddress: taxaddress.data,\n dialogCreateTaxAddress: taxaddress.dialogCreateTaxAddress,\n wording: language.wording\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n CreateTaxAddress: Actions.CreateTaxAddress,\n AddOtherTaxInvoiceAddress: Actions.AddOtherTaxInvoiceAddress,\n CloseDialogCreateTaxAddress: Actions.CloseDialogCreateTaxAddress\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DialogCreateTaxAddress);\n","import React, { Component } from 'react';\nimport Modal from 'react-awesome-modal';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../../store/actions';\nimport '../checkout.css';\nimport _ from 'lodash';\nimport validate from 'validate.js';\n\nconst pattern = { phoneNumber: /\\d{10}/ };\n\nconst validatePhoneNumber = {\n phoneNumber: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: pattern.phoneNumber\n }\n}\n\nclass CheckOutDialogPhoneNumber extends Component {\n\n constructor(props) {\n super(props)\n \n this.state = {\n phoneNumber: '',\n error: {\n status: true,\n message: ''\n }\n }\n }\n \n handleChangeData = (e) => {\n e.persist();\n this.setState({ phoneNumber: e.target.value });\n }\n\n componentDidUpdate(prevProps, prevState) {\n\n if (!_.isEqual(prevState.phoneNumber, this.state.phoneNumber)) {\n const { phoneNumber } = this.state;\n const error = validate({ phoneNumber }, validatePhoneNumber);\n const _isValid = error ? true: false;\n this.setState({ \n error: {\n status: _isValid,\n message: _isValid ? error.phoneNumber[0] : ''\n }\n });\n }\n\n }\n\n render() {\n const {\n dialogPhoneNumber,\n CloseDialogPhoneNumber,\n wording,\n applyFormChange\n } = this.props;\n const {\n phoneNumber,\n error\n } = this.state;\n\n return (\n \n
\n \n {wording.usermenu.address.dialogTaxInvoiceAddress.titleCreate}\n
\n\n
\n {errors.name[0]}
: null}\n\n{errors.taxId[0]}
: null}\n\n{errors.phoneNumber[0]}
: null}\n\n{errors.email[0]}
: null}\n\n{errors.address[0]}
: null}\n\n\n
\n
\n
{errors.zipCode[0]}
: null}\n\n\n event.stopPropagation()}\n onChange={this.handleFormChange}\n />\n
\n {wording.usermenu.address.dialogTaxInvoiceAddress.default}
\n\n
\n \n this.handleSubmit()}>\n {wording.usermenu.address.dialogTaxInvoiceAddress.ok}\n \n
\n \n \n {wording.usermenu.address.dialogTaxInvoiceAddress.cancle}\n \n
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ checkout, language }) => ({\n dialogPhoneNumber: checkout.dialogPhoneNumber,\n wording: language.wording\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n CloseDialogPhoneNumber: Actions.CloseDialogPhoneNumber\n },\n dispatch\n );\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(CheckOutDialogPhoneNumber);\n","import React, { Component } from 'react';\nimport Modal from 'react-awesome-modal';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../../store/actions';\nimport '../checkout.css';\nimport _ from 'lodash';\nimport validate from 'validate.js';\n\nconst validateFurtherInformation = {\n name: {\n presence: { allowEmpty: false, message: 'is required' },\n },\n lastName: {\n presence: { allowEmpty: false, message: 'is required' },\n },\n email: {\n presence: { allowEmpty: false, message: 'is required' },\n email: {\n message: \"is invalid email.\"\n }\n },\n phoneNumber: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: /\\d{10}/\n }\n}\n\nclass CheckOutDialogEmail extends Component {\n\n constructor(props) {\n super(props)\n \n this.state = {\n values: {\n email: '',\n name: '',\n lastName: '',\n phoneNumber: ''\n },\n touched: [],\n error: {\n status: true,\n message: {}\n },\n fields: []\n }\n }\n\n handleChangeData = (e) => {\n e.persist();\n const { name, value } = e.target;\n let field = name == \"firstname\" ? \"name\": name\n this.setState({ \n values: { \n ...this.state.values, \n [field]: value \n },\n touched: [ ...this.state.touched, field ]\n });\n }\n\n componentDidMount() {\n this.handleSetValues();\n const { values } = this.state;\n this.setState({ \n fields: Object.keys(values) \n });\n }\n\n componentDidUpdate(prevProps, prevState) {\n\n if (!_.isEqual(prevState.values, this.state.values)) {\n const { values, fields } = this.state;\n const error = validate(\n values, \n fields.reduce((acc, cur) => ({ ...acc, [cur]: validateFurtherInformation[cur] }), {})\n );\n const _isValid = error ? true: false;\n this.setState({ \n error: {\n status: _isValid,\n message: error || {}\n }\n });\n }\n\n if (\n !_.isEqual(prevProps.firebaseAuth, this.props.firebaseAuth)\n || !_.isEqual(prevProps.dataShipping, this.props.dataShipping)\n || !_.isEqual(prevProps.isAuthenticated, this.props.isAuthenticated)\n ) {\n this.handleSetValues();\n }\n }\n\n handleSetValues = () => {\n const { dataShipping, isAuthenticated, firebaseAuth } = this.props;\n const email = dataShipping?.email\n ? dataShipping.email\n : isAuthenticated\n ? (firebaseAuth?.email || \"\")\n : \"\";\n const spliteName = isAuthenticated ? firebaseAuth?.displayName?.split(\" \"): null;\n const name = dataShipping?.name\n ? dataShipping.name\n : isAuthenticated\n ? (\n spliteName \n ? spliteName[0]\n : \"\"\n )\n : \"\";\n const lastName = dataShipping?.lastName\n ? dataShipping.lastName\n : isAuthenticated\n ? (\n spliteName \n ? spliteName[1]\n : \"\"\n )\n : \"\";\n const phoneNumber = dataShipping?.phoneNumber\n ? dataShipping.phoneNumber\n : \"\";\n this.setState({\n values: {\n email,\n name,\n lastName,\n phoneNumber\n }\n });\n }\n\n hasError = (field) => {\n const { error, touched } = this.state;\n return error.message.hasOwnProperty(field) && touched.includes(field);\n }\n\n hasProps = (field) => {\n const { fields } = this.state;\n return fields.includes(field);\n }\n\n render() {\n const {\n dialogFurtherInformation,\n CloseDialogFurtherInformation,\n wording,\n applyFormChange,\n shipping\n } = this.props;\n const {\n values,\n error,\n fields\n } = this.state;\n const { email, name, lastName, phoneNumber } = values;\n\n return (\n \n
\n \n {\n wording.checkoutPage.dialogPhoneNumber\n .title\n }\n
\n\n \n
\n\n \n {error.message}\n
\n )}\n\n\n
\n \n {\n await CloseDialogPhoneNumber();\n applyFormChange(phoneNumber);\n }}>\n {wording.checkoutPage.dialogPhoneNumber.ok}\n \n
\n \n CloseDialogPhoneNumber()}>\n {\n wording.checkoutPage.dialogPhoneNumber\n .cancel\n }\n \n
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ checkout, language, login }) => ({\n dialogFurtherInformation: checkout.dialogFurtherInformation,\n wording: language.wording,\n isAuthenticated: login.isAuthenticated,\n firebaseAuth: login.firebaseAuth\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n CloseDialogFurtherInformation: Actions.CloseDialogFurtherInformation\n },\n dispatch\n );\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(CheckOutDialogEmail);\n","import React from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { Link } from 'react-router-dom';\n\nexport default function CheckoutEmpty() {\n const currentLanguage = useSelector(\n ({ language }) => language.currentLanguage\n );\n const navbarCategory = useSelector(\n ({ navigation }) => navigation.navbarCategory\n );\n const wording = useSelector(({ language }) => language.wording);\n const basenameURL = useSelector(({ language }) => language.basenameURL);\n\n return (\n <>\n \n
\n \n {wording.checkoutPage.dialogFurtherInformation.title}\n
\n\n {\n this.hasProps(\"name\") &&\n
\n\n \n \n
\n }\n {\n this.hasProps(\"lastName\") &&\n \n {error.message.name?.join(\", \")}\n
\n )}\n\n \n
\n }\n {\n this.hasProps(\"email\") &&\n \n {error.message.lastName?.join(\", \")}\n
\n )}\n\n \n
\n }\n\n {\n this.hasProps(\"phoneNumber\") &&\n \n {error.message.email?.join(\", \")}\n
\n )}\n\n \n
\n }\n\n \n {error.message.phoneNumber?.join(\", \")}\n
\n )}\n\n
\n \n {\n await CloseDialogFurtherInformation();\n applyFormChange(fields.reduce((acc, cur) => ({ ...acc, [cur]: values[cur] }), {}));\n }}>\n {wording.checkoutPage.dialogFurtherInformation.ok}\n \n
\n \n CloseDialogFurtherInformation()}>\n {wording.checkoutPage.dialogFurtherInformation.cancel}\n \n
\n \n
\n \n - \n
- \n \n {currentLanguage === \"TH\"\n ? navbarCategory[0].categoryNameTh\n : navbarCategory[0].categoryNameEn}\n \n \n
- \n {wording.checkoutPage.checkoutEmpty.titleEmpty}\n \n
\n
\n \n
\n \n
\n \n
\n \n {wording.checkoutPage.checkoutEmpty.bodyMessage}\n
\n\n {wording.checkoutPage.checkoutEmpty.urlMessage1}{\" \"}\n \n {currentLanguage === \"TH\"\n ? navbarCategory[0].categoryNameTh\n : navbarCategory[0].categoryNameEn}\n \n
\n\n
\n \n )\n }\n\n render() {\n const { wording, dialogThaiQR, thaiQRorderingData } = this.props;\n const { paymentStatus, dialogConfirmCancelThaiQr, timeStart } = this.state;\n\n return (\n <>\n \n
\n \n {wording.checkoutPage.dialogConfirmCancelThaiQr.title}\n
\n\n
\n \n this.cancelThaiQrPayment().then(() => this.CloseDialogConfirmCancelThaiQr())}>\n {wording.checkoutPage.dialogConfirmCancelThaiQr.yes}\n \n
\n \n this.CloseDialogConfirmCancelThaiQr()}>\n {wording.checkoutPage.dialogConfirmCancelThaiQr.no}\n \n
\n \n
\n \n {dialogConfirmCancelThaiQr && this.renderDialogConfirmCancelThaiQr()}\n \n );\n }\n}\n\nconst mapStateToProps = ({ checkout, language }) => ({\n dialogThaiQR: checkout.dialogThaiQR,\n wording: language.wording,\n thaiQRorderingData: checkout.thaiQRorderingData\n});\n\nconst mapDispatchToProps = (dispatch) => {\n return bindActionCreators(\n {\n CloseDialogThaiQR: Actions.CloseDialogThaiQR,\n ThaiQRConfirmPayment: Actions.ThaiQRConfirmPayment,\n ThaiQrInquirePayment: Actions.ThaiQrInquirePayment,\n ThaiQrCancelPayment: Actions.ThaiQrCancelPayment,\n ThaiQrInquirePayment: Actions.ThaiQrInquirePayment\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DialogThaiQR);\n","import React, { Component } from 'react';\nimport * as Actions from '../../../store/actions';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport validate from 'validate.js';\nimport _ from 'lodash';\nimport { SHIPPING_SELECT } from '../../../constants';\n\nexport class SelectShipping extends Component {\n\n constructor(props) {\n super(props)\n\n this.state = {\n branches: null,\n values: {\n branch: \"\",\n phoneNumber: \"\"\n },\n inputBranch: \"\",\n errors: null,\n validateChangeShipping: {\n phoneNumber: {\n presence: true,\n numericality: { onlyInteger: true },\n format: /\\d{10}/\n },\n branch: {\n presence: true,\n inclusion: {}\n }\n },\n pickupDate: \"\",\n allowDeliveryToBranch: false\n }\n }\n\n async UNSAFE_componentWillMount() {\n const { GetBranch, wording, GetPickupDate, GetBranchSetting } = this.props;\n await GetBranchSetting().then(branchSetting => this.setState({ allowDeliveryToBranch: branchSetting.allowDeliveryToBranch }));\n\n await GetBranch().then(branches => {\n this.setState({\n branches,\n validateChangeShipping: {\n ...this.state.validateChangeShipping,\n branch: {\n inclusion: {\n within: branches,\n message: wording.checkoutPage.selectShipping.errorBranch\n }\n }\n }\n });\n });\n await GetPickupDate().then(pickupDate => this.setState({ pickupDate }));\n }\n\n componentDidMount() {\n this.handleCheckError();\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (!_.isEqual(prevState.values, this.state.values)) {\n this.handleCheckError();\n }\n }\n\n handleCheckError = async () => {\n const { values, validateChangeShipping } = this.state;\n const errors = validate(values, validateChangeShipping);\n\n const isValid = errors ? false : true;\n\n this.setState(prevSt => ({\n ...prevSt,\n errors: errors || null\n }));\n\n await this.props.onChangeDataShippingBranch({ value: isValid, name: \"isValid\" });\n\n if (!isValid) await this.props.onChangeDataShippingBranch({ value: Object.keys(errors), name: \"errors\" });\n\n if (!errors?.hasOwnProperty(\"phoneNumber\")) this.props.onChangeDataShippingBranch({ value: values.phoneNumber, name: \"phoneNumber\" });\n }\n\n handleChangeSelectedBranch = e => {\n e.persist();\n const { branches, values } = this.state;\n let value = e.target.value;\n this.setState({ inputBranch: value });\n let branchSelected = branches?.find(branch => branch.name?.trim() == value);\n if (branchSelected) this.props.onChangeDataShippingBranch({ value: branchSelected.id, name: \"branchId\" });\n this.setState({ values: { ...values, branch: branchSelected || { name: value } } });\n }\n\n handleChangePhoneNumber = e => {\n e.persist();\n const { values } = this.state;\n this.setState({ values: { ...values, phoneNumber: e.target.value } });\n }\n\n render() {\n const { onChangeSelected, shippingSelected, wording } = this.props;\n const { branches, values, errors, inputBranch, pickupDate, allowDeliveryToBranch } = this.state;\n\n return (\n <>\n {\n allowDeliveryToBranch &&\n \n
\n \n {wording.checkoutPage.dialogThaiQR.title}\n
\n\n {dialogThaiQR && thaiQRorderingData && thaiQRorderingData.qrCode ? (\n
\n
\n \n \n \n
\n ) : null}\n \n
\n {dialogThaiQR && thaiQRorderingData && thaiQRorderingData.qrCode\n ? paymentStatus === 'Pending'\n ? wording.checkoutPage.dialogThaiQR.WaitingForPayment\n : paymentStatus === 'Paid'\n ? wording.checkoutPage.dialogThaiQR.PaymentCompleted\n : wording.checkoutPage.dialogThaiQR.WaitingForPayment\n : wording.checkoutPage.dialogThaiQR.WaitingForQRcode}{' '}\n
\n
\n }\n\n {\n shippingSelected == SHIPPING_SELECT.BRANCH &&\n \n
\n {wording.checkoutPage.selectShipping.title}
\n\n
\n \n onChangeSelected(SHIPPING_SELECT.POST_OFFICE)} id=\"shippingPostOffice\" checked={shippingSelected == SHIPPING_SELECT.POST_OFFICE} />\n \n
\n {\n true &&\n \n onChangeSelected(SHIPPING_SELECT.BRANCH)} id=\"shippingBranch\" checked={shippingSelected == SHIPPING_SELECT.BRANCH} />\n \n
\n }\n \n
\n }\n\n \n )\n }\n}\n\nconst mapStateToProps = ({ language }) => ({\n wording: language.wording\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators({\n GetBranch: Actions.getBranch,\n GetPickupDate: Actions.GetPickupDate,\n GetBranchSetting: Actions.getBranchSetting\n }, dispatch);\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SelectShipping);\n","import React, { Component, Fragment } from 'react';\nimport { Link } from 'react-router-dom';\nimport CheckoutTitle from './components/checkout.title';\nimport PurchaseOrderTableHeader from './components/checkout.purchase-order-table-header';\nimport DialogPolicy from './components/checkout.dialog-policy';\nimport DialogSFPlusInfo from './components/checkout.dialog-sf-plus-info';\nimport DialogSfPlusVlidatePin from './components/checkout.dialog-input-pin';\nimport LayoutPreloadTransparent from '../Preload/layout.preload-transparent';\nimport DialogCreateAddress from '../Address/address.dialog-create';\nimport DialogCreateTaxAddress from '../Address/tax-address.dialog-create';\nimport DialogPhoneNumber from './components/checkout.dialog-phone-number';\nimport DialogFurtherInformation from './components/checkout.form-further-information';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../store/actions';\nimport {\n API,\n CURRENCY,\n PAYMENT_TYPE,\n KBANK,\n CONST_2C2P,\n BANK_INVOICE,\n SHIPPING_SELECT,\n TYPE_USAGE,\n TYPE_PROMOTION\n} from '../../constants';\nimport { formatMoney } from '../../services';\nimport classNames from 'classnames';\nimport _ from 'lodash';\nimport { withRouter } from 'react-router-dom';\nimport './checkout.css';\nimport CheckoutEmpty from './components/checkout.empty';\nimport { firstUpperCase, pad } from '../../utils/';\nimport DialogThaiQR from './components/checkout.dialog-thaiqr';\nimport SelectShipping from './components/checkout.select-shipping';\nimport KPayment from \"./components/checkout.kpayment\";\n\nclass CheckoutMain extends Component {\n constructor(props) {\n super(props);\n this.state = {\n shippingAddress: {\n address: '',\n cardMember: '',\n district: '',\n subDistrict: '',\n email: '',\n id: '',\n lastName: '',\n name: '',\n phoneNumber: '',\n province: '',\n zipCode: ''\n },\n switchShippingAddress: false,\n radioShippingAddress: '0',\n taxInvoiceAddress: {\n id: '',\n name: '',\n lastName: '',\n phoneNumber: '',\n email: '',\n address: '',\n district: '',\n subbdistrict: '',\n province: '',\n zipCode: '',\n taxId: ''\n },\n TaxInvoiceCheckbox: false,\n switchTaxInvoiceAddress: false,\n radioTaxInvoiceAddress: '0',\n paymentMethod: [\n { id: 'credit-card', name: 'Credit / Debit Card' },\n { id: 'sf-plus', name: 'SF Plus' },\n { id: 'qrcode', name: 'QR Code' }\n ],\n paymentMethodSelected: 0,\n btnPurchaseState: true,\n shippingCost: 0,\n freeShipping: false,\n emailShipping: false,\n subTotal: 0,\n checkOutData: this.props.checkOutData,\n colorselected: this.props.colorselected,\n sizeselected: this.props.sizeselected,\n promotiontotal: this.props.promotiontotal,\n promotionCartSelected: this.props.promotionCartSelected,\n promotionprice: 0,\n radioShippingSelected: SHIPPING_SELECT.POST_OFFICE,\n dataShippingBranch: {\n phoneNumber: \"\",\n branchId: \"\",\n isValid: false,\n errors: null\n },\n showKbankpaymentDialog: false,\n };\n }\n\n async componentDidMount() {\n const { userAddress, userTaxInvoiceAddress, GetPaymentType, GetAddress, buyNow, UpdatePromotion, checkOutData, promotionCartSelected } = this.props;\n window.scrollTo(0, 0);\n let emailShipping = checkOutData?.every(item => item.type === \"voucher\") || false;\n let freeShipping = false;\n let subTotal = this.handleSubtotal(checkOutData, promotionCartSelected);\n this.setState({\n emailShipping,\n freeShipping,\n subTotal,\n checkOutData\n });\n await GetAddress();\n await GetPaymentType();\n UpdatePromotion(checkOutData?.map(item => item.itemId));\n\n if (userAddress && userAddress.length > 0 && !emailShipping) {\n const userAddressDefault = await _.filter(\n userAddress,\n add => add.isDefault === 'Y'\n );\n const radioShippingAddressSelected = await _.findIndex(\n userAddress,\n add => add.isDefault === 'Y'\n );\n await this.setState(prevSt => ({\n ...prevSt,\n shippingAddress:\n userAddressDefault.length === 0\n ? { ...this.props.userAddress[0] }\n : { ...userAddressDefault[0] },\n radioShippingAddress: radioShippingAddressSelected\n }));\n }\n\n if (userTaxInvoiceAddress && userTaxInvoiceAddress.length > 0) {\n const userTaxInvoiceAddressDefault = _.filter(\n userTaxInvoiceAddress,\n tiadd => tiadd.isDefault === 'Y'\n );\n const radioTaxInvoiceAddressSelected = _.findIndex(\n userTaxInvoiceAddress,\n tiadd => tiadd.isDefault === 'Y'\n );\n await this.setState(prevSt => ({\n ...prevSt,\n taxInvoiceAddress: { ...userTaxInvoiceAddressDefault[0] },\n radioTaxInvoiceAddress: radioTaxInvoiceAddressSelected\n }));\n }\n }\n\n async componentDidUpdate(prevProps, prevState) {\n if (!_.isEqual(prevState.shippingAddress?.province, this.state.shippingAddress.province)\n || !_.isEqual(prevState.freeShipping, this.state.freeShipping)) {\n this.handleShippingCost();\n }\n\n if (!_.isEqual(prevProps.firebaseAuth, this.props.firebaseAuth)) {\n const { GetAddress, UpdatePromotion } = this.props;\n const { checkOutData } = this.state;\n await GetAddress();\n await UpdatePromotion(checkOutData.map(item => item.itemId));\n }\n\n if (!_.isEqual(prevProps.userAddress, this.props.userAddress)) {\n if (this.props.userAddress && this.props.userAddress.length > 0 && !this.state.emailShipping) {\n const { switchShippingAddress } = this.state;\n const userAddressDefault = await _.filter(\n this.props.userAddress,\n add => add.isDefault === 'Y'\n );\n const radioShippingAddressSelected = await _.findIndex(\n this.props.userAddress,\n add => add.isDefault === 'Y'\n );\n await this.setState(prevSt => ({\n ...prevSt,\n shippingAddress:\n userAddressDefault.length === 0\n ? { ...this.props.userAddress[0] }\n : { ...userAddressDefault[0] },\n radioShippingAddress: switchShippingAddress\n ? this.props.userAddress.length - 1\n : radioShippingAddressSelected\n }));\n }\n }\n\n if (!_.isEqual(prevProps.userTaxInvoiceAddress, this.props.userTaxInvoiceAddress)) {\n if (\n this.props.userTaxInvoiceAddress &&\n this.props.userTaxInvoiceAddress.length > 0\n ) {\n const { switchTaxInvoiceAddress } = this.state;\n const userTaxInvoiceAddressDefault = _.filter(\n this.props.userTaxInvoiceAddress,\n tiadd => tiadd.isDefault === 'Y'\n );\n const radioTaxInvoiceAddressSelected = _.findIndex(\n this.props.userTaxInvoiceAddress,\n tiadd => tiadd.isDefault === 'Y'\n );\n this.setState(prevSt => ({\n ...prevSt,\n taxInvoiceAddress: { ...userTaxInvoiceAddressDefault[0] },\n radioTaxInvoiceAddress: switchTaxInvoiceAddress\n ? this.props.userTaxInvoiceAddress.length - 1\n : radioTaxInvoiceAddressSelected\n }));\n }\n }\n }\n\n componentWillUnmount() {\n this.props.ClearDiscountCode();\n }\n\n handleRadioAddressChange = (name, index) => {\n this.setState({ [name]: index });\n };\n\n handleSubmitRadioShippingAddress = async type => {\n if (type === 'change') {\n const { radioShippingAddress } = this.state;\n const { userAddress } = this.props;\n const newShippingAddress = _.filter(\n userAddress,\n (address, index) => index === radioShippingAddress\n );\n await this.setState(prevSt => ({\n ...prevSt,\n shippingAddress: { ...newShippingAddress[0] },\n switchShippingAddress: false\n }));\n } else {\n const { userAddress } = this.props;\n const radioShippingAddressSelected = _.findIndex(\n userAddress,\n add => add.isDefault === 'Y'\n );\n this.setState(prevSt => ({\n ...prevSt,\n radioShippingAddress: radioShippingAddressSelected,\n switchShippingAddress: false\n }));\n }\n };\n\n handleSubmitRadioTaxInvoiceAddress = type => {\n if (type === 'change') {\n const { radioTaxInvoiceAddress } = this.state;\n const { userTaxInvoiceAddress } = this.props;\n const newTaxInvoiceAddress = _.filter(\n userTaxInvoiceAddress,\n (address, index) => index === radioTaxInvoiceAddress\n );\n this.setState(prevSt => ({\n ...prevSt,\n taxInvoiceAddress: { ...newTaxInvoiceAddress[0] },\n switchTaxInvoiceAddress: false\n }));\n } else {\n const { userTaxInvoiceAddress } = this.props;\n const radioShippingAddressSelected = _.findIndex(\n userTaxInvoiceAddress,\n add => add.isDefault === 'Y'\n );\n this.setState(prevSt => ({\n ...prevSt,\n radioTaxInvoiceAddress: radioShippingAddressSelected,\n switchTaxInvoiceAddress: false\n }));\n }\n };\n\n handlePayMentMethodChange = async value => {\n const { OpenDialogSfPlusAccountNotLinked, FirebaseSfPlusUser } = this.props;\n if (value === 1) {\n await FirebaseSfPlusUser();\n const { isSfPlusLinked } = await this.props;\n if (!isSfPlusLinked) OpenDialogSfPlusAccountNotLinked();\n }\n this.setState({ paymentMethodSelected: value, btnPurchaseState: true });\n };\n\n handleTaxInvoiceCheckbox = async () => {\n await this.setState(prevState => ({\n ...prevState,\n TaxInvoiceCheckbox: !prevState.TaxInvoiceCheckbox\n }));\n\n const { TaxInvoiceCheckbox } = await this.state;\n\n if (TaxInvoiceCheckbox) {\n const { GetTaxAddress, OpenDialogCreateTaxAddress, isAuthenticated } = this.props;\n if (!isAuthenticated) {\n OpenDialogCreateTaxAddress();\n return;\n }\n await GetTaxAddress();\n const { userTaxInvoiceAddress } = await this.props;\n if (userTaxInvoiceAddress && userTaxInvoiceAddress.length === 0) {\n OpenDialogCreateTaxAddress();\n }\n }\n };\n\n handlePurchaseOrder = async () => {\n const {\n TaxInvoiceCheckbox,\n paymentMethodSelected,\n shippingCost,\n emailShipping,\n shippingAddress,\n subTotal,\n dataShippingBranch,\n radioShippingSelected\n } = this.state;\n const {\n userAddress,\n OpenDialogCreateAddress,\n userTaxInvoiceAddress,\n OpenDialogCreateTaxAddress,\n isSfPlusLinked,\n OpenDialogSfPlusAccountNotLinked,\n chackBalanceData,\n OpenDialogSfPlusBalance,\n OpenDialogCheckOutPolicy,\n OpenDialogPhoneNumber,\n OpenDialogFurtherInformation,\n isAuthenticated\n } = this.props;\n\n const dataShipping = radioShippingSelected == SHIPPING_SELECT.BRANCH ? dataShippingBranch : shippingAddress;\n\n ////// handle address info first\n if (!dataShippingBranch.isValid && radioShippingSelected == SHIPPING_SELECT.BRANCH) {\n const { $ } = window;\n $('html, body').animate({\n scrollTop: $(\"#input-select-branch\").offset().top - window.innerHeight / 2\n }, 'fast', () => {\n let check = dataShippingBranch?.errors?.includes(SHIPPING_SELECT.BRANCH);\n check == null || check\n ? $(\"#input-select-branch\").focus().nextAll(\".error\").text(\"Invalid data.\").show()\n : $(\"#input-telephone\").focus().nextAll(\".error\").text(\"Invalid data.\").show();\n });\n } else if ((!userAddress || (userAddress.length === 0 && !emailShipping)) && radioShippingSelected != SHIPPING_SELECT.BRANCH) {\n OpenDialogCreateAddress();\n } else if ((!isAuthenticated && !dataShipping.email) || !dataShipping.phoneNumber || (!dataShipping.name && !dataShipping.lastName)) {\n OpenDialogFurtherInformation();\n } else {\n if (\n TaxInvoiceCheckbox &&\n userTaxInvoiceAddress &&\n userTaxInvoiceAddress.length === 0\n ) {\n OpenDialogCreateTaxAddress();\n } else {\n if (paymentMethodSelected === 0) {\n OpenDialogCheckOutPolicy(PAYMENT_TYPE.CREDIT_CARD);\n } else if (paymentMethodSelected === 1) {\n if (!isSfPlusLinked) {\n OpenDialogSfPlusAccountNotLinked();\n } else {\n //////////need check balance with total\n const total = parseInt(subTotal) + parseInt(shippingCost);\n if (parseInt(chackBalanceData.strBalance) < total) {\n OpenDialogSfPlusBalance();\n } else {\n OpenDialogCheckOutPolicy(PAYMENT_TYPE.SFPLUS);\n }\n }\n } else if (paymentMethodSelected === 2) {\n OpenDialogCheckOutPolicy(PAYMENT_TYPE.THAI_QR);\n }\n }\n }\n };\n\n handleShowKbankPayment = (show) => this.setState({ showKbankpaymentDialog: show })\n handleAfterAcceptPolicy = async () => {\n const { paymentMethodSelected } = this.state;\n const {\n doAfterAcceptPolicy,\n OpenDialogSfPlusValidatePin,\n CreditCardOrdering,\n defaultCreditCardPaymentGatway,\n OpenDialogThaiQR,\n ThaiQROrdering\n } = this.props;\n if (\n paymentMethodSelected === 0 &&\n doAfterAcceptPolicy === PAYMENT_TYPE.CREDIT_CARD\n ) {\n await CreditCardOrdering(this.handleGetAddressShipping());\n const {\n orderingData,\n kBankData,\n GetKPaymentHash,\n Get2c2pHash\n } = await this.props;\n const { INVMERCHANT, AMOUNT2 } = kBankData;\n\n if (orderingData?.vistatransno) {\n ////// value from transaction\n const MOD_INVMERCHANT = `${BANK_INVOICE}${pad(INVMERCHANT, 11)}`;\n if (defaultCreditCardPaymentGatway === 'K Payment') {\n // await this.setState(prevSt => ({\n // ...prevSt,\n // showKbankpaymentDialog: true\n // }));\n\n const _CHECKSUM = await GetKPaymentHash(\n AMOUNT2,\n MOD_INVMERCHANT\n ).then(_CHECKSUM => _CHECKSUM);\n\n ////// modify k-bank gateway form\n document.getElementById('AMOUNT2').value = AMOUNT2;\n document.getElementById('INVMERCHANT').value = MOD_INVMERCHANT;\n document.getElementById('CHECKSUM').value = _CHECKSUM;\n } else if (defaultCreditCardPaymentGatway === '2C2P') {\n let AMOUNT = AMOUNT2.toString().padStart(12, '0');\n const HASH_VALUE = await Get2c2pHash(AMOUNT, MOD_INVMERCHANT).then(\n HASH_VALUE => HASH_VALUE\n );\n\n ////// modify 2C2P gateway form\n document.getElementById('amount').value = AMOUNT;\n document.getElementById('order_id').value = MOD_INVMERCHANT;\n document.getElementById('hash_value').value = HASH_VALUE;\n }\n\n document.forms['postform'].submit();\n }\n } else if (\n paymentMethodSelected === 1 &&\n doAfterAcceptPolicy === PAYMENT_TYPE.SFPLUS\n ) {\n OpenDialogSfPlusValidatePin();\n } else if (\n paymentMethodSelected === 2 &&\n doAfterAcceptPolicy === PAYMENT_TYPE.THAI_QR\n ) {\n await ThaiQROrdering(this.handleGetAddressShipping());\n const { thaiQRorderingData } = await this.props;\n\n if (thaiQRorderingData?.vistatransno) {\n OpenDialogThaiQR();\n }\n }\n };\n\n handleGetAddressShipping = () => {\n const {\n shippingAddress,\n shippingCost,\n TaxInvoiceCheckbox,\n taxInvoiceAddress,\n dataShippingBranch,\n radioShippingSelected\n } = this.state;\n const {\n name,\n lastName,\n phoneNumber,\n address,\n district,\n subDistrict,\n province,\n zipCode,\n branchId,\n email\n } = radioShippingSelected == SHIPPING_SELECT.POST_OFFICE ? shippingAddress : dataShippingBranch;\n return {\n name,\n lastName,\n phoneNumber,\n address,\n district,\n subDistrict,\n province,\n zipCode,\n shippingCost,\n TaxInvoiceCheckbox,\n taxInvoiceAddress,\n deliveryType: firstUpperCase(radioShippingSelected),\n branchId,\n email\n };\n }\n\n handleShippingCost = async () => {\n const { freeShipping, checkOutData, emailShipping, promotionCartSelected, subTotal, promotiontotal, shippingAddress } = this.state;\n if (freeShipping || emailShipping) {\n this.setState({ shippingCost: 0 });\n return;\n }\n const { GetShippingCost } = this.props;\n const { province, district, zipCode } = shippingAddress;\n\n const address = { province, district, zipCode }\n if (checkOutData) {\n const shipping = await GetShippingCost(\n subTotal - promotiontotal,\n checkOutData\n .concat(promotionCartSelected)\n .map((item, index) => ({ itemId: `${item.itemId}-${index}`, qty: item.qty, weight: item.weight })) /* items */,\n address,\n );\n this.setState({ shippingCost: shipping.shippingCost });\n }\n };\n\n handleSubtotal = (checkOutData, promotionCartSelected = []) => {\n const initialValue = 0;\n const total =\n checkOutData &&\n checkOutData.reduce((accumulator, currentValue) => {\n const totalPricePerItem = currentValue.qty * currentValue.price;\n return accumulator + totalPricePerItem;\n }, initialValue);\n const totalPromotion = promotionCartSelected.reduce((accumulator, currentValue) => {\n const totalPricePerItem = currentValue.qty * currentValue.price;\n return accumulator + totalPricePerItem;\n }, initialValue)\n return total + totalPromotion;\n };\n\n handleChangePhoneNumber = phoneNumber => {\n const { shippingAddress } = this.state;\n this.setState({\n shippingAddress: {\n ...shippingAddress,\n phoneNumber\n }\n });\n this.handlePurchaseOrder();\n };\n\n handleChangeFurtherInformationAddress = async values => {\n const { radioShippingSelected } = this.state;\n const prop = radioShippingSelected == SHIPPING_SELECT.BRANCH ? \"dataShippingBranch\" : \"shippingAddress\";\n await this.setState({\n [prop]: {\n ...this.state[prop],\n ...values\n }\n });\n this.handlePurchaseOrder();\n };\n\n handleCancelCreateTaxAddress = async () => {\n await this.setState(prevSt => ({\n ...prevSt,\n TaxInvoiceCheckbox: false\n }));\n };\n\n handleChangeTaxAddress = async values => {\n await this.setState({\n taxInvoiceAddress: {\n ...this.state.taxInvoiceAddress,\n ...values\n }\n });\n };\n\n handleChangeSelectShipping = async name => {\n await this.setState({ freeShipping: name == SHIPPING_SELECT.BRANCH, radioShippingSelected: name });\n }\n\n handleChangeDataShippingBranch = async data => {\n return await this.setState({ dataShippingBranch: { ...this.state.dataShippingBranch, [data.name]: data.value } });\n }\n\n render() {\n const {\n shippingAddress,\n switchShippingAddress,\n radioShippingAddress,\n shippingCost,\n taxInvoiceAddress,\n switchTaxInvoiceAddress,\n radioTaxInvoiceAddress,\n TaxInvoiceCheckbox,\n paymentMethod,\n paymentMethodSelected,\n btnPurchaseState,\n subTotal,\n checkOutData,\n colorselected,\n sizeselected,\n promotiontotal,\n promotionCartSelected,\n emailShipping,\n radioShippingSelected,\n dataShippingBranch\n } = this.state;\n\n const {\n wording,\n basenameURL,\n\n userAddress,\n OpenDialogCreateAddress,\n\n userTaxInvoiceAddressFetching,\n userTaxInvoiceAddress,\n OpenDialogCreateTaxAddress,\n\n sfPlusChecked,\n firebaseSfPlusUser,\n chackBalanceData,\n firebaseAuth,\n isAuthenticated,\n\n dialogBalance,\n CloseDialogSfPlusBalance,\n\n dialogAccountNotLinked,\n CloseDialogSfPlusAccountNotLinked,\n\n dialogValidatePin,\n validatePinError,\n SFPlusValidatePin,\n CloseDialogSfPlusValidatePin,\n\n orderingFetching,\n history,\n\n defaultCreditCardPaymentGatway,\n paymentType_sfPlus,\n paymentType_qrCode,\n\n dialogThaiQR,\n CloseDialogThaiQR,\n\n promotion\n } = this.props;\n\n const deliveryAddress = radioShippingSelected == SHIPPING_SELECT.POST_OFFICE ? shippingAddress : dataShippingBranch;\n\n const deliveryAddressAndShippingCost = {\n ...deliveryAddress,\n shippingCost,\n TaxInvoiceCheckbox,\n taxInvoiceAddress,\n deliveryType: firstUpperCase(radioShippingSelected)\n };\n\n if (!checkOutData || checkOutData.length === 0) {\n return \n
\n {wording.checkoutPage.selectShipping.shippingBranch.title}
\n\n
\n \n
\n \n \n this.handleChangeSelectedBranch(e)} />\n \n \n {errors?.hasOwnProperty(\"branch\") && * {errors?.branch[0]}}\n
\n \n \n this.handleChangePhoneNumber(e)} />\n \n {errors?.hasOwnProperty(\"phoneNumber\") && * {errors?.phoneNumber[0]}}\n
\n \n
\n )\n }\n \n )\n }\n\n {TaxInvoiceCheckbox && (\n \n
\n\n \n
\n \n
\n \n {wording.checkoutPage.checkout.purchaseOrder}\n
\n\n \n
\n
\n | \n | \n\n \n
| \n\n \n {item.promotionPrice > 0 && item.promotionPrice < item.price ? (\n <>\n | \n\n \n {item.qty}\n | \n\n\n \n {`${CURRENCY.B}${formatMoney(item.qty * (\n item.promotionPrice > 0 && item.promotionPrice < item.price\n ? item.promotionPrice\n : item.price\n ))}`\n }\n \n | \n \n );\n })}\n\n {(promotionCartSelected?.length > 0 && promotion.responcePromotionitem.map((items, indexs) => {\n return (\n\n {model.item.map((item, index) => {\n return (\n | \n \n
| \n \n {model.promotionPrice > 0 && model.promotionPrice < model.price ? (\n <>\n | \n\n \n {proCartSelected?.qty || items.amount}\n | \n\n\n \n {`${CURRENCY.B}${formatMoney(items.amount * model.promotionPrice)}`\n }\n \n | \n \n )}\n
\n \n {wording.checkoutPage.shippingAddress.add}\n \n )}\n \n )}\n
\n \n
\n )}\n\n {switchShippingAddress &&\n userAddress &&\n userAddress.length > 0 && (\n \n
\n {emailShipping ? (\n <>\n \n {\n wording.checkoutPage[\n emailShipping ? 'EmailAddress' : 'shippingAddress'\n ].title\n }\n
\n\n
\n \n ) : (\n <>\n {!switchShippingAddress &&\n userAddress &&\n userAddress.length > 0 && (\n \n {firebaseAuth && firebaseAuth.email}\n
\n \n {\n if (isAuthenticated)\n this.setState({ switchShippingAddress: true })\n else\n OpenDialogCreateAddress()\n }}>\n {wording.checkoutPage.shippingAddress.change}\n
\n \n {`${shippingAddress.name} ${shippingAddress.lastName} ${shippingAddress.phoneNumber}`}\n \n {` ${shippingAddress.address}, ${(!shippingAddress || !shippingAddress.subDistrict ? \"\" : `${shippingAddress.subDistrict}, `)}${shippingAddress.district}, ${shippingAddress.province}, ${shippingAddress.zipCode}`}\n \n
\n {shippingAddress.isDefault === 'Y' && isAuthenticated && (\n \n {wording.checkoutPage.shippingAddress.default}\n
\n )}\n \n
\n )}\n\n {userAddress && userAddress.length === 0 && (\n \n \n history.push(`${basenameURL}/user/address`)\n }>\n {\n wording.checkoutPage.shippingAddress\n .manageAddress\n }\n \n \n {wording.checkoutPage.shippingAddress.add}\n \n
\n \n
\n - \n {userAddress &&\n userAddress.map((address, index) => {\n return (\n
- \n
\n \n this.handleSubmitRadioShippingAddress('change')\n }>\n {wording.checkoutPage.shippingAddress.ok}\n \n \n this.handleSubmitRadioShippingAddress('cancel')\n }>\n {wording.checkoutPage.shippingAddress.cancel}\n \n
\n \n \n {wording.checkoutPage.taxInvoiceAddress.add}\n \n )}\n
\n \n )}\n\n {subTotal - promotiontotal + shippingCost > 0 && (\n \n
\n )}\n\n {switchTaxInvoiceAddress &&\n userTaxInvoiceAddress &&\n userTaxInvoiceAddress.length > 0 && (\n \n
\n {userTaxInvoiceAddressFetching && (\n \n {wording.checkoutPage.taxInvoiceAddress.title}\n
\n{wording.checkoutPage.checkout.checking}
\n )}\n {!switchTaxInvoiceAddress &&\n ((userTaxInvoiceAddress &&\n userTaxInvoiceAddress.length > 0) || (!isAuthenticated && taxInvoiceAddress.name)) && (\n\n {console.log(taxInvoiceAddress)}\n \n this.setState({ switchTaxInvoiceAddress: true })\n }>\n {wording.checkoutPage.taxInvoiceAddress.change}\n
\n \n {`${taxInvoiceAddress.name} ${taxInvoiceAddress.lastName} ${taxInvoiceAddress.taxId}`}\n \n {` ${taxInvoiceAddress.address}, ${(!taxInvoiceAddress || !taxInvoiceAddress.subDistrict ? \"\" : `${taxInvoiceAddress.subDistrict}, `)} ${taxInvoiceAddress.district}, ${taxInvoiceAddress.province}, ${taxInvoiceAddress.zipCode}`}\n \n
\n {`${taxInvoiceAddress.phoneNumber} ${taxInvoiceAddress.email}`}\n
\n \n {`${taxInvoiceAddress.phoneNumber} ${taxInvoiceAddress.email}`}\n
\n {wording.checkoutPage.taxInvoiceAddress.default}\n
\n \n
\n )}\n\n {(userTaxInvoiceAddress && userTaxInvoiceAddress.length === 0) || (!isAuthenticated && !taxInvoiceAddress.name) && (\n \n \n history.push(`${basenameURL}/user/address`)\n }>\n {\n wording.checkoutPage.taxInvoiceAddress\n .manageAddress\n }\n \n \n {wording.checkoutPage.taxInvoiceAddress.add}\n \n
\n \n
\n - \n {userTaxInvoiceAddress &&\n userTaxInvoiceAddress.map((address, index) => {\n return (\n
- \n
\n \n this.handleSubmitRadioTaxInvoiceAddress('change')\n }>\n {wording.checkoutPage.taxInvoiceAddress.ok}\n \n \n this.handleSubmitRadioTaxInvoiceAddress('cancel')\n }>\n {wording.checkoutPage.taxInvoiceAddress.cancel}\n \n
\n \n
\n \n \n )}\n\n \n
\n \n
\n\n \n {wording.checkoutPage.paymentMethod.title}\n
\n\n \n
\n )}\n \n {paymentMethod.map((method, index) => {\n if (\n (method.id === 'credit-card' &&\n defaultCreditCardPaymentGatway) ||\n (method.id === 'sf-plus' && paymentType_sfPlus) ||\n (method.id === 'qrcode' && paymentType_qrCode)\n ) {\n return (\n \n this.handlePayMentMethodChange(index)\n }>\n {method.id === 'credit-card'\n ? wording.checkoutPage.paymentMethod\n .creditDebitCard\n : null}\n {method.id === 'sf-plus'\n ? wording.checkoutPage.paymentMethod.sfPlus\n : null}\n {method.id === 'qrcode'\n ? wording.checkoutPage.paymentMethod.qrCode\n : null}\n \n );\n }\n })}\n
\n\n \n \n
\n\n {paymentMethodSelected === 1 && !sfPlusChecked && (\n \n
\n \n {defaultCreditCardPaymentGatway === 'K Payment' ? (\n \n \n
\n {wording.checkoutPage.checkout.checking}
\n )}\n {paymentMethodSelected === 1 && sfPlusChecked && (\n\n
\n \n
\n \n \n {firebaseSfPlusUser && (\n
\n \n {`${wording.checkoutPage.paymentMethod\n .sfPlusBalance\n } (${CURRENCY.B}${formatMoney(\n parseInt(chackBalanceData.strBalance)\n )})`}\n
\n \n {\n wording.checkoutPage.paymentMethod\n .sfPlusWallet\n }\n \n
\n )}\n \n \n {\n wording.checkoutPage.paymentMethod\n .sfPlusWallet\n }\n \n
\n
\n \n \n
\n \n \n \n
\n
\n\n {subTotal - promotiontotal + shippingCost > 0 && (\n | \n {wording.checkoutPage.submit.subtotal}\n | \n\n \n {`${CURRENCY.B}${formatMoney(subTotal)}`}\n \n | \n
|---|---|
| \n {wording.checkoutPage.submit.shipping}\n | \n\n \n {`${CURRENCY.B}${formatMoney(shippingCost)}`}\n \n | \n
| \n \n {wording.cartPage.cartTotal.promotion}\n \n {promotion.responcePromotionitem.map((item, index) => (\n \n \n )}\n \n \n
| \n |
| \n {wording.checkoutPage.submit.total}\n | \n\n \n \n {`${CURRENCY.B}${formatMoney(\n subTotal -\n promotiontotal +\n parseInt(shippingCost)\n )}`}\n \n \n | \n
\n event.stopPropagation()}\n onChange={() => this.handleTaxInvoiceCheckbox()}\n />\n \n {wording.checkoutPage.submit.reqInvTax}\n \n
\n )}\n\n \n this.handlePurchaseOrder()}>\n {wording.checkoutPage.submit.purchase}\n \n
\n \n {/*
\n \n\n {wording.paymentSuccessPage.title}
*/}\n- \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n
- {wording.title} \n
\n
\n \n
\n \n
\n \n 
\n
\n \n {wording.bodyMessage.line1}
\n{wording.bodyMessage.line2}
\n{wording.bodyMessage.line3}
\n\n {wording.urlMessage1}{' '}\n {wording.urlMessage2}\n
\n\n {/*
\n \n\n {wording.paymentFailurePage.title}
*/}\n- \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n
- {wording.paymentFailurePage.title} \n
\n
\n \n
\n \n
\n \n 
\n
\n \n {wording.paymentFailurePage.bodyMessage}
\n\n {wording.paymentFailurePage.urlMessage1}{' '}\n {wording.paymentFailurePage.urlMessage2}\n
\n\n {/*
\n \n\n {wording.paymentCancelledPage.title}
*/}\n- \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n
- {wording.paymentCancelledPage.title} \n
\n
\n \n
\n \n
\n \n \n
\n \n {wording.paymentCancelledPage.bodyMessage}
\n\n {wording.paymentCancelledPage.urlMessage1}{' '}\n {wording.paymentCancelledPage.urlMessage2}\n
\n\n
\n \n );\n}\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\n\nclass UserSideMenu extends Component {\n render() {\n const { history, wording, basenameURL } = this.props;\n return (\n <>\n - \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0].categoriesNameTh\n : navbarCategory[0].categoriesNameEn}\n \n \n
- {wording.usermenu.myAccount} \n {invoice ? (\n <>\n
- \n {title}\n \n
- {invoice} \n \n ) : (\n
- {title} \n )}\n
\n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ language }) => ({\n wording: language.wording,\n basenameURL: language.basenameURL\n});\n\nexport default withRouter(connect(mapStateToProps)(UserSideMenu));\n","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { OpenDialogCreateAddress } from '../../../../store/actions';\nimport '../address.css';\n\nexport default function NotHaveShippingAddress() {\n const dispatch = useDispatch();\n const wording = useSelector(({ language }) => language.wording);\n\n return (\n \n {wording.usermenu.myAccount}\n
\n- \n
- \n history.push(`${basenameURL}/user/address`)}>\n {wording.usermenu.address.myAddress}\n \n \n
- \n history.push(`${basenameURL}/user/purchase`)}>\n {wording.usermenu.purchase.myPurchase}\n \n \n
- \n history.push(`${basenameURL}/user/return`)}>\n {wording.usermenu.return.myReturn}\n \n \n
- \n history.push(`${basenameURL}/user/voucher`)}>\n {wording.usermenu.voucher.myVoucher}\n \n \n
\n \n
\n \n \n );\n}\n","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { OpenDialogCreateTaxAddress } from '../../../../store/actions';\nimport '../address.css';\n\nexport default function NotHaveTaxInvoiceAddress() {\n const dispatch = useDispatch();\n const wording = useSelector(({ language }) => language.wording);\n\n return (\n \n
\n \n \n dispatch(OpenDialogCreateAddress())}>\n {wording.usermenu.address.shippingAddress.add}\n \n
\n \n
\n \n
\n \n 
\n
\n \n \n {wording.usermenu.address.shippingAddress.notHaveShippingAddress}\n
\n\n \n
\n \n \n );\n}\n","import React, { Component } from 'react';\nimport Modal from 'react-awesome-modal';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../store/actions';\nimport { THAI_PROVINCES, THAI_DISTRICTS, THAI_SUB_DISTRICTS } from '../../constants';\nimport validate from 'validate.js';\nimport _ from 'lodash';\nimport './address.css';\nimport { sortCompare } from '../../utils/'\n\nconst pattern = { taxId: /\\d{13}/, zipCode: /\\d{5}/, phoneNumber: /\\d{10}/ };\n\nconst validateChangeAddress = {\n name: {\n presence: { allowEmpty: false, message: 'is required' }\n },\n lastName: {\n presence: { allowEmpty: false, message: 'is required' }\n },\n phoneNumber: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: pattern.phoneNumber\n },\n zipCode: {\n presence: { allowEmpty: false, message: 'is required' },\n // numericality: { onlyInteger: true },\n // format: pattern.zipCode\n },\n address: {\n presence: { allowEmpty: false, message: 'is required' }\n }\n};\n\nconst jstrProvince = JSON.stringify({\n PROVINCE_ID: 0,\n PROVINCE_NAME: 'default'\n});\n\nconst jstrDistrict = JSON.stringify({\n DISTRICT_ID: 0,\n DISTRICT_NAME: 'default'\n});\n\nconst jstrSubDistrict = JSON.stringify({\n SUB_DISTRICT_ID: 0,\n SUB_DISTRICT_NAME: 'default',\n ZIP_CODE: ''\n});\n\nclass DialogEditAddress extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isValid: false,\n values: {},\n touched: {},\n errors: {},\n ST_THAI_DISTRICTS: THAI_DISTRICTS,\n ST_THAI_SUB_DISTRICTS: THAI_SUB_DISTRICTS\n };\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (!_.isEqual(prevProps.dialogEditAddress, this.props.dialogEditAddress) && this.props.dialogEditAddress )\n {\n const {\n name,\n lastName,\n phoneNumber,\n email,\n address,\n district,\n subDistrict,\n province,\n zipCode,\n isDefault\n } = this.props.editSelected;\n const provFiltered = _.filter(THAI_PROVINCES, prov => prov.PROVINCE_NAME_TH === province || prov.PROVINCE_NAME_EN === province);\n const _province = {\n PROVINCE_ID: provFiltered[0].PROVINCE_ID,\n PROVINCE_NAME: provFiltered[0].PROVINCE_NAME_TH,\n };\n\n const NEW_THAI_DISTRICTS =\n _province.PROVINCE_NAME === jstrProvince\n ? THAI_DISTRICTS\n : _.filter(THAI_DISTRICTS, dis => dis.PROVINCE_ID === _province.PROVINCE_ID);\n\n const distFiltered = _.filter(THAI_DISTRICTS, dist => dist.DISTRICT_NAME_TH === district || dist.DISTRICT_NAME_EN === district); \n const _district = {\n DISTRICT_ID: distFiltered[0].DISTRICT_ID,\n DISTRICT_NAME: distFiltered[0].DISTRICT_NAME_TH\n };\n\n const NEW_THAI_SUB_DISTRICTS =\n _province.DISTRICT_NAME === jstrDistrict\n ? THAI_DISTRICTS\n : _.filter(THAI_SUB_DISTRICTS, subDis => subDis.DISTRICT_ID === _district.DISTRICT_ID);\n\n const subDistFiltered = _.filter(THAI_SUB_DISTRICTS, subDist => _district.DISTRICT_ID ===subDist.DISTRICT_ID && (subDist.SUB_DISTRICT_NAME_TH === subDistrict || subDist.SUB_DISTRICT_NAME_EN === subDistrict)); \n const _subDistrict = !subDistFiltered || !subDistFiltered.length\n ? JSON.parse(jstrSubDistrict)\n : {\n SUB_DISTRICT_ID: subDistFiltered[0].SUB_DISTRICT_ID,\n SUB_DISTRICT_NAME: subDistFiltered[0].SUB_DISTRICT_NAME_TH,\n ZIP_CODE: subDistFiltered[0].ZIP_CODE\n };\n\n this.setState(prevSt => ({\n ...prevSt,\n values: {\n name,\n lastName,\n email,\n phoneNumber,\n address,\n province: JSON.stringify(_province),\n district: JSON.stringify(_district),\n subDistrict: JSON.stringify(_subDistrict),\n zipCode,\n isDefault\n },\n ST_THAI_DISTRICTS: NEW_THAI_DISTRICTS,\n ST_THAI_SUB_DISTRICTS: NEW_THAI_SUB_DISTRICTS\n }));\n }\n\n if (!_.isEqual(prevState.values, this.state.values)) {\n const { values } = this.state;\n const errors = validate(values, validateChangeAddress);\n\n const isValid = !errors;\n\n const _isValid =\n isValid === true \n && values.province !== jstrProvince \n && values.district !== jstrDistrict\n && values.subDistrict !== jstrSubDistrict;\n\n this.setState(prevSt => ({\n ...prevSt,\n isValid: _isValid,\n errors: errors || {}\n }));\n }\n }\n\n handleAddressChange = event => {\n const { name, value } = event.target;\n\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, [name]: value },\n touched: { ...prevState.touched, [name]: true }\n }));\n };\n\n handleSelectProvinceChange = value => {\n const { PROVINCE_ID, PROVINCE_NAME } = JSON.parse(value);\n const NEW_THAI_DISTRICTS = PROVINCE_NAME === 'default' ? THAI_DISTRICTS : _.filter(THAI_DISTRICTS, dis => dis.PROVINCE_ID === PROVINCE_ID);\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, province: value, district: jstrDistrict, subDistrict: jstrSubDistrict, zipCode:'' },\n ST_THAI_DISTRICTS: NEW_THAI_DISTRICTS\n }));\n };\n\n handleSelectDistrictChange = value => {\n const { DISTRICT_ID, DISTRICT_NAME } = JSON.parse(value);\n const NEW_THAI_SUB_DISTRICTS = DISTRICT_NAME === 'default' ? THAI_SUB_DISTRICTS : _.filter(THAI_SUB_DISTRICTS, dis => dis.DISTRICT_ID === DISTRICT_ID);\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, district: value, subDistrict: jstrSubDistrict, zipCode:'' },\n ST_THAI_SUB_DISTRICTS: NEW_THAI_SUB_DISTRICTS\n }));\n };\n\n handleSelectSubDistrictChange = value => {\n var subDistrict = JSON.parse(value);\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, subDistrict: value, zipCode: subDistrict.ZIP_CODE },\n }));\n };\n canSelectDistrict = () => this.state.values.province !== jstrProvince;\n canSelectSubDistrict = () => this.state.values.district !== jstrDistrict;\n\n hasError = field => this.state.touched[field] && this.state.errors[field];\n\n render() {\n const { values, errors, isValid, ST_THAI_DISTRICTS, ST_THAI_SUB_DISTRICTS } = this.state;\n\n const { wording, dialogEditAddress, EditAddress, CloseDialogEditAddress } = this.props;\n\n return (\n \n
\n \n \n dispatch(OpenDialogCreateTaxAddress())}>\n {wording.usermenu.address.taxInvoiceAddress.add}\n \n
\n \n
\n \n
\n \n 
\n
\n \n \n {wording.usermenu.address.taxInvoiceAddress.notHaveTaxInvoiceAddress}\n
\n\n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ address, language }) => ({\n wording: language.wording,\n dialogEditAddress: address.dialogEditAddress,\n editSelected: address.editSelected?.value\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n CloseDialogEditAddress: Actions.CloseDialogEditAddress,\n EditAddress: Actions.EditAddress\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DialogEditAddress);\n","import React from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { DeleteAddress, CloseDialogConfirmDeleteAddress } from '../../store/actions';\n\nfunction DialogConfirmDeleteAddress() {\n const dispatch = useDispatch();\n const wording = useSelector(({ language }) => language.wording);\n const open = useSelector(({ address }) => address.dialogConfirmDelete);\n\n return (\n \n
\n\n \n {wording.usermenu.address.dialogShippingAddress.titleChange}\n
\n\n
\n\n {errors.name[0]}
: null}\n\n{errors.lastName[0]}
: null}\n\n{errors.address[0]}
: null}\n\n\n
\n
\n
{errors.zipCode[0]}
: null}\n\n{errors.phoneNumber[0]}
: null}\n\n
\n \n {\n // CloseDialogEditAddress();\n console.log(values);\n EditAddress(values);\n }}>\n {wording.usermenu.address.dialogShippingAddress.ok}\n \n
\n \n CloseDialogEditAddress()}>\n {wording.usermenu.address.dialogShippingAddress.cancle}\n \n
\n \n
\n \n );\n}\n\nexport default DialogConfirmDeleteAddress;\n","import React from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { CloseDialogNotAllowDeleteAddress } from '../../store/actions';\n\nfunction DialogNotAllowDeleteAddress() {\n const dispatch = useDispatch();\n const wording = useSelector(({ language }) => language.wording);\n const open = useSelector(({ address }) => address.dialogNotAllowDelete);\n\n return (\n \n
\n {`${wording.usermenu.address.dialogConfirmDelete.title}`}
\n\n
\n {wording.usermenu.address.dialogConfirmDelete.bodyMessage}
\n\n
\n \n {\n dispatch(CloseDialogConfirmDeleteAddress());\n dispatch(DeleteAddress());\n }}>\n {wording.usermenu.address.dialogConfirmDelete.delete}\n \n
\n \n dispatch(CloseDialogConfirmDeleteAddress())}>\n {wording.usermenu.address.dialogConfirmDelete.cancel}\n \n
\n \n
\n \n );\n}\n\nexport default DialogNotAllowDeleteAddress;\n","import React, { Component } from 'react';\nimport Modal from 'react-awesome-modal';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../store/actions';\nimport { THAI_PROVINCES, THAI_DISTRICTS, THAI_SUB_DISTRICTS } from '../../constants';\nimport validate from 'validate.js';\nimport _ from 'lodash';\nimport './address.css';\nimport { sortCompare } from '../../utils/'\n\nconst pattern = { taxId: /\\d{13}/, zipCode: /\\d{5}/, phoneNumber: /\\d{10}/ };\n\nconst validateChangeTaxAddress = {\n name: {\n presence: { allowEmpty: false, message: 'is required' }\n },\n lastName: {\n presence: { allowEmpty: true, message: 'is required' }\n },\n taxId: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: pattern.taxId\n },\n phoneNumber: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: pattern.phoneNumber\n },\n email: {\n presence: { allowEmpty: false, message: 'is required' },\n email: true\n },\n address: {\n presence: { allowEmpty: false, message: 'is required' }\n },\n zipCode: {\n presence: { allowEmpty: false, message: 'is required' },\n // numericality: { onlyInteger: true },\n // format: pattern.zipCode\n }\n};\n\nconst jstrProvince = JSON.stringify({\n PROVINCE_ID: 0,\n PROVINCE_NAME: 'default'\n});\n\nconst jstrDistrict = JSON.stringify({\n DISTRICT_ID: 0,\n DISTRICT_NAME: 'default'\n});\n\nconst jstrSubDistrict = JSON.stringify({\n SUB_DISTRICT_ID: 0,\n SUB_DISTRICT_NAME: 'default',\n ZIP_CODE: ''\n});\n\nclass DialogEditTaxAddress extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isValid: false,\n values: {},\n touched: {},\n errors: {},\n ST_THAI_DISTRICTS: THAI_DISTRICTS,\n ST_THAI_SUB_DISTRICTS: THAI_SUB_DISTRICTS\n };\n }\n\n componentDidUpdate(prevProps, prevState) {\n if ( !_.isEqual(prevProps.dialogEditAddress, this.props.dialogEditAddress) && this.props.dialogEditAddress )\n {\n const {\n name,\n lastName,\n taxId,\n phoneNumber,\n email,\n address,\n district,\n subDistrict,\n province,\n zipCode,\n isDefault\n } = this.props.editSelected;\n const provFiltered = _.filter(THAI_PROVINCES, prov => prov.PROVINCE_NAME_TH === province || prov.PROVINCE_NAME_EN === province);\n const _province = {\n PROVINCE_ID: provFiltered[0].PROVINCE_ID,\n PROVINCE_NAME: provFiltered[0].PROVINCE_NAME_TH,\n };\n\n const NEW_THAI_DISTRICTS =\n _province.PROVINCE_NAME === jstrProvince\n ? THAI_DISTRICTS\n : _.filter(THAI_DISTRICTS, dis => dis.PROVINCE_ID === _province.PROVINCE_ID);\n\n const distFiltered = _.filter(THAI_DISTRICTS, dist => dist.DISTRICT_NAME_TH === district || dist.DISTRICT_NAME_EN === district); \n const _district = {\n DISTRICT_ID: distFiltered[0].DISTRICT_ID,\n DISTRICT_NAME: distFiltered[0].DISTRICT_NAME_TH\n };\n\n const NEW_THAI_SUB_DISTRICTS =\n _province.PROVINCE_NAME === jstrProvince\n ? THAI_DISTRICTS\n : _.filter(THAI_SUB_DISTRICTS, subDis => subDis.DISTRICT_ID === _district.DISTRICT_ID);\n\n const subDistFiltered = _.filter(THAI_SUB_DISTRICTS, subDist => _district.DISTRICT_ID ===subDist.DISTRICT_ID && (subDist.SUB_DISTRICT_NAME_TH === subDistrict || subDist.SUB_DISTRICT_NAME_EN === subDistrict)); \n const _subDistrict = !subDistFiltered || !subDistFiltered.length\n ? JSON.parse(jstrSubDistrict)\n :{\n SUB_DISTRICT_ID: subDistFiltered[0].SUB_DISTRICT_ID,\n SUB_DISTRICT_NAME: subDistFiltered[0].SUB_DISTRICT_NAME_TH,\n ZIP_CODE: subDistFiltered[0].ZIP_CODE\n };\n\n this.setState(prevSt => ({\n ...prevSt,\n values: {\n name,\n lastName,\n taxId,\n email,\n phoneNumber,\n address,\n district,\n province: JSON.stringify(_province),\n district: JSON.stringify(_district),\n subDistrict: JSON.stringify(_subDistrict),\n zipCode,\n isDefault\n },\n ST_THAI_DISTRICTS: NEW_THAI_DISTRICTS,\n ST_THAI_SUB_DISTRICTS: NEW_THAI_SUB_DISTRICTS\n }));\n }\n\n if (!_.isEqual(prevState.values, this.state.values)) {\n const { values } = this.state;\n const errors = validate(values, validateChangeTaxAddress);\n\n const isValid = errors ? false : true;\n\n const _isValid =\n isValid === true \n && values.province !== jstrProvince \n && values.district !== jstrDistrict\n && values.subDistrict !== jstrSubDistrict;\n console.log(values.subDistrict)\n this.setState(prevSt => ({\n ...prevSt,\n isValid: _isValid,\n errors: errors || {}\n }));\n }\n }\n\n handleAddressChange = event => {\n const { name, value } = event.target;\n\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, [name]: value },\n touched: { ...prevState.touched, [name]: true }\n }));\n };\n\n handleSelectProvinceChange = value => {\n const { PROVINCE_ID, PROVINCE_NAME } = JSON.parse(value);\n const NEW_THAI_DISTRICTS = PROVINCE_NAME === 'default' ? THAI_DISTRICTS : _.filter(THAI_DISTRICTS, dis => dis.PROVINCE_ID === PROVINCE_ID);\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, province: value, district: jstrDistrict, subDistrict: jstrSubDistrict, zipCode:'' },\n ST_THAI_DISTRICTS: NEW_THAI_DISTRICTS\n }));\n };\n\n handleSelectDistrictChange = value => {\n const { DISTRICT_ID, DISTRICT_NAME } = JSON.parse(value);\n const NEW_THAI_SUB_DISTRICTS = DISTRICT_NAME === 'default' ? THAI_SUB_DISTRICTS : _.filter(THAI_SUB_DISTRICTS, dis => dis.DISTRICT_ID === DISTRICT_ID);\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, district: value, subDistrict: jstrSubDistrict, zipCode:'' },\n ST_THAI_SUB_DISTRICTS: NEW_THAI_SUB_DISTRICTS\n }));\n };\n\n handleSelectSubDistrictChange = value => {\n var subDistrict = JSON.parse(value);\n this.setState(prevState => ({\n ...prevState,\n values: { ...prevState.values, subDistrict: value, zipCode: subDistrict.ZIP_CODE },\n }));\n };\n canSelectDistrict = () => this.state.values.province !== jstrProvince;\n canSelectSubDistrict = () => this.state.values.district !== jstrDistrict;\n\n hasError = field => {\n const { touched, errors } = this.state;\n return touched[field] && errors[field] ? true : false;\n };\n\n render() {\n const { values, errors, isValid, ST_THAI_DISTRICTS, ST_THAI_SUB_DISTRICTS } = this.state;\n const { wording, dialogEditAddress, EditTaxAddress, CloseDialogEditTaxAddress } = this.props;\n\n return (\n \n
\n {`${wording.usermenu.address.dialogNotAllowDelete.title}`}
\n\n
\n {wording.usermenu.address.dialogNotAllowDelete.bodyMessage}
\n\n
\n \n dispatch(CloseDialogNotAllowDeleteAddress())}>\n {wording.usermenu.address.dialogNotAllowDelete.ok}\n \n
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ taxaddress, language }) => ({\n wording: language.wording,\n dialogEditAddress: taxaddress.dialogEditAddress,\n editSelected: taxaddress.editSelected?.value\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n CloseDialogEditTaxAddress: Actions.CloseDialogEditTaxAddress,\n EditTaxAddress: Actions.EditTaxAddress\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DialogEditTaxAddress);\n","import React from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { DeleteTaxAddress, CloseDialogConfirmDeleteTaxAddress } from '../../store/actions';\n\nfunction DialogConfirmDeleteTaxAddress() {\n const dispatch = useDispatch();\n const wording = useSelector(({ language }) => language.wording);\n const open = useSelector(({ taxaddress }) => taxaddress.dialogConfirmDelete);\n\n return (\n \n
\n \n {wording.usermenu.address.dialogShippingAddress.titleChange}\n
\n\n
\n {errors.name[0]}
: null}\n\n{errors.taxId[0]}
: null}\n\n{errors.phoneNumber[0]}
: null}\n\n{errors.email[0]}
: null}\n\n{errors.address[0]}
: null}\n\n\n
\n
\n
{errors.zipCode[0]}
: null}\n\n
\n \n {\n CloseDialogEditTaxAddress();\n EditTaxAddress(values);\n }}>\n {wording.usermenu.address.dialogShippingAddress.ok}\n \n
\n \n CloseDialogEditTaxAddress()}>\n {wording.usermenu.address.dialogShippingAddress.cancle}\n \n
\n \n
\n \n );\n}\n\nexport default DialogConfirmDeleteTaxAddress;\n","import React from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { CloseDialogNotAllowDeleteTaxAddress } from '../../store/actions';\n\nfunction DialogNotAllowDeleteTaxAddress() {\n const dispatch = useDispatch();\n const wording = useSelector(({ language }) => language.wording);\n const open = useSelector(({ taxaddress }) => taxaddress.dialogNotAllowDelete);\n\n return (\n \n
\n {`${wording.usermenu.address.dialogConfirmDelete.title}`}
\n\n
\n {wording.usermenu.address.dialogConfirmDelete.bodyMessage}
\n\n
\n \n {\n dispatch(CloseDialogConfirmDeleteTaxAddress());\n dispatch(DeleteTaxAddress());\n }}>\n {wording.usermenu.address.dialogConfirmDelete.delete}\n \n
\n \n dispatch(CloseDialogConfirmDeleteTaxAddress())}>\n {wording.usermenu.address.dialogConfirmDelete.cancel}\n \n
\n \n
\n \n );\n}\n\nexport default DialogNotAllowDeleteTaxAddress;\n","const hideTaxId = (texId) => texId.split('').map((item,index) => index >= 3 && index < 10 ? \"*\" :item ).join('');\n\nexport default hideTaxId;","import React, { useState, useEffect, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n GetAddress,\n OpenDialogCreateAddress,\n OpenDialogEditAddress,\n OpenDialogConfirmDeleteAddress,\n SetAddresAsDefault,\n GetTaxAddress,\n OpenDialogCreateTaxAddress,\n OpenDialogEditTaxAddress,\n OpenDialogConfirmDeleteTaxAddress,\n SetTaxAddressAsDefault\n} from '../../../store/actions';\nimport UserTitle from '../components/user.title';\nimport UserSideMenu from '../components/user.side-menu';\nimport NotHaveShippingAddress from './components/shipping';\nimport NotHaveTaxInvoiceAddress from './components/taxinvoice';\nimport DialogCreateAddress from '../../Address/address.dialog-create';\nimport DialogEditAddress from '../../Address/address.dialog-edit';\nimport DialogConfirmDeleteAddress from '../../Address/address.dialog-confirm-delete';\nimport DialogNotAllowDeleteAddress from '../../Address/address.dialog-not-allow-delete';\nimport DialogCreateTaxAddress from '../../Address/tax-address.dialog-create';\nimport DialogEditTaxAddress from '../../Address/tax-address.dialog-edit';\nimport DialogConfirmDeleteTaxAddress from '../../Address/tax-address.dialog-confirm-delete';\nimport DialogNotAllowDeleteTaxAddress from '../../Address/tax-address.dialog-not-allow-delete';\nimport LayoutPreload from '../../Preload/layout.preload';\nimport _ from 'lodash';\nimport './address.css';\nimport hideTaxId from '../../../utils/hideData';\n\nexport default function UserAddressMain() {\n const dispatch = useDispatch();\n\n const wording = useSelector(({ language }) => language.wording);\n const shippingAddress = useSelector(({ address }) => address.data);\n const shippingAddressFetching = useSelector(({ address }) => address.isFetching);\n const taxInvoiceAddress = useSelector(({ taxaddress }) => taxaddress.data);\n const taxInvoiceAddressFetching = useSelector(({ taxaddress }) => taxaddress.isFetching);\n const firebaseAuth = useSelector(({ login }) => login.firebaseAuth);\n\n const shipping = 'shipping';\n const taxinvoice = 'taxinvoice';\n const [addressTypeSelected, SetAddressTypeSelected] = useState(shipping);\n\n useEffect(() => {\n if (firebaseAuth) {\n dispatch(GetAddress());\n }\n }, [firebaseAuth]);\n\n useEffect(() => {\n if (addressTypeSelected === shipping) {\n dispatch(GetAddress());\n }\n\n if (addressTypeSelected === taxinvoice) {\n dispatch(GetTaxAddress());\n }\n }, [addressTypeSelected]);\n\n const handleAddressTypeSelectedChange = type => {\n SetAddressTypeSelected(type);\n };\n\n const createCardShippingAddress = () => {\n return shippingAddress.map((shippingAddress, index) => {\n return (\n \n
\n {`${wording.usermenu.address.dialogNotAllowDelete.title}`}
\n\n
\n {wording.usermenu.address.dialogNotAllowDelete.bodyMessage}
\n\n
\n \n dispatch(CloseDialogNotAllowDeleteTaxAddress())}>\n {wording.usermenu.address.dialogNotAllowDelete.ok}\n \n
\n \n
\n \n );\n });\n };\n\n const createCardTaxInvoiceAddress = () => {\n return taxInvoiceAddress.map((taxInvoiceAddress, index) => {\n return (\n \n
\n \n {shippingAddress.isDefault === 'Y' && (\n
\n \n {`${wording.usermenu.address.shippingAddress.name}: `}\n \n {`${shippingAddress.name} ${shippingAddress.lastName}`}\n
\n \n {`${wording.usermenu.address.shippingAddress.address}: `}\n \n \n {`${shippingAddress.address}, ${!shippingAddress || !shippingAddress.subDistrict ? \"\" : `${shippingAddress.subDistrict}, `}${shippingAddress.district}, ${shippingAddress.province}, ${shippingAddress.zipCode}`}\n \n
\n \n {`${wording.usermenu.address.shippingAddress.phone}: `}\n \n {`${shippingAddress.phoneNumber}`}\n
\n \n {`${wording.usermenu.address.shippingAddress.default}`}\n
\n )}\n\n \n {`${wording.usermenu.address.shippingAddress.name}: `}\n \n {`${shippingAddress.name} ${shippingAddress.lastName}`}\n
\n \n {`${wording.usermenu.address.shippingAddress.address}: `}\n \n \n {`${shippingAddress.address}, ${!shippingAddress || !shippingAddress.subDistrict ? \"\" : `${shippingAddress.subDistrict}, `}${shippingAddress.district}, ${shippingAddress.province}, ${shippingAddress.zipCode}`}\n \n
\n \n {`${wording.usermenu.address.shippingAddress.phone}: `}\n \n {`${shippingAddress.phoneNumber}`}\n
\n \n dispatch(SetAddresAsDefault(index))}>\n {wording.usermenu.address.shippingAddress.setdefault}\n \n
\n )}\n \n dispatch(OpenDialogEditAddress(index, shippingAddress))}>\n {wording.usermenu.address.shippingAddress.edit}\n \n dispatch(OpenDialogConfirmDeleteAddress(index, shippingAddress))}>\n {wording.usermenu.address.shippingAddress.delete}\n \n
\n {shippingAddress.isDefault === 'N' && (\n \n
\n \n );\n });\n };\n\n if (shippingAddressFetching || taxInvoiceAddressFetching) {\n return \n
\n \n {taxInvoiceAddress.isDefault === 'Y' && (\n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.name}: `}\n \n {`${taxInvoiceAddress.name} ${taxInvoiceAddress.lastName}`}\n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.taxId}: `}\n \n {hideTaxId(`${taxInvoiceAddress.taxId}`)}\n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.address}: `}\n \n \n {` ${taxInvoiceAddress.address}, ${(!taxInvoiceAddress || !taxInvoiceAddress.subDistrict ? \"\" : `${taxInvoiceAddress.subDistrict}, `)}${taxInvoiceAddress.district}, ${taxInvoiceAddress.province}, ${taxInvoiceAddress.zipCode}`}\n \n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.phone}: `}\n \n {`${taxInvoiceAddress.phoneNumber}`}\n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.email}: `}\n \n {`${taxInvoiceAddress.email}`}\n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.default}`}\n
\n )}\n\n \n {`${wording.usermenu.address.taxInvoiceAddress.name}: `}\n \n {`${taxInvoiceAddress.name} ${taxInvoiceAddress.lastName}`}\n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.taxId}: `}\n \n {hideTaxId(`${taxInvoiceAddress.taxId}`)}\n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.address}: `}\n \n \n {` ${taxInvoiceAddress.address}, ${(!taxInvoiceAddress || !taxInvoiceAddress.subDistrict ? \"\" : `${taxInvoiceAddress.subDistrict}, `)}${taxInvoiceAddress.district}, ${taxInvoiceAddress.province}, ${taxInvoiceAddress.zipCode}`}\n \n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.phone}: `}\n \n {`${taxInvoiceAddress.phoneNumber}`}\n
\n \n {`${wording.usermenu.address.taxInvoiceAddress.email}: `}\n \n {`${taxInvoiceAddress.email}`}\n
\n \n dispatch(SetTaxAddressAsDefault(index))}>\n {wording.usermenu.address.taxInvoiceAddress.setdefault}\n \n
\n )}\n \n dispatch(OpenDialogEditTaxAddress(index, taxInvoiceAddress))}>\n {wording.usermenu.address.taxInvoiceAddress.edit}\n \n \n dispatch(OpenDialogConfirmDeleteTaxAddress(index, taxInvoiceAddress))\n }>\n {wording.usermenu.address.taxInvoiceAddress.delete}\n \n
\n {taxInvoiceAddress.isDefault === 'N' && (\n \n \n
\n \n \n \n );\n}\n","import React, { useState, useEffect } from 'react';\nimport Modal from 'react-awesome-modal';\nimport { useSelector, useDispatch } from 'react-redux';\nimport StarRatings from 'react-star-ratings';\nimport '@fortawesome/fontawesome-free/css/all.css';\nimport { useWindowDimensions } from '../../utils';\nimport { AddItemReview } from '../../store/actions';\nimport { API, STAR } from '../../constants';\n\nfunction DialogProductReview({ open, closeDialog, product }) {\n const wording = useSelector(({ language }) => language.wording);\n const dispatch = useDispatch();\n\n const { width } = useWindowDimensions();\n\n const initialValues = {\n rating: 5,\n review: '',\n picture: null\n };\n const [values, setValues] = useState(initialValues);\n const [error, setError] = useState();\n\n useEffect(() => {\n setValues((values) => ({\n ...values,\n product\n }));\n }, [product]);\n\n const changeRating = (newRating, name) => {\n setError();\n setValues((values) => ({\n ...values,\n [name]: newRating\n }));\n };\n\n const handleCloseDialog = (e) => {\n setError();\n e.preventDefault();\n setValues(initialValues);\n closeDialog();\n };\n\n const handleUpload = async (e) => {\n let file = e.target.files;\n let name = e.target.name;\n let files = [];\n\n setError();\n e.persist();\n if (file.length > 0) {\n if (file.length <= 5) {\n for (let i = 0; i < 5; i++) {\n if (file[i]) {\n files.push(file[i]);\n }\n }\n\n setValues((values) => ({\n ...values,\n [name]: files\n }));\n } else {\n setValues((values) => ({\n ...values,\n [name]: null\n }));\n setError('limitFilesAmount');\n }\n } else {\n setValues((values) => ({\n ...values,\n [name]: null\n }));\n }\n };\n\n const handleFieldChange = (e) => {\n let { name, type, value, checked } = e.target;\n\n setError();\n e.persist();\n e.preventDefault();\n\n setValues((values) => ({\n ...values,\n [name]: type === 'checkbox' ? checked : value\n }));\n };\n\n // const handleClickSuggestButton = (value) => {\n // setValues((values) => ({\n // ...values,\n // review: values.review ? values.review + '\\n' + value : value\n // }));\n // };\n\n const handleSubmit = () => {\n dispatch(AddItemReview(values));\n };\n\n const renderImages = () => {\n let img = [];\n\n if (values.picture && values.picture.length > 0) {\n for (let i = 1; i <= values.picture.length - 1; i++) {\n img.push(\n \n
\n \n \n
\n )}\n \n
\n )}\n\n {addressTypeSelected === taxinvoice &&\n taxInvoiceAddress &&\n taxInvoiceAddress.length === 0 && \n
\n\n {addressTypeSelected === shipping && shippingAddress && shippingAddress.length === 0 && (\n - \n
\n
\n \n
\n \n
\n \n \n dispatch(OpenDialogCreateAddress())}>\n {wording.usermenu.address.shippingAddress.add}\n \n
\n \n {createCardShippingAddress()}\n
\n \n
\n \n
\n \n
\n \n \n dispatch(OpenDialogCreateTaxAddress())}>\n {wording.usermenu.address.taxInvoiceAddress.add}\n \n
\n \n {createCardTaxInvoiceAddress()}\n
\n \n \n
\n\n \n
\n\n \n {wording.dialogProductReview.productRating}\n
\n\n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ login, product, cart, language, navigation }) => ({\n firebaseAuth: login.firebaseAuth,\n product: product.data,\n dialogStock: product.dialogStock,\n dialogAddProductToCart: cart.dialogAddProductToCart,\n cart: cart.data,\n wording: language.wording,\n currentLanguage: language.currentLanguage,\n navbarCategory: navigation.navbarCategory,\n basenameURL: language.basenameURL\n});\n\nconst mapDispatchToProps = (dispatch) => {\n return bindActionCreators(\n {\n updateWording: Actions.updateWording,\n OpenDialogLogin: Actions.OpenDialogLogin,\n CreateCart: Actions.CreateCart,\n AddOrUpdateProductToCart: Actions.AddOrUpdateProductToCart,\n GetCartData: Actions.GetCartData,\n AutoCloseDialogAddProductToCart: Actions.AutoCloseDialogAddProductToCart,\n OpenDialogProductOverStock: Actions.OpenDialogProductOverStock,\n CloseDialogProductOverStock: Actions.CloseDialogProductOverStock,\n getItemById: Actions.getItemById,\n AddToBuyNow: Actions.AddToBuyNow\n },\n dispatch\n );\n};\n\nexport default withRouter(\n connect(mapStateToProps, mapDispatchToProps)(PurchaseItemPurchase)\n);\n","import React, { Component } from 'react';\nimport * as Actions from '../../../../store/actions';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport validate from 'validate.js';\nimport _ from 'lodash';\n\nconst pattern = { invoice: /(SFO|DTR)\\d{4}-\\d{5}/, phoneNumber: /\\d{10}/ };\n\nconst validateValues = {\n invoice: {\n presence: { allowEmpty: false, message: 'is required' },\n format: pattern.invoice\n },\n phoneNumber: {\n presence: { allowEmpty: false, message: 'is required' },\n numericality: { onlyInteger: true },\n format: pattern.phoneNumber\n }\n};\n\nexport class FormCheckStatusOrder extends Component {\n\n constructor(props) {\n super(props)\n \n this.state = {\n values: {\n invoice: props.invoice || \"\",\n phoneNumber: \"\"\n },\n errors: {\n status: false,\n message: {}\n },\n touched: []\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (!_.isEqual(prevState.values, this.state.values)) {\n const { values } = this.state;\n\n const errors = validate(values, validateValues);\n\n let _inValid = errors ? true : false;\n\n this.setState({\n errors: {\n status: _inValid,\n message: errors || {}\n }\n });\n }\n }\n\n handleChangeData = (e) => {\n e.persist();\n const { name, value } = e.target;\n this.setState({ \n values: { \n ...this.state.values, \n [name]: value \n },\n touched: [ ...this.state.touched, name ]\n });\n }\n\n hasError = (field) => {\n const { errors, touched } = this.state;\n return errors.message.hasOwnProperty(field) && touched.includes(field);\n }\n \n render() {\n const { values, errors } = this.state;\n const { wording, GetPurchaseOrderOfGuestByInvoice } = this.props;\n\n return (\n \n
\n {/* Table list item */}\n \n \n {wording.purchase.invoiceNo}\n \n {item.invoice}\n \n {wording.purchase.orderDate}\n \n {item.date}\n
\n\n \n {wording.purchase.status}\n \n
\n \n \n
\n
\n\n | \n {wording.purchase.product}\n | \n\n {wording.purchase.price}\n | \n\n {wording.purchase.quantity}\n | \n\n {wording.purchase.total}\n | \n|
|---|---|---|---|---|
| \n | \n\n \n {item.productName}\n
| \n\n \n \n {`${CURRENCY.B}${formatMoney(price)}`}\n \n | \n\n\n {item.amount}\n | \n\n\n \n {`${CURRENCY.B}${formatMoney(totalPrice)}`}\n \n | \n
| \n {!item.reviewPoint && (\n | \n
\n
\n \n
\n \n \n {wording.purchase.shippingAddress}\n \n {`${item.name} ${item.lastName} ${item.phoneNumber}`}\n
\n {\n item.deliveryType == \"Branch\"\n ? <>\n {wording.purchase.pickUpBranch} {item.branchName}\n {/*
\n {wording.purchase.since} {formatDate(item.pickUpDate)[currentLanguage]} */}\n \n : {`${item.address ?? ''} ${item.subDistrict ?? ''} ${item.district} ${item.province} ${item.zipCode}`}\n }\n
\n \n {wording.purchase.taxInvoiceAddress}\n \n {`${item.taxName} ${item.taxLastName} ${hideTaxId(item.taxId)}`}\n
\n {`${item.taxAddress ?? ''} ${item.taxSubDistrict ?? ''} ${item.taxDistrict} ${item.taxProvince} ${item.taxZipCode}`}\n
\n {`${item.taxPhoneNumber} ${item.taxEmail}`}\n
\n \n \n \n
\n
\n | {wording.purchase.subtotal} | \n\n \n {`${CURRENCY.B}${formatMoney(subTotal)}`}\n \n | \n
|---|---|
| {wording.purchase.shipping} | \n\n \n {`${CURRENCY.B}${formatMoney(shippingCost)}`}\n \n | \n
| {wording.purchase.discount} | \n\n \n {`${CURRENCY.B}${formatMoney(discount)}`}\n \n | \n
| \n {wording.purchase.total}\n | \n\n \n \n {`${CURRENCY.B}${formatMoney(total)}`}\n \n \n | \n
| \n | \n
\n
\n )\n }\n}\n\nconst mapStateToProps = ({ language }) => ({\n wording: language.wording,\n});\n\nconst mapDispatchToProps = (dispatch) => {\n return bindActionCreators(\n {\n GetPurchaseOrderOfGuestByInvoice: Actions.UserGetPurchaseOrderOfGuestByInvoice\n },\n dispatch\n );\n };\n\nexport default connect(mapStateToProps, mapDispatchToProps)(FormCheckStatusOrder);\n","import React, { Component, Fragment } from 'react';\nimport { connect } from 'react-redux';\nimport QRCode from 'qrcode.react';\nimport Barcode from 'react-barcode';\nimport { formatDate } from '../../../utils/'\nimport classNames from 'classnames';\nimport { API, CURRENCY } from '../../../constants';\nimport { formatMoney } from '../../../services';\n\nexport class ItemsVoucherOrder extends Component {\n\n constructor(props) {\n super(props)\n \n this.state = {\n barOrQrCode: {\n status: false,\n name: \"\",\n index: -1,\n voucherIndex: -1\n }\n }\n }\n \n toggleBarOrQrCode = (name, voucherIndex, index) => {\n const { barOrQrCode } = this.state;\n if (barOrQrCode.name === name && barOrQrCode.index == index && barOrQrCode.voucherIndex == voucherIndex) this.setState({ barOrQrCode: { ...barOrQrCode, status: false, name: \"\", index: -1, voucherIndex: -1 }});\n else this.setState({ barOrQrCode: { ...barOrQrCode, status: true, name, index, voucherIndex }});\n }\n \n createVoucher = (voucher, voucherIndex) => {\n const { barOrQrCode } = this.state;\n const { wording, currentLanguage } = this.props;\n\n return voucher.items?.map((item, index) => {\n return (\n \n
\n \n
\n { wording.usermenu.purchase.formCheckStatusOrder.title}
\n\n \n
\n \n \n this.handleChangeData(e)} />\n \n { this.hasError(\"invoice\") &&
\n\n * {errors.message.invoice.join(\", \")}
}\n \n \n this.handleChangeData(e)} />\n \n { this.hasError(\"phoneNumber\") &&
\n\n * {errors.message.phoneNumber.join(\", \")}
}\n \n {\n GetPurchaseOrderOfGuestByInvoice(values);\n }}>\n {wording.usermenu.purchase.formCheckStatusOrder.ok}\n \n
\n \n
\n {\n barOrQrCode.status && index == barOrQrCode.index && voucherIndex == barOrQrCode.voucherIndex && (\n \n
\n \n {`${wording.usermenu.voucher.name}: `}\n {voucher.name}\n
\n \n {`${wording.usermenu.voucher.voucherNumber}: `}\n {item}\n
\n \n {`${wording.usermenu.voucher.expireDate}: `}\n Date.now() ? \"color-green\": \"color-red\"}>\n {formatDate(voucher.expiryDate)[currentLanguage]}\n \n
\n \n this.toggleBarOrQrCode(\"barcode\", voucherIndex, index)}>\n {wording.usermenu.voucher.barcode}\n \n this.toggleBarOrQrCode(\"qrcode\", voucherIndex, index)}>\n {wording.usermenu.voucher.qrCode}\n \n
\n \n {barOrQrCode.name == \"barcode\" && (\n
\n )\n }\n \n );\n });\n }\n\n render() {\n const { voucher, currentPage, rowsPerPage, wording } = this.props;\n \n if (voucher.length === 0) {\n return (\n \n
\n );\n }\n\n return voucher\n .slice((currentPage - 1) * rowsPerPage, (currentPage - 1) * rowsPerPage + rowsPerPage)\n .map((item, index) => {\n return (\n \n
\n \n \n
\n \n {wording.usermenu.voucher.empty}
\n\n
\n {/* Table list item */}\n \n {wording.usermenu.voucher.invoiceNo}\n {item.invoice}\n {wording.usermenu.voucher.voucherOrderDate}\n {item.date}\n
\n\n {wording.usermenu.voucher.status}\n
\n \n \n
\n
\n\n | \n {wording.usermenu.voucher.product}\n | \n{wording.usermenu.voucher.price} | \n{wording.usermenu.voucher.quantity} | \n{wording.usermenu.voucher.total} | \n|
|---|---|---|---|---|
| \n | \n\n \n {item.name}\n | \n\n\n \n {`${CURRENCY.B}${formatMoney(parseInt(item.price))}`}\n \n | \n\n\n {item.amount}\n | \n\n\n \n {`${CURRENCY.B}${formatMoney(parseInt(item.totalPrice))}`}\n \n | \n
\n
\n {\n item.item?.reduce((acc, n) => acc + (n.items?.length || 0), 0) && (\n \n {item.taxAddress && (\n
\n \n \n {wording.usermenu.voucher.taxInvoiceAddress}\n \n {`${item.taxAddress.name} ${item.taxAddress.lastName} ${item.taxAddress.taxId}`}\n
\n {`${item.taxAddress.address != null ? item.taxAddress.address: ''} ${item.taxAddress.district} ${item.taxAddress.province} ${item.taxAddress.zipCode}`}\n
\n {`${item.taxAddress.phoneNumber} ${item.taxAddress.email}`}\n
\n
\n \n \n \n
\n
\n | \n {wording.purchase.total}\n | \n\n \n \n {`${CURRENCY.B}${formatMoney(parseInt(item.total))}`}\n \n \n | \n
|---|
\n {\n item.item?.map((v, i) => (\n \n {this.createVoucher(v, index)}\n \n ))\n }\n
\n )\n }\n \n );\n });\n };\n}\n\nconst mapStateToProps = ({ language }) => ({\n wording: language.wording,\n currentLanguage: language.currentLanguage\n});\n\nexport default connect(mapStateToProps)(ItemsVoucherOrder);","import React, { Component } from 'react';\nimport UserTitle from '../components/user.title';\nimport UserSideMenu from '../components/user.side-menu';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../../store/actions';\nimport { withRouter } from 'react-router-dom';\nimport Pagination from 'rc-pagination';\nimport _ from 'lodash';\nimport './purchase.css';\nimport DialogProductOverStock from '../../Dialog/dialog.product-over-stock';\nimport DialogProductReview from '../../Dialog/dialog.product-review';\nimport PurchaseItemPurchase from './components/purchase-item.purchase';\nimport FormCheckStatusOrder from './components/form-check-status-order.purchase';\nimport ItemsVoucherOrder from '../components/user.voucher-order';\n\nclass PurchaseMain extends Component {\n state = {\n orderData: this.props.orderData,\n currentPage: 1,\n rowsPerPage: 5,\n totalItems: this.props.orderData && this.props.orderData.length\n };\n\n componentDidMount() {\n this.props.orderData && this.handlerSet();\n }\n\n componentDidUpdate(prevProps, prevState) {\n !_.isEqual(prevProps.orderFilter, this.props.orderFilter) &&\n this.handlerSet();\n }\n\n handlerSet = () => {\n const { orderData, orderFilter } = this.props;\n const newOrderData = this.orderDataFilter(orderData, orderFilter);\n this.setState({ orderData: newOrderData, totalItems: newOrderData.length });\n };\n\n orderDataFilter = (data, filter) => {\n if (filter === 'ทั้งหมด') return data;\n return _.filter(data, (o) => o.status === filter);\n };\n\n handleCurrentPageChange = (currentPage) => {\n this.setState({ currentPage });\n window.scrollTo(0, 0);\n };\n\n handleChangeFilter = (name) => {\n const { UserOrderFilterChange } = this.props;\n this.setState({ currentPage: 1 });\n UserOrderFilterChange(name);\n };\n\n CreateOrder = () => {\n window.scrollTo(0, 0);\n const { orderData, currentPage, rowsPerPage } = this.state;\n const { wording, OpenDialogProductOverStock } = this.props;\n\n if (orderData && orderData.length > 0) {\n if (orderData?.every(item => item.orderType == \"voucher\")) {\n return (\n \n
\n );\n };\n\n handleOpenDialogProductReview = async (product, item) => {\n const { OpenDialogProductReview } = this.props;\n this.setState({ productSelected: { ...product, orderId: item.orderId } });\n OpenDialogProductReview();\n };\n\n render() {\n const { rowsPerPage, currentPage, totalItems } = this.state;\n const {\n orderData,\n orderFilter,\n wording,\n match,\n dialogStock,\n CloseDialogProductOverStock,\n CloseDialogProductReview,\n dialogReview,\n isAuthenticated\n } = this.props;\n\n let orderInvoice = match.params.hasOwnProperty(\"invoice\");\n return (\n \n
\n \n ![\"not-found.png\"](\"/assets/img/sf/not-found.png\")
\n
\n \n {wording.purchase.YourOrder}
\n\n\n \n
\n \n )\n }\n \n );\n }\n}\n\nconst mapStateToProps = ({ user, language, product, login }) => ({\n orderFilter: user.purchase.filter,\n orderData: user.purchase.data,\n wording: language.wording,\n dialogStock: product.dialogStock,\n dialogReview: product.dialogReview,\n isAuthenticated: login.isAuthenticated\n});\n\nconst mapDispatchToProps = (dispatch) => {\n return bindActionCreators(\n {\n UserOrderFilterChange: Actions.UserOrderFilterChange,\n OpenDialogProductOverStock: Actions.OpenDialogProductOverStock,\n CloseDialogProductOverStock: Actions.CloseDialogProductOverStock,\n OpenDialogProductReview: Actions.OpenDialogProductReview,\n CloseDialogProductReview: Actions.CloseDialogProductReview\n },\n dispatch\n );\n};\n\nexport default withRouter(\n connect(mapStateToProps, mapDispatchToProps)(PurchaseMain)\n);\n","import React, { Component } from 'react';\nimport PurchaseMain from '../../../components/User/Purchase/purchase.main';\nimport LayoutPreload from '../../../components/Preload/layout.preload';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { updateWording, UserGetPurchaseOrderByUserId, UserGetPurchaseOrderByInvoice, LanguageChange } from '../../../store/actions';\nimport _ from 'lodash';\n\nclass UserPurchase extends Component {\n componentDidMount() {\n const { updateWording } = this.props;\n updateWording();\n this.handlerSet();\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (\n !_.isEqual(prevProps.isAuthenticated, this.props.isAuthenticated) ||\n !_.isEqual(prevProps.currentLanguage, this.props.currentLanguage)\n ) {\n this.handlerSet();\n }\n }\n\n handlerSet = () => {\n const { UserGetPurchaseOrderByUserId, isAuthenticated, match, UserGetPurchaseOrderByInvoice } = this.props;\n let invoice = match.params.hasOwnProperty(\"invoice\");\n if (isAuthenticated || localStorage.getItem('Hello') !== null) {\n if (invoice) UserGetPurchaseOrderByInvoice(match.params.invoice);\n else UserGetPurchaseOrderByUserId();\n }\n }\n\n render() {\n const { orderFetching } = this.props;\n\n if (orderFetching) {\n return {this.CreateOrder()}
\n )\n : orderInvoice \n ? {this.CreateOrder()}
\n : (\n \n
\n \n \n
\n \n {orderData && orderData.length === 0 && (\n \n
\n )}\n \n
\n )}\n {orderData && orderData.length > 0 && (\n \n
\n \n
\n \n
\n \n {wording.purchase.YourOrder}\n
\n\n
\n )}\n {totalItems > rowsPerPage && (\n \n
\n - \n
{this.CreateOrder()}
\n \n
\n );\n }\n\n return refundData\n .slice((currentPage - 1) * rowsPerPage, (currentPage - 1) * rowsPerPage + rowsPerPage)\n .map(item => {\n return (\n \n
\n \n \n
\n \n {wording.usermenu.return.notFoundData}
\n\n
\n \n {wording.usermenu.return.invoiceNo}\n {item.referenceNo}\n {wording.usermenu.return.refundDate}\n {item.created}\n
\n\n {wording.usermenu.return.refundStatus}\n
\n {wording.usermenu.return.refundHeader}\n
\n\n \n
\n
\n | \n \n \n | \n\n \n {product.productName}\n\n
| \n\n \n {product.amount}\n | \n\n {product.remark}\n | \n
| \n {wording.usermenu.return.reply.main}: \n {wording.usermenu.return.reply[product.reply?.toLowerCase()]} \n ({ product.reply === \"Approve\" ? wording.usermenu.return.reply.type[product.type?.toLowerCase()]: product.note })\n | \n
\n
\n \n );\n });\n };\n\n return (\n \n
\n \n
\n \n {wording.usermenu.return.details}\n
\n \n \n
\n \n {wording.usermenu.return.reference}\n
\n \n
\n \n \n {\n item.imageAmount ? (\n <>\n {\n new Array(item.imageAmount).fill(0).map((value, index) => (\n
\n \n
\n ))\n }\n \n ) : (\n <>\n {item.image1 && item.image1 !== '' && (\n \n 
\n
\n \n \n
\n )}\n {item.image2 && item.image2 !== '' && (\n \n 
\n
\n \n
\n )}\n {item.image3 && item.image3 !== '' && (\n \n 
\n
\n \n
\n )}\n \n )\n }\n \n 
\n
\n \n \n \n
\n );\n}\n","import React, { Component } from 'react';\nimport ReturnMain from '../../../components/User/Return/return.main';\nimport LayoutPreload from '../../../components/Preload/layout.preload';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { updateWording, GetRefundByCustomerId } from '../../../store/actions';\nimport _ from 'lodash';\n\nclass UserReturn extends Component {\n componentDidMount() {\n const { updateWording, isAuthenticated, GetRefundByCustomerId } = this.props;\n updateWording();\n if (isAuthenticated) {\n GetRefundByCustomerId();\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (\n !_.isEqual(prevProps.isAuthenticated, this.props.isAuthenticated) ||\n !_.isEqual(prevProps.currentLanguage, this.props.currentLanguage)\n ) {\n if (this.props.isAuthenticated) {\n const { GetRefundByCustomerId } = this.props;\n GetRefundByCustomerId();\n }\n }\n }\n\n render() {\n const { refundFetching } = this.props;\n\n if (refundFetching) {\n return \n
\n \n \n
\n \n {data && data.length === 0 && (\n
\n \n
\n )}\n {data && data.length > 0 && (\n \n
\n \n \n
\n \n {wording.usermenu.return.notFoundData}
\n\n
\n )}\n {totalItems > rowsPerPage && (\n \n
\n - \n
{CreateRefundItem()}
\n \n
\n )}\n \n \n \n
\n )\n }\n}\n\nconst mapStateToProps = ({ user, language }) => ({\n voucher: user.voucher.data,\n wording: language.wording,\n currentLanguage: language.currentLanguage,\n voucherOrderFilter: user.voucher.filter\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n UserVoucherOrderFilterChange: Actions.UserVoucherOrderFilterChange\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(voucherMain);","import React, { Component } from 'react';\nimport VoucherMain from '../../../components/User/Voucher/voucher.main'\nimport LayoutPreload from '../../../components/Preload/layout.preload';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../../store/actions';\nimport _ from 'lodash';\n\nclass UserVoucher extends Component {\n componentDidMount() {\n const { GetVoucher, isAuthenticated, updateWording } = this.props;\n updateWording();\n if (isAuthenticated) {\n GetVoucher();\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (\n !_.isEqual(prevProps.isAuthenticated, this.props.isAuthenticated) ||\n !_.isEqual(prevProps.currentLanguage, this.props.currentLanguage)\n ) {\n if (this.props.isAuthenticated) {\n const { GetVoucher } = this.props;\n GetVoucher();\n }\n }\n }\n\n render() {\n const { isFetching } = this.props;\n if (isFetching) return \n
\n \n \n
\n \n {voucher.length === 0 && (\n
\n \n
\n )}\n {voucher.length > 0 && (\n \n
\n \n
\n \n \n
\n \n {wording.usermenu.voucher.empty}
\n\n\n
\n )}\n {totalItems > rowsPerPage && (\n \n
\n\n - \n
\n
\n \n
\n )}\n \n
\n \n
\n {`${title}`}
\n\n
\n {bodyMessage}
\n\n
\n \n \n
\n \n {submitFetching && \n
\n \n \n );\n }\n}\n\nconst mapStateToProps = ({ user, language }) => ({\n wording: language.wording,\n getMakeRetureData: user.makeReturn.data,\n submitFetching: user.makeReturn.submitFetching,\n dialogNotSelect: user.makeReturn.dialogNotSelect,\n dialogOverMaxFile: user.makeReturn.dialogOverMaxFile,\n dialogSelectRemark: user.makeReturn.dialogSelectRemark,\n dialogFileTypeNotSupport: user.makeReturn.dialogFileTypeNotSupport,\n dialogFileRequired: user.makeReturn.dialogFileRequired,\n dialogSubmitError: user.makeReturn.dialogSubmitError\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n UserOpenDialogNotSelect: Actions.UserOpenDialogNotSelect,\n UserSubmitReturnFormData: Actions.UserSubmitReturnFormData,\n UserCloseDialogNotSelect: Actions.UserCloseDialogNotSelect,\n UserOpenDialogOverMaxFiles: Actions.UserOpenDialogOverMaxFiles,\n UserCloseDialogOverMaxFiles: Actions.UserCloseDialogOverMaxFiles,\n UserOpenDialogSelectRemark: Actions.UserOpenDialogSelectRemark,\n UserCloseDialogSelectRemark: Actions.UserCloseDialogSelectRemark,\n UserOpenDialogFileTypeNotSupport: Actions.UserOpenDialogFileTypeNotSupport,\n UserCloseDialogFileTypeNotSupport: Actions.UserCloseDialogFileTypeNotSupport,\n UserCloseDialogSubmitError: Actions.UserCloseDialogSubmitError,\n UserOpenDialogFileRequired: Actions.UserOpenDialogFileRequired,\n UserCloseDialogFileRequired: Actions.UserCloseDialogFileRequired\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ReturnOrderMain);\n","import React, { Component } from 'react';\nimport ReturnOrderMain from '../../../components/User/ReturnOrder/returnorder.main';\nimport LayoutPreload from '../../../components/Preload/layout.preload';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as Actions from '../../../store/actions';\n\nclass UserReturnOrder extends Component {\n componentDidMount() {\n const { updateWording, match, UserGetPurchaseOrderByOrderId } = this.props;\n const orderId = match.params.orderid;\n updateWording();\n UserGetPurchaseOrderByOrderId(orderId);\n }\n\n render() {\n const { isFetching } = this.props;\n if (isFetching) return \n
\n \n \n {makeReturnData && (\n
\n )}\n \n
\n \n
\n \n
\n \n
\n \n \n {wording.purchase.invoiceNo}\n \n {makeReturnData.invoice}\n \n {wording.purchase.orderDate}\n \n {makeReturnData.date}\n
\n\n \n {wording.purchase.status}\n \n \n {makeReturnData.status}\n \n {makeReturnData.deliveryNumber !== '' && (\n <>\n \n {wording.purchase.deliveryNo}\n \n \n {makeReturnData.deliveryNumber}\n \n \n )}\n
\n\n \n
\n
\n | \n | \n \n \n \n | \n\n \n \n {product.productName}\n \n\n
| \n\n \n \n \n | \n\n {isSelected ? (\n \n | \n ) : (\n \n )}\n \n );\n })}\n |
\n
\n \n
\n \n
\n )}\n\n \n \n {wording.usermenu.makeReturn.captionLabel.details}\n \n
\n \n \n this.setState({ details: e.target.value })\n }\n />\n {this.state.hasErrorReasons ?
\n\n {previewImages.length > 0 && (\n {wording.usermenu.makeReturn.errorRemark}
: null}\n\n\n
\n \n \n {previewImages.map((img, index) => {\n return (\n \n
\n );\n })}\n \n
\n \n \n {wording.usermenu.makeReturn.captionLabel.upload}\n \n
\n \n this.getFilesNormal(e)}\n />\n
\n\n \n this.hadleSetReturnFormData()}>\n {wording.usermenu.makeReturn.selectsuccess}\n \n
\n \n
\n - \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0]?.categoriesNameTh\n : navbarCategory[0]?.categoriesNameEn}\n \n \n
- {page} \n
\n
\n {totalItems > rowsPerPage && (\n \n
\n \n {categoryData && categoryData.length === 0 && (\n
\n )}\n \n
\n )}\n {categoryData && categoryData.length !== 0 && (\n \n
\n \n
\n \n \n
\n \n {wording.unableItem.bodyMessage}
\n\n {wording.unableItem.urlMessage1}{' '}\n \n {currentLanguage === 'TH'\n ? navbarCategory[0]?.categoryNameTh\n : navbarCategory[0]?.categoryNameEn}\n \n
\n\n
\n \n {categoryData\n .slice(\n (currentPage - 1) * rowsPerPage,\n (currentPage - 1) * rowsPerPage + rowsPerPage\n )\n .map((item, index) => {\n const urlToProductDetail = `${basenameURL}/${category[`categoryName${firstUpperCase(currentLanguage.toLowerCase())}`] === TYPE_PRODUCT.VOUCHER[currentLanguage].toUpperCase() ? \"voucher\" : \"product\"}/${item.name\n .split(' ')\n .join('-')}`;\n return (\n \n
\n );\n })}\n \n
\n \n {\n AssignCategory(category)\n history.push(urlToProductDetail);\n }}\n />\n
\n\n \n \n {item.tag}\n \n
\n )\n }\n {\n item.promotionName && (\n \n {\n item.promotionName.map((item, index) =>\n \n {item}\n \n )\n }\n
\n )\n }\n \n \n
\n {item.promotionPrice > 0 && item.promotionPrice < item.price ? (\n \n \n {`${CURRENCY.B}${formatMoney(\n item.price\n )}`}\n \n \n {`${\n CURRENCY.B\n }${formatMoney(\n item.promotionPrice\n )}`}\n \n \n ) : (\n \n \n {`${\n CURRENCY.B\n }${formatMoney(\n item.price\n )}`}\n \n \n )}\n
\n \n \n \n {item.name}\n \n \n
\n {item.promotionPrice > 0 && item.promotionPrice < item.price ? (\n \n \n {item.name}\n
\n \n \n\n
\n )\n }\n}\n\nconst mapStateToProps = ({ language }) => ({\n wording: language.wording\n});\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n updateWording: Actions.updateWording\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AboutUs);\n","import React, { Component, Fragment } from 'react'\nimport { connect } from 'react-redux'\nimport * as Actions from '../../store/actions';\nimport { bindActionCreators } from 'redux';\nimport './branches.css';\nimport { Link } from 'react-router-dom';\n\nimport OwlCarousel from 'react-owl-carousel';\nimport '../../components/Home/home.revelution-slider/slider.css'\n\nexport class Branches extends Component {\n\n componentDidMount() {\n const { updateWording } = this.props;\n updateWording();\n }\n\n render() {\n\n const { wording, navbarCategory, currentLanguage, basenameURL } = this.props;\n\n return (\n \n \n
\n\n \n
\n {items[0].title}
\n {\n items[0].paragraph?.map((value, number) => ({value}
))\n }\n\n
\n\n \n \n
\n \n
\n {items[1].title}
\n {\n items[1].paragraph?.map((value, number) => ({value}
))\n }\n\n
\n\n \n
\n \n \n {items[2].title[0]}
\n {\n items[2].paragraph?.map((value, number) => value ? (
))\n }\n
\n \n \n {items[2].title[0]}
\n {items[2].title[1]}\n
\n {\n items[2].paragraph?.map((value, number) => value ? ({value}
): ())\n }\n
\n \n
\n\n \n
\n {items[3].title}
\n {\n items[3].paragraph?.map((value, number) => typeof value === \"string\" \n ? ({value}
)\n : (\n\n {value.text}\n {\n value.tag.tagName === \"Link\" \n ? {value.tag.text}\n : React.createElement(value.tag.tagName, value.tag.props, value.tag.text)\n }\n
\n )\n )\n }\n\n \n \n
\n\n )\n }\n}\n\n\nconst mapStateToProps = ({ language, navigation }) => ({\n wording: language.wording,\n navbarCategory: navigation.navbarCategory,\n currentLanguage: language.currentLanguage,\n basenameURL: language.basenameURL\n});\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n updateWording: Actions.updateWording\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Branches);\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport * as Actions from '../../store/actions';\nimport { bindActionCreators } from 'redux';\nimport './how-to-buy.css';\n\nexport class HowToBuy extends Component {\n componentDidMount() {\n const { updateWording } = this.props;\n updateWording();\n }\n render() {\n const { wording } = this.props;\n return (\n BRANCHES
\n\n
\n - \n
- \n \n {currentLanguage === 'TH'\n ? navbarCategory[0]?.categoriesNameTh\n : navbarCategory[0]?.categoriesNameEn}\n \n \n
- Home \n
- branches \n
\n {wording.branchesPage.branch.map((text, num) =>\n
\n \n
\n )}\n \n
\n
\n {text.nameTh}
\n {\n typeof text.detail === \"string\" \n ? {text.detail}\n : (\n \n {text.detail[0]}\n \n {text.detail[1]}\n \n )\n }\n
\n {text.timeTh}
\n
\n \n {text.nameEn}
\n{text.floor}
\n {text.timeEn}\n
\n {text.nameTh}
\n {\n typeof text.detail === \"string\" \n ? {text.detail}\n : (\n \n {text.detail[0]}\n \n {text.detail[1]}\n \n )\n }\n
\n {text.timeTh}
\n
\n \n {wording.branchesPage.branch.map((img, index) =>\n
\n \n
\n )}\n \n \n
\n \n
\n \n
\n {wording.HowToBuyPage.title}\n
\n\n \n
\n
\n \n {items.map((item, index) => (\n \n );\n};\n\nconst routeConfig = {\n basename: '/:lng(en|th)?',\n items: [\n {\n path: '',\n props: {\n render: (props) => \n \n \n \n \n \n \n \n );\n}\n\nexport default App;\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\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is 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 .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.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(
\n
\n \n { wording.HowToBuyPage.select }\n
\n \n \n
\n )\n }\n}\n\nconst mapStateToProps = ({ language }) => ({\n wording: language.wording\n});\n\nconst mapDispatchToProps = dispatch => {\n return bindActionCreators(\n {\n updateWording: Actions.updateWording\n },\n dispatch\n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(HowToBuy);\n","import React from 'react';\nimport { Route, Switch, Redirect, withRouter } from 'react-router-dom';\nimport PrivateRoute from './PrivateRoute';\n// pages for this kit\nimport HomePage from '../views/home';\nimport SearchPage from '../views/search';\nimport ProductPage from '../views/product';\nimport CartPage from '../views/cart';\nimport CheckoutPage from '../views/checkout';\nimport PaymentRespSuccess from '../views/payment-resp/success';\nimport PaymentRespFailure from '../views/payment-resp/failure';\nimport PaymentRespCelled from '../views/payment-resp/cancelled';\nimport NotFoundPage from '../views/notfound';\nimport UserAddress from '../views/user/address';\nimport UserPurchase from '../views/user/purchase';\nimport UserReturn from '../views/user/return';\nimport UserVoucher from '../views/user/voucher';\nimport UserReturnOrder from '../views/user/returnOrder';\nimport Category from '../views/categories';\nimport AboutUs from '../views/about-us';\nimport Branches from '../views/branches';\nimport HowToBuy from '../views/how-to-buy';\n\nconst Routing = ({ location, history }) => {\n const { basename, items } = routeConfig;\n const { pathname } = location;\n if (pathname.slice(1, 3) == 'th') history.push(pathname.slice(3));\n return (\n \n
\n \n { wording.HowToBuyPage.add }\n
\n \n \n
\n \n
\n \n { wording.HowToBuyPage.check }\n
\n \n \n
\n\n \n
\n \n { wording.HowToBuyPage.payment }\n
\n \n \n
\n \n
\n \n { wording.HowToBuyPage.shipping }\n
\n \n