Create error page (#434)

clients/payment/src/locales/en.json

@@ -8,6 +8,8 @@
   "paymentLink.button.returnToWebsite": "Return to website",
   "paymentLink.city": "City",
   "paymentLink.country": "Country",
+  "paymentLink.error.title": "Something went wrong",
+  "paymentLink.error.subtitle": "We couldn't set up your Direct Debit with Swan.\n Please try again or contact the support system.",
   "paymentLink.name": "Name",
   "paymentLink.iban": "IBAN",
   "paymentLink.paymentMethod": "Payment method",

clients/payment/src/pages/ErrorPage.tsx

@@ -0,0 +1,61 @@
+import { BorderedIcon } from "@swan-io/lake/src/components/BorderedIcon";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { SwanLogo } from "@swan-io/lake/src/components/SwanLogo";
+import { colors, spacings } from "@swan-io/lake/src/constants/design";
+import { StyleSheet } from "react-native";
+import { t } from "../utils/i18n";
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingVertical: spacings[40],
+  },
+  containerItems: {
+    width: "100%",
+  },
+  swanLogo: {
+    display: "inline-flex",
+    height: 9,
+    width: 45 * (9 / 10),
+  },
+  title: {
+    paddingBottom: spacings[4],
+  },
+  subtitle: {
+    lineHeight: 24,
+  },
+});
+
+export const ErrorPage = () => {
+  return (
+    <Box
+      direction="column"
+      alignItems="center"
+      justifyContent="spaceBetween"
+      style={styles.container}
+    >
+      <SwanLogo />
+
+      <Box direction="column" alignItems="center" style={styles.containerItems}>
+        <BorderedIcon name={"lake-warning"} color="negative" size={70} padding={16} />
+        <Space height={24} />
+
+        <LakeText variant="semibold" color={colors.gray[900]} style={styles.title}>
+          {t("paymentLink.error.title")}
+        </LakeText>
+
+        <LakeText align="center" color={colors.gray[500]} style={styles.subtitle}>
+          {t("paymentLink.error.subtitle")}
+        </LakeText>
+      </Box>
+
+      <Box direction="row" alignItems="baseline">
+        <LakeText>{t("paymentLink.poweredBySwan")}</LakeText>
+        <Space width={4} />
+        <SwanLogo color={colors.swan[500]} style={styles.swanLogo} />
+      </Box>
+    </Box>
+  );
+};

clients/payment/src/pages/SuccessPage.tsx

@@ -47,7 +47,7 @@ export const SuccessPage = () => {
       <SwanLogo />
 
       <Box direction="column" alignItems="center" style={styles.containerItems}>
-        <BorderedIcon name={"checkmark-filled"} color="positive" size={70} />
+        <BorderedIcon name={"lake-check"} color="positive" size={70} padding={16} />
         <Space height={24} />
 
         <LakeText variant="semibold" color={colors.gray[900]} style={styles.title}>

clients/payment/src/utils/logger.ts

@@ -20,8 +20,8 @@ export const initSentry = () => {
       environment: env.CLIENT_PAYMENT_URL.includes("preprod")
         ? "preprod"
         : env.CLIENT_PAYMENT_URL.includes("master")
-        ? "master"
-        : "prod",
+          ? "master"
+          : "prod",
       normalizeDepth: 5,
     });
   }

clients/payment/src/utils/routes.ts

@@ -3,4 +3,5 @@ import { createRouter } from "@swan-io/chicane";
 export const Router = createRouter({
   PaymentLink: "/payment",
   Success: "/payment/success",
+  Error: "/payment/error",
 });

types/env/index.d.ts

@@ -5,6 +5,7 @@ declare const __env: {
   SWAN_ENVIRONMENT: "SANDBOX" | "LIVE";
   ACCOUNT_MEMBERSHIP_INVITATION_MODE: "LINK" | "EMAIL";
   BANKING_URL: string;
+  PAYMENT_URL: string;
   IS_SWAN_MODE: boolean;
   // Client
   CLIENT_PLACEKIT_API_KEY: string;