feat(@web3-storage/website): add /account/payment page in website (#1744

)

* feat(@web3-storage/website): stub /account/payment page in website

* website: account/payment page has redirectTo='/login/'

* add .parserOptions.{project,tsconfigRootDir} to packages/website/.eslintrc.js

* test(website): add accountPayment.e2e test ensuring GET /account/payment with noauth redirects to /login/

packages/website/.eslintrc.js

@@ -19,6 +19,8 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 9, // Allows for the parsing of modern ECMAScript features
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
     sourceType: 'module', // Allows for the use of imports
   },
   plugins: ['jsx-a11y', 'prettier', '@typescript-eslint', 'cypress'],
@@ -37,6 +39,7 @@ module.exports = {
       version: 'detect',
     },
   },
+  ignorePatterns: [".eslintrc.js"],
   rules: {
     '@typescript-eslint/no-inferrable-types': 2,
     '@typescript-eslint/explicit-function-return-type': 0,

packages/website/pages/_app.js

@@ -15,7 +15,7 @@ import Footer from '../components/footer/footer.js';
  */
 const App = ({ Component, pageProps }) => {
   const { pathname } = useRouter();
-  const productRoutes = ['/login', '/account', '/tokens', '/callback'];
+  const productRoutes = ['/login', '/account', '/account/payment', '/tokens', '/callback'];
   const productApp = productRoutes.includes(pathname);
   const pageClass = pathname.includes('docs') ? 'docs-site' : productApp ? 'product-app' : 'marketing-site';
 

packages/website/pages/account/payment.js

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Account Payment Settings
+ */
+
+import AccountPageData from '../../content/pages/app/account.json';
+
+const PaymentSettingsPage = props => {
+  const { dashboard } = AccountPageData.page_content;
+  return (
+    <>
+      <>
+        <div className="page-container account-container">
+          <h1 className="table-heading">{dashboard.heading}</h1>
+          <div className="account-content">{props.title}</div>
+        </div>
+      </>
+    </>
+  );
+};
+
+/**
+ * @returns {{ props: import('components/types').PageProps}}
+ */
+export function getStaticProps() {
+  return {
+    props: {
+      title: AccountPageData.seo.title,
+      isRestricted: true,
+      redirectTo: '/login/',
+    },
+  };
+}
+
+export default PaymentSettingsPage;

packages/website/tests/accountPayment.e2e.spec.ts

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test';
+
+import { E2EScreenshotPath } from './screenshots';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('/account/payment', () => {
+  test('redirects to /login/ when not authenticated', async ({ page }, testInfo) => {
+    await Promise.all([
+      page.waitForNavigation({
+        waitUntil: 'networkidle',
+      }),
+      page.goto('/account/payment'),
+    ]);
+    await expect(page).toHaveURL('/login/');
+    await page.screenshot({
+      fullPage: true,
+      path: await E2EScreenshotPath(testInfo, `accountPayment-noauth`),
+    });
+  });
+});

packages/website/tests/homepage.e2e.spec.ts

@@ -1,6 +1,6 @@
-import { test, expect, Page, TestInfo } from '@playwright/test';
-import * as fs from 'fs';
-import { extname } from 'path';
+import { test } from '@playwright/test';
+
+import { E2EScreenshotPath } from './screenshots.js';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -14,18 +14,3 @@ test.describe('homepage', () => {
     });
   });
 });
-
-/**
- * Given a screenshot name, return an absolute path to a good place to store it.
- * The resulting path will be to a '.png' file unless 'name' already has an extname.
- * @param testInfo - @playwright/test TestInfo
- * @param name - logical name of screenshot
- * @returns absolute path to a good place to store a screenshot
- */
-async function E2EScreenshotPath(testInfo: Pick<TestInfo, 'outputPath'>, name: string) {
-  if (!extname(name)) {
-    name = `${name}.png`;
-  }
-  const path = testInfo.outputPath(name);
-  return path;
-}

packages/website/tests/screenshots.ts

@@ -0,0 +1,18 @@
+import { extname } from 'path';
+
+import type { TestInfo } from '@playwright/test';
+
+/**
+ * Given a screenshot name, return an absolute path to a good place to store it.
+ * The resulting path will be to a '.png' file unless 'name' already has an extname.
+ * @param testInfo - @playwright/test TestInfo
+ * @param name - logical name of screenshot
+ * @returns absolute path to a good place to store a screenshot
+ */
+export async function E2EScreenshotPath(testInfo: Pick<TestInfo, 'outputPath'>, name: string) {
+  if (!extname(name)) {
+    name = `${name}.png`;
+  }
+  const path = testInfo.outputPath(name);
+  return path;
+}

packages/website/tsconfig.json

@@ -26,7 +26,7 @@
     },
     "incremental": true
   },
-  "include": ["lib", "pages", "components", "content", "hooks", "modules", "store", "declaration.d.ts"],
+  "include": ["lib", "pages", "components", "content", "hooks", "modules", "store", "declaration.d.ts", "tests"],
   "exclude": ["node_modules", "public", ".next/", "{pages,components,content,hooks,modules}/**/*.js", "lib/countly.js"],
   "references": [
     {