Create payment page

.env.e2e.example

@@ -17,6 +17,7 @@ COOKIE_KEY="" # Your cookie key
 # URLs to expose your interfaces on
 BANKING_URL="http://banking.swan.localhost:8080"
 ONBOARDING_URL="http://onboarding.swan.localhost:8080"
+PAYMENT_URL="https://payment.swan.localhost:8080"
 
 # Extra keys for the client
 CLIENT_PLACEKIT_API_KEY="" # Your placekit API key

.env.example

@@ -17,6 +17,7 @@ COOKIE_KEY="" # Your cookie key
 # URLs to expose your interfaces on
 BANKING_URL="https://banking.swan.local:8080"
 ONBOARDING_URL="https://onboarding.swan.local:8080"
+PAYMENT_URL="https://payment.swan.local:8080"
 
 # Extra keys for the client
 CLIENT_PLACEKIT_API_KEY="" # Your placekit API key

.github/workflows/e2e-tests-release.yml

@@ -36,6 +36,7 @@ jobs:
           echo "BANKING_URL=http://banking.swan.localhost:8080" >> .env.e2e
           echo "ONBOARDING_URL=http://onboarding.swan.localhost:8080" >> .env.e2e
           echo "CLIENT_PLACEKIT_API_KEY=${{ secrets.CLIENT_PLACEKIT_API_KEY }}" >> .env.e2e
+          echo "PAYMENT_URL=http://payment.swan.localhost:8080" >> .env.e2e
           echo "TEST_KEY=${{ secrets.E2E_TEST_KEY }}" >> .env.e2e
           echo "PHONE_NUMBER=${{ secrets.E2E_PHONE_NUMBER }}" >> .env.e2e
           echo "PASSCODE=${{ secrets.E2E_PASSCODE }}" >> .env.e2e

.github/workflows/e2e-tests.yml

@@ -37,6 +37,7 @@ jobs:
           echo "BANKING_URL=http://banking.swan.localhost:8080" >> .env.e2e
           echo "ONBOARDING_URL=http://onboarding.swan.localhost:8080" >> .env.e2e
           echo "CLIENT_PLACEKIT_API_KEY=${{ secrets.CLIENT_PLACEKIT_API_KEY }}" >> .env.e2e
+          echo "PAYMENT_URL=http://payment.swan.localhost:8080" >> .env.e2e
           echo "TEST_KEY=${{ secrets.E2E_TEST_KEY }}" >> .env.e2e
           echo "PHONE_NUMBER=${{ secrets.E2E_PHONE_NUMBER }}" >> .env.e2e
           echo "PASSCODE=${{ secrets.E2E_PASSCODE }}" >> .env.e2e

README.md

@@ -29,6 +29,7 @@ Add the following to your `/etc/hosts` file (so that we're able to replicate the
 ```
 127.0.0.1 banking.swan.local
 127.0.0.1 onboarding.swan.local
+127.0.0.1 payment.swan.local
 ```
 
 ### 3. HTTPS

clients/payment/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# local builds
+/build-*
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+public/env-config.js

clients/payment/.yarnrc

@@ -0,0 +1 @@
+save-exact true

clients/payment/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@swan-io/payment",
+  "version": "1.4.1",
+  "private": true,
+  "engines": {
+    "node": ">=18.0.0",
+    "yarn": "^1.22.0"
+  },
+  "scripts": {
+    "prepack": "tsc --build",
+    "clean": "tsc --clean"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not op_mini all",
+    "not dead",
+    "not ie <= 11",
+    "safari >= 12"
+  ],
+  "dependencies": {
+    "@0no-co/graphql.web": "1.0.4",
+    "@formatjs/intl": "2.9.9",
+    "@juggle/resize-observer": "3.4.0",
+    "@sentry/react": "7.85.0",
+    "@swan-io/boxed": "1.2.0",
+    "@swan-io/chicane": "1.4.1",
+    "@swan-io/lake": "4.0.4",
+    "@swan-io/shared-business": "4.0.4",
+    "core-js": "3.33.3",
+    "dayjs": "1.11.10",
+    "iban": "0.0.14",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native-web": "0.19.9",
+    "react-ux-form": "1.5.0",
+    "ts-pattern": "5.0.6",
+    "urql": "4.0.6",
+    "wonka": "6.3.4"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.42",
+    "@types/react-dom": "18.2.17",
+    "@types/react-native": "0.72.8",
+    "@vitejs/plugin-legacy": "5.2.0",
+    "@vitejs/plugin-react-swc": "3.5.0",
+    "jsdom": "22.1.0",
+    "type-fest": "4.8.3",
+    "vite": "5.0.5",
+    "vitest": "1.0.1"
+  }
+}

clients/payment/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: /

clients/payment/src/App.tsx

@@ -0,0 +1,35 @@
+import { ErrorBoundary } from "@swan-io/lake/src/components/ErrorBoundary";
+import { LoadingView } from "@swan-io/lake/src/components/LoadingView";
+import { colors } from "@swan-io/lake/src/constants/design";
+import { Suspense } from "react";
+import { P, match } from "ts-pattern";
+import { Provider as ClientProvider } from "urql";
+import { ErrorView } from "./components/ErrorView";
+import { NotFoundPage } from "./pages/NotFoundPage";
+import { PaymentPage } from "./pages/PaymentPage";
+import { SuccessPage } from "./pages/SuccessPage";
+import { logFrontendError } from "./utils/logger";
+import { Router } from "./utils/routes";
+import { unauthenticatedClient } from "./utils/urql";
+
+export const App = () => {
+  const route = Router.useRoute(["Success", "PaymentLink"]);
+
+  return (
+    <ErrorBoundary
+      key={route?.name}
+      onError={error => logFrontendError(error)}
+      fallback={({ error }) => <ErrorView error={error} />}
+    >
+      <Suspense fallback={<LoadingView color={colors.gray[100]} />}>
+        <ClientProvider value={unauthenticatedClient}>
+          {match(route)
+            .with({ name: "PaymentLink" }, () => <PaymentPage />)
+            .with({ name: "Success" }, () => <SuccessPage />)
+            .with(P.nullish, () => <NotFoundPage />)
+            .exhaustive()}
+        </ClientProvider>
+      </Suspense>
+    </ErrorBoundary>
+  );
+};

clients/payment/src/components/ErrorView.tsx

@@ -0,0 +1,56 @@
+import { Heading } from "@swan-io/lake/src/components/Heading";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { G, Path, Svg } from "@swan-io/lake/src/components/Svg";
+import { colors } from "@swan-io/lake/src/constants/design";
+import { typography } from "@swan-io/lake/src/constants/typography";
+import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
+import { translateError } from "@swan-io/shared-business/src/utils/i18n";
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native";
+import { isCombinedError } from "../utils/urql";
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: "center",
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: "center",
+  },
+  icon: {
+    height: 96,
+    width: 96,
+  },
+  requestIdText: {
+    ...typography.bodySmall,
+    color: colors.gray[600],
+  },
+});
+
+type Props = {
+  error?: Error;
+  style?: StyleProp<ViewStyle>;
+};
+
+//TODO: check if this component is consistent with the actual needs
+export const ErrorView = ({ error, style }: Props) => (
+  <View style={[styles.base, style]}>
+    <Svg viewBox="0 0 96 96" style={styles.icon}>
+      <G fill="#898C8C">
+        <Path d="M89.704 28.517C87.092 12.267 69.114.014 47.879.005c-.01 0-.018-.005-.028-.005-.016 0-.03.003-.043.005-7.86.007-15.525 1.69-22.166 4.871a.972.972 0 00.837 1.753c5.26-2.52 11.199-4.044 17.363-4.512-10.386 6.292-16.734 14.542-19.304 25.071 0 .005-.002.01-.003.013-7.23-4.07-13.18-2.145-16.155-.564 1.812-7.034 6.79-13.326 14.222-17.898a.97.97 0 00.319-1.336.967.967 0 00-1.335-.319c-8.697 5.35-14.231 12.973-15.584 21.467-.004.026.002.051 0 .078a1.027 1.027 0 00.04.35c.01.034.016.067.03.1a.963.963 0 00.186.293l20.534 21.453c-.323 1.32.234 2.849 1.56 3.649l10.599 6.353c.553.33.893.932.893 1.573v25.848c0 1.05.825 1.904 1.863 1.953h12.287a1.954 1.954 0 001.864-1.953V67.121a.974.974 0 00-.97-.971.968.968 0 00-.971.971v3.497H41.785V62.4a3.813 3.813 0 00-1.835-3.234l-10.598-6.353a1.456 1.456 0 01-.456-2.06c.417-.63 1.33-.825 1.97-.427l10.19 6.353a4.15 4.15 0 001.932.612l1.398.087a1.9 1.9 0 001.359-.495c.359-.34.572-.826.572-1.33v-.079a5.93 5.93 0 003.077.059v.02c0 1.085.914 1.884 1.931 1.825l1.388-.087a4.077 4.077 0 001.922-.612l10.21-6.353c.377-.232 1.393-.461 1.9.18.509.641.332 1.132.284 1.374-.088.389-.33.72-.68.933l-10.598 6.353a3.795 3.795 0 00-1.834 3.244v1.739c0 .534.427.971.97.971.534 0 .97-.437.97-.971v-1.74c0-.65.34-1.252.894-1.582l10.598-6.353a3.337 3.337 0 001.572-2.176 3.291 3.291 0 00-.29-2.272l19.545-19.42 1.253-1.245c.01-.01.014-.025.024-.036a.967.967 0 00.19-.284c.042-.106.06-.214.066-.325 0-.032 0-.164-.005-.2zM53.917 88.248c0 .01 0 .01-.01.01h-5.085V72.56h5.095v15.687zM46.88 72.561v15.687h-5.096V72.561h5.096zm40.533-45.59c-6.388-2.77-12.222-2.69-17.384.229l-.002-.012C67.32 16.69 61.238 8.435 51.516 2.074 69.377 3.309 84.141 13.49 87.414 26.97zm-38.537-.4c-.018.012-.038.022-.056.035V2.67c9.842 5.974 16.072 13.764 18.984 23.72a7.2 7.2 0 00-.369-.213c-5.967-3.41-13.336-3.394-18.56.392zM46.88 2.593V26.81c-.053-.034-.11-.062-.164-.095-5.69-3.477-14.287-3.612-19.975-.275 2.815-10.082 9.434-17.911 20.14-23.846zm-14.985 46.09a3.399 3.399 0 00-4.096.38l-.003.003L8.436 28.84c2.178-1.39 8.295-4.283 16.017.56l11.712 21.945-4.27-2.661zm12.481 6.742l-1.271-.068a2.11 2.11 0 01-1.02-.33l-2.624-1.63-13.032-24.415c5.406-4.026 14.897-4.01 20.354.139.032.024.065.047.097.072v5.96c-4.377.534-7.454 4.332-7.454 9.422 0 4.274 2.077 8.179 4.95 10.014v.836zm1.097-2.429c-2.34-1.457-4.106-4.818-4.106-8.421 0-3.944 2.262-6.916 5.513-7.45a6.198 6.198 0 011.941-.039c3.378.427 5.746 3.448 5.746 7.489 0 3.603-1.767 6.974-4.115 8.431-1.575.985-3.317 1.038-4.98-.01zm7.124 2.36l-1.262.069v-.69c2.99-1.777 5.173-5.77 5.173-10.16 0-5.178-3.183-9.014-7.687-9.452v-5.977c.103-.097.208-.189.314-.281 5.201-4.563 13.145-4.096 18.764-.071.086.061.17.128.256.191L54.527 54.274c-.04.073-.05.152-.07.229l-.016.01-.825.515c-.31.194-.66.31-1.02.33zm11.22-6.672l-6.125 3.808L70.137 29.4c4.99-3.214 10.548-3.367 16.95-.45l-19.8 19.673a3.351 3.351 0 00-3.47.06z" />
+        <Path d="M46.297 89.867v4.001c0 .936-.883 1.68-1.98 1.68-1.098 0-1.993-.744-1.993-1.68v-4h3.973zm5.398 5.681c-1.097 0-1.992-.744-1.992-1.68v-4h3.973v4c0 .936-.883 1.68-1.98 1.68z" />
+      </G>
+    </Svg>
+
+    <Space height={20} />
+
+    <Heading level={1} size={20} align="center">
+      {translateError(error)}
+    </Heading>
+
+    {isCombinedError(error) && isNotNullish(error.requestId) ? (
+      <>
+        <Space height={4} />
+        <Text style={styles.requestIdText}>ID: {error.requestId}</Text>
+      </>
+    ) : null}
+  </View>
+);