From 59543386296a6e17a6ad16b06b13fee02c23e408 Mon Sep 17 00:00:00 2001
From: Juraj Uhlar <juro.uhlar@gmail.com>
Date: Thu, 19 Sep 2024 15:35:31 +0100
Subject: [PATCH 1/5] chore: move loan risk client code to `app`

---
 .../index.tsx => app/loan-risk/LoanRisk.tsx}        |  8 ++++----
 src/app/loan-risk/embed/page.tsx                    |  9 +++++++++
 src/{pages => app}/loan-risk/loanRisk.module.scss   |  0
 src/app/loan-risk/page.tsx                          |  9 +++++++++
 src/pages/loan-risk/embed.tsx                       | 13 -------------
 5 files changed, 22 insertions(+), 17 deletions(-)
 rename src/{pages/loan-risk/index.tsx => app/loan-risk/LoanRisk.tsx} (97%)
 create mode 100644 src/app/loan-risk/embed/page.tsx
 rename src/{pages => app}/loan-risk/loanRisk.module.scss (100%)
 create mode 100644 src/app/loan-risk/page.tsx
 delete mode 100644 src/pages/loan-risk/embed.tsx

diff --git a/src/pages/loan-risk/index.tsx b/src/app/loan-risk/LoanRisk.tsx
similarity index 97%
rename from src/pages/loan-risk/index.tsx
rename to src/app/loan-risk/LoanRisk.tsx
index 151c5afc..43c6f927 100644
--- a/src/pages/loan-risk/index.tsx
+++ b/src/app/loan-risk/LoanRisk.tsx
@@ -1,6 +1,7 @@
+'use client';
+
 import { UseCaseWrapper } from '../../client/components/common/UseCaseWrapper/UseCaseWrapper';
 import { FunctionComponent, useCallback, useMemo, useState } from 'react';
-
 import {
   loanDurationValidation,
   loanValueValidation,
@@ -10,7 +11,6 @@ import { useRequestLoan } from '../../client/api/loan-risk/use-request-loan';
 import { calculateMonthInstallment } from '../../shared/loan-risk/calculate-month-installment';
 import React from 'react';
 import { USE_CASES } from '../../client/components/common/content';
-import { CustomPageProps } from '../_app';
 import Button from '../../client/components/common/Button/Button';
 import { Alert } from '../../client/components/common/Alert/Alert';
 import formStyles from '../../styles/forms.module.scss';
@@ -64,7 +64,7 @@ const SliderField: FunctionComponent<SliderFieldProps> = ({
     </div>
   );
 };
-export default function LoanRisk({ embed }: CustomPageProps) {
+export function LoanRisk() {
   const { getData, isLoading: isVisitorDataLoading } = useVisitorData(
     { ignoreCache: true },
     {
@@ -110,7 +110,7 @@ export default function LoanRisk({ embed }: CustomPageProps) {
   const isLoading = isVisitorDataLoading || loanRequestMutation.isLoading;
 
   return (
-    <UseCaseWrapper useCase={USE_CASES.loanRisk} embed={embed}>
+    <UseCaseWrapper useCase={USE_CASES.loanRisk}>
       <div className={classNames(formStyles.wrapper, styles.formWrapper)}>
         <form onSubmit={handleSubmit} className={formStyles.useCaseForm}>
           <div className={styles.nameWrapper}>
diff --git a/src/app/loan-risk/embed/page.tsx b/src/app/loan-risk/embed/page.tsx
new file mode 100644
index 00000000..f50b538f
--- /dev/null
+++ b/src/app/loan-risk/embed/page.tsx
@@ -0,0 +1,9 @@
+import { USE_CASES } from '../../../client/components/common/content';
+import { generateUseCaseMetadata } from '../../../client/components/common/seo';
+import { LoanRisk } from '../LoanRisk';
+
+export const metadata = generateUseCaseMetadata(USE_CASES.loanRisk);
+
+export default function VpnDetectionPage() {
+  return <LoanRisk />;
+}
diff --git a/src/pages/loan-risk/loanRisk.module.scss b/src/app/loan-risk/loanRisk.module.scss
similarity index 100%
rename from src/pages/loan-risk/loanRisk.module.scss
rename to src/app/loan-risk/loanRisk.module.scss
diff --git a/src/app/loan-risk/page.tsx b/src/app/loan-risk/page.tsx
new file mode 100644
index 00000000..9276e078
--- /dev/null
+++ b/src/app/loan-risk/page.tsx
@@ -0,0 +1,9 @@
+import { USE_CASES } from '../../client/components/common/content';
+import { generateUseCaseMetadata } from '../../client/components/common/seo';
+import { LoanRisk } from './LoanRisk';
+
+export const metadata = generateUseCaseMetadata(USE_CASES.loanRisk);
+
+export default function VpnDetectionPage() {
+  return <LoanRisk />;
+}
diff --git a/src/pages/loan-risk/embed.tsx b/src/pages/loan-risk/embed.tsx
deleted file mode 100644
index 9b51b282..00000000
--- a/src/pages/loan-risk/embed.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { GetStaticProps } from 'next';
-import LoanRisk from './index';
-import { CustomPageProps } from '../_app';
-
-export default LoanRisk;
-
-export const getStaticProps: GetStaticProps<CustomPageProps> = async () => {
-  return {
-    props: {
-      embed: true,
-    },
-  };
-};

From f8f9c523334cb4f1d7a782f77af4ee49b7339585 Mon Sep 17 00:00:00 2001
From: Juraj Uhlar <juro.uhlar@gmail.com>
Date: Thu, 19 Sep 2024 17:48:12 +0100
Subject: [PATCH 2/5] chore: move loan risk server code to `app`

---
 e2e/loan-risk.spec.ts                         |   2 +-
 src/app/loan-risk/LoanRisk.tsx                |  69 +++++++-----
 .../request-loan}/calculate-loan-values.ts    |  10 +-
 .../loan-risk/api/request-loan}/copy.ts       |   0
 .../loan-risk/api/request-loan}/database.ts   |   2 +-
 src/app/loan-risk/api/request-loan/route.ts   |  91 ++++++++++++++++
 src/pages/api/admin/reset.ts                  |   2 +-
 src/pages/api/loan-risk/request-loan.ts       | 103 ------------------
 src/server/loan-risk/loan-risk-endpoint.ts    |  63 -----------
 9 files changed, 146 insertions(+), 196 deletions(-)
 rename src/{server/loan-risk => app/loan-risk/api/request-loan}/calculate-loan-values.ts (70%)
 rename src/{server/loan-risk => app/loan-risk/api/request-loan}/copy.ts (100%)
 rename src/{server/loan-risk => app/loan-risk/api/request-loan}/database.ts (94%)
 create mode 100644 src/app/loan-risk/api/request-loan/route.ts
 delete mode 100644 src/pages/api/loan-risk/request-loan.ts
 delete mode 100644 src/server/loan-risk/loan-risk-endpoint.ts

diff --git a/e2e/loan-risk.spec.ts b/e2e/loan-risk.spec.ts
index 1ae91e8a..4a752b95 100644
--- a/e2e/loan-risk.spec.ts
+++ b/e2e/loan-risk.spec.ts
@@ -1,7 +1,7 @@
 import { Page, expect, test } from '@playwright/test';
 import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
-import { LOAN_RISK_COPY } from '../src/server/loan-risk/copy';
+import { LOAN_RISK_COPY } from '../src/app/loan-risk/api/request-loan/copy';
 
 const testIds = TEST_IDS.loanRisk;
 
diff --git a/src/app/loan-risk/LoanRisk.tsx b/src/app/loan-risk/LoanRisk.tsx
index 43c6f927..edba5d81 100644
--- a/src/app/loan-risk/LoanRisk.tsx
+++ b/src/app/loan-risk/LoanRisk.tsx
@@ -1,13 +1,12 @@
 'use client';
 
 import { UseCaseWrapper } from '../../client/components/common/UseCaseWrapper/UseCaseWrapper';
-import { FunctionComponent, useCallback, useMemo, useState } from 'react';
+import { FunctionComponent, useMemo, useState } from 'react';
 import {
   loanDurationValidation,
   loanValueValidation,
   monthlyIncomeValidation,
 } from '../../client/loan-risk/validation';
-import { useRequestLoan } from '../../client/api/loan-risk/use-request-loan';
 import { calculateMonthInstallment } from '../../shared/loan-risk/calculate-month-installment';
 import React from 'react';
 import { USE_CASES } from '../../client/components/common/content';
@@ -20,6 +19,8 @@ import styles from './loanRisk.module.scss';
 import classNames from 'classnames';
 import { TEST_IDS } from '../../client/testIDs';
 import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
+import { useMutation } from 'react-query';
+import { LoanRequestPayload, LoanRequestResponse } from './api/request-loan/route';
 
 type SliderFieldProps = {
   label: string;
@@ -64,14 +65,40 @@ const SliderField: FunctionComponent<SliderFieldProps> = ({
     </div>
   );
 };
+
 export function LoanRisk() {
-  const { getData, isLoading: isVisitorDataLoading } = useVisitorData(
+  const { getData: getVisitorData, isLoading: isVisitorDataLoading } = useVisitorData(
     { ignoreCache: true },
     {
       immediate: false,
     },
   );
-  const loanRequestMutation = useRequestLoan();
+
+  const {
+    mutate: requestLoan,
+    isLoading: isLoanRequestLoading,
+    data: loanRequestResponse,
+  } = useMutation<LoanRequestResponse, unknown, Omit<LoanRequestPayload, 'requestId'>, unknown>({
+    mutationKey: ['request loan'],
+    mutationFn: async ({ firstName, lastName, loanValue, monthlyIncome, loanDuration }) => {
+      const { requestId } = await getVisitorData({ ignoreCache: true });
+      const response = await fetch('/loan-risk/api/request-loan', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          firstName,
+          lastName,
+          loanValue,
+          monthlyIncome,
+          loanDuration,
+          requestId,
+        } satisfies LoanRequestPayload),
+      });
+      return await response.json();
+    },
+  });
 
   const [firstName, setFirstName] = useState('John');
   const [lastName, setLastName] = useState('Doe');
@@ -88,26 +115,18 @@ export function LoanRisk() {
     [loanDuration, loanValue],
   );
 
-  const handleSubmit = useCallback(
-    async (event: React.FormEvent) => {
-      event.preventDefault();
-
-      const fpData = await getData();
-
-      if (!fpData) {
-        console.error("Visitor data couldn't be fetched");
-        return;
-      }
-
-      await loanRequestMutation.mutateAsync({
-        fpData,
-        body: { loanValue, monthlyIncome, loanDuration, firstName, lastName },
-      });
-    },
-    [firstName, lastName, loanDuration, loanRequestMutation, loanValue, monthlyIncome, getData],
-  );
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    await requestLoan({
+      firstName,
+      lastName,
+      loanValue,
+      monthlyIncome,
+      loanDuration,
+    });
+  };
 
-  const isLoading = isVisitorDataLoading || loanRequestMutation.isLoading;
+  const isLoading = isVisitorDataLoading || isLoanRequestLoading;
 
   return (
     <UseCaseWrapper useCase={USE_CASES.loanRisk}>
@@ -172,8 +191,8 @@ export function LoanRisk() {
                 </div>
               </div>
             </div>
-            {loanRequestMutation.data?.message && !loanRequestMutation.isLoading && (
-              <Alert severity={loanRequestMutation.data.severity}>{loanRequestMutation.data.message}</Alert>
+            {loanRequestResponse?.message && !isLoanRequestLoading && (
+              <Alert severity={loanRequestResponse.severity}>{loanRequestResponse.message}</Alert>
             )}
             <Button
               type='submit'
diff --git a/src/server/loan-risk/calculate-loan-values.ts b/src/app/loan-risk/api/request-loan/calculate-loan-values.ts
similarity index 70%
rename from src/server/loan-risk/calculate-loan-values.ts
rename to src/app/loan-risk/api/request-loan/calculate-loan-values.ts
index bad410d1..8620f2b7 100644
--- a/src/server/loan-risk/calculate-loan-values.ts
+++ b/src/app/loan-risk/api/request-loan/calculate-loan-values.ts
@@ -1,4 +1,4 @@
-import { calculateMonthInstallment } from '../../shared/loan-risk/calculate-month-installment';
+import { calculateMonthInstallment } from '../../../../shared/loan-risk/calculate-month-installment';
 
 /**
  * Required minimal income.
@@ -12,7 +12,13 @@ type LoanAsk = {
   loanDuration: number;
 };
 
-export function calculateLoanValues({ loanValue, monthlyIncome, loanDuration }: LoanAsk) {
+export type LoanResult = {
+  monthInstallment: number;
+  remainingIncome: number;
+  approved: boolean;
+};
+
+export function calculateLoanValues({ loanValue, monthlyIncome, loanDuration }: LoanAsk): LoanResult {
   const monthInstallment = calculateMonthInstallment({ loanValue, loanDuration });
   const remainingIncome = monthlyIncome - monthInstallment;
 
diff --git a/src/server/loan-risk/copy.ts b/src/app/loan-risk/api/request-loan/copy.ts
similarity index 100%
rename from src/server/loan-risk/copy.ts
rename to src/app/loan-risk/api/request-loan/copy.ts
diff --git a/src/server/loan-risk/database.ts b/src/app/loan-risk/api/request-loan/database.ts
similarity index 94%
rename from src/server/loan-risk/database.ts
rename to src/app/loan-risk/api/request-loan/database.ts
index 1426d8cd..15fc2992 100644
--- a/src/server/loan-risk/database.ts
+++ b/src/app/loan-risk/api/request-loan/database.ts
@@ -1,5 +1,5 @@
 import { Model, InferAttributes, InferCreationAttributes, DataTypes, Attributes } from 'sequelize';
-import { sequelize } from '../server';
+import { sequelize } from '../../../../server/server';
 
 interface LoanRequestAttributes
   extends Model<InferAttributes<LoanRequestAttributes>, InferCreationAttributes<LoanRequestAttributes>> {
diff --git a/src/app/loan-risk/api/request-loan/route.ts b/src/app/loan-risk/api/request-loan/route.ts
new file mode 100644
index 00000000..a0ae8223
--- /dev/null
+++ b/src/app/loan-risk/api/request-loan/route.ts
@@ -0,0 +1,91 @@
+import { Op } from 'sequelize';
+import { Severity, getAndValidateFingerprintResult } from '../../../../server/checks';
+import { NextResponse } from 'next/server';
+import { LoanRequestDbModel } from './database';
+import { LOAN_RISK_COPY } from './copy';
+import { calculateLoanValues as evaluateLoanRequest, LoanResult } from './calculate-loan-values';
+
+export type LoanRequestData = {
+  firstName: string;
+  lastName: string;
+  loanDuration: number;
+  loanValue: number;
+  monthlyIncome: number;
+};
+
+export type LoanRequestPayload = LoanRequestData & {
+  requestId: string;
+};
+
+export type LoanRequestResponse = {
+  message: string;
+  severity: Severity;
+  loanResult?: LoanResult;
+};
+
+export async function POST(req: Request): Promise<NextResponse<LoanRequestResponse>> {
+  const { loanValue, monthlyIncome, loanDuration, firstName, lastName, requestId } =
+    (await req.json()) as LoanRequestPayload;
+
+  // Get the full Identification result from Fingerprint Server API and validate its authenticity
+  const fingerprintResult = await getAndValidateFingerprintResult({ requestId, req });
+  if (!fingerprintResult.okay) {
+    return NextResponse.json({ severity: 'error', message: fingerprintResult.error }, { status: 403 });
+  }
+
+  // Get visitorId from the Server API Identification event
+  const visitorId = fingerprintResult.data.products?.identification?.data?.visitorId;
+  if (!visitorId) {
+    return NextResponse.json({ severity: 'error', message: 'Visitor ID not found.' }, { status: 403 });
+  }
+
+  // Check if this visitor ID has already requested a loan today
+  const previousLoanRequests = await LoanRequestDbModel.findAll({
+    where: {
+      visitorId: { [Op.eq]: visitorId },
+      timestamp: { [Op.between]: [new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 59)] },
+    },
+  });
+
+  // If so, check monthly income, first name, and last name are the same as in previous loan requests.
+  if (previousLoanRequests.length) {
+    const requestIsConsistent = previousLoanRequests.every(
+      (loanRequest) =>
+        loanRequest.monthlyIncome === monthlyIncome &&
+        loanRequest.firstName === firstName &&
+        loanRequest.lastName === lastName,
+    );
+
+    // If the provided information is not consistent, potentially mark this user in your database as fraudulent, or perform some other actions.
+    // In our case, we just return a warning instead of processing the request.
+    if (!requestIsConsistent) {
+      return NextResponse.json(
+        { severity: 'warning', message: LOAN_RISK_COPY.inconsistentApplicationChallenged },
+        {
+          status: 403,
+        },
+      );
+    }
+  }
+
+  // Save the loan request to the database
+  await LoanRequestDbModel.create({
+    visitorId,
+    timestamp: new Date(),
+    monthlyIncome,
+    loanDuration,
+    loanValue,
+    firstName,
+    lastName,
+  });
+
+  // Evaluate the loan request
+  const loanResult = evaluateLoanRequest({ loanValue, monthlyIncome, loanDuration });
+
+  // If the income is too low, reject the loan
+  if (!loanResult.approved) {
+    return NextResponse.json({ severity: 'warning', message: LOAN_RISK_COPY.incomeLow, loanResult }, { status: 403 });
+  }
+
+  return NextResponse.json({ severity: 'success', message: LOAN_RISK_COPY.approved, loanResult });
+}
diff --git a/src/pages/api/admin/reset.ts b/src/pages/api/admin/reset.ts
index 06818dfc..c05e74ec 100644
--- a/src/pages/api/admin/reset.ts
+++ b/src/pages/api/admin/reset.ts
@@ -5,7 +5,7 @@ import {
   UserPreferencesDbModel,
   UserSearchHistoryDbModel,
 } from '../../../server/personalization/database';
-import { LoanRequestDbModel } from '../../../server/loan-risk/database';
+import { LoanRequestDbModel } from '../../../app/loan-risk/api/request-loan/database';
 import { ArticleViewDbModel } from '../../../server/paywall/database';
 import { CouponClaimDbModel } from '../../../server/coupon-fraud/database';
 import { Severity, getAndValidateFingerprintResult } from '../../../server/checks';
diff --git a/src/pages/api/loan-risk/request-loan.ts b/src/pages/api/loan-risk/request-loan.ts
deleted file mode 100644
index 4eb01ab6..00000000
--- a/src/pages/api/loan-risk/request-loan.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { loanRiskEndpoint } from '../../../server/loan-risk/loan-risk-endpoint';
-import { LoanRequestDbModel } from '../../../server/loan-risk/database';
-import { Op } from 'sequelize';
-import { messageSeverity } from '../../../server/server';
-import { calculateLoanValues } from '../../../server/loan-risk/calculate-loan-values';
-import { CheckResult, checkResultType } from '../../../server/checkResult';
-import { RuleCheck } from '../../../server/checks';
-import { LOAN_RISK_COPY } from '../../../server/loan-risk/copy';
-
-/**
- * Validates previous loan requests sent by a given user.
- *
- * As an example, we check loan requests received on the same day and we compare the monthly income provided by a user.
- * If monthly income is not the same as in the previous request, we return a warning.
- *
- * */
-const checkPreviousLoanRequests: RuleCheck = async (eventResponse, req) => {
-  const { monthlyIncome, firstName, lastName } = JSON.parse(req.body);
-
-  const timestampStart = new Date();
-  const timestampEnd = new Date();
-
-  timestampStart.setHours(0, 0, 0, 0);
-  timestampEnd.setHours(23, 59, 59, 59);
-
-  // Find previous loan requests that were sent by this visitorId today.
-  const previousLoanRequests = await LoanRequestDbModel.findAll({
-    where: {
-      visitorId: {
-        [Op.eq]: eventResponse.products?.identification?.data?.visitorId,
-      },
-      timestamp: {
-        [Op.between]: [timestampStart, timestampEnd],
-      },
-    },
-  });
-
-  if (previousLoanRequests.length) {
-    // Check if monthly income, first name, and last name are the same as in previous loan requests.
-    const hasValidFields = previousLoanRequests.every(
-      (loanRequest) =>
-        loanRequest.monthlyIncome === monthlyIncome &&
-        loanRequest.firstName === firstName &&
-        loanRequest.lastName === lastName,
-    );
-
-    // Whoops, it looks like the data is not the same!
-    // You could potentially mark this user in your database as fraudulent, or perform some other actions.
-    // In our case, we just return a warning.
-    if (!hasValidFields) {
-      return new CheckResult(
-        LOAN_RISK_COPY.inconsistentApplicationChallenged,
-        messageSeverity.Warning,
-        checkResultType.PossibleLoanFraud,
-      );
-    }
-  }
-  return undefined;
-};
-
-export default loanRiskEndpoint(
-  async (req, res, eventResponse) => {
-    const { loanValue, monthlyIncome, loanDuration, firstName, lastName } = JSON.parse(req.body);
-
-    const calculations = calculateLoanValues({
-      loanValue,
-      monthlyIncome,
-      loanDuration,
-    });
-
-    const visitorId = eventResponse?.products?.identification?.data?.visitorId;
-
-    if (!visitorId) {
-      return res.status(400).json({
-        error: new Error('Missing visitor ID'),
-      });
-    }
-
-    await LoanRequestDbModel.create({
-      visitorId,
-      timestamp: new Date(),
-      monthlyIncome,
-      loanDuration,
-      loanValue,
-      firstName,
-      lastName,
-    });
-
-    let result;
-
-    if (calculations.approved) {
-      result = new CheckResult(LOAN_RISK_COPY.approved, messageSeverity.Success, checkResultType.Passed);
-    } else {
-      result = new CheckResult(LOAN_RISK_COPY.incomeLow, messageSeverity.Warning, checkResultType.Challenged);
-    }
-
-    return res.status(200).json({
-      ...result.toJsonResponse(),
-      calculations,
-    });
-  },
-  [checkPreviousLoanRequests],
-);
diff --git a/src/server/loan-risk/loan-risk-endpoint.ts b/src/server/loan-risk/loan-risk-endpoint.ts
deleted file mode 100644
index fd2d36d9..00000000
--- a/src/server/loan-risk/loan-risk-endpoint.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
-  ensurePostRequest,
-  ensureValidRequestIdAndVisitorId,
-  getIdentificationEvent,
-  reportSuspiciousActivity,
-} from '../server';
-import { checkResultType } from '../checkResult';
-import {
-  RequestCallback,
-  RuleCheck,
-  checkConfidenceScore,
-  checkFreshIdentificationRequest,
-  checkIpAddressIntegrity,
-  checkOriginsIntegrity,
-} from '../checks';
-import { sendForbiddenResponse } from '../response';
-import { NextApiRequest, NextApiResponse } from 'next';
-
-// Server API validations.
-const loanChecks = [
-  checkFreshIdentificationRequest,
-  checkConfidenceScore,
-  checkIpAddressIntegrity,
-  checkOriginsIntegrity,
-];
-
-export const loanRiskEndpoint =
-  (requestCallback: RequestCallback, optionalChecks: RuleCheck[] = []) =>
-  async (req: NextApiRequest, res: NextApiResponse) => {
-    if (!ensurePostRequest(req, res)) {
-      return;
-    }
-
-    res.setHeader('Content-Type', 'application/json');
-
-    const { visitorId, requestId } = JSON.parse(req.body);
-
-    if (!ensureValidRequestIdAndVisitorId(req, res, visitorId, requestId)) {
-      return;
-    }
-
-    // Information from the client side might have been tampered.
-    // It's best practice to validate provided information with the Server API.
-    // It is recommended to use the requestId and visitorId pair.
-    const eventResponse = await getIdentificationEvent(requestId);
-
-    for (const ruleCheck of [...loanChecks, ...optionalChecks]) {
-      const result = await ruleCheck(eventResponse, req);
-
-      if (result) {
-        switch (result.type) {
-          case checkResultType.Passed:
-          case checkResultType.Challenged:
-            continue;
-          default:
-            reportSuspiciousActivity(req);
-            return sendForbiddenResponse(res, result);
-        }
-      }
-    }
-
-    return requestCallback(req, res, eventResponse);
-  };

From b3e177c21c733be3082d759bb3a1e6f87856cd3b Mon Sep 17 00:00:00 2001
From: Juraj Uhlar <juro.uhlar@gmail.com>
Date: Thu, 19 Sep 2024 17:58:50 +0100
Subject: [PATCH 3/5] chore: improve loan request error handling

---
 src/app/loan-risk/LoanRisk.tsx | 44 ++++++++++++++++------------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/app/loan-risk/LoanRisk.tsx b/src/app/loan-risk/LoanRisk.tsx
index edba5d81..c43dac27 100644
--- a/src/app/loan-risk/LoanRisk.tsx
+++ b/src/app/loan-risk/LoanRisk.tsx
@@ -20,7 +20,7 @@ import classNames from 'classnames';
 import { TEST_IDS } from '../../client/testIDs';
 import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import { useMutation } from 'react-query';
-import { LoanRequestPayload, LoanRequestResponse } from './api/request-loan/route';
+import { LoanRequestData, LoanRequestPayload, LoanRequestResponse } from './api/request-loan/route';
 
 type SliderFieldProps = {
   label: string;
@@ -78,21 +78,16 @@ export function LoanRisk() {
     mutate: requestLoan,
     isLoading: isLoanRequestLoading,
     data: loanRequestResponse,
-  } = useMutation<LoanRequestResponse, unknown, Omit<LoanRequestPayload, 'requestId'>, unknown>({
+    error: loanRequestNetworkError,
+  } = useMutation<LoanRequestResponse, Error, LoanRequestData, unknown>({
     mutationKey: ['request loan'],
-    mutationFn: async ({ firstName, lastName, loanValue, monthlyIncome, loanDuration }) => {
+    mutationFn: async (loanRequest: LoanRequestData) => {
       const { requestId } = await getVisitorData({ ignoreCache: true });
       const response = await fetch('/loan-risk/api/request-loan', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          firstName,
-          lastName,
-          loanValue,
-          monthlyIncome,
-          loanDuration,
+          ...loanRequest,
           requestId,
         } satisfies LoanRequestPayload),
       });
@@ -114,24 +109,24 @@ export function LoanRisk() {
       }),
     [loanDuration, loanValue],
   );
-
-  const handleSubmit = async (event: React.FormEvent) => {
-    event.preventDefault();
-    await requestLoan({
-      firstName,
-      lastName,
-      loanValue,
-      monthlyIncome,
-      loanDuration,
-    });
-  };
-
   const isLoading = isVisitorDataLoading || isLoanRequestLoading;
 
   return (
     <UseCaseWrapper useCase={USE_CASES.loanRisk}>
       <div className={classNames(formStyles.wrapper, styles.formWrapper)}>
-        <form onSubmit={handleSubmit} className={formStyles.useCaseForm}>
+        <form
+          onSubmit={(event) => () => {
+            event.preventDefault();
+            requestLoan({
+              firstName,
+              lastName,
+              loanValue,
+              monthlyIncome,
+              loanDuration,
+            });
+          }}
+          className={formStyles.useCaseForm}
+        >
           <div className={styles.nameWrapper}>
             <label>Name</label>
             <input
@@ -191,6 +186,7 @@ export function LoanRisk() {
                 </div>
               </div>
             </div>
+            {loanRequestNetworkError && <Alert severity='error'>{loanRequestNetworkError.message}</Alert>}
             {loanRequestResponse?.message && !isLoanRequestLoading && (
               <Alert severity={loanRequestResponse.severity}>{loanRequestResponse.message}</Alert>
             )}

From 3a30def0ad1294f739f56f2b5fdb855d17a47905 Mon Sep 17 00:00:00 2001
From: Juraj Uhlar <juro.uhlar@gmail.com>
Date: Thu, 19 Sep 2024 18:10:21 +0100
Subject: [PATCH 4/5] chore: self review fixes

---
 src/app/loan-risk/LoanRisk.tsx                                | 4 ++--
 .../{calculate-loan-values.ts => evaluateLoanRequest.ts}      | 2 +-
 src/app/loan-risk/api/request-loan/route.ts                   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename src/app/loan-risk/api/request-loan/{calculate-loan-values.ts => evaluateLoanRequest.ts} (92%)

diff --git a/src/app/loan-risk/LoanRisk.tsx b/src/app/loan-risk/LoanRisk.tsx
index c43dac27..71b16ec6 100644
--- a/src/app/loan-risk/LoanRisk.tsx
+++ b/src/app/loan-risk/LoanRisk.tsx
@@ -115,9 +115,9 @@ export function LoanRisk() {
     <UseCaseWrapper useCase={USE_CASES.loanRisk}>
       <div className={classNames(formStyles.wrapper, styles.formWrapper)}>
         <form
-          onSubmit={(event) => () => {
+          onSubmit={async (event) => {
             event.preventDefault();
-            requestLoan({
+            await requestLoan({
               firstName,
               lastName,
               loanValue,
diff --git a/src/app/loan-risk/api/request-loan/calculate-loan-values.ts b/src/app/loan-risk/api/request-loan/evaluateLoanRequest.ts
similarity index 92%
rename from src/app/loan-risk/api/request-loan/calculate-loan-values.ts
rename to src/app/loan-risk/api/request-loan/evaluateLoanRequest.ts
index 8620f2b7..2d5dfea1 100644
--- a/src/app/loan-risk/api/request-loan/calculate-loan-values.ts
+++ b/src/app/loan-risk/api/request-loan/evaluateLoanRequest.ts
@@ -18,7 +18,7 @@ export type LoanResult = {
   approved: boolean;
 };
 
-export function calculateLoanValues({ loanValue, monthlyIncome, loanDuration }: LoanAsk): LoanResult {
+export function evaluateLoanRequest({ loanValue, monthlyIncome, loanDuration }: LoanAsk): LoanResult {
   const monthInstallment = calculateMonthInstallment({ loanValue, loanDuration });
   const remainingIncome = monthlyIncome - monthInstallment;
 
diff --git a/src/app/loan-risk/api/request-loan/route.ts b/src/app/loan-risk/api/request-loan/route.ts
index a0ae8223..1ca368a3 100644
--- a/src/app/loan-risk/api/request-loan/route.ts
+++ b/src/app/loan-risk/api/request-loan/route.ts
@@ -3,7 +3,7 @@ import { Severity, getAndValidateFingerprintResult } from '../../../../server/ch
 import { NextResponse } from 'next/server';
 import { LoanRequestDbModel } from './database';
 import { LOAN_RISK_COPY } from './copy';
-import { calculateLoanValues as evaluateLoanRequest, LoanResult } from './calculate-loan-values';
+import { evaluateLoanRequest, LoanResult } from './evaluateLoanRequest';
 
 export type LoanRequestData = {
   firstName: string;

From ab01d63eed496623dfd1fccbf83f4adcbe8736df Mon Sep 17 00:00:00 2001
From: Juraj Uhlar <juro.uhlar@gmail.com>
Date: Fri, 20 Sep 2024 17:05:14 +0100
Subject: [PATCH 5/5] fix: page component naming

---
 src/app/loan-risk/embed/page.tsx  | 2 +-
 src/app/loan-risk/page.tsx        | 2 +-
 src/app/playground/embed/page.tsx | 2 +-
 src/app/playground/page.tsx       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/loan-risk/embed/page.tsx b/src/app/loan-risk/embed/page.tsx
index f50b538f..96bf6963 100644
--- a/src/app/loan-risk/embed/page.tsx
+++ b/src/app/loan-risk/embed/page.tsx
@@ -4,6 +4,6 @@ import { LoanRisk } from '../LoanRisk';
 
 export const metadata = generateUseCaseMetadata(USE_CASES.loanRisk);
 
-export default function VpnDetectionPage() {
+export default function LoanRiskPage() {
   return <LoanRisk />;
 }
diff --git a/src/app/loan-risk/page.tsx b/src/app/loan-risk/page.tsx
index 9276e078..3ac6d276 100644
--- a/src/app/loan-risk/page.tsx
+++ b/src/app/loan-risk/page.tsx
@@ -4,6 +4,6 @@ import { LoanRisk } from './LoanRisk';
 
 export const metadata = generateUseCaseMetadata(USE_CASES.loanRisk);
 
-export default function VpnDetectionPage() {
+export default function LoanRiskPage() {
   return <LoanRisk />;
 }
diff --git a/src/app/playground/embed/page.tsx b/src/app/playground/embed/page.tsx
index 74a4795c..870247a2 100644
--- a/src/app/playground/embed/page.tsx
+++ b/src/app/playground/embed/page.tsx
@@ -4,6 +4,6 @@ import { Playground } from '../Playground';
 
 export const metadata = generateUseCaseMetadata(PLAYGROUND_METADATA);
 
-export default function VpnDetectionPage() {
+export default function PlaygroundPage() {
   return <Playground />;
 }
diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
index 75ac4b96..d92d138f 100644
--- a/src/app/playground/page.tsx
+++ b/src/app/playground/page.tsx
@@ -4,6 +4,6 @@ import { Playground } from './Playground';
 
 export const metadata = generateUseCaseMetadata(PLAYGROUND_METADATA);
 
-export default function VpnDetectionPage() {
+export default function PlaygroundPage() {
   return <Playground />;
 }