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

package/src/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js

@@ -0,0 +1,381 @@
+import { SocialShare } from "@quintype/components";
+import PropTypes from "prop-types";
+import React, { useCallback } from "react";
+import get from "lodash.get";
+import { useSelector } from "react-redux";
+import kebabCase from "lodash.kebabcase";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { PhotoStoryElement, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StoryReview } from "../../../Atoms/StoryReview";
+import { StateProvider } from "../../../SharedContext";
+import AsideCollection from "../../AsideCollection";
+import "./photo.m.css";
+import { FollowUs } from "../../../Molecules/FollowUs";
+import { heroImageWidths, photoStoryImgSize } from "../../../../utils/img-size-utils";
+import { SponsoredLabel } from "../../../Atoms/SponsoredLabel";
+import { AudioPlayer } from "../../../Atoms/AudioPlayer";
+import { shouldEnableTTS } from "../../../../utils/utils";
+
+const PhotoStory = ({
+  storyAccess = null,
+  story = {},
+  config = {},
+  storyElementsConfig,
+  widgetComp,
+  adComponent,
+  firstChild,
+  secondChild,
+  enableDarkMode,
+  loadRelatedStories,
+  visibleCardsRender = null,
+  meteringIndicator,
+  isPbStoryView
+}) => {
+  const {
+    theme = "",
+    asideCollection = {},
+    templateType = "default",
+    noOfVisibleCards = -1,
+    publishedDetails = {},
+    authorDetails = {
+      template: "default"
+    },
+    sectionTagSettings = {},
+    imageRender = "fullBleed",
+    premiumStoryIconConfig = {},
+    socialShareStyle = "fixed",
+    followUsLayout = "",
+    fixedShareLayout = "partialShareIcons"
+  } = config;
+  const isFullBleed = imageRender === "fullBleed";
+  const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  const storyId = get(story, ["id"], "");
+
+  const qtState = useSelector((state) => get(state, ["qt"], {}));
+  const timezone = get(qtState, ["data", "timezone"], null);
+  const mountAt = get(qtState, ["config", "mountAt"], "");
+
+  const { sponsoredStoryConfig = {} } = get(qtState, ["config", "pagebuilder-config", "general"], {});
+  const cdnImage = get(qtState, ["config", "cdn-image"]);
+  const audioS3key = get(story, ["story-audio", "s3-key"]);
+  const audioUrl = `//${cdnImage}/${audioS3key}`;
+
+  const { enableTTS: isPbTTSEnabled = false, listenButtonTitle, playBackSpeedTitle } = get(
+    qtState,
+    ["config", "pagebuilder-config", "story", "pageSetting", "textToSpeech"],
+    {}
+  );
+
+  const languageDirection = get(qtState, ["config", "language", "direction"], "ltr");
+  const enableTTS = shouldEnableTTS({ isPbTTSEnabled, audioS3key, storyAccess, languageDirection, isPbStoryView });
+
+  const HeaderCard = () => {
+    return (
+      <div styleName="grid-col-2-10 header-details">
+        <SectionTag story={story} {...sectionTagSettings} />
+        <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
+        <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={`photo-${story.id}`}
+          enableDarkMode={enableDarkMode}
+        />
+      </div>
+    );
+  };
+
+  const StoryData = () => {
+    const visibleCards = visibledCards.map((card) => {
+      return (
+        <PhotoStoryElement
+          story={story}
+          card={card}
+          key={get(card, ["id"], "")}
+          config={{ ...storyElementsConfig, theme }}
+          adComponent={adComponent}
+          widgetComp={widgetComp}
+          enableDarkMode={enableDarkMode}
+          theme={theme}
+        />
+      );
+    });
+    const accessGranted = storyAccess?.accessGranted;
+    const accessLoading = accessGranted === null;
+    const showPaywallBanner = !accessLoading && !accessGranted;
+    return (
+      <>
+        {authorDetails && (
+          <AuthorCard
+            clazzName="gap-32"
+            story={story}
+            template={authorDetails.template}
+            opts={authorDetails.opts}
+            mountAt={mountAt}
+          />
+        )}
+        <div styleName="story-details" 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>
+        {enableTTS && (
+          <AudioPlayer
+            audioUrl={audioUrl}
+            enableDarkMode={enableDarkMode}
+            listenButtonTitle={listenButtonTitle}
+            playBackSpeedTitle={playBackSpeedTitle}
+          />
+        )}
+        {meteringIndicator}
+        <StoryReview theme={theme} story={story} />
+        {visibleCardsRender ? visibleCardsRender(visibleCards, null, storyAccess) : visibleCards}
+        <div styleName="space-32">
+          {showPaywallBanner && firstChild}
+          <StoryTags tags={story.tags} config={qtState?.config} />
+          {(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 renderImages = (imageRender) => {
+    switch (imageRender) {
+      case "fullBleed":
+        return "grid-col-full";
+      case "container":
+        return "grid-container";
+      default:
+        return "grid-col-full";
+    }
+  };
+
+  const imageType = renderImages(imageRender);
+  const isFullWidthImage = imageType === "grid-col-full";
+
+  const DefaultTemplateSideColumn = () => {
+    return (
+      asideCollection && (
+        <div styleName="grid-col-10-14 space-12">
+          <AsideCollection
+            {...asideCollection}
+            widgetComp={widgetComp}
+            adComponent={adComponent}
+            sticky={true}
+            story={story}
+            opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
+          />
+        </div>
+      )
+    );
+  };
+
+  // Caching is done to avoid widget and Ad re-renderings
+  const CachedDefaultSideColumn = useCallback(DefaultTemplateSideColumn, [
+    templateType,
+    story["story-template"],
+    asideCollection?.slots
+  ]);
+
+  const defaultTemplate = () => {
+    return (
+      <>
+        <div data-test-id="hero-image" styleName={`${imageType} index-2`}>
+          <HeroImage
+            story={story}
+            widths={heroImageWidths}
+            sizes={photoStoryImgSize?.[imageRender]?.[templateType]}
+            aspectRatio={[[16, 9], [8, 3]]}
+            defaultFallback={false}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <div styleName="grid-col-2-10 space-12">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        <CachedDefaultSideColumn />
+      </>
+    );
+  };
+
+  const HeroPrioritySideColumn = () => {
+    return (
+      asideCollection && (
+        <div styleName="grid-container space-12 tablet-index-2">
+          <AsideCollection
+            horizontal={true}
+            {...asideCollection}
+            widgetComp={widgetComp}
+            adComponent={adComponent}
+            story={story}
+            opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
+          />
+        </div>
+      )
+    );
+  };
+
+  const CachedHeroPrioritySideColumn = useCallback(HeroPrioritySideColumn, [
+    templateType,
+    story["story-template"],
+    asideCollection?.slots
+  ]);
+
+  const heroPriority = () => {
+    return (
+      <>
+        <div data-test-id="hero-image" styleName={`${imageType} index-2`}>
+          <HeroImage
+            widths={heroImageWidths}
+            sizes={photoStoryImgSize?.[imageRender]?.[templateType]}
+            story={story}
+            aspectRatio={[[16, 9]]}
+            defaultFallback={false}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <div styleName="grid-col-4-12 space-12">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        <CachedHeroPrioritySideColumn />
+      </>
+    );
+  };
+
+  const HeadlinePrioritySideColumn = () => {
+    return (
+      asideCollection && (
+        <div styleName="grid-col-9-14">
+          <AsideCollection
+            {...asideCollection}
+            widgetComp={widgetComp}
+            adComponent={adComponent}
+            sticky={true}
+            story={story}
+            opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
+          />
+        </div>
+      )
+    );
+  };
+
+  const CachedHeadlinePrioritySideColumn = useCallback(HeadlinePrioritySideColumn, [
+    templateType,
+    asideCollection?.slots
+  ]);
+
+  const headlinePriority = () => {
+    return (
+      <>
+        <div styleName="grid-col-2-9 side-space index-2">
+          <div styleName="grid-container side-space">
+            <HeaderCard />
+          </div>
+          <HeroImage
+            widths={heroImageWidths}
+            sizes={photoStoryImgSize?.[imageRender]?.[templateType]}
+            story={story}
+            aspectRatio={[[16, 9]]}
+            defaultFallback={false}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <div styleName="grid-col-2-9 side-space">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        <CachedHeadlinePrioritySideColumn />
+      </>
+    );
+  };
+
+  const getStoryTemplate = (templateType) => {
+    switch (templateType) {
+      case "hero-priority-center":
+        return heroPriority();
+      case "headline-priority":
+        return headlinePriority();
+      default:
+        return defaultTemplate();
+    }
+  };
+
+  const stickyStyle = socialShareStyle === "sticky" ? "sticky" : "";
+  return (
+    <div
+      styleName={`${isFullBleed ? "fullBleed" : ""} ${stickyStyle} ${
+        templateType !== "headline-priority" && !isFullBleed ? "container" : ""
+      }`}
+      data-test-id={`photo-story-${templateType}-${kebabCase(imageRender)}`}
+      className={`arrow-component arr-story-grid arr--content-wrapper arr--photo-story-template-wrapper ${templateType} `}
+      style={{ backgroundColor: theme || "initial" }}>
+      {getStoryTemplate(templateType)}
+    </div>
+  );
+};
+
+PhotoStory.propTypes = {
+  storyAccess: PropTypes.object,
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    asideCollection: PropTypes.object
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined,
+  meteringIndicator: PropTypes.node | undefined,
+  isPbStoryView: PropTypes.bool | undefined
+};
+
+export default StateProvider(PhotoStory);

package/src/components/Rows/StoryTemplates/PhotoStoryTemplates/photo-story.test.js

@@ -0,0 +1,144 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { generateStory, generateCollection, generateStore } from "../../../Fixture";
+import PhotoStory from "./index";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { Provider } from "react-redux";
+import { mockIntersectionObserver } from "../../../../utils/testing-utils";
+
+const story = generateStory("photo-story");
+const collection = generateCollection({ stories: 4 });
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+const child = <div>children</div>;
+
+const storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+
+const templateConfig = {
+  theme: "#ffffff",
+  noOfVisibleCards: -1,
+  publishedDetails: {
+    enablePublishedTime: true,
+    enableUpdatedTime: false,
+    showReadTime: true
+  },
+  asideCollection: {
+    data: collection,
+    config: {
+      collectionNameBorderColor: "#3a9fdd",
+      title: "Trending",
+      theme: "#ffffff",
+      adSlot: [{ type: "ad", component: configurableSlot }]
+    }
+  }
+};
+
+beforeEach(() => {
+  mockIntersectionObserver();
+});
+
+describe("photo Story Templates", () => {
+  it("Should render photo story template with image full-bleed", () => {
+    const config = Object.assign({ imageRender: "fullBleed" }, templateConfig);
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "hero-image" }).prop("className")).toMatch(/grid-col-full/);
+  });
+  it("Should render photo story template with image with in container", () => {
+    const config = Object.assign({ imageRender: "container" }, templateConfig);
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "hero-image" }).prop("className")).toMatch(/grid-containe/);
+  });
+
+  it("Should render hero priority center align template", () => {
+    const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "photo-story-hero-priority-center-container" }).prop("className")).toMatch(
+      /hero-priority-center/
+    );
+  });
+
+  it("Should render hero priority left align template", () => {
+    const config = { ...templateConfig, templateType: "default", imageRender: "container" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "photo-story-default-container" }).prop("className")).toMatch(/default/);
+  });
+
+  it("Should render headline priority template", () => {
+    const config = { ...templateConfig, templateType: "headline-priority", imageRender: "container" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "photo-story-headline-priority-container" }).prop("className")).toMatch(
+      /headline-priority/
+    );
+  });
+});