[TAS-2758] 💄 Update footer buttons & UTM

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.2.0-beta.0",
+  "version": "8.3.0-beta.0",
   "license": "GPL-3.0-or-later",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/footer.tsx

@@ -3,12 +3,11 @@ import {
   MjmlButton,
   MjmlColumn,
   MjmlDivider,
-  MjmlImage,
   MjmlSocial,
   MjmlSocialElement,
   MjmlText,
 } from 'mjml-react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import * as Colors from '../constants/colors';
 import { getAssetPath, wrapUtm } from '../utils/url';
@@ -19,25 +18,20 @@ import { UnsubscribeLink } from './unsubscribe-link';
 
 const socialElements = [
   {
-    key: 'discord',
-    href: 'https://discord.gg/likecoin',
-    assetPath: '/social-elements/v2/discord.png',
+    key: 'facebook',
+    href: 'https://www.facebook.com/Liker.Land',
+    assetPath: '/social-elements/v2/facebook.png',
   },
   {
-    key: 'github',
-    href: 'https://github.com/likecoin',
-    assetPath: '/social-elements/v2/github.png',
+    key: 'instagram',
+    href: 'https://www.instagram.com/liker.land',
+    assetPath: '/social-elements/v2/instagram.png',
   },
   {
     key: 'blog',
-    href: 'https://blog.like.co',
+    href: 'https://blog.liker.land',
     assetPath: '/social-elements/v2/blog.png',
   },
-  {
-    key: 'instagram',
-    href: 'https://www.instagram.com/liker.land',
-    assetPath: '/social-elements/v2/instagram.png',
-  },
 ];
 
 export const FooterSection = ({
@@ -47,10 +41,13 @@ export const FooterSection = ({
   unsubscribeLink?: string;
   shouldShowDivider?: boolean;
 }) => {
-  const intl = useIntl();
   return (
     <>
-      <BasicSection backgroundColor="white">
+      <BasicSection
+        backgroundColor="white"
+        backgroundUrl={undefined}
+        paddingBottom={24}
+      >
         <MjmlColumn>
           {shouldShowDivider && (
             <MjmlDivider
@@ -65,27 +62,11 @@ export const FooterSection = ({
             fontWeight={600}
             backgroundColor={Colors.LighterCyan}
             borderRadius={14}
-            href={wrapUtm('https://newsletter.like.co')}
+            href={wrapUtm('https://liker.land/store', { source: 'edm-footer' })}
             rel="noopener noreferrer"
           >
-            <FormattedMessage id="footer_newsletter_button" />
+            <FormattedMessage id="footer_browse_store" />
           </MjmlButton>
-        </MjmlColumn>
-      </BasicSection>
-      <BasicSection
-        backgroundColor="white"
-        backgroundUrl={undefined}
-        paddingTop={0}
-        paddingBottom={24}
-      >
-        <MjmlColumn>
-          <MjmlImage
-            width={220}
-            src={getAssetPath(
-              `/social-elements/v2/twitter-large-${intl.locale}.png`
-            )}
-            href={wrapUtm('https://twitter.com/likerland')}
-          />
           <MjmlSocial
             mode="horizontal"
             paddingTop={16}
@@ -99,19 +80,19 @@ export const FooterSection = ({
             {socialElements.map(({ key, href, assetPath }) => (
               <MjmlSocialElement
                 key={key}
-                href={wrapUtm(href)}
+                href={wrapUtm(href, { source: 'edm-footer' })}
                 src={getAssetPath(assetPath)}
               >
                 {null}
               </MjmlSocialElement>
             ))}
           </MjmlSocial>
           <MjmlText align="center" padding={4}>
-            <HelpCenterLink />
+            <HelpCenterLink utmSource="edm-footer" />
           </MjmlText>
           {!!unsubscribeLink && (
             <MjmlText align="center" padding={4}>
-              <UnsubscribeLink link={unsubscribeLink} />
+              <UnsubscribeLink href={unsubscribeLink} utmSource="edm-footer" />
             </MjmlText>
           )}
         </MjmlColumn>

src/components/help-center-link.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import { Link } from './link';
+import { Link, LinkProps } from './link';
 
-export const HelpCenterLink = () => {
+export const HelpCenterLink = (props: LinkProps) => {
   const intl = useIntl();
   return (
-    <Link href={intl.formatMessage({ id: 'help.center.url' })} isWrapUtm={true}>
+    <Link
+      {...props}
+      href={intl.formatMessage({ id: 'help.center.url' })}
+      isWrapUtm={true}
+    >
       <FormattedMessage id="help.center.text" />
     </Link>
   );

src/components/link.tsx

@@ -10,6 +10,8 @@ export interface LinkProps
     HTMLAnchorElement
   > {
   isWrapUtm?: boolean;
+  utmMedium?: string;
+  utmSource?: string;
   textDecoration?: string;
 }
 
@@ -25,13 +27,19 @@ export const Link = (props: LinkProps) => {
     href,
     style,
     isWrapUtm = false,
+    utmMedium,
+    utmSource,
     textDecoration = 'underline',
     ...restProps
   } = props;
 
   return (
     <a
-      href={href && isWrapUtm ? wrapUtm(href) : href}
+      href={
+        href && isWrapUtm
+          ? wrapUtm(href, { medium: utmMedium, source: utmSource })
+          : href
+      }
       target="_blank"
       rel="noreferrer noopener"
       style={{

src/components/unsubscribe-link.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Link } from './link';
+import { Link, LinkProps } from './link';
 
-export const UnsubscribeLink = ({ link }: { link?: string }) => (
-  <Link href={link || 'https://like.co/in/settings/others'} isWrapUtm={true}>
+export const UnsubscribeLink = ({ href, ...props }: LinkProps) => (
+  <Link
+    {...props}
+    href={href || 'https://like.co/in/settings/others'}
+    isWrapUtm={true}
+  >
     <FormattedMessage id="unsubscribe.text" />
   </Link>
 );

src/i18n/translations/cn.json

@@ -4,6 +4,7 @@
   "cta.sponsor-link.hint": "用这条链结建立你的粉丝团。<a>详情</a>",
   "cta.writing-nft.title": "立即收藏以表支持",
   "download": "下载:",
+  "footer_browse_store": "浏览书店",
   "footer_newsletter_button": "订阅电子报",
   "greeting": "你好 {name}：",
   "header.manage-delegation": "管理委託",

src/i18n/translations/en.json

@@ -4,6 +4,7 @@
   "cta.sponsor-link.hint": "Build your fans group by this link. <a>Learn more</a>",
   "cta.writing-nft.title": "Collect to support now",
   "download": "Download:",
+  "footer_browse_store": "Browse Bookstore",
   "footer_newsletter_button": "Subscribe Newsletter",
   "greeting": "Dear {name}",
   "header.manage-delegation": "Manage delegation",

src/i18n/translations/zh.json

@@ -4,6 +4,7 @@
   "cta.sponsor-link.hint": "用這條鏈結建立你的粉絲團。<a>詳情</a>",
   "cta.writing-nft.title": "立即收藏以表支持",
   "download": "下載:",
+  "footer_browse_store": "瀏覽書店",
   "footer_newsletter_button": "訂閱電子報",
   "greeting": "你好 {name}：",
   "header.manage-delegation": "管理委託",

src/utils/url.ts

@@ -1,9 +1,18 @@
 import { ASSETS_ROOT } from '../constants';
 
-export function wrapUtm(url: string) {
+export function wrapUtm(
+  url: string,
+  {
+    medium = 'email',
+    source = 'edm',
+  }: {
+    medium?: string;
+    source?: string;
+  } = {}
+) {
   return `${url}${
     url.includes('?') ? '&' : '?'
-  }utm_medium=email&utm_source=email`;
+  }utm_medium=${medium}&utm_source=${source}`;
 }
 
 export function getAssetPath(path: string = '') {