68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import { CUSTOMER_SERVICE_PHONE } from '@dukang/shared-types';
|
|
import { track } from '../lib/analytics';
|
|
import { openWecomCustomerService } from '../lib/customer-service';
|
|
|
|
type ContactCustomerSheetProps = {
|
|
orderId?: string;
|
|
orderNo?: string;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export default function ContactCustomerSheet({ orderId, onClose }: ContactCustomerSheetProps) {
|
|
const tel = CUSTOMER_SERVICE_PHONE.replace(/-/g, '');
|
|
|
|
function openPhone() {
|
|
track('cs_contact', { type: 'phone', orderId });
|
|
window.location.href = `tel:${tel}`;
|
|
onClose();
|
|
}
|
|
|
|
function openOnline() {
|
|
track('cs_contact', { type: 'wecom_kf', orderId });
|
|
if (openWecomCustomerService()) {
|
|
onClose();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="contact-customer-overlay" onClick={onClose}>
|
|
<div className="contact-customer-sheet" onClick={(e) => e.stopPropagation()}>
|
|
<div className="contact-customer-head">
|
|
<h3>联系客服</h3>
|
|
<button type="button" className="contact-customer-close" aria-label="关闭" onClick={onClose}>
|
|
<span className="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="contact-customer-options">
|
|
<button type="button" className="contact-customer-option" onClick={openPhone}>
|
|
<div className="contact-customer-option-icon">
|
|
<span className="material-symbols-outlined">call</span>
|
|
</div>
|
|
<div className="contact-customer-option-body">
|
|
<p className="contact-customer-option-title">拨打总部客服电话</p>
|
|
<p className="contact-customer-option-sub">{CUSTOMER_SERVICE_PHONE}</p>
|
|
</div>
|
|
<span className="material-symbols-outlined contact-customer-chevron">chevron_right</span>
|
|
</button>
|
|
|
|
<button type="button" className="contact-customer-option" onClick={openOnline}>
|
|
<div className="contact-customer-option-icon">
|
|
<span className="material-symbols-outlined">chat</span>
|
|
</div>
|
|
<div className="contact-customer-option-body">
|
|
<p className="contact-customer-option-title">在线客服</p>
|
|
<p className="contact-customer-option-sub">专业客服实时解答</p>
|
|
</div>
|
|
<span className="material-symbols-outlined contact-customer-chevron">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
|
|
<button type="button" className="contact-customer-cancel" onClick={onClose}>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|