@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js

@@ -0,0 +1,449 @@
+import React, { useCallback } from "react";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import { SocialShare } from "@quintype/components";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import AsideCollection from "../../AsideCollection";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { SlotAfterStory, LiveBlogStoryElement } from "../../../Molecules/StoryElementCard";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import "./live-blog.m.css";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import {
+  clientWidth,
+  getTextColor,
+  getTimeStamp,
+  timestampToFormat,
+  getTimeStampConfig
+} from "../../../../utils/utils";
+import LiveIcon from "../../../Svgs/liveicon";
+import KeyEvents from "../../../Molecules/KeyEvents";
+import { ClockIcon } from "../../../Svgs/clock-icon";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { StoryReview } from "../../../Atoms/StoryReview";
+import { useSelector } from "react-redux";
+import { FollowUs } from "../../../Molecules/FollowUs";
+import { liveBlogImgSize, heroImageWidths } from "../../../../utils/img-size-utils";
+import { SponsoredLabel } from "../../../Atoms/SponsoredLabel";
+
+export const LiveBlogStoryTemplates = ({
+  storyAccess = null,
+  story = {},
+  config = {},
+  storyElementsConfig,
+  adComponent,
+  widgetComp,
+  firstChild,
+  secondChild,
+  timezone,
+  enableDarkMode,
+  mountAt,
+  loadRelatedStories,
+  visibleCardsRender = null,
+  meteringIndicator
+}) => {
+  const {
+    theme = "",
+    asideCollection = {},
+    templateType,
+    noOfVisibleCards = 0,
+    publishedDetails = {},
+    authorDetails = {
+      template: "default"
+    },
+    sectionTagSettings = {},
+    premiumStoryIconConfig = {},
+    socialShareStyle = "fixed",
+    followUsLayout,
+    fixedShareLayout = "partialShareIcons"
+  } = config;
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const timeStampConfig = getTimeStampConfig(qtConfig);
+  const direction = get(qtConfig, ["language", "direction"], "ltr");
+
+  const { sponsoredStoryConfig = {} } = get(qtConfig, ["pagebuilder-config", "general"], {});
+
+  const visibleCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  const textColor = getTextColor(theme);
+  const dark = "#333";
+  const light = "#fff";
+  const updateColor = textColor === "dark" ? dark : light;
+
+  const isMobile = clientWidth("mobile");
+  const storyId = get(story, ["id"], "");
+
+  const HeaderCard = () => {
+    const isBlogClosed = get(story, ["metadata", "is-closed"]);
+    return (
+      <div styleName="header-wrapper header-details">
+        <SectionTag story={story} {...sectionTagSettings} />
+        <div styleName="live-headline">
+          {!isBlogClosed && (
+            <div styleName="live-icon">
+              <LiveIcon />
+            </div>
+          )}
+          <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
+        </div>
+        <Subheadline story={story} showFullContent />
+      </div>
+    );
+  };
+
+  const SocialShareComponent = () => {
+    return (
+      <div
+        id={`story-share-${storyId}`}
+        className={socialShareStyle === "sticky" ? "arr--share-sticky-wrapper" : "content-style"}>
+        <SocialShare
+          template={SocialShareTemplate}
+          fullUrl={encodeURI(story.url)}
+          title={story.headline}
+          theme={theme}
+          socialShareStyle={socialShareStyle}
+          shareIconId={`share-icon-story-share-${storyId}`}
+          fixedShareLayout={fixedShareLayout}
+          id={story.id}
+          enableDarkMode={enableDarkMode}
+        />
+      </div>
+    );
+  };
+
+  const StoryCards = () => {
+    return visibleCards.map((card = {}, index) => {
+      const borderBottom = index === visibleCards.length - 1 ? "" : `share-cards ${textColor}`;
+      const cardId = get(card, ["id"], "");
+      const { "card-added-at": cardAddedAt } = card;
+
+      const storyUrl = story?.url ? new URL(story?.url) : get(story, ["url"], "");
+      const shareUrl = encodeURI(storyUrl.origin + `${mountAt}${storyUrl.pathname}#${story.slug}-${cardId}`);
+      const updatedConfig = {
+        isTimeFirst: true,
+        ...timeStampConfig,
+        direction,
+        showTime: true
+      };
+
+      function CardShare() {
+        const rltDateTimeWithOutLocalization =
+          direction === "rtl" && !timeStampConfig.enableLocalization ? "rtl-date-time" : "";
+        return (
+          <div styleName="card-share">
+            <div styleName={`time-wrapper ${rltDateTimeWithOutLocalization} ${textColor}`}>
+              <ClockIcon color={updateColor} />
+              {getTimeStamp({ date: cardAddedAt, formatter: timestampToFormat, config: updatedConfig })}
+            </div>
+            <div id={`card-share-${cardId}_${storyId}`} className="content-style">
+              <SocialShare
+                template={SocialShareTemplate}
+                fullUrl={shareUrl}
+                title={story.headline}
+                theme={theme}
+                socialShareStyle="fixed"
+                fixedShareLayout={fixedShareLayout}
+                shareIconsOnly
+                id={`card-${story.id}`}
+                enableDarkMode={enableDarkMode}
+              />
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div key={index} styleName={borderBottom} id={`${story.slug}-${cardId}`} style={{ scrollMarginTop: "20vh" }}>
+          <LiveBlogStoryElement
+            story={story}
+            card={card}
+            key={cardId}
+            config={storyElementsConfig}
+            theme={theme}
+            adComponent={adComponent}
+            widgetComp={widgetComp}
+            enableDarkMode={enableDarkMode}
+            CardShare={CardShare}
+          />
+        </div>
+      );
+    });
+  };
+
+  const keyEvents = () => {
+    return (
+      <div styleName="key-events" id={`key-events-${storyId}`}>
+        <KeyEvents story={story} showLoadMore={true} config={config} publishedDetails={publishedDetails} />
+      </div>
+    );
+  };
+
+  const showKeyEvents = () => {
+    if ((templateType === "default" || templateType === "headline-priority") && !isMobile) {
+      return null;
+    }
+    return keyEvents();
+  };
+
+  const StoryData = () => {
+    const accessGranted = storyAccess?.accessGranted;
+    const accessLoading = accessGranted === null;
+    return (
+      <>
+        <AuthorCard
+          clazzName="gap-32"
+          story={story}
+          template={authorDetails.template}
+          opts={authorDetails.opts}
+          mountAt={mountAt}
+        />
+        <div styleName="timestamp-social-share" id={`publish-details-container-${storyId}`}>
+          <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+        </div>
+        <div styleName="share">
+          <SocialShareComponent />
+          {(followUsLayout === "top" || followUsLayout === "topAndEnd") && <FollowUs theme={theme} displaySingleIcon />}
+        </div>
+        {meteringIndicator}
+        <StoryReview theme={theme} story={story} />
+        {showKeyEvents()}
+        {visibleCardsRender ? visibleCardsRender(<StoryCards />, null, storyAccess) : <StoryCards />}
+        <div styleName="space-32">
+          {!accessLoading && firstChild}
+          <StoryTags tags={story.tags} config={qtConfig} />
+          {(followUsLayout === "end" || followUsLayout === "topAndEnd") && (
+            <FollowUs theme={theme} displaySingleIcon={false} />
+          )}
+          {meteringIndicator}
+          <SlotAfterStory
+            id={story.id}
+            element={story.customSlotAfterStory}
+            AdComponent={adComponent}
+            WidgetComp={widgetComp}
+          />
+          <SponsoredLabel story={story} sponsoredStoryConfig={sponsoredStoryConfig} isStoryPage={true} />
+          {secondChild}
+        </div>
+      </>
+    );
+  };
+
+  const cachedAsideCollection = useCallback(
+    (story) => (
+      <AsideCollection
+        {...asideCollection}
+        adComponent={adComponent}
+        widgetComp={widgetComp}
+        sticky={true}
+        enableKeyEvents={!isMobile}
+        keyEventsData={{ story, config, showLoadMore: true }}
+        story={story}
+        opts={publishedDetails}
+        loadRelatedStories={loadRelatedStories}
+      />
+    ),
+    [templateType, story, asideCollection?.slots]
+  );
+
+  const DefaultTemplate = (story) => {
+    return (
+      <>
+        <div data-test-id="hero-image" styleName="grid-col-full index-2">
+          <HeroImage
+            story={story}
+            widths={heroImageWidths}
+            sizes={liveBlogImgSize[templateType]}
+            aspectRatio={[[16, 9], [8, 3]]}
+            isStoryPageImage
+            isFullWidthImage
+          />
+        </div>
+        <div styleName="header-wrapper">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        <div styleName="side-column">{asideCollection && cachedAsideCollection(story)}</div>
+      </>
+    );
+  };
+
+  const cachedAsideColumn = useCallback(
+    (story) => (
+      <AsideCollection
+        horizontal={true}
+        {...asideCollection}
+        adComponent={adComponent}
+        widgetComp={widgetComp}
+        story={story}
+        opts={publishedDetails}
+        loadRelatedStories={loadRelatedStories}
+      />
+    ),
+    [templateType, story, asideCollection?.slots]
+  );
+
+  const HeroOverlay = (story) => {
+    return (
+      <>
+        <div styleName="overlay-hero  index-2">
+          <HeroImage
+            widths={heroImageWidths}
+            sizes={liveBlogImgSize[templateType]}
+            story={story}
+            aspectRatio={[[1, 2], [16, 9]]}
+            isStoryPageImage
+            isFullWidthImage
+          />
+        </div>
+        <div styleName="overlay-grid">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-col-4-12 ">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        {asideCollection && <div styleName="grid-container tablet-index-2">{cachedAsideColumn(story)}</div>}
+      </>
+    );
+  };
+
+  const HeadlineSideway = (story) => {
+    return (
+      <>
+        <div styleName="grid-col-2-9 sideway ">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-col-9-15 index-2">
+          <HeroImage
+            widths={heroImageWidths}
+            sizes={liveBlogImgSize[templateType]}
+            story={story}
+            aspectRatio={[[4, 3]]}
+            isStoryPageImage
+          />
+          <CaptionAttribution story={story} config={config} />
+        </div>
+        <div styleName="grid-col-4-12 ">
+          <StoryData />
+        </div>
+        {asideCollection && <div styleName="grid-container tablet-index-2">{cachedAsideColumn(story)}</div>}
+      </>
+    );
+  };
+
+  const HeadlinePriority = (story) => {
+    return (
+      <>
+        <div styleName="grid-col-2-9  grid-row-1-2 headline-space">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-col-2-9  grid-row-2-3 index-2">
+          <HeroImage
+            widths={heroImageWidths}
+            sizes={liveBlogImgSize[templateType]}
+            story={story}
+            aspectRatio={[[16, 9]]}
+            isStoryPageImage
+          />
+        </div>
+        <div styleName="grid-col-2-9  grid-row-3-4">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        <div styleName="grid-col-9-14 grid-row-1-6">{asideCollection && cachedAsideCollection(story)}</div>
+      </>
+    );
+  };
+
+  const HeroPriority = (story) => {
+    return (
+      <>
+        <div styleName="grid-container index-2">
+          <HeroImage
+            widths={heroImageWidths}
+            sizes={liveBlogImgSize[templateType]}
+            story={story}
+            aspectRatio={[[16, 9]]}
+            isStoryPageImage
+            isFullWidthImage
+          />
+        </div>
+        <div styleName="grid-col-4-12 ">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        {asideCollection && <div styleName="grid-container tablet-index-2">{cachedAsideColumn(story)}</div>}
+      </>
+    );
+  };
+
+  const HeadlineHeroPriority = (story) => {
+    return (
+      <>
+        <div styleName="grid-col-4-12 headline-space">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-container  index-2">
+          <HeroImage
+            widths={heroImageWidths}
+            sizes={liveBlogImgSize[templateType]}
+            story={story}
+            aspectRatio={[[16, 9]]}
+            isStoryPageImage
+            isFullWidthImage
+          />
+        </div>
+        <div styleName="grid-col-4-12 ">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        {asideCollection && <div styleName="grid-container tablet-index-2">{cachedAsideColumn(story)}</div>}
+      </>
+    );
+  };
+
+  const getLiveBlogStoryTemplates = (templateType) => {
+    switch (templateType) {
+      case "hero-priority":
+        return HeroPriority(story);
+      case "hero-overlay":
+        return HeroOverlay(story);
+      case "headline-sideway":
+        return HeadlineSideway(story);
+      case "headline-priority":
+        return HeadlinePriority(story);
+      case "headline-hero-priority":
+        return HeadlineHeroPriority(story);
+      default:
+        return DefaultTemplate(story);
+    }
+  };
+
+  return <>{getLiveBlogStoryTemplates(templateType)}</>;
+};
+
+LiveBlogStoryTemplates.propTypes = {
+  story: PropTypes.object,
+  storyAccess: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    authorCard: PropTypes.object,
+    asideCollection: PropTypes.object
+  }),
+  timezone: PropTypes.string,
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  loadRelatedStories: PropTypes.func,
+  mountAt: PropTypes.string,
+  visibleCardsRender: PropTypes.func | undefined,
+  meteringIndicator: PropTypes.node | undefined
+};