🚸 Properly show WNFT CTA across templates (#38)

likecoin · Jul 24, 2023 · 33546b9 · 33546b9
1 parent 9db2b3e
commit 33546b9
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 27 deletions.
diff --git a/src/components/cta-writing-nft.tsx b/src/components/cta-writing-nft.tsx
@@ -12,16 +12,21 @@ import { BasicSection, BasicSectionProps } from './sections/basic';
 export interface WritingNFTCTASectionProps extends BasicSectionProps {
   isButton?: boolean;
   likerID?: string;
+  url?: string;
 }
 
 export const WritingNFTCTASection = ({
   isButton = false,
   likerID,
+  url: overrideURL,
   ...props
 }: WritingNFTCTASectionProps) => {
   const intl = useIntl();
   const url = wrapUtm(
-    likerID ? `${LIKER_LAND_ROOT}/${likerID}` : `${LIKER_LAND_ROOT}/writing-nft`
+    overrideURL ||
+      (likerID
+        ? `${LIKER_LAND_ROOT}/${likerID}`
+        : `${LIKER_LAND_ROOT}/writing-nft`)
   );
   if (isButton) {
     return (

diff --git a/src/components/nft-widget.tsx b/src/components/nft-widget.tsx
@@ -96,6 +96,7 @@ export const NFTWidget = ({
                       width={14}
                       height={14}
                       src={getAssetPath('/icons/coin-insert.png')}
+                      alt=""
                       style={{
                         verticalAlign: 'middle',
                         marginRight: 8,

diff --git a/src/templates/nft/creator-follow/confirmation.tsx b/src/templates/nft/creator-follow/confirmation.tsx
@@ -5,7 +5,6 @@ import { MjmlColumn, MjmlText } from 'mjml-react';
 import * as Colors from '../../../constants/colors';
 
 import { Avatar } from '../../../components/avatar';
-import { WritingNFTCTASection } from '../../../components/cta-writing-nft';
 import { FooterSection } from '../../../components/footer';
 import { HeaderSection } from '../../../components/header';
 import { Link } from '../../../components/link';
@@ -61,7 +60,7 @@ export const CreatorFollowConfirmationTemplate = ({
           </MjmlText>
         </MjmlColumn>
       </BasicSection>
-      <BasicSection paddingTop={48} paddingBottom={0}>
+      <BasicSection paddingTop={48} paddingBottom={48}>
         <MjmlColumn>
           <MjmlText>
             <FormattedMessage
@@ -87,11 +86,6 @@ export const CreatorFollowConfirmationTemplate = ({
           </MjmlText>
         </MjmlColumn>
       </BasicSection>
-      <WritingNFTCTASection
-        isButton={true}
-        paddingBottom={64}
-        likerID={creatorLikerId}
-      />
       <FooterSection unsubscribeLink={unsubscribeLink} />
     </TemplateBase>
   );

diff --git a/src/templates/nft/creator-follow/publish-new.tsx b/src/templates/nft/creator-follow/publish-new.tsx
@@ -45,6 +45,7 @@ export const CreatorFollowPublishNewTemplate = (
           }}
         />
       }
+      shouldShowCTA={true}
     />
   );
 };
diff --git a/src/templates/nft/default.tsx b/src/templates/nft/default.tsx
@@ -22,6 +22,7 @@ export interface NFTDefaultTemplateProps extends NFTTemplateProps {
   headerText?: React.ReactNode;
   message?: string;
   body?: React.ReactElement;
+  shouldShowCTA?: boolean;
 }
 
 export const NFTDefaultTemplate = ({
@@ -39,6 +40,7 @@ export const NFTDefaultTemplate = ({
   nftTitle,
   nftCoverImageSrc,
   nftURL,
+  shouldShowCTA = false,
 }: NFTDefaultTemplateProps) => {
   return (
     <TemplateBase language={language} subject={subject}>
@@ -108,11 +110,14 @@ export const NFTDefaultTemplate = ({
           />
         </MjmlColumn>
       </BasicSection>
-      <WritingNFTCTASection
-        likerID={headerAvatarLikerID}
-        isButton={true}
-        paddingBottom={64}
-      />
+      {shouldShowCTA && (
+        <WritingNFTCTASection
+          url={nftURL}
+          likerID={headerAvatarLikerID}
+          isButton={true}
+          paddingBottom={64}
+        />
+      )}
       <FooterSection unsubscribeLink={unsubscribeLink} />
     </TemplateBase>
   );

diff --git a/src/templates/nft/notification/purchase-multiple.tsx b/src/templates/nft/notification/purchase-multiple.tsx
@@ -6,7 +6,6 @@ import * as Colors from '../../../constants/colors';
 import { LIKER_LAND_ROOT } from '../../../constants';
 
 import { Avatar } from '../../../components/avatar';
-import { WritingNFTCTASection } from '../../../components/cta-writing-nft';
 import { FooterSection } from '../../../components/footer';
 import { HeaderSection } from '../../../components/header';
 import { Link } from '../../../components/link';
@@ -211,6 +210,7 @@ export const NFTNotificationPurchaseMultipleTemplate = ({
                       width={14}
                       height={14}
                       src={getAssetPath('/icons/coin-insert.png')}
+                      alt=""
                       style={{
                         verticalAlign: 'middle',
                         marginRight: 8,
@@ -225,7 +225,6 @@ export const NFTNotificationPurchaseMultipleTemplate = ({
           </MjmlColumn>
         </BasicSection>
       )}
-      <WritingNFTCTASection isButton={true} paddingBottom={64} />
       <FooterSection unsubscribeLink={unsubscribeLink} />
     </TemplateBase>
   );

diff --git a/test/__snapshots__/basic.test.ts.snap b/test/__snapshots__/basic.test.ts.snap
@@ -433,7 +433,7 @@ exports[`Render basic templates Default 1`] = `
                   
       <div
          style=\\"font-family:Arial;font-size:20px;font-weight:600;line-height:1.5;text-align:center;color:#4a4a4a;\\"
-      >立即收集 Wrting NFT</div>
+      >立即收藏以表支持</div>
     
                 </td>
               </tr>
@@ -451,11 +451,11 @@ exports[`Render basic templates Default 1`] = `
             <td  style=\\"width:400px;\\">
               
         <a
-           href=\\"https://liker.land/campaign/writing-nft?utm_medium=email&amp;utm_source=email\\" target=\\"_blank\\"
+           href=\\"https://liker.land/writing-nft?utm_medium=email&amp;utm_source=email\\" target=\\"_blank\\"
         >
           
       <img
-         alt=\\"立即收集 Wrting NFT\\" height=\\"auto\\" src=\\"http://localhost:3000/static/banners/cta-writing-nft.jpg\\" style=\\"border:0;border-radius:24px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:14px;\\" width=\\"400\\"
+         alt=\\"立即收藏以表支持\\" height=\\"auto\\" src=\\"http://localhost:3000/static/banners/cta-turn-story-into-collectible.jpg\\" style=\\"border:0;border-radius:24px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:14px;\\" width=\\"400\\"
       />
     
         </a>
@@ -1131,7 +1131,7 @@ exports[`Render basic templates With avatar (Civic Liker) 1`] = `
                   
       <div
          style=\\"font-family:Arial;font-size:20px;font-weight:600;line-height:1.5;text-align:center;color:#4a4a4a;\\"
-      >立即收集 Wrting NFT</div>
+      >立即收藏以表支持</div>
     
                 </td>
               </tr>
@@ -1149,11 +1149,11 @@ exports[`Render basic templates With avatar (Civic Liker) 1`] = `
             <td  style=\\"width:400px;\\">
               
         <a
-           href=\\"https://liker.land/campaign/writing-nft?utm_medium=email&amp;utm_source=email\\" target=\\"_blank\\"
+           href=\\"https://liker.land/writing-nft?utm_medium=email&amp;utm_source=email\\" target=\\"_blank\\"
         >
           
       <img
-         alt=\\"立即收集 Wrting NFT\\" height=\\"auto\\" src=\\"http://localhost:3000/static/banners/cta-writing-nft.jpg\\" style=\\"border:0;border-radius:24px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:14px;\\" width=\\"400\\"
+         alt=\\"立即收藏以表支持\\" height=\\"auto\\" src=\\"http://localhost:3000/static/banners/cta-turn-story-into-collectible.jpg\\" style=\\"border:0;border-radius:24px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:14px;\\" width=\\"400\\"
       />
     
         </a>
@@ -1829,7 +1829,7 @@ exports[`Render basic templates With avatar 1`] = `
                   
       <div
          style=\\"font-family:Arial;font-size:20px;font-weight:600;line-height:1.5;text-align:center;color:#4a4a4a;\\"
-      >立即收集 Wrting NFT</div>
+      >立即收藏以表支持</div>
     
                 </td>
               </tr>
@@ -1847,11 +1847,11 @@ exports[`Render basic templates With avatar 1`] = `
             <td  style=\\"width:400px;\\">
               
         <a
-           href=\\"https://liker.land/campaign/writing-nft?utm_medium=email&amp;utm_source=email\\" target=\\"_blank\\"
+           href=\\"https://liker.land/writing-nft?utm_medium=email&amp;utm_source=email\\" target=\\"_blank\\"
         >
           
       <img
-         alt=\\"立即收集 Wrting NFT\\" height=\\"auto\\" src=\\"http://localhost:3000/static/banners/cta-writing-nft.jpg\\" style=\\"border:0;border-radius:24px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:14px;\\" width=\\"400\\"
+         alt=\\"立即收藏以表支持\\" height=\\"auto\\" src=\\"http://localhost:3000/static/banners/cta-turn-story-into-collectible.jpg\\" style=\\"border:0;border-radius:24px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:14px;\\" width=\\"400\\"
       />
     
         </a>

diff --git a/test/__snapshots__/new-supporter.test.ts.snap b/test/__snapshots__/new-supporter.test.ts.snap
@@ -433,7 +433,7 @@ exports[`Render new supporter templates Default 1`] = `
                   
       <div
          style=\\"font-family:Arial;font-size:20px;font-weight:600;line-height:1.5;text-align:center;color:#4a4a4a;\\"
-      >立即收集 Wrting NFT</div>
+      >立即收藏以表支持</div>
     
                 </td>
               </tr>
@@ -451,11 +451,11 @@ exports[`Render new supporter templates Default 1`] = `
             <td  style=\\"width:400px;\\">
               
         <a
-           href=\\"https://liker.land/campaign/writing-nft?utm_medium=email&amp;utm_source=email\\" target=\\"_blank\\"
+           href=\\"https://liker.land/writing-nft?utm_medium=email&amp;utm_source=email\\" target=\\"_blank\\"
         >
           
       <img
-         alt=\\"立即收集 Wrting NFT\\" height=\\"auto\\" src=\\"http://localhost:3000/static/banners/cta-writing-nft.jpg\\" style=\\"border:0;border-radius:24px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:14px;\\" width=\\"400\\"
+         alt=\\"立即收藏以表支持\\" height=\\"auto\\" src=\\"http://localhost:3000/static/banners/cta-turn-story-into-collectible.jpg\\" style=\\"border:0;border-radius:24px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:14px;\\" width=\\"400\\"
       />
     
         </a>