\n \n
\n
\n
\n NT$ {productsTotal}\n \n \n \n {' '}\n {`(運費+${fareTotal})`}{' '}\n \n {showShippingCoupon && (\n {` (運費-${discountTotal}) `}\n )}\n {showOtherCoupon && (\n {` (折扣-${discountTotal}) `}\n )}\n
\n \n
\n 前往結帳\n \n \n
\n
\n 已選購商品({Object.keys(orderProducts).length})\n \n \n \n 商品\n \n \n {productsTotal}\n \n \n \n 運費\n \n \n {fareTotal}\n \n
\n {showShippingCoupon && (\n \n \n 運費折扣\n \n \n -{discountTotal}\n \n
\n )}\n {showOtherCoupon && (\n \n \n 優惠券折扣\n \n \n -{discountTotal}\n \n
\n )}\n \n \n 小計\n \n \n NT$ {total}\n \n
\n \n 前往結帳\n \n \n \n );\n};\n\nProductOrder.propTypes = {\n user: PropTypes.shape({\n vip: PropTypes.bool\n }),\n coupon: PropTypes.shape({\n policy: PropTypes.string,\n vip_only: PropTypes.bool\n }),\n product: PropTypes.shape({\n fare: PropTypes.number.isRequired,\n fareThreshold: PropTypes.number\n }).isRequired,\n orderProducts: PropTypes.shape({}).isRequired,\n onClick: PropTypes.func.isRequired\n};\n\nProductOrder.defaultProps = {\n user: null,\n coupon: null\n};\n\nexport default ProductOrder;\n","import { continueAfterLogin, deviseSignIn } from '@polydice/icook-devise-unify';\nimport { triggerToast } from '@polydice/ui/dist/Toast';\nimport classNames from 'classnames';\nimport { webviewTrack } from 'components/webviewTrack';\nimport PropTypes from 'prop-types';\nimport { Fragment, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n getAuthToken,\n getDateStatus,\n getFareDescription,\n scrollTo,\n storageKey\n} from 'reactjs/components/utility';\nimport useScrollResizeHook from 'reactjs/utils/useScrollResize';\nimport { ProductWithSkusProps } from '../../propTypes/product';\nimport ProductAction from './ProductAction';\nimport ProductCoupon from './ProductCoupon';\nimport ProductFundraising from './ProductFundraising';\nimport {\n BUYING_STATE,\n WATCHING_STATE,\n getLowestPrice,\n isProductSkusContainOrderSkus\n} from './ProductHelper';\nimport ProductIntro from './ProductIntro';\nimport ProductOrder from './ProductOrder';\nimport styles from './ProductSidebar.module.scss';\n\nconst ProductSidebar = ({\n user,\n product,\n searchMode,\n fundraisingMode,\n fundraisingCount,\n fundraisingTotal,\n promotion,\n coupon,\n favoriteEndpoint,\n orderEndpoint,\n isFavorite,\n isHybrid,\n darkMode,\n isCool3c\n}) => {\n const {\n id,\n name: productName,\n skus,\n accept_credit_card_installment,\n credit_card_installment_period,\n selling_program_id,\n started_at,\n ended_at\n } = product;\n\n const continueAfterLoginKey = 'buy_product';\n const dateStatus = getDateStatus(started_at, ended_at);\n const formRef = useRef(null);\n const tnlAuthFormRef = useRef(null);\n const [status, setStatus] = useState(WATCHING_STATE);\n const [orderProducts, setOrderProducts] = useState({});\n\n const target = useRef(null);\n useScrollResizeHook(target, styles.productSidebarPanelFixedSide, true);\n\n useEffect(() => {\n const triggerUpdate = (event) => {\n const {\n detail: { selectedProduct, selectedQuantity, currentItemInStock }\n } = event;\n const { id, name, price, feature } = selectedProduct;\n setOrderProducts((orderProducts) => {\n const alreadyExist = {}.hasOwnProperty.call(orderProducts, id);\n const quantityToAdd = (nextQuantity) =>\n nextQuantity >= currentItemInStock\n ? currentItemInStock\n : nextQuantity;\n return {\n ...orderProducts,\n [id]: {\n sku_id: id,\n price,\n quantity: alreadyExist\n ? quantityToAdd(orderProducts[id].quantity + selectedQuantity)\n : selectedQuantity\n }\n };\n });\n if (window?.daex) {\n window.daex('send', 'event', {\n name: 'add_to_cart'\n });\n }\n window.dataLayer.push({ ecommerce: null });\n window.dataLayer.push({\n event: 'add_to_cart',\n ecommerce: {\n add: {\n actionField: {\n list: productName\n },\n products: [\n {\n name,\n id,\n price,\n brand: productName,\n variant: feature,\n quantity: selectedQuantity\n }\n ]\n },\n currency: 'TWD',\n value: price,\n items: [\n {\n item_id: id,\n item_name: name,\n item_brand: productName,\n item_variant: feature,\n quantity: selectedQuantity,\n price\n }\n ]\n }\n });\n setStatus(BUYING_STATE);\n triggerToast({\n className: styles.productSidebarToast,\n text: '已加入購買',\n closable: true\n });\n };\n window.addEventListener('Buy', triggerUpdate);\n return () => window.removeEventListener('Buy', triggerUpdate);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleSubmit = useCallback(() => {\n if (dateStatus === 'expired') {\n window.alert('商品已完售，下次請早喔。');\n } else {\n formRef.current.submit();\n }\n }, [dateStatus]);\n\n const handleLogin = () => {\n const trackName = 'member_feature_requirement_label_clicked';\n const trackParameters = JSON.stringify({\n where: 'make_order',\n label: 'log_in'\n });\n webviewTrack(trackName, trackParameters);\n if (isCool3c) {\n tnlAuthFormRef.current.submit();\n } else {\n deviseSignIn({\n entry: 'market_product_pay',\n redirect: window.location.href,\n continueAfterLogin: continueAfterLoginKey,\n in_web: 1\n });\n }\n };\n\n const [submitImmediately, setSubmitImmediately] = useState(false);\n\n useEffect(() => {\n const skuInSessionStorage = sessionStorage.getItem(storageKey);\n if (skuInSessionStorage) {\n const selectedSkus = JSON.parse(skuInSessionStorage);\n if (continueAfterLogin(continueAfterLoginKey)) {\n setOrderProducts(selectedSkus);\n setSubmitImmediately(true);\n } else {\n if (!isProductSkusContainOrderSkus(product.skus, selectedSkus)) {\n sessionStorage.removeItem(storageKey);\n } else {\n setOrderProducts(selectedSkus);\n setStatus(BUYING_STATE);\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (submitImmediately) {\n handleSubmit();\n }\n }, [submitImmediately, handleSubmit]);\n\n useEffect(() => {\n if (Object.keys(orderProducts).length !== 0) {\n sessionStorage.setItem(storageKey, JSON.stringify(orderProducts));\n }\n }, [orderProducts]);\n\n useEffect(() => {\n if (window.location.hash === '#buy-options-start') {\n const element = document.getElementById('buy-options-start');\n scrollTo(element);\n setTimeout(() => scrollTo(element), 600);\n }\n }, []);\n\n const [authToken, setAuthToken] = useState('');\n useEffect(() => {\n setAuthToken(getAuthToken());\n }, []);\n\n // 銷售方案 一般 = 1, 募資 = 2\n const showDetail =\n selling_program_id === 1 ||\n (selling_program_id === 2 && dateStatus !== 'future');\n\n return (\n \n \n \n
\n {!searchMode && fundraisingMode && (\n \n )}\n {dateStatus !== 'expired' &&\n !searchMode &&\n !fundraisingMode &&\n skus.length !== 0 && (\n \n \n 最低價\n \n \n NT$ {getLowestPrice(product)}\n \n 起\n \n \n \n )}\n {status === WATCHING_STATE && (\n \n )}\n {status === BUYING_STATE && (\n <>\n \n \n \n \n \n )}\n {showDetail && (\n <>\n {promotion && (\n \n \n \n {promotion}\n \n