Revamped views (#282)

First pass at revamping our purchase flow. Keep in mind this PR goes against a branch `fon/new-sdk-views`. I'd love feedback on what we have until now
RevenueCat · Feb 3, 2025 · e31050d · e31050d
1 parent ef99bd6
commit e31050d
Show file tree

Hide file tree

Showing 93 changed files with 2,744 additions and 2,828 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -9,7 +9,7 @@ const config: StorybookConfig = {
     {
       name: "@storybook/addon-svelte-csf",
       options: {
-        legacyTemplate: true,
+        legacyTemplate: false,
       },
     },
   ],

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -2,13 +2,32 @@ import type { Preview } from "@storybook/svelte";
 
 const preview: Preview = {
   parameters: {
+    layout: "fullscreen",
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: "Mobile",
+          styles: {
+            width: "375px",
+            height: "667px",
+          },
+        },
+        desktop: {
+          name: "Desktop",
+          styles: {
+            width: "1440px",
+            height: "900px",
+          },
+        },
+      },
+    },
   },
 };
 

diff --git a/examples/webbilling-demo/src/App.css b/examples/webbilling-demo/src/App.css
@@ -1,5 +1,18 @@
 :root {
-  font-family: "PP Object Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -45,7 +58,20 @@ body {
 }
 
 button.button {
-  font-family: "PP Object Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
   display: inline-block;
   box-sizing: border-box;
   width: 240px;
@@ -284,7 +310,20 @@ button.button:focus-visible {
   background-color: var(--color-grey-ui-dark);
   border: none;
   outline: none;
-  font-family: "PP Object Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
   font-weight: 500;
   font-size: 12px;
   line-height: 12px;

diff --git a/examples/webbilling-demo/src/tests/main.test.ts b/examples/webbilling-demo/src/tests/main.test.ts
@@ -10,10 +10,6 @@ const RC_PAYWALL_TEST_OFFERING_ID_WITH_VARIABLES =
   "rc_paywalls_e2e_test_variables_2";
 
 test.describe("Main", () => {
-  test.afterEach(({ browser }) => {
-    browser.close();
-  });
-
   test("Get offerings displays packages", async ({ browser, browserName }) => {
     const userId = getUserId(browserName);
     const page = await setupTest(browser, userId);
@@ -210,11 +206,11 @@ test.describe("Main", () => {
   });
 
   [
-    ["es", "Email de facturación"],
-    ["it", "Indirizzo email per la fatturazione"],
-    ["en", "Billing email address"],
-    ["fr", "Adresse e-mail de facturation"],
-    ["de", "E-Mail-Adresse für Rechnungsstellung"],
+    ["es", "¿Cuál es tu correo electrónico?"],
+    ["it", "Qual è la tua email?"],
+    ["en", "What's your email?"],
+    ["fr", "Quelle est votre adresse e-mail?"],
+    ["de", "Wie lautet Ihre E-Mail-Adresse?"],
   ].forEach(([lang, title]) => {
     test(`Shows the purchase flow in ${lang}`, async ({
       browser,
@@ -234,11 +230,11 @@ test.describe("Main", () => {
   });
 
   [
-    ["es", "Email de facturación"],
-    ["it", "Indirizzo email per la fatturazione"],
-    ["en", "Billing email address"],
-    ["fr", "Adresse e-mail de facturation"],
-    ["de", "E-Mail-Adresse für Rechnungsstellung"],
+    ["es", "¿Cuál es tu correo electrónico?"],
+    ["it", "Qual è la tua email?"],
+    ["en", "What's your email?"],
+    ["fr", "Quelle est votre adresse e-mail?"],
+    ["de", "Wie lautet Ihre E-Mail-Adresse?"],
   ].forEach(([lang, title]) => {
     test(`Shows the purchase flow in ${lang} when purchasing from paywalls`, async ({
       browser,
@@ -284,9 +280,8 @@ async function performPurchase(page: Page, card: Locator, userId: string) {
 
   await enterEmailAndContinue(page, userId);
   await enterCreditCardDetailsAndContinue(page);
-
   // Confirm success page has shown.
-  const successText = page.getByText("Purchase successful");
+  const successText = page.getByText("Payment complete");
   await expect(successText).toBeVisible({ timeout: 10000 });
 }
 
@@ -379,7 +374,7 @@ async function navigateToUrl(
 
 async function typeTextInPageSelector(page: Page, text: string): Promise<void> {
   // Fill email
-  const emailTitle = page.getByText("Billing email address");
+  const emailTitle = page.getByText("What's your email?");
   await expect(emailTitle).toBeVisible();
   await page.getByPlaceholder("[email protected]").click();
   await page.getByPlaceholder("[email protected]").fill(text);