Paywall use case redesign INTER-157

e2e/paywall.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+import { reset } from './admin';
+import { TEST_IDS } from '../src/client/e2eTestIDs';
+
+test.describe('Paywall', () => {
+  test.beforeEach(async ({ page, context }) => {
+    await reset(context);
+    await page.goto('/paywall');
+  });
+
+  test('Should show two articles, then show a paywall', async ({ page }) => {
+    const articles = await page.getByTestId(TEST_IDS.paywall.articleCard);
+
+    await articles.first().click();
+    await page.getByText('You have 1 remaining free article views.').waitFor();
+    await expect(page.getByTestId(TEST_IDS.paywall.articleContent)).toBeVisible();
+    await page.goBack();
+
+    await articles.nth(1).click();
+    await page.getByText('This is your last free article today.').waitFor();
+    await expect(page.getByTestId(TEST_IDS.paywall.articleContent)).toBeVisible();
+    await page.goBack();
+
+    await articles.nth(2).click();
+    await expect(
+      page.getByText(
+        'You have reached your daily view limit, purchase our membership plan to view unlimited articles.',
+      ),
+    ).toBeVisible();
+    await expect(page.getByTestId(TEST_IDS.paywall.articleContent)).toBeHidden();
+  });
+});

package.json

@@ -47,7 +47,7 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.30.0",
+    "@playwright/test": "^1.39.0",
     "@types/leaflet": "^1.9.3",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",

src/client/components/paywall/ArticleGrid.tsx

@@ -0,0 +1,77 @@
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import { FunctionComponent } from 'react';
+import { ArticleData } from '../../../server/paywall/articles';
+import { TEST_IDS } from '../../e2eTestIDs';
+import Image from 'next/image';
+import styles from './articleGrid.module.scss';
+import BylineDot from './dot.svg';
+
+function calculateReadingTime(text: string[], wordsPerMinute = 200) {
+  const words = text
+    .join('')
+    .split(/\s+/)
+    .filter((word) => word.length > 0);
+  const readingTimeMins = Math.round(words.length / wordsPerMinute);
+  return `${Math.max(readingTimeMins, 1)} min read`;
+}
+
+export const Byline = ({ article, includeReadingTime }: { article: ArticleData; includeReadingTime?: boolean }) => (
+  <div className={styles.byline}>
+    <Image src={article.author.avatar} className={styles.authorImage} alt={`Picture of ${article.author.name}`} />
+    <div>{article.author.name}</div>
+    <Image src={BylineDot} alt="" />
+    <div>{article.date}</div>
+    {includeReadingTime && (
+      <>
+        <Image src={BylineDot} alt="" />
+        <div>{calculateReadingTime(article.content)}</div>
+      </>
+    )}
+  </div>
+);
+
+/**
+ * Article Card and Grid
+ */
+type ArticleCardProps = {
+  article: ArticleData;
+  embed?: boolean;
+  isHeroArticle?: boolean;
+};
+
+export const ArticleCard: FunctionComponent<ArticleCardProps> = ({ article, embed, isHeroArticle }) => {
+  const link = `/paywall/article/${article.id}${embed ? '/embed' : ''}`;
+  const router = useRouter();
+  return (
+    <div
+      className={classNames(styles.articleCard, isHeroArticle && styles.heroArticleCard)}
+      onClick={() => router.push(link)}
+      data-test={TEST_IDS.paywall.articleCard}
+    >
+      <Image src={article.image} alt="" className={styles.articleCardImage} sizes="100vw" />
+      <div className={styles.articleCardContent}>
+        <Byline article={article} />
+        <a href={link} key={article.id} className={styles.articleCardTitle}>
+          {article.title}
+        </a>
+        <p className={styles.articleCardDescription}>{article.description}</p>
+        <div className={styles.articleCardTags}>
+          {article.tags.map((tag) => (
+            <div key={tag}>{tag}</div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ArticleGrid: FunctionComponent<{ articles: ArticleData[]; embed?: boolean }> = ({ articles, embed }) => {
+  return (
+    <div className={styles.articles}>
+      {articles.map((article) => (
+        <ArticleCard key={article.id} article={article} embed={embed} />
+      ))}
+    </div>
+  );
+};

src/client/components/paywall/articleGrid.module.scss

@@ -0,0 +1,178 @@
+/**
+ * Article listing
+ */
+
+.articles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
+  gap: rem(24px);
+  margin: 0 auto;
+
+  @include media('<=phoneLandscape') {
+    row-gap: rem(24px);
+  }
+
+  @include media('<=phone') {
+    grid-template-columns: auto;
+  }
+}
+
+.articleCard {
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  border: 1px solid v('gray-box-stroke');
+  cursor: pointer;
+  overflow: hidden;
+  @include transition((box-shadow, border));
+
+  &:hover {
+    @include shadowLarge();
+  }
+}
+
+.articleCardImage {
+  width: 100%;
+  height: auto;
+  margin-bottom: rem(8px);
+  background-color: #fff8f6;
+}
+
+.articleCardContent {
+  padding: rem(16px);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.byline {
+  display: flex;
+  gap: rem(6px);
+  align-items: center;
+  margin-bottom: rem(16px);
+  flex-wrap: wrap;
+
+  color: v('dark-gray');
+  font-size: rem(14px);
+  font-style: normal;
+  line-height: 160%;
+  letter-spacing: 0.14px;
+
+  @include media('<=phoneLandscape') {
+    margin-bottom: rem(12px);
+    font-size: rem(12px);
+  }
+}
+
+.articleCardTitle {
+  color: v('dark-gray');
+  font-size: rem(20px);
+  font-weight: 600;
+  line-height: 140%;
+
+  @include media('<=phoneLandscape') {
+    font-size: rem(16px);
+  }
+}
+
+.articleCardDescription {
+  color: v('dark-gray');
+  font-size: rem(14px);
+  line-height: 160%;
+  letter-spacing: 0.14px;
+  flex-grow: 1;
+  margin: 0;
+  margin-top: rem(8px);
+
+  @include media('<=phoneLandscape') {
+    margin-top: rem(4px);
+  }
+}
+
+.authorImage {
+  height: rem(20px);
+  width: rem(20px);
+  border-radius: 50%;
+  object-fit: contain;
+}
+
+.articleCardTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: rem(8px);
+  margin-top: rem(32px);
+
+  @include media('<=phoneLandscape') {
+    margin-top: rem(24px);
+  }
+
+  div {
+    display: flex;
+    padding: rem(4px) rem(10px) rem(5px) rem(10px);
+    justify-content: center;
+    align-items: center;
+    border-radius: rem(16px);
+    background: v('gray-box-stroke');
+    color: v('dark-black');
+    text-align: center;
+    font-size: rem(14px);
+    line-height: 150%;
+
+    @include media('<=phoneLandscape') {
+      font-size: rem(12px);
+    }
+  }
+}
+
+.heroArticleCard {
+  margin-bottom: rem(64px);
+  border: none;
+
+  &:hover {
+    box-shadow: none;
+  }
+
+  .articleCardTitle {
+    font-size: rem(34px);
+  }
+
+  .articleCardImage {
+    border-radius: 4px;
+    border: 1px solid v('gray-box-stroke');
+    margin-bottom: 0;
+  }
+
+  .articleCardTags {
+    margin-top: rem(16px);
+  }
+
+  .articleCardContent {
+    padding: 0;
+    padding-top: rem(16px);
+  }
+
+  .articleCardDescription {
+    font-size: rem(16px);
+  }
+
+  @include media('>=phoneLandscape') {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: rem(96px);
+    column-gap: rem(32px);
+    align-items: stretch;
+
+    .byline {
+      margin-bottom: rem(8px);
+    }
+
+    .articleCardContent {
+      padding-top: 0;
+    }
+
+    .articleCardTitle {
+      font-size: 48px;
+      line-height: 130%;
+    }
+  }
+}

src/client/e2eTestIDs.ts

@@ -5,4 +5,9 @@ export const TEST_IDS = {
   loanRisk: {
     monthlyInstallmentValue: 'monthlyInstallmentValue',
   },
+  paywall: {
+    articleCard: 'articleCard',
+    articleContent: 'articleContent',
+    goBack: 'goBack',
+  },
 } as const;