Merge pull request #14 from jwade1327/case-of-the-day

Create case of the day newsletter
parameter1 · Mar 30, 2023 · 9c129cb · 9c129cb
2 parents 1ec0796 + 0a22fee
commit 9c129cb
Show file tree

Hide file tree

Showing 14 changed files with 253 additions and 1 deletion.
diff --git a/packages/common/components/blocks/ad/marko.json b/packages/common/components/blocks/ad/marko.json
@@ -13,5 +13,8 @@
   },
   "<common-ad-wrapper-block>": {
     "template": "./wrapper.marko"
+  },
+  "<common-ad-promotion-case-native-block>": {
+    "template": "./promotion-case-native.marko"
   }
 }
diff --git a/packages/common/components/blocks/ad/promotion-case-native.marko b/packages/common/components/blocks/ad/promotion-case-native.marko
@@ -0,0 +1,41 @@
+import { get, getAsObject } from "@parameter1/base-cms-object-path";
+import { URLSearchParams } from "url";
+
+$ const { content, urlParams, date } = input;
+
+$ const queryString = (urlParams && content.type !== 'promotion') ? `?${new URLSearchParams(urlParams)}` : "";
+$ const contentUrl = `${content.siteContext.url}${queryString}`;
+
+$ const imgStyles = {
+  "border": 0,
+  "outline": "none",
+  "text-decoration": "none",
+  "display": "block",
+  "height": "auto !important",
+  "max-width": "100% !important",
+};
+
+$ const imgLinkStyles = {
+  "font-family": "'Roboto', arial, sans-serif",
+  "border": 0,
+  "outline": "none",
+  "text-decoration": "none",
+};
+
+<table role="presentation" width="610" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap003">
+  <tr>
+    <td align="center">
+      <marko-core-obj-value|{ value: image }| obj=content field="primaryImage" as="object">
+        <marko-newsletter-imgix
+          src=image.src
+          alt=image.alt
+          options={ w: 400, fit: "crop", auto: "format,compress" }
+          attrs={ border: 0, style: imgStyles }
+        >
+          <@link href=contentUrl target="_blank" attrs={ style: imgLinkStyles } />
+        </marko-newsletter-imgix>
+      </marko-core-obj-value>
+    </td>
+  </tr>
+  <common-table-spacer-element height="20" />
+</table>
diff --git a/packages/common/components/blocks/ad/wrapper.marko b/packages/common/components/blocks/ad/wrapper.marko
@@ -4,6 +4,7 @@ import { convertAdToContent } from "../../../native-x";
 import PromotionAdvertisementBlock from "./promotion-advertisement";
 import PromotionNativeBlock from "./promotion-native";
 import PromotionSponsoredBlock from "./promotion-sponsored";
+import PromotionCaseNativeBlock from "./promotion-case-native";
 
 $ const { config } = out.global;
 $ const nativeX = config.getAsObject("nativeX");
@@ -16,6 +17,7 @@ $ const promotionComponents = {
   "advertisement-block": PromotionAdvertisementBlock,
   "native-block": PromotionNativeBlock,
   "sponsored-block": PromotionSponsoredBlock,
+  "case-native-block": PromotionCaseNativeBlock,
 };
 $ const PromotionComponent = promotionComponents[defaultValue(input.promotionComponent, "advertisement-block")];
 

diff --git a/packages/common/components/blocks/content/api-list-item.marko b/packages/common/components/blocks/content/api-list-item.marko
@@ -0,0 +1,84 @@
+import { get, getAsArray } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import buildLinkUrl from '@science-medicine-group/package-common/utils/build-link-url';
+
+$ const { content, ctaLinkStyle } = input;
+$ const url = buildLinkUrl(content.siteContext.url);
+$ const withImage = defaultValue(input.withImage, true);
+$ const imagePosition = defaultValue(input.imagePosition, 'right');
+
+$ const imgStyles = {
+  "border": 0,
+  "outline": "none",
+  "text-decoration": "none",
+  "display": "block",
+  "height": "auto !important",
+  "max-width": "100% !important",
+};
+
+$ const imgLinkStyles = {
+  "font-family": "'Roboto', arial, sans-serif",
+  "border": 0,
+  "outline": "none",
+  "text-decoration": "none",
+};
+
+$ const linkLabel = input.storyLocation ? `story|${input.storyLocation}|${content.name}` : input.linkLabel;
+
+<tr>
+  <td align="center" valign="top">
+    <table role="presentation" width="610" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap003">
+      <if(withImage && imagePosition === 'right' && content.primaryImage)>
+        <tr>
+          <td align="center" valign="top">
+            <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+              <tr>
+                <td align="left" valign="top">
+                  <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="pad" style="padding: 0 20px 0px 0;">
+                    <tr>
+                      <td align="left" valign="top">
+                        <a style="font-family: 'Roboto', arial, sans-serif;font-size: 24px;line-height: 28px;color: #202022;font-weight: 700;text-decoration: none;" href=url target="_blank">
+                          $!{content.teaser}
+                        </a>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+                <td align="right" valign="top" width="150" class="wdt">
+                  <marko-core-obj-value|{ value: image }| obj=content field="primaryImage" as="object">
+                    <marko-newsletter-imgix
+                      src=image.src
+                      alt=image.alt
+                      options={ w: 400, h: 266, fit: "crop", auto: "format,compress" }
+                      class="img_resize2"
+                      attrs={ border: 0, width: 200, height: 133, style: imgStyles }
+                    >
+                      <@link href=url target="_blank" attrs={ style: imgLinkStyles, linklabel: linkLabel  } />
+                    </marko-newsletter-imgix>
+                  </marko-core-obj-value>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td align="left" valign="top" class="hide_on_mobile" style="display: none;mso-hide: all;">
+            <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-hide: all;">
+              <common-table-spacer-element height="10" />
+              <tr>
+                <td align="left" valign="top">
+                  <a style="font-family: 'Roboto', arial, sans-serif;font-size: 17px;line-height: 23px;color: #202022;font-weight: 400;text-decoration: none;" href=url>
+                    $!{content.teaser}
+                  </a>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </if>
+      <common-table-spacer-element height="16" />
+      <common-table-hr-element height="2" />
+      <common-table-spacer-element height="16" />
+    </table>
+  </td>
+</tr>
diff --git a/packages/common/components/blocks/content/marko.json b/packages/common/components/blocks/content/marko.json
@@ -7,5 +7,8 @@
   },
   "<common-content-list-item-block>": {
     "template": "./list-item.marko"
+  },
+  "<common-content-api-list-item-block>": {
+    "template": "./api-list-item.marko"
   }
 }
diff --git a/packages/common/components/blocks/external-api.marko b/packages/common/components/blocks/external-api.marko
@@ -0,0 +1,41 @@
+import fetch from "node-fetch";
+
+$ const { log } = console;
+$ const { apiUrl, ctaLinkStyle } = input;
+
+$ const apiCall = async (url) => {
+  if (url) {
+    const response = await fetch(url);
+    const jsonResponse = await response.json();
+    if (!response.ok) {
+      log('Unsuccesssful external API response!', apiUrl, jsonResponse);
+      return [];
+    }
+    return jsonResponse;
+  }
+  return [];
+};
+
+<marko-web-resolve|{ resolved }| promise=apiCall(apiUrl)>
+  $ const nodes = input.resolvedToNodesConverter({ resolved }) || resolved;
+  <if(nodes && nodes.length)>
+    $ const heroNode = nodes.slice(0, 1)[0];
+    $ const heroImageNode = {
+      id: heroNode.id,
+      type: heroNode.type,
+      siteContext: heroNode.siteContext,
+      primaryImage: heroNode.primaryImage,
+    };
+
+    <for|heroNode| of=nodes>
+      <table>
+        <common-content-api-list-item-block
+          content=heroNode
+          with-image=true
+          image-position="right"
+          cta-link-style=ctaLinkStyle
+        />
+      </table>
+    </for>
+  </if>
+</marko-web-resolve>
diff --git a/packages/common/components/blocks/footer.marko b/packages/common/components/blocks/footer.marko
@@ -101,7 +101,7 @@ $ const stealthLinkStyle = {
                                 <marko-newsletter-imgix
                                   src=`${socialMedia.imagePath}/${link.provider}.png`
                                   alt=link.provider
-                                  options={ w: 32, h: 32, fit: "crop" }
+                                  options={ w: 32, h: 32 }
                                   class="img_resize1"
                                   attrs={ border: 0, width: 32, align: "center" }
                                 >

diff --git a/packages/common/components/blocks/marko.json b/packages/common/components/blocks/marko.json
@@ -17,5 +17,8 @@
   },
   "<common-view-online-block>": {
     "template": "./view-online.marko"
+  },
+  "<common-external-api-block>": {
+    "template": "./external-api.marko"
   }
 }
diff --git a/packages/common/components/layouts/case.marko b/packages/common/components/layouts/case.marko
@@ -0,0 +1,57 @@
+import { get } from "@parameter1/base-cms-object-path";
+import { parseBooleanHeader } from "@parameter1/base-cms-utils";
+import queryFragment from "@science-medicine-group/package-common/graphql/fragments/content-list";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { website, config, req } = out.global;
+$ const { newsletter, date } = input.data;
+
+$ const emailX = config.get("emailX");
+$ const nativeX = config.getAsObject("nativeX");
+$ const { id, alias, name, pageNode } = input;
+
+$ const newsletterConfig = config.get(newsletter.alias);
+$ const ctaLinkStyle = defaultValue(newsletterConfig.ctaLinkStyle, undefined);
+
+$ const resolvedToNodesConverter = ({ resolved }) => (resolved.map((node) => ({
+    id: node.ID,
+    type: 'Case',
+    shortName: node.name,
+    teaser: node.description,
+    siteContext: { url: `https://my.drbicuspid.com/cases/${node.url}` },
+    primaryImage: { src: node.imagepath }
+  })));
+
+<marko-newsletter-root
+  title=newsletter.name
+  description=newsletter.description
+  date=date
+>
+  <@head>
+    <common-head-block />
+  </@head>
+  <@body style="padding:0; margin:0;font-family: 'Roboto', Arial, sans-serif; -webkit-text-size-adjust:100%;">
+    <common-body-wrapper-block newsletter=newsletter date=date>
+      <@body>
+
+        <common-ad-wrapper-block
+          date=date
+          newsletter=newsletter
+          promotion-component="case-native-block"
+          placement-id=get(nativeX, `placements.${newsletter.alias}.case-sponsor`)
+        />
+
+        <common-external-api-block
+          api-url="https://my.drbicuspid.com/wp-json/mo/v1/getCase/3"
+          resolved-to-nodes-converter=resolvedToNodesConverter
+          name="Case of the Week"
+          description="Check out our Case of the Week!"
+          button={ link: "https://my.drbicuspid.com/cases", text: "View All Cases" }
+          native-x={ placementName: 'cases', placementAliases: ['cases'] }
+          cta-link-style=ctaLinkStyle
+        />
+
+      </@body>
+    </common-body-wrapper-block>
+  </@body>
+</marko-newsletter-root>
diff --git a/packages/common/components/layouts/marko.json b/packages/common/components/layouts/marko.json
@@ -7,5 +7,8 @@
   },
   "<common-insider-layout>": {
     "template": "./insider.marko"
+  },
+  "<common-case-layout>": {
+    "template": "./case.marko"
   }
 }
diff --git a/tenants/all/config/brands.js b/tenants/all/config/brands.js
@@ -15,6 +15,8 @@ module.exports = {
       links: [
         { provider: 'facebook', href: 'https://www.facebook.com/DrBicuspid', target: '_blank' },
         { provider: 'twitter', href: 'https://twitter.com/drbicuspid', target: '_blank' },
+        { provider: 'linkedin', href: 'https://www.linkedin.com/company/drbicuspid.com/', target: '_blank' },
+        { provider: 'instagram', href: 'https://www.instagram.com/drbicuspid/', target: '_blank' },
       ],
     },
   },

diff --git a/tenants/all/config/core.js b/tenants/all/config/core.js
@@ -64,6 +64,15 @@ const config = {
     },
     preferenceCenter: 'https://www.drbicuspid.com/user/subscribe',
   },
+  'drb-case-of-the-week': {
+    ...brands.drb,
+    name: 'Dr. Bicuspid-Case of the Week',
+    logo: {
+      src: '/files/base/smg/all/image/static/drb/DrB_EmailHeader_CaseOfTheWeek_v3.jpg',
+      footerWidth: 200,
+    },
+    preferenceCenter: 'https://www.drbicuspid.com/user/subscribe',
+  },
 };
 
 module.exports = config;
diff --git a/tenants/all/config/native-x.js b/tenants/all/config/native-x.js
@@ -22,5 +22,8 @@ module.exports = {
     sab: {
       'slot-1': '63861a1cadecb1000112fe8b',
     },
+    'drb-case-of-the-week': {
+      'case-sponsor': '642310db713241000128c421',
+    },
   },
 };
diff --git a/tenants/all/templates/drb-case-of-the-week.marko b/tenants/all/templates/drb-case-of-the-week.marko
@@ -0,0 +1 @@
+<common-case-layout data=data />