ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/Ad/index.tsx

import React, { useContext, useState } from "react"
import style from '../index.less'
import NewCreateAd from "./newCreateAd"
import { DispatchAddelivery } from "..";
import { Button, Modal, Typography } from "antd";
import { EditOutlined } from "@ant-design/icons";
import { AD_STATUS_ENUM, BID_MODE_ENUM, DEEP_CONVERSION_ENUM, GOAL_ROAS_ENUM, MARKETING_CARRIER_TYPE_ENUM, MARKETING_GOAL_ENUM, MARKETING_SUB_GOAL_ENUM, MARKETING_TARGET_TYPE_ENUM, MARKETING_TARGET_TYPE_GAME_ENUM, OPTIMIZATIONGOAL_ENUM, SITE_SET_ENUM, SMART_BID_TYPE_ENUM } from "../../const";
import TimeSeriesLook from "@/pages/launchSystemNew/adq/ad/timeSeriesLook";
import { arraysHaveSameValues } from "@/utils/utils";
import '../../index.less'
import { ShowMiniProgramWechatDetail } from "@/pages/launchSystemV3/tencenTasset/miniProgramWechat";
import { ShowGameDetail } from "@/pages/launchSystemV3/tencenTasset/game";

/**
 * 广告信息
 * @returns 
 */
const Ad: React.FC = () => {

    /*****************************/
    const { addelivery, setAddelivery, accountCreateLogs, clearData, setAccountCreateLogs, putInType } = useContext(DispatchAddelivery)!;
    const { adgroups } = addelivery
    const {
        marketingGoal, marketingSubGoal, marketingAssetOuterSpec, marketingCarrierType, automaticSiteEnabled, siteSet, searchExpandTargetingSwitch, bidMode, smartBidType, bidAmount, optimizationGoal, isConversion, depthConversionEnabled,
        deepConversionSpec, autoAcquisitionEnabled, autoAcquisitionBudget, dailyBudget, endDate, beginDate, timeSeries, firstDayBeginTime, configuredStatus, adgroupName, sceneSpec, autoDerivedCreativeEnabled, sysWechatAppId, sysWxGameId
    } = adgroups
    const [newVisible, setNewVisible] = useState<boolean>(false)
    /*****************************/

    return <>
        <div className={`${style.settingsBody_content_row} ${style.row1}`}>
            <div className={style.title}>
                <span>广告信息</span>
            </div>
            <div className={style.detail}>
                <div className={style.detail_body}>
                    {(adgroups && Object.keys(adgroups).length > 0) ? <>
                        <p style={{ fontWeight: 'bold', color: configuredStatus === 'AD_STATUS_NORMAL' ? '#52c41a' : '#FF4D4F' }}>广告状态：{AD_STATUS_ENUM[configuredStatus as keyof typeof AD_STATUS_ENUM]}</p>
                        {putInType === 'NOVEL' ? <>
                            <p>营销目的：{MARKETING_GOAL_ENUM[marketingGoal as keyof typeof MARKETING_GOAL_ENUM]}</p>
                            <p style={{ fontWeight: 'bold', color: '#000' }}>推广产品类型：{MARKETING_TARGET_TYPE_ENUM[marketingAssetOuterSpec?.marketingTargetType as keyof typeof MARKETING_TARGET_TYPE_ENUM]}</p>
                        </> : <>
                            <p>营销目的：{MARKETING_SUB_GOAL_ENUM[marketingSubGoal as keyof typeof MARKETING_SUB_GOAL_ENUM]}</p>
                            <p style={{ fontWeight: 'bold', color: '#000' }}>推广产品类型：{MARKETING_TARGET_TYPE_GAME_ENUM[marketingAssetOuterSpec?.marketingTargetType as keyof typeof MARKETING_TARGET_TYPE_GAME_ENUM]}</p>
                        </>}
                        {marketingAssetOuterSpec?.marketingTargetType === 'MARKETING_TARGET_TYPE_MINI_PROGRAM_WECHAT' ?
                            <ShowMiniProgramWechatDetail id={sysWechatAppId} /> :
                            marketingAssetOuterSpec?.marketingTargetType === 'MARKETING_TARGET_TYPE_WECHAT_MINI_GAME' ?
                                <ShowGameDetail id={sysWxGameId}/> :
                                null
                        }
                        <p>营销载体类型：{MARKETING_CARRIER_TYPE_ENUM[marketingCarrierType as keyof typeof MARKETING_CARRIER_TYPE_ENUM]}</p>
                        <p>版位选择：{automaticSiteEnabled ? '自动版位' : '选择特定版位'}</p>
                        {!automaticSiteEnabled && <Typography.Paragraph className={style.tpP} style={{ marginBottom: 0 }} ellipsis={{ tooltip: true, rows: 2 }}>广告版位：{siteSet.map((item: string | number) => SITE_SET_ENUM[item as keyof typeof SITE_SET_ENUM]).toString()}</Typography.Paragraph>}
                        <p>搜索场景扩量：{searchExpandTargetingSwitch === 'SEARCH_EXPAND_TARGETING_SWITCH_OPEN' ? '开启' : '关闭'}</p>
                        <p>计费方式：{BID_MODE_ENUM[bidMode as keyof typeof BID_MODE_ENUM]}</p>
                        <p>出价类型：{SMART_BID_TYPE_ENUM[smartBidType as keyof typeof SMART_BID_TYPE_ENUM]}</p>
                        <p>出价：{bidAmount}元/{optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}</p>
                        {isConversion && <p style={{ fontWeight: 'bold', color: '#000' }}>转化：新链路转化</p>}
                        {optimizationGoal && <p style={{ fontWeight: 'bold', color: '#000' }}>优化目标：{OPTIMIZATIONGOAL_ENUM[optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM]}</p>}
                        {deepConversionSpec && <>
                            <p style={{ fontWeight: 'bold', color: '#000' }}>深度转化优化：开启</p>
                            <p style={{ fontWeight: 'bold', color: '#000' }}>深度优化类型：{DEEP_CONVERSION_ENUM[deepConversionSpec?.deepConversionType as keyof typeof DEEP_CONVERSION_ENUM]}</p>
                            {deepConversionSpec.deepConversionType === 'DEEP_CONVERSION_BEHAVIOR' ? <>
                                <p style={{ fontWeight: 'bold', color: '#000' }}>深度优化目标：{OPTIMIZATIONGOAL_ENUM[deepConversionSpec.deepConversionBehaviorSpec.goal as keyof typeof OPTIMIZATIONGOAL_ENUM]}</p>
                                <p style={{ fontWeight: 'bold', color: '#000' }}>深度目标出价：{deepConversionSpec.deepConversionBehaviorSpec.bidAmount}元/{OPTIMIZATIONGOAL_ENUM[deepConversionSpec.deepConversionBehaviorSpec.goal as keyof typeof OPTIMIZATIONGOAL_ENUM] || '优化目标'}</p>
                            </> : <>
                                <p style={{ fontWeight: 'bold', color: '#000' }}>深度优化目标：{GOAL_ROAS_ENUM[deepConversionSpec.deepConversionWorthSpec.goal as keyof typeof GOAL_ROAS_ENUM]}</p>
                                <p style={{ fontWeight: 'bold', color: '#000' }}>期望ROI：{deepConversionSpec.deepConversionWorthSpec.expectedRoi}</p>
                            </>}
                        </>}
                        <p>一键起量：{autoAcquisitionEnabled ? '开启' : '关闭'}</p>
                        {autoAcquisitionEnabled && <p>起量预算：{autoAcquisitionBudget}元/天</p>}
                        <p>广告日预算：{dailyBudget ? dailyBudget + '元/天' : '不限'}</p>
                        <p style={{ fontWeight: 'bold', color: '#000' }}>投放日期：{beginDate} 至 {endDate}</p>
                        <p>投放时段：{timeSeries.includes('0') ? <TimeSeriesLook timeSeries={timeSeries} /> : '全天'}</p>
                        <p>首日开始时间：{firstDayBeginTime ? firstDayBeginTime : '关闭'}</p>
                        <p>自动衍生创意：{autoDerivedCreativeEnabled ? '系统衍生' : '关闭衍生'}</p>
                        <p>广告名称：{adgroupName}</p>
                    </> : <div className={style.ad_config}>
                        {accountCreateLogs?.length > 0 ?
                            <div className={style.ad_config_item} onClick={() => setNewVisible(true)}>新建广告</div>
                            :
                            <div className={style.ad_config_item} style={{ backgroundColor: '#FFF' }}>请完善媒体账户信息</div>
                        }
                    </div>}
                </div>
                <div className={style.detail_footer}>
                    {(adgroups && Object.keys(adgroups).length > 0) ? <>
                        <Button type="link" icon={<EditOutlined />} style={{ padding: 0, fontSize: 12 }} onClick={() => setNewVisible(true)}>编辑</Button>
                    </> : <></>}
                </div>
            </div>
        </div>

        {/* 新建广告 */}
        {newVisible && <NewCreateAd
            putInType={putInType}
            value={addelivery.adgroups}
            visible={newVisible}
            onClose={() => {
                setNewVisible(false)
            }}
            onChange={(adgroups) => {
                if (
                    adgroups.marketingGoal === marketingGoal &&  // 营销内容
                    adgroups.marketingCarrierType === marketingCarrierType && // 营销载体
                    adgroups.marketingAssetOuterSpec.marketingTargetType === marketingAssetOuterSpec.marketingTargetType && // 推广产品
                    adgroups.automaticSiteEnabled === automaticSiteEnabled &&  // 版位选择
                    arraysHaveSameValues(adgroups?.siteSet || [], siteSet || []) &&  // 版位
                    arraysHaveSameValues(adgroups?.sceneSpec?.wechatPosition || [], sceneSpec?.wechatPosition || []) // 微信公众号与小程序定投
                ) {
                    if (adgroups?.isConversion !== isConversion || ((isConversion || adgroups?.isConversion) && adgroups?.depthConversionEnabled !== depthConversionEnabled)) {
                        setAccountCreateLogs(accountCreateLogs.map(item => {
                            delete item?.newConversionList
                            delete item?.userActionSetsList
                            return item
                        }))
                    }
                    setNewVisible(false)
                    setAddelivery({ ...addelivery, adgroups })

                    clearData()
                } else {
                    setAccountCreateLogs(accountCreateLogs.map(item => ({ accountId: item.accountId })))
                    if (
                        addelivery?.adgroups && Object.keys(addelivery?.adgroups).length &&
                        ((addelivery?.dynamic && Object.keys(addelivery?.dynamic).length)
                            || addelivery?.targeting?.length
                            || (addelivery?.dynamicMaterialDTos && Object.keys(addelivery?.dynamicMaterialDTos).length)
                            || (addelivery?.dynamicCreativesTextDTOS && Object.keys(addelivery?.dynamicCreativesTextDTOS).length)
                        )
                    ) {
                        Modal.confirm({
                            title: <strong style={{ color: '#FAAD14' }}>注意</strong>,
                            content: <span>当前改变了“营销内容”、“营销载体”、“推广产品”、“版位选择”、“版位”、“微信公众号与小程序定投”中的某些内容，不清空后面内容可能会导致当前“定向”、“创意”、“素材”等一些内容不匹配，<span style={{ color: 'red' }}>是否清空内容</span></span>,
                            okText: '清空',
                            cancelText: '不清空',
                            keyboard: false,
                            onOk() { // 清空
                                setNewVisible(false)
                                setAddelivery({ adgroups, targeting: [], dynamic: {}, dynamicMaterialDTos: {}, dynamicCreativesTextDTOS: {}, mediaType: 0 })
                                clearData()
                            },
                            onCancel() { // 不清空
                                setNewVisible(false)
                                setAddelivery({ ...addelivery, adgroups })
                                clearData()
                            },
                            className: 'modalResetCss'
                        })
                    } else {
                        setNewVisible(false)
                        setAddelivery({ adgroups, targeting: [], dynamic: {}, dynamicMaterialDTos: {}, dynamicCreativesTextDTOS: {}, mediaType: 0 })
                        clearData()
                    }
                }
            }}
        />}
    </>
}


export default React.memo(Ad)