@capillarytech/creatives-library 3.9.0 → 3.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/TemplatePreview/WechatRichmediaTemplatePreview/index.js +7 -7
- package/components/TemplatePreview/_templatePreview.scss +279 -20
- package/components/TemplatePreview/assets/images/home-screen-android.svg +21 -0
- package/components/TemplatePreview/assets/images/home-screen-ios.svg +16 -0
- package/components/TemplatePreview/assets/images/sms_mobile_android.svg +22 -0
- package/components/TemplatePreview/assets/images/sms_mobile_ios.svg +16 -0
- package/components/TemplatePreview/assets/images/wechat_mobile_android.svg +20 -0
- package/components/TemplatePreview/index.js +180 -20
- package/components/TemplatePreview/messages.js +16 -0
- package/package-lock.json +3096 -0
- package/package.json +1 -1
- package/translations/en.json +5 -0
- package/translations/zh.json +5 -0
- package/v2Components/FormBuilder/index.js +24 -8
- package/v2Components/MobilePushPreviewV2/index.js +40 -32
- package/v2Components/MobilePushPreviewV2/messages.js +0 -8
- package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss +64 -0
- package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js +100 -18
- package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js +12 -0
- package/v2Components/TemplatePreview/_templatePreview.scss +13 -4
- package/v2Components/TemplatePreview/assets/images/home-screen-android.svg +21 -0
- package/v2Components/TemplatePreview/assets/images/home-screen-ios.svg +16 -0
- package/v2Components/TemplatePreview/assets/images/sms_mobile_android.svg +22 -0
- package/v2Components/TemplatePreview/assets/images/wechat-home-screen-android.svg +21 -0
- package/v2Components/TemplatePreview/assets/images/wechat_mobile_android.svg +20 -0
- package/v2Components/TemplatePreview/index.js +147 -20
- package/v2Components/TemplatePreview/messages.js +8 -0
- package/v2Containers/CreativesContainer/SlideBoxContent.js +15 -1
- package/v2Containers/CreativesContainer/SlideBoxHeader.js +1 -1
- package/v2Containers/CreativesContainer/index.js +3 -1
- package/v2Containers/CreativesContainer/messages.js +2 -2
- package/v2Containers/Email/_email.scss +7 -1
- package/v2Containers/Email/index.js +39 -13
- package/v2Containers/Email/messages.js +4 -0
- package/v2Containers/EmailWrapper/index.js +7 -5
- package/v2Containers/MobilePush/Create/index.js +5 -0
- package/v2Containers/MobilePush/Edit/index.js +5 -0
- package/v2Containers/MobilepushWrapper/index.js +4 -1
- package/v2Containers/Sms/Create/index.js +2 -1
- package/v2Containers/Sms/Edit/index.js +2 -0
- package/v2Containers/Templates/index.js +2 -2
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
|
|
2
|
+
<g fill="none" fill-rule="evenodd">
|
|
3
|
+
<path fill="#101211" fill-rule="nonzero" d="M30.877 0h158.246C206.202 0 220 14.3 220 32v408c0 17.7-13.798 32-30.877 32H30.877C13.798 472 0 457.7 0 440V32C0 14.3 13.798 0 30.877 0z"/>
|
|
4
|
+
<path fill="#23CCCC" fill-rule="nonzero" d="M55.965 11v3c0 7.2 5.596 13 12.544 13h82.982c6.948 0 12.544-5.8 12.544-13v-3h24.123c12.254 0 22.193 10.3 22.193 23v405c0 12.7-9.939 23-22.193 23H31.842C19.588 462 9.65 451.7 9.65 439V34c0-12.7 9.939-23 22.193-23h24.123z"/>
|
|
5
|
+
<path fill="#2E2E2E" fill-rule="nonzero" d="M76.566 455h66.868c.695 0 1.303.467 1.303 1 0 .533-.608 1-1.303 1H76.566c-.695 0-1.303-.467-1.303-1 0-.533.608-1 1.303-1z" opacity=".4"/>
|
|
6
|
+
<path fill="#FFF" fill-rule="nonzero" d="M24.095 242h171.81c2.674 0 3.644.278 4.622.801.978.523 1.745 1.29 2.268 2.268.523.978.801 1.948.801 4.623v61.616c0 2.675-.278 3.645-.8 4.623-.524.977-1.291 1.745-2.269 2.268-.978.523-1.948.801-4.622.801H24.095c-2.674 0-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.623v-61.616c0-2.675.278-3.645.8-4.623.524-.977 1.291-1.745 2.269-2.268.978-.523 1.948-.801 4.622-.801zM24.095 134h171.81c2.674 0 3.644.278 4.622.801.978.523 1.745 1.29 2.268 2.268.523.978.801 1.948.801 4.623v68.616c0 2.675-.278 3.645-.8 4.623-.524.977-1.291 1.745-2.269 2.268-.978.523-1.948.801-4.622.801H24.095c-2.674 0-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.623v-68.616c0-2.675.278-3.645.8-4.623.524-.977 1.291-1.745 2.269-2.268.978-.523 1.948-.801 4.622-.801z"/>
|
|
7
|
+
<path fill="#DFE2E7" d="M16.404 280H203.597V281H16.404z"/>
|
|
8
|
+
<text fill="#97A0AF" font-family="Roboto-Regular, Roboto" font-size="10">
|
|
9
|
+
<tspan x="170.386" y="158">NOW</tspan>
|
|
10
|
+
</text>
|
|
11
|
+
<text fill="#97A0AF" font-family="Roboto-Regular, Roboto" font-size="10">
|
|
12
|
+
<tspan x="29" y="158">MESSAGES</tspan>
|
|
13
|
+
</text>
|
|
14
|
+
<path fill="#FFF" fill-rule="nonzero" d="M112.991 43.3v-3.7c0-1.7-1.35-3.1-2.991-3.1-1.64 0-2.991 1.4-2.991 3.1v3.7h5.886c0-.1.096-.1.096 0zm1.544.5c.772.5 1.254 1.4 1.254 2.5v4.4c0 1.7-1.254 3-2.894 3h-5.79c-1.64 0-2.894-1.3-2.894-3v-4.4c0-1.1.482-2 1.35-2.5 0-.1-.096-.2-.096-.3v-3.9c0-2.6 2.026-4.6 4.535-4.6 2.509 0 4.535 2.1 4.535 4.6v4.2zM70.067 120.223c.026.488.137.884.333 1.19.374.57 1.031.855 1.974.855.422 0 .806-.063 1.153-.188.67-.242 1.006-.676 1.006-1.3 0-.47-.141-.803-.424-1.003-.286-.195-.735-.365-1.345-.51l-1.125-.263c-.735-.172-1.256-.361-1.56-.568-.529-.36-.792-.897-.792-1.612 0-.773.258-1.408.774-1.904.517-.496 1.248-.744 2.194-.744.87 0 1.61.218 2.219.653.609.436.913 1.132.913 2.089H74.33c-.057-.461-.177-.814-.362-1.06-.343-.45-.925-.674-1.747-.674-.663 0-1.14.144-1.43.433-.29.29-.436.625-.436 1.008 0 .422.17.73.509.926.222.125.726.281 1.51.469l1.164.275c.562.133.995.314 1.3.545.528.402.792.986.792 1.752 0 .953-.334 1.635-1.003 2.045-.67.41-1.447.615-2.333.615-1.032 0-1.84-.273-2.425-.82-.584-.543-.87-1.28-.86-2.21h1.058zm8.038-3.498v4.166c0 .32.05.582.147.785.181.375.519.562 1.012.562.709 0 1.191-.328 1.448-.984.14-.352.209-.834.209-1.447v-3.082h1.018V123h-.962l.012-.926c-.132.239-.296.44-.492.604-.388.328-.86.492-1.414.492-.863 0-1.45-.299-1.764-.897-.17-.32-.254-.748-.254-1.283v-4.265h1.04zm5.59 0h.968v.89c.286-.367.59-.63.91-.79.32-.16.676-.241 1.068-.241.86 0 1.44.31 1.742.932.166.34.248.826.248 1.459V123h-1.034v-3.955c0-.383-.055-.691-.164-.926-.181-.39-.509-.586-.984-.586-.241 0-.439.026-.594.076-.278.086-.523.258-.735.516-.17.207-.28.42-.33.642-.051.22-.077.536-.077.946V123h-1.017v-6.275zm7.253 3.21c0 .672.138 1.235.413 1.688.275.453.716.68 1.323.68.471 0 .858-.21 1.162-.63.303-.42.455-1.023.455-1.808 0-.793-.156-1.38-.47-1.76-.312-.381-.698-.572-1.158-.572-.513 0-.928.203-1.247.61-.318.406-.478 1.003-.478 1.793zm1.533-3.322c.463 0 .851.102 1.164.305.181.117.387.322.616.615v-3.17h.979V123h-.916v-.873c-.238.387-.519.666-.843.838-.324.172-.695.258-1.114.258-.674 0-1.258-.294-1.752-.882-.494-.588-.74-1.37-.74-2.347 0-.914.224-1.706.675-2.376.45-.67 1.094-1.005 1.93-1.005zm5.211 4.717c0 .305.108.545.322.72.215.177.47.264.764.264.358 0 .704-.085 1.04-.257.565-.286.848-.752.848-1.4v-.85c-.124.082-.285.15-.48.205-.197.054-.389.093-.577.117l-.617.082c-.369.05-.646.13-.83.24-.313.184-.47.477-.47.88zm2.465-2.133c.234-.031.39-.133.47-.304.045-.094.067-.229.067-.405 0-.36-.123-.62-.37-.782-.247-.162-.6-.243-1.06-.243-.532 0-.909.148-1.13.445-.125.164-.206.408-.244.733h-.95c.019-.774.261-1.312.727-1.615.465-.302 1.005-.454 1.62-.454.712 0 1.29.14 1.735.422.441.281.662.719.662 1.313v3.615c0 .11.021.197.065.264.043.066.134.1.274.1.045 0 .096-.004.153-.01.056-.005.116-.014.18-.026v.78c-.158.046-.278.075-.361.087-.083.012-.196.018-.34.018-.35 0-.605-.13-.763-.387-.083-.137-.141-.33-.175-.58-.207.281-.505.525-.893.732-.389.207-.816.31-1.284.31-.561 0-1.02-.176-1.377-.53-.356-.353-.534-.795-.534-1.326 0-.583.175-1.034.526-1.354.35-.32.81-.518 1.38-.592l1.622-.21zm7.145-2.472h1.125c-.143.402-.461 1.32-.955 2.754-.37 1.078-.678 1.957-.927 2.636-.588 1.602-1.003 2.578-1.244 2.93-.241.351-.656.527-1.244.527-.143 0-.253-.006-.33-.017-.078-.012-.173-.034-.286-.065v-.96c.177.05.305.081.384.093.08.012.15.018.21.018.188 0 .326-.033.415-.097.089-.065.163-.144.223-.237.02-.032.087-.192.204-.48.117-.29.202-.505.254-.645l-2.239-6.457h1.154l1.622 5.109 1.634-5.11zm1.537 7.5c.26-.047.443-.237.548-.569.057-.176.085-.345.085-.51 0-.027 0-.051-.003-.073-.001-.021-.006-.046-.014-.073h-.616v-1.277h1.21v1.183c0 .465-.09.873-.271 1.225-.181.351-.494.568-.939.65v-.556zm6.172-1.225c.037-.723.181-1.352.432-1.887.25-.535.74-1.021 1.467-1.459l1.086-.65c.486-.293.827-.543 1.023-.75.31-.324.464-.695.464-1.113 0-.489-.142-.876-.424-1.163-.283-.288-.66-.431-1.131-.431-.697 0-1.18.273-1.447.82-.144.293-.223.7-.238 1.219h-1.035c.012-.73.142-1.326.39-1.787.442-.813 1.22-1.219 2.336-1.219.927 0 1.604.26 2.032.78.428.519.642 1.097.642 1.734 0 .672-.228 1.246-.684 1.722-.264.278-.737.614-1.42 1.008l-.774.446c-.37.21-.66.412-.87.603-.378.34-.615.717-.713 1.13h4.421V123h-5.557zm7.784-2.027c.03.582.246.984.65 1.207.207.117.44.175.7.175.487 0 .902-.21 1.245-.63.343-.42.586-1.272.729-2.557-.226.371-.506.632-.84.782-.333.15-.692.226-1.077.226-.78 0-1.397-.252-1.851-.756-.454-.504-.681-1.152-.681-1.945 0-.762.224-1.432.672-2.01.449-.578 1.11-.867 1.985-.867 1.18 0 1.994.55 2.442 1.652.249.605.373 1.363.373 2.273 0 1.028-.149 1.938-.446 2.73-.494 1.321-1.33 1.981-2.51 1.981-.792 0-1.393-.214-1.804-.644-.411-.43-.616-.969-.616-1.617h1.029zm1.543-1.723c.403 0 .772-.138 1.105-.413.334-.275.5-.757.5-1.444 0-.618-.15-1.078-.449-1.38-.3-.303-.681-.454-1.145-.454-.497 0-.892.172-1.184.518-.292.346-.438.808-.438 1.386 0 .547.128.981.384 1.304.257.322.665.483 1.227.483zm11.87 1.184c0 .726-.103 1.29-.31 1.693-.385.734-1.116 1.102-2.194 1.102-.622 0-1.153-.175-1.594-.525-.441-.35-.662-.972-.662-1.866v-.615h1.057v.615c0 .469.101.821.303 1.058.202.236.515.354.941.354.6 0 .992-.213 1.176-.639.113-.261.17-.756.17-1.482v-5.736h1.114v6.04zm2.764-3.71v4.167c0 .32.05.582.147.785.181.375.518.562 1.012.562.709 0 1.191-.328 1.448-.984.139-.352.209-.834.209-1.447v-3.082h1.017V123h-.96l.01-.926c-.131.239-.295.44-.491.604-.389.328-.86.492-1.414.492-.863 0-1.45-.299-1.764-.897-.17-.32-.254-.748-.254-1.283v-4.265h1.04zm5.619-2.331h1.018V123h-1.018v-8.607zm6.495 2.332h1.125c-.143.402-.462 1.32-.956 2.754-.369 1.078-.678 1.957-.927 2.636-.588 1.602-1.002 2.578-1.244 2.93-.24.351-.655.527-1.243.527-.144 0-.254-.006-.331-.017-.077-.012-.173-.034-.286-.065v-.96c.177.05.306.081.385.093.079.012.149.018.209.018.188 0 .327-.033.415-.097.09-.065.164-.144.224-.237.019-.032.087-.192.203-.48.117-.29.202-.505.255-.645l-2.24-6.457h1.154l1.623 5.109 1.634-5.11zM78.271 92.566c.11 2.135.905 3.61 2.384 4.426.76.43 1.617.645 2.57.645 1.784 0 3.304-.77 4.562-2.31 1.257-1.54 2.149-4.666 2.674-9.378-.83 1.36-1.856 2.317-3.079 2.868-1.223.552-2.54.828-3.949.828-2.86 0-5.124-.924-6.79-2.772-1.664-1.848-2.497-4.225-2.497-7.133 0-2.793.822-5.25 2.467-7.369 1.644-2.12 4.07-3.18 7.276-3.18 4.326 0 7.311 2.02 8.956 6.059.912 2.22 1.368 4.999 1.368 8.336 0 3.767-.546 7.104-1.638 10.012-1.81 4.84-4.878 7.261-9.204 7.261-2.902 0-5.107-.787-6.613-2.363-1.507-1.575-2.26-3.552-2.26-5.93h3.773zm5.66-6.316c1.478 0 2.83-.505 4.052-1.515 1.224-1.01 1.835-2.775 1.835-5.296 0-2.263-.55-3.95-1.648-5.06-1.099-1.11-2.498-1.664-4.198-1.664-1.824 0-3.272.634-4.343 1.901-1.071 1.268-1.607 2.961-1.607 5.081 0 2.005.47 3.599 1.41 4.78.94 1.182 2.44 1.773 4.499 1.773zm16.975-8.959h4.333v4.684h-4.333V77.29zm0 18.025h4.333V100h-4.333v-4.684zm21.08-6.209V75.164l-9.515 13.943h9.515zm.062 10.893v-7.52H109.03V88.7l13.6-19.552h3.15v19.96h4.375v3.372h-4.374V100h-3.732zm13.534-21.785V75.25c2.695-.272 4.575-.727 5.639-1.364 1.064-.638 1.859-2.145 2.384-4.523h2.944V100h-3.98V78.215h-6.987z"/>
|
|
15
|
+
</g>
|
|
16
|
+
</svg>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
|
|
2
|
+
<g fill="none" fill-rule="evenodd">
|
|
3
|
+
<rect width="220" height="472" fill="#101211" rx="26"/>
|
|
4
|
+
<rect width="202" height="404" x="9" y="36" fill="#F4F5F7" rx="9"/>
|
|
5
|
+
<rect width="182" height="136" x="19" y="92" fill="#F4F5F7" rx="17.5"/>
|
|
6
|
+
<path fill="#CF0E8F" d="M18 36h184c4.97 0 9 4.03 9 9v6H9v-6c0-4.97 4.03-9 9-9z"/>
|
|
7
|
+
<path fill="#FFF" d="M9 404h202v28.5c0 4.142-3.358 7.5-7.5 7.5h-187c-4.142 0-7.5-3.358-7.5-7.5V404z"/>
|
|
8
|
+
<path fill="#E51FA3" d="M9 51H211V82H9z" transform="matrix(1 0 0 -1 0 133)"/>
|
|
9
|
+
<rect width="52" height="5" x="84" y="14" fill="#2E2E2E" rx="2.5"/>
|
|
10
|
+
<rect width="52" height="5" x="84" y="455" fill="#2E2E2E" rx="2.5"/>
|
|
11
|
+
<circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
|
|
12
|
+
<circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
|
|
13
|
+
<text fill="#FFF" font-family="Roboto-Regular, Roboto" font-size="12" letter-spacing=".175">
|
|
14
|
+
<tspan x="49.5" y="71">Sender ID</tspan>
|
|
15
|
+
</text>
|
|
16
|
+
<circle cx="199" cy="63" r="1" fill="#FFF"/>
|
|
17
|
+
<circle cx="199" cy="70" r="1" fill="#FFF"/>
|
|
18
|
+
<circle cx="199" cy="66.5" r="1" fill="#FFF"/>
|
|
19
|
+
<path fill="#FFF" d="M28 66c0 .279-.226.505-.505.505h-5.556l2.42 2.42c.198.197.198.518 0 .716-.198.198-.52.198-.718 0l-2.934-2.934c-.39-.39-.39-1.024 0-1.414l2.934-2.934c.198-.198.52-.198.718 0 .198.198.198.519 0 .717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"/>
|
|
20
|
+
<path fill="#B3BAC5" d="M189.006 427.286L201 422.143 189.006 417 189 421 197.571 422.143 189 423.286z"/>
|
|
21
|
+
</g>
|
|
22
|
+
</svg>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="221" height="473" viewBox="0 0 221 473">
|
|
2
|
+
<g fill="none" fill-rule="evenodd">
|
|
3
|
+
<rect width="220" height="473" fill="#101211" rx="26"/>
|
|
4
|
+
<rect width="52" height="5.011" x="84" y="14.03" fill="#2E2E2E" rx="2.5"/>
|
|
5
|
+
<rect width="52" height="5.011" x="84" y="455.964" fill="#2E2E2E" rx="2.5"/>
|
|
6
|
+
<ellipse cx="45.5" cy="19.541" fill="#2E2E2E" rx="5.5" ry="5.512"/>
|
|
7
|
+
<ellipse cx="65.5" cy="19.541" fill="#2E2E2E" rx="3.5" ry="3.507"/>
|
|
8
|
+
<rect width="202" height="404.856" x="9" y="36.076" fill="#E51FA3" rx="9"/>
|
|
9
|
+
<path fill="#FFF" d="M20.692 152.322h178.616c2.675 0 3.645.279 4.623.801.977.523 1.745 1.29 2.268 2.268.523.978.801 1.948.801 4.623v78.816c0 2.674-.278 3.644-.801 4.622-.523.978-1.29 1.745-2.268 2.268-.978.523-1.948.801-4.623.801H20.692c-2.675 0-3.645-.278-4.623-.801-.977-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622v-78.816c0-2.675.278-3.645.801-4.623.523-.977 1.29-1.745 2.268-2.268.978-.522 1.948-.801 4.623-.801z"/>
|
|
10
|
+
<text fill="#5E5E5E" font-family="Roboto-Regular, Roboto" font-size="10">
|
|
11
|
+
<tspan x="25" y="169.351">Wechat</tspan>
|
|
12
|
+
</text>
|
|
13
|
+
<text fill="#5E5E5E" font-family="Roboto-Regular, Roboto" font-size="10">
|
|
14
|
+
<tspan x="73.146" y="169.351">now</tspan>
|
|
15
|
+
</text>
|
|
16
|
+
<circle cx="66" cy="167.354" r="1" fill="#5E5E5E" fill-rule="nonzero"/>
|
|
17
|
+
<path fill="#5E5E5E" d="M104.725 163.393L101.424 166.694 98.123 163.393 97.109 164.409 101.424 168.734 105.739 164.409z"/>
|
|
18
|
+
<path fill="#FFF" fill-opacity=".6" d="M113.75 420.222h-.625v-1.241c0-1.712-1.4-3.102-3.125-3.102s-3.125 1.39-3.125 3.102v1.24h-.625c-.688 0-1.25.56-1.25 1.241v6.204c0 .682.563 1.24 1.25 1.24h7.5c.688 0 1.25-.558 1.25-1.24v-6.204c0-.682-.563-1.24-1.25-1.24zM110 425.9c-.55 0-1-.45-1-1.002 0-.55.45-1.002 1-1.002s1 .451 1 1.002c0 .551-.45 1.002-1 1.002zm2-6.012h-4v-1.18c0-1.007.897-1.827 2-1.827s2 .82 2 1.828v1.179z"/>
|
|
19
|
+
<path fill="#FFF" fill-rule="nonzero" d="M86.325 112.121l6.192-8.694-.072-.072c-.84.577-1.908.865-3.204.865-1.248 0-2.472-.348-3.672-1.046-1.2-.697-2.172-1.653-2.916-2.868-.744-1.215-1.116-2.567-1.116-4.059 0-1.443.378-2.795 1.134-4.058.756-1.263 1.776-2.279 3.06-3.049s2.682-1.154 4.194-1.154c1.632 0 3.09.397 4.374 1.19 1.284.794 2.28 1.822 2.988 3.085.708 1.263 1.062 2.592 1.062 3.986 0 1.323-.27 2.592-.81 3.807-.54 1.214-1.314 2.567-2.322 4.058l-6.444 9.705-2.448-1.696zm3.6-10.642c.96 0 1.854-.235 2.682-.704.828-.469 1.482-1.106 1.962-1.912.48-.806.72-1.69.72-2.652 0-.986-.24-1.882-.72-2.687-.48-.806-1.134-1.443-1.962-1.912-.828-.47-1.722-.704-2.682-.704s-1.848.235-2.664.704c-.816.469-1.464 1.106-1.944 1.912-.48.805-.72 1.701-.72 2.687 0 .962.24 1.846.72 2.652s1.128 1.443 1.944 1.912c.816.469 1.704.704 2.664.704zm13.806-2.237c-.648 0-1.194-.223-1.638-.668-.444-.445-.666-.992-.666-1.641 0-.65.222-1.197.666-1.642.444-.444.99-.667 1.638-.667.624 0 1.158.223 1.602.667.444.445.666.993.666 1.642 0 .65-.222 1.196-.666 1.641-.444.445-.978.668-1.602.668zm0 14.214c-.648 0-1.194-.223-1.638-.668-.444-.444-.666-.992-.666-1.641 0-.625.222-1.16.666-1.605.444-.445.99-.668 1.638-.668.624 0 1.158.223 1.602.668.444.445.666.98.666 1.605 0 .65-.222 1.197-.666 1.641-.444.445-.978.668-1.602.668zm17.191-5.52h-11.808v-2.309l11.52-17.064h3.312v16.487h3.168v2.886h-3.168v5.303h-3.024v-5.303zm0-2.886V93.037h-.144l-8.172 12.013h8.316zm14.527-12.194l-4.32 3.103-1.584-2.345 7.02-5.05h1.944v24.675h-3.06V92.856zM90.177 134.444c-.56 0-1.074-.17-1.54-.51-.467-.342-.787-.82-.96-1.434l.81-.33c.113.427.323.778.63 1.052.306.274.666.41 1.08.41.413 0 .763-.111 1.05-.335.286-.224.43-.53.43-.917 0-.334-.122-.61-.365-.827-.244-.217-.642-.42-1.195-.606l-.45-.16c-.507-.18-.92-.418-1.24-.712-.32-.294-.48-.701-.48-1.223 0-.34.093-.656.28-.947.186-.29.446-.522.78-.696.333-.174.706-.26 1.12-.26.413 0 .773.076 1.08.23.306.154.551.34.735.561.183.22.311.438.385.651l-.8.341c-.067-.247-.219-.47-.455-.671-.237-.2-.549-.3-.935-.3-.367 0-.68.103-.94.31-.26.207-.39.467-.39.781 0 .281.11.51.33.687.22.177.553.342 1 .496l.47.16c.606.22 1.08.496 1.42.827.34.33.51.78.51 1.348 0 .46-.119.848-.355 1.162-.237.314-.535.545-.895.692-.36.147-.73.22-1.11.22zm4.995 0c-.614 0-1.082-.18-1.405-.54-.324-.362-.485-.866-.485-1.514v-3.217h.85v3.087c0 .487.11.845.33 1.072.22.227.516.34.89.34.286 0 .541-.076.765-.23.223-.154.396-.354.52-.601.123-.247.185-.508.185-.782v-2.886h.85v5.11h-.81v-.74h-.04c-.14.253-.364.467-.67.64-.307.174-.634.261-.98.261zm3.615-5.27h.81v.75h.04c.14-.253.363-.469.67-.646.307-.177.633-.265.98-.265.613 0 1.082.178 1.405.536.323.357.485.843.485 1.458v3.277h-.85v-3.147c0-.474-.113-.818-.34-1.032-.227-.214-.537-.32-.93-.32-.273 0-.518.076-.735.23-.217.154-.385.356-.505.606s-.18.513-.18.787v2.876h-.85v-5.11zm8.88 5.27c-.526 0-.986-.145-1.38-.436-.393-.29-.67-.7-.83-1.227l.8-.331c.24.788.71 1.183 1.41 1.183.394 0 .709-.137.945-.411.237-.274.355-.635.355-1.083v-5.03h.85v4.96c0 .501-.091.93-.275 1.288-.183.357-.436.628-.76.812-.323.183-.695.275-1.115.275zm5.065 0c-.613 0-1.081-.18-1.405-.54-.323-.362-.485-.866-.485-1.514v-3.217h.85v3.087c0 .487.11.845.33 1.072.22.227.517.34.89.34.287 0 .542-.076.765-.23.224-.154.397-.354.52-.601.124-.247.185-.508.185-.782v-2.886h.85v5.11h-.81v-.74h-.04c-.14.253-.363.467-.67.64-.306.174-.633.261-.98.261zm3.616-7.335h.85v7.175h-.85v-7.175zm2.525 7.235c-.18 0-.332-.062-.455-.185-.124-.124-.185-.276-.185-.456 0-.174.061-.323.185-.446.123-.124.275-.186.455-.186.173 0 .321.062.445.186.123.123.185.272.185.446 0 .18-.062.332-.185.456-.124.123-.272.185-.445.185zm3.67-.912c.207-.207.617-.623 1.23-1.248.613-.624 1.04-1.067 1.28-1.327.34-.368.57-.655.69-.862.12-.207.18-.458.18-.752 0-.2-.052-.389-.155-.566-.103-.177-.253-.32-.45-.43-.197-.111-.432-.166-.705-.166-.36 0-.648.105-.865.315-.217.21-.358.44-.425.687l-.78-.31c.067-.215.187-.437.36-.667.173-.23.407-.428.7-.591.293-.164.64-.246 1.04-.246.42 0 .792.09 1.115.27.323.181.575.422.755.722.18.3.27.625.27.972 0 .702-.367 1.427-1.1 2.175l-2.05 2.064h3.23v.812h-4.32v-.852zm6.435.541l1.72-2.415-.02-.02c-.233.16-.53.24-.89.24-.346 0-.686-.096-1.02-.29-.333-.194-.603-.46-.81-.797-.206-.337-.31-.713-.31-1.127 0-.4.105-.777.315-1.127.21-.351.494-.633.85-.847.357-.214.745-.32 1.165-.32.454 0 .859.11 1.215.33.357.22.634.506.83.857.197.35.295.72.295 1.107 0 .367-.075.72-.225 1.057-.15.338-.365.713-.645 1.128l-1.79 2.695-.68-.47zm1-2.956c.267 0 .515-.065.745-.195.23-.13.412-.308.545-.532.134-.223.2-.469.2-.736 0-.274-.066-.523-.2-.747-.133-.223-.315-.4-.545-.53-.23-.131-.478-.196-.745-.196-.266 0-.513.065-.74.195-.226.13-.406.308-.54.531-.133.224-.2.473-.2.747 0 .267.067.513.2.736.134.224.314.401.54.532.227.13.474.195.74.195z"/>
|
|
20
|
+
</g>
|
|
21
|
+
</svg>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
|
|
2
|
+
<g fill="none" fill-rule="evenodd">
|
|
3
|
+
<rect width="220" height="472" fill="#101211" rx="26"/>
|
|
4
|
+
<rect width="202" height="404" x="9" y="36" fill="#F4F5F7" rx="9"/>
|
|
5
|
+
<rect width="182" height="136" x="19" y="112" fill="#F4F5F7" rx="17.5"/>
|
|
6
|
+
<path fill="#F4F5F7" d="M18 36h184c4.97 0 9 4.03 9 9v6H9v-6c0-4.97 4.03-9 9-9z"/>
|
|
7
|
+
<path fill="#F4F5F7" d="M9 51H211V82H9z" transform="matrix(1 0 0 -1 0 133)"/>
|
|
8
|
+
<rect width="52" height="5" x="84" y="14" fill="#2E2E2E" rx="2.5"/>
|
|
9
|
+
<rect width="52" height="5" x="84" y="455" fill="#2E2E2E" rx="2.5"/>
|
|
10
|
+
<circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
|
|
11
|
+
<circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
|
|
12
|
+
<text fill="#000" font-family="Roboto-Regular, Roboto" font-size="12" letter-spacing=".175">
|
|
13
|
+
<tspan x="49.5" y="71">Muji India</tspan>
|
|
14
|
+
</text>
|
|
15
|
+
<circle cx="199" cy="63" r="1" fill="#000"/>
|
|
16
|
+
<circle cx="199" cy="70" r="1" fill="#000"/>
|
|
17
|
+
<circle cx="199" cy="66.5" r="1" fill="#000"/>
|
|
18
|
+
<path fill="#000" d="M28 66c0 .279-.226.505-.505.505h-5.556l2.42 2.42c.198.197.198.518 0 .716-.198.198-.52.198-.718 0l-2.934-2.934c-.39-.39-.39-1.024 0-1.414l2.934-2.934c.198-.198.52-.198.718 0 .198.198.198.519 0 .717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"/>
|
|
19
|
+
</g>
|
|
20
|
+
</svg>
|
|
@@ -10,17 +10,114 @@ import React from 'react';
|
|
|
10
10
|
import _ from 'lodash';
|
|
11
11
|
import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
|
|
12
12
|
// import styled from 'styled-components';
|
|
13
|
-
import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
|
|
13
|
+
import {CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage} from '@capillarytech/cap-ui-library';
|
|
14
14
|
import './_templatePreview.scss';
|
|
15
15
|
import {updateCharCount} from '../../utils/smsCharCountV2';
|
|
16
16
|
import messages from './messages';
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
const
|
|
17
|
+
import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
|
|
18
|
+
const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
|
|
19
|
+
const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
|
|
20
20
|
const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
|
|
21
21
|
const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
|
|
22
22
|
|
|
23
23
|
class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
|
24
|
+
onPreviewContentClicked = (channel) => {
|
|
25
|
+
const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
|
|
26
|
+
((this.props.device === 'iphone' || this.props.device === 'ios') && this.props.content);
|
|
27
|
+
const ANDROIDContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.ANDROID) ||
|
|
28
|
+
(this.props.device === 'android' && this.props.content);
|
|
29
|
+
const mobilePushPreviewContent = [];
|
|
30
|
+
if (this.props.channel === 'MOBILEPUSH') {
|
|
31
|
+
const previewObj = {
|
|
32
|
+
channel: this.props.channel,
|
|
33
|
+
accountId: this.props.templateDataRaw && this.props.templateDataRaw.definition.accountId,
|
|
34
|
+
messageSubject: this.props.templateDataRaw && this.props.templateDataRaw.name,
|
|
35
|
+
id: 'message_content_id_1',
|
|
36
|
+
};
|
|
37
|
+
if (IOSContent) {
|
|
38
|
+
previewObj.iosContent = {
|
|
39
|
+
title: IOSContent.title || IOSContent.header,
|
|
40
|
+
message: IOSContent.message || IOSContent.bodyText,
|
|
41
|
+
deviceType: "IOS",
|
|
42
|
+
expandableDetails: IOSContent.expandableDetails ||
|
|
43
|
+
{
|
|
44
|
+
style: "BIG_PICTURE",
|
|
45
|
+
image: this.props.content.bodyImage,
|
|
46
|
+
message: this.props.content.bodyText,
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
if (ANDROIDContent) {
|
|
51
|
+
previewObj.androidContent = {
|
|
52
|
+
title: ANDROIDContent.title || ANDROIDContent.header,
|
|
53
|
+
message: ANDROIDContent.message || ANDROIDContent.bodyText,
|
|
54
|
+
deviceType: "ANDROID",
|
|
55
|
+
expandableDetails: ANDROIDContent.expandableDetails ||
|
|
56
|
+
{
|
|
57
|
+
style: "BIG_PICTURE",
|
|
58
|
+
image: this.props.content.bodyImage,
|
|
59
|
+
message: this.props.content.bodyText,
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
mobilePushPreviewContent.push(previewObj);
|
|
64
|
+
}
|
|
65
|
+
const previewContent = this.props.channel === 'MOBILEPUSH' ? mobilePushPreviewContent : this.props.content;
|
|
66
|
+
const params = {
|
|
67
|
+
content: previewContent,
|
|
68
|
+
channel,
|
|
69
|
+
};
|
|
70
|
+
this.props.onPreviewContentClicked(params);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
onTestContentClicked = (channel) => {
|
|
74
|
+
let mobilePushPreviewContent = {};
|
|
75
|
+
const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
|
|
76
|
+
((this.props.device === 'iphone' || this.props.device === 'ios') && this.props.content);
|
|
77
|
+
const ANDROIDContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.ANDROID) ||
|
|
78
|
+
(this.props.device === 'android' && this.props.content);
|
|
79
|
+
if (this.props.channel === 'MOBILEPUSH') {
|
|
80
|
+
mobilePushPreviewContent = {
|
|
81
|
+
channel: this.props.channel,
|
|
82
|
+
accountId: this.props.templateDataRaw && this.props.templateDataRaw.definition.accountId,
|
|
83
|
+
messageSubject: this.props.templateDataRaw && this.props.templateDataRaw.name,
|
|
84
|
+
id: 'message_content_id_1',
|
|
85
|
+
};
|
|
86
|
+
if (ANDROIDContent) {
|
|
87
|
+
mobilePushPreviewContent.androidContent = {
|
|
88
|
+
title: ANDROIDContent.title || ANDROIDContent.header,
|
|
89
|
+
message: ANDROIDContent.message || ANDROIDContent.bodyText,
|
|
90
|
+
deviceType: "ANDROID",
|
|
91
|
+
expandableDetails: ANDROIDContent.expandableDetails ||
|
|
92
|
+
{
|
|
93
|
+
style: "BIG_PICTURE",
|
|
94
|
+
image: this.props.content.bodyImage,
|
|
95
|
+
message: this.props.content.bodyText,
|
|
96
|
+
},
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
if (IOSContent) {
|
|
100
|
+
mobilePushPreviewContent.iosContent = {
|
|
101
|
+
title: IOSContent.title || IOSContent.header,
|
|
102
|
+
message: IOSContent.message || IOSContent.bodyText,
|
|
103
|
+
deviceType: "IOS",
|
|
104
|
+
expandableDetails: IOSContent.expandableDetails ||
|
|
105
|
+
{
|
|
106
|
+
style: "BIG_PICTURE",
|
|
107
|
+
image: this.props.content.bodyImage,
|
|
108
|
+
message: this.props.content.bodyText,
|
|
109
|
+
},
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
const previewContent = this.props.channel === 'MOBILEPUSH' ? mobilePushPreviewContent : this.props.content;
|
|
114
|
+
const params = {
|
|
115
|
+
content: previewContent,
|
|
116
|
+
channel,
|
|
117
|
+
};
|
|
118
|
+
this.props.onTestContentClicked(params);
|
|
119
|
+
};
|
|
120
|
+
|
|
24
121
|
render() {
|
|
25
122
|
let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
|
|
26
123
|
const channel = this.props.channel;
|
|
@@ -64,16 +161,43 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
64
161
|
</CapHeading>}
|
|
65
162
|
</CapColumn>}
|
|
66
163
|
<CapColumn span={this.props.showCount ? 8 : 24}>
|
|
164
|
+
{this.props.showTestAndPreviewIcon && this.props.channel !== WECHAT && (
|
|
165
|
+
<div className="test-and-preview-container">
|
|
166
|
+
<CapButton
|
|
167
|
+
style={{
|
|
168
|
+
color: '#2466ea',
|
|
169
|
+
display: 'inline-block',
|
|
170
|
+
padding: '0 6px',
|
|
171
|
+
marginTop: '12px',
|
|
172
|
+
}}
|
|
173
|
+
type="flat"
|
|
174
|
+
onClick={() => this.onPreviewContentClicked(this.props.channel)}
|
|
175
|
+
>
|
|
176
|
+
<CapIcon type="eye"/><FormattedMessage {...messages.preview} />
|
|
177
|
+
</CapButton>
|
|
178
|
+
<CapButton
|
|
179
|
+
style={{
|
|
180
|
+
color: '#2466ea',
|
|
181
|
+
display: 'inline-block',
|
|
182
|
+
padding: '0 6px',
|
|
183
|
+
marginTop: '12px',
|
|
184
|
+
}}
|
|
185
|
+
type="flat"
|
|
186
|
+
onClick={() => this.onTestContentClicked(this.props.channel)}
|
|
187
|
+
>
|
|
188
|
+
<CapIcon type="lab"/><FormattedMessage {...messages.testMessage} />
|
|
189
|
+
</CapButton>
|
|
190
|
+
</div>
|
|
191
|
+
)}
|
|
67
192
|
<div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
|
|
68
193
|
{ channel && channel.toLowerCase() === 'sms' &&
|
|
69
194
|
<div>
|
|
70
|
-
<div className="shell align-center" id="sms-preview">
|
|
71
|
-
<
|
|
195
|
+
<div className="shell-v2 align-center" id="sms-preview">
|
|
196
|
+
<CapImage className="preview-image sms" src={smsMobileAndroid} alt="Preview is being generated"/>
|
|
72
197
|
<div className="msgContainer sms">
|
|
73
|
-
<img className="sms-icon" src={smsIcon} alt="Sms icon" />
|
|
74
198
|
<div className={"message-pop sms"}>
|
|
75
199
|
{content && content.length && content.map((msg, index) =>
|
|
76
|
-
<CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#
|
|
200
|
+
<CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
|
|
77
201
|
{msg}
|
|
78
202
|
</CapColumn>)
|
|
79
203
|
}
|
|
@@ -96,10 +220,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
96
220
|
</div>
|
|
97
221
|
}
|
|
98
222
|
{channel && channel.toLowerCase() === 'wechat' ?
|
|
99
|
-
( <div className="shell align-center" id="sms-preview">
|
|
100
|
-
<
|
|
101
|
-
<div className="msgContainer">
|
|
102
|
-
{this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />}
|
|
223
|
+
( <div className="shell-v2 align-center" id="sms-preview">
|
|
224
|
+
<CapImage className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBodyNew : smsMobileAndroid} alt="Preview is being generated"/>
|
|
225
|
+
<div className="msgContainer wechat">
|
|
103
226
|
<div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
|
|
104
227
|
</div>
|
|
105
228
|
</div>
|
|
@@ -107,10 +230,10 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
107
230
|
) : ''
|
|
108
231
|
}
|
|
109
232
|
{ channel && (channel.toLowerCase() === 'mobilepush') &&
|
|
110
|
-
(<div className="shell align-center" id="mobilepush-preview">
|
|
111
|
-
<
|
|
233
|
+
(<div className="shell-v2 align-center" id="mobilepush-preview">
|
|
234
|
+
<CapImage className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
|
|
112
235
|
{(!!content.header || !!content.bodyText || !!content.bodyImage) &&
|
|
113
|
-
<div className={`${this.props.device}-push-message-Container`}>
|
|
236
|
+
<div className={`${this.props.device === 'ios' ? 'iphone' : this.props.device}-push-message-Container`}>
|
|
114
237
|
{this.props.device === "android" ?
|
|
115
238
|
<div className="message-pop align-left">
|
|
116
239
|
<div className="app-name">
|
|
@@ -123,7 +246,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
123
246
|
{content.bodyText}
|
|
124
247
|
</div>
|
|
125
248
|
{content.bodyImage && <div className="body-image">
|
|
126
|
-
<
|
|
249
|
+
<CapImage src={content.bodyImage} alt="" />
|
|
127
250
|
</div>}
|
|
128
251
|
{content.actions.filter((action) => action.label).length ?
|
|
129
252
|
<div className="actions">
|
|
@@ -138,7 +261,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
138
261
|
<span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">{this.props.intl.formatMessage(messages.close)}</i>
|
|
139
262
|
</div>
|
|
140
263
|
{content.bodyImage && <div className="body-image">
|
|
141
|
-
<
|
|
264
|
+
<CapImage src={content.bodyImage} alt=""/>
|
|
142
265
|
</div>}
|
|
143
266
|
<div className="title">
|
|
144
267
|
{content.header}
|
|
@@ -156,8 +279,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
156
279
|
}
|
|
157
280
|
{
|
|
158
281
|
channel && channel.toLowerCase() === 'line' ? (
|
|
159
|
-
<div className="shell align-center" id="sms-preview">
|
|
160
|
-
<
|
|
282
|
+
<div className="shell-v2 align-center" id="sms-preview">
|
|
283
|
+
<CapImage className="preview-image" src={wechatBodyNew} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
|
|
161
284
|
<div className="msgContainer">
|
|
162
285
|
<div className="sms-icon" style={{ left: 10, borderRadius: '50%', width: '20px', height: '20px', background: '#2E89DF' }}></div>
|
|
163
286
|
<div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
|
|
@@ -167,7 +290,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
167
290
|
return content[item];
|
|
168
291
|
}
|
|
169
292
|
if (item === 'bodyImage' && content[item]) {
|
|
170
|
-
return <
|
|
293
|
+
return <CapImage src={content[item]} alt="brand-name" style={{maxWidth: '100%'}}/>;
|
|
171
294
|
}
|
|
172
295
|
return null;
|
|
173
296
|
})
|
|
@@ -198,6 +321,10 @@ TemplatePreview.propTypes = {
|
|
|
198
321
|
unicodeEnabled: PropTypes.bool,
|
|
199
322
|
showCount: PropTypes.bool,
|
|
200
323
|
intl: intlShape.isRequired,
|
|
324
|
+
templateDataRaw: PropTypes.object,
|
|
325
|
+
onPreviewContentClicked: PropTypes.func,
|
|
326
|
+
onTestContentClicked: PropTypes.func,
|
|
327
|
+
showTestAndPreviewIcon: PropTypes.bool,
|
|
201
328
|
};
|
|
202
329
|
|
|
203
330
|
export default (injectIntl(TemplatePreview));
|
|
@@ -50,4 +50,12 @@ export default defineMessages({
|
|
|
50
50
|
id: 'creatives.componentsV2.TemplatePreview.smsIcon',
|
|
51
51
|
defaultMessage: 'Sms Icon',
|
|
52
52
|
},
|
|
53
|
+
preview: {
|
|
54
|
+
id: 'creatives.componentsV2.TemplatePreview.preview',
|
|
55
|
+
defaultMessage: 'Preview',
|
|
56
|
+
},
|
|
57
|
+
testMessage: {
|
|
58
|
+
id: 'creatives.componentsV2.TemplatePreview.testMessage',
|
|
59
|
+
defaultMessage: 'Test Message',
|
|
60
|
+
},
|
|
53
61
|
});
|
|
@@ -72,6 +72,8 @@ function SlideBoxContent(props) {
|
|
|
72
72
|
selectedWeChatAccount,
|
|
73
73
|
weChatMaptemplateStep,
|
|
74
74
|
onWeChatMaptemplateStepChange,
|
|
75
|
+
onTestContentClicked,
|
|
76
|
+
onPreviewContentClicked,
|
|
75
77
|
onFacebookSubmit,
|
|
76
78
|
saveMessage,
|
|
77
79
|
selectedAccount,
|
|
@@ -218,6 +220,8 @@ function SlideBoxContent(props) {
|
|
|
218
220
|
templateData={templateData}
|
|
219
221
|
forwardedTags={forwardedTags}
|
|
220
222
|
selectedOfferDetails={selectedOfferDetails}
|
|
223
|
+
onPreviewContentClicked={onPreviewContentClicked}
|
|
224
|
+
onTestContentClicked={onTestContentClicked}
|
|
221
225
|
/>
|
|
222
226
|
)}
|
|
223
227
|
{
|
|
@@ -251,6 +255,8 @@ function SlideBoxContent(props) {
|
|
|
251
255
|
isFullMode={isFullMode}
|
|
252
256
|
forwardedTags={forwardedTags}
|
|
253
257
|
selectedOfferDetails={selectedOfferDetails}
|
|
258
|
+
onPreviewContentClicked={onPreviewContentClicked}
|
|
259
|
+
onTestContentClicked={onTestContentClicked}
|
|
254
260
|
/>
|
|
255
261
|
)}
|
|
256
262
|
{isEmailCreate && (
|
|
@@ -273,6 +279,8 @@ function SlideBoxContent(props) {
|
|
|
273
279
|
onValidationFail={onValidationFail}
|
|
274
280
|
forwardedTags={forwardedTags}
|
|
275
281
|
selectedOfferDetails={selectedOfferDetails}
|
|
282
|
+
onPreviewContentClicked={onPreviewContentClicked}
|
|
283
|
+
onTestContentClicked={onTestContentClicked}
|
|
276
284
|
/>
|
|
277
285
|
)}
|
|
278
286
|
{(isEditEmailWithId || isEmailEditWithContent) && (
|
|
@@ -296,6 +304,8 @@ function SlideBoxContent(props) {
|
|
|
296
304
|
onValidationFail={onValidationFail}
|
|
297
305
|
forwardedTags={forwardedTags}
|
|
298
306
|
selectedOfferDetails={selectedOfferDetails}
|
|
307
|
+
onPreviewContentClicked={onPreviewContentClicked}
|
|
308
|
+
onTestContentClicked={onTestContentClicked}
|
|
299
309
|
/>
|
|
300
310
|
)}
|
|
301
311
|
{isEditMPush &&
|
|
@@ -316,6 +326,8 @@ function SlideBoxContent(props) {
|
|
|
316
326
|
onValidationFail={onValidationFail}
|
|
317
327
|
forwardedTags={forwardedTags}
|
|
318
328
|
selectedOfferDetails={selectedOfferDetails}
|
|
329
|
+
onPreviewContentClicked={onPreviewContentClicked}
|
|
330
|
+
onTestContentClicked={onTestContentClicked}
|
|
319
331
|
/>
|
|
320
332
|
}
|
|
321
333
|
{isCreateMPush &&
|
|
@@ -340,7 +352,9 @@ function SlideBoxContent(props) {
|
|
|
340
352
|
query={query}
|
|
341
353
|
forwardedTags={forwardedTags}
|
|
342
354
|
onValidationFail={onValidationFail}
|
|
343
|
-
selectedOfferDetails={selectedOfferDetails}
|
|
355
|
+
selectedOfferDetails={selectedOfferDetails}
|
|
356
|
+
onPreviewContentClicked={onPreviewContentClicked}
|
|
357
|
+
onTestContentClicked={onTestContentClicked}/>
|
|
344
358
|
}
|
|
345
359
|
{
|
|
346
360
|
isEditFacebook && (
|
|
@@ -48,7 +48,7 @@ function SlideBoxHeader(props) {
|
|
|
48
48
|
)}
|
|
49
49
|
{!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
|
|
50
50
|
<CapHeader
|
|
51
|
-
title={<FormattedMessage {...messages.editMessageContent} />}
|
|
51
|
+
title={<FormattedMessage {...messages.editMessageContent} values={{channel: getChannelLabel(channel)}}/>}
|
|
52
52
|
prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
|
|
53
53
|
<PrefixWrapper>
|
|
54
54
|
<CapIcons.backIcon onClick={onShowTemplates} />
|
|
@@ -517,7 +517,7 @@ class Creatives extends React.Component {
|
|
|
517
517
|
}
|
|
518
518
|
render() {
|
|
519
519
|
const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
|
|
520
|
-
const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, getCreativesData} = this.props;
|
|
520
|
+
const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData} = this.props;
|
|
521
521
|
const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
|
|
522
522
|
/* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
|
|
523
523
|
return (
|
|
@@ -583,6 +583,8 @@ class Creatives extends React.Component {
|
|
|
583
583
|
weChatMaptemplateStep={weChatMaptemplateStep}
|
|
584
584
|
selectedWeChatAccount={selectedWeChatAccount}
|
|
585
585
|
onWeChatMaptemplateStepChange={this.onWeChatMaptemplateStepChange}
|
|
586
|
+
onPreviewContentClicked={onPreviewContentClicked}
|
|
587
|
+
onTestContentClicked={onTestContentClicked}
|
|
586
588
|
onFacebookSubmit={getCreativesData}
|
|
587
589
|
saveMessage={this.saveMessage}
|
|
588
590
|
selectedAccount={this.props.selectedAccount}
|
|
@@ -256,11 +256,11 @@ export default defineMessages({
|
|
|
256
256
|
},
|
|
257
257
|
"editMessageContent": {
|
|
258
258
|
id: `${scope}.editMessageContent`,
|
|
259
|
-
defaultMessage: `Edit
|
|
259
|
+
defaultMessage: `Edit {channel}`,
|
|
260
260
|
},
|
|
261
261
|
"createMessageContent": {
|
|
262
262
|
id: `${scope}.createMessageContent`,
|
|
263
|
-
defaultMessage: `New {channel}
|
|
263
|
+
defaultMessage: `New {channel}`,
|
|
264
264
|
},
|
|
265
265
|
"creativeTemplatesDesc": {
|
|
266
266
|
id: `${scope}.creativeTemplatesDesc`,
|