boluo-app-main/src/components/product-dialog/steps-ui/company-publish-job-buy.tsx

import Taro from '@tarojs/taro';

import { Button } from '@taroify/core';
import classNames from 'classnames';
import { Fragment, useCallback, useEffect, useState } from 'react';

import Badge from '@/components/badge';
import { PREFIX } from '@/components/product-dialog/const';
import { CollectEventName, ReportEventId } from '@/constants/event';
import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
import { SubscribeTempId } from '@/constants/subscribe';
import { logWithPrefix } from '@/utils/common';
import { collectEvent, reportEvent } from '@/utils/event';
import {
  getOrderPrice,
  isCancelPay,
  requestCreatePayInfo,
  requestOrderInfo,
  requestPayment,
  requestProductTypeList,
} from '@/utils/product';
import { postSubscribe, subscribeMessage } from '@/utils/subscribe';
import Toast from '@/utils/toast';
import { ProductSpecResult } from '@/types/product';

interface IProps {
  onNext: () => void;
}

const log = logWithPrefix('company-publish-job-buy');
const TEMP_IDS = [SubscribeTempId.UNREAD_MESSAGE_REMINDER, SubscribeTempId.NEW_MESSAGE_REMINDER];
interface Item {
  id: ProductSpecId;
  title: string;
  price: string;
  amt: number;
  contents: { content: string; highlight?: boolean; inlineHighlight?: string }[];
  badge?: string;
}

const LIST: Item[] = [
  // {
  //   id: ProductSpecId.BOSS_VIP_NEW_1,
  //   title: '展示一周',
  //   price: '480播豆',
  //   amt: 48,
  //   badge: '限时体验',
  //   contents: [
  //     { content: '-通告每日优先展示' },
  //     { content: '-每天可查看20个主播详情' },
  //     { content: '-每天可主动联系10个主播' },
  //     // { content: '-播络可代为联系20个主播（高成功率）', highlight: true },
  //     { content: '-有效期一周' },
  //   ],
  // },
  {
    id: ProductSpecId.BOSS_VIP_NEW_2,
    title: '推荐一月',
    price: '680播豆',
    amt: 68,
    badge: '限时体验',
    contents: [
      { content: '-通告每日优先展示', highlight: true },
      { content: '-每天可查看20个主播详情，', inlineHighlight: '可主动联系10个' },
      // { content: '-播络可代为联系20个主播（高成功率）', highlight: true },
      { content: '-有效期一个月' },
    ],
  },
  {
    id: ProductSpecId.BOSS_VIP_NEW_3,
    title: '推荐一季',
    price: '1360播豆',
    amt: 136,
    badge: '6.7折',
    contents: [
      { content: '-通告每日优先展示', highlight: true },
      { content: '-每天可查看20个主播详情', inlineHighlight: '可主动联系10个' },
      // { content: '-播络可代为联系60个主播（高成功率）', highlight: true },
      { content: '-有效期一个季度' },
    ],
  },
];

const subscribe = async () => {
  const result = await subscribeMessage(TEMP_IDS);
  const successIds: SubscribeTempId[] = [];
  TEMP_IDS.forEach(id => {
    result[id] === 'accept' && successIds.push(id);
  });
  postSubscribe(TEMP_IDS, successIds);
};

const getJsonContent = (jsonString: string) => {
  try {
    return JSON.parse(jsonString);
  } catch (e) {
    return [];
  }
};

export default function CompanyPublishJobBuy(props: IProps) {
  const { onNext } = props;
  const [productList, setProductList] = useState<ProductSpecResult[]>([]);
  const [selectItem, setSelectItem] = useState<ProductSpecResult | undefined>();

  const handleClickItem = useCallback((newSelectItem: ProductSpecResult) => setSelectItem(newSelectItem), []);

  const handleBuy = useCallback(async () => {
    log('handleBuy');
    reportEvent(ReportEventId.CLICK_PAY_PUBLISH_JOB);
    if (!selectItem) {
      Toast.error('请选择购买的产品');
      return;
    }
    try {
      Taro.showLoading();
      const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
        type: OrderType.CompanyVip,
        amt: selectItem.payPrice,
        productCode: ProductType.BOSS_VIP_NEW,
        productSpecId: selectItem.productSpecId,
      });
      log('handleBuy payInfo', payOrderNo, createPayInfo);
      await requestPayment({
        timeStamp: createPayInfo.timeStamp,
        nonceStr: createPayInfo.nonceStr,
        package: createPayInfo.packageVal,
        signType: createPayInfo.signType,
        paySign: createPayInfo.paySign,
        success: () => subscribe(),
      });
      const { status } = await requestOrderInfo({ payOrderNo });
      log('handleBuy orderInfo', status);
      if (status !== OrderStatus.Success) {
        throw new Error('order status error');
      }
      Taro.hideLoading();
      onNext();
    } catch (e) {
      Taro.hideLoading();
      Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
      log('handleBuy error', e);
    }
  }, [selectItem, onNext]);
  const handleGetProductInfo = useCallback(async () => {
    const result = await requestProductTypeList(ProductType.BOSS_VIP_NEW);
    setProductList(result);
    setSelectItem(result[0]);
  }, []);

  useEffect(() => {
    handleGetProductInfo();
    collectEvent(CollectEventName.CREATE_ORDER_VIEW, { orderType: OrderType.BossVip, source: 'user-page' });
  }, []);

  return (
    <div className={`${PREFIX}__company-publish-job-buy`}>
      <div className={`${PREFIX}__company-publish-job-buy__header`}>发认证通告限时折扣</div>
      <div className={`${PREFIX}__company-publish-job-buy__price-container`}>
        {productList.map(item => (
          <div
            key={item.payPrice}
            className={classNames(`${PREFIX}__company-publish-job-buy__item`, {
              selected: selectItem && item.payPrice === selectItem.payPrice,
              disabled: item.payPrice === 0,
            })}
            onClick={item.payPrice === 0 ? undefined : () => handleClickItem(item)}
          >
            <div
              className={classNames(`${PREFIX}__company-publish-job-buy__item__title`, { free: item.payPrice === 0 })}
            >
              {item.title}
            </div>
            <div className={`${PREFIX}__company-publish-job-buy__item__price`}>{item.priceText}</div>
            {item.badge && <Badge className={`${PREFIX}__company-publish-job-buy__item__badge`} text={item.badge} />}
          </div>
        ))}
      </div>
      <div className={`${PREFIX}__company-publish-job-buy__divider`}>
        <div className={`${PREFIX}__company-publish-job-buy__divider__left-line`} />
        <div className={`${PREFIX}__company-publish-job-buy__divider__title`}>包含</div>
        <div className={`${PREFIX}__company-publish-job-buy__divider__right-line`} />
      </div>
      {selectItem && (
        <Fragment>
          <div className={`${PREFIX}__company-publish-job-buy__contents`}>
            {getJsonContent(selectItem.contentsJson).map(i => (
              <div
                className={classNames(`${PREFIX}__company-publish-job-buy__content`, { highlight: i.highlight })}
                key={i.content}
              >
                {i.content}
                {i.inlineHighlight && <div className="highlight-span">{i.inlineHighlight}</div>}
              </div>
            ))}
          </div>
          <Button className={`${PREFIX}__company-publish-job-buy__button`} onClick={handleBuy}>
            {`支付${selectItem.showPrice}元`}
          </Button>
        </Fragment>
      )}
    </div>
  );
}