Updates

clients/banking/package.json

@@ -15,12 +15,12 @@
  "@juggle/resize-observer": "3.4.0",
  "@sentry/react": "7.109.0",
  "@swan-io/boxed": "2.1.1",
- "@swan-io/chicane": "2.0.0-rc.2",
- "@swan-io/graphql-client": "0.1.0-alpha14",
- "@swan-io/lake": "7.3.1",
- "@swan-io/request": "1.0.2",
- "@swan-io/shared-business": "7.3.1",
- "@swan-io/use-form": "2.0.0-rc.2",
+ "@swan-io/chicane": "2.0.0",
+ "@swan-io/graphql-client": "0.1.0-alpha20",
+ "@swan-io/lake": "7.3.3",
+ "@swan-io/request": "1.0.4",
+ "@swan-io/shared-business": "7.3.3",
+ "@swan-io/use-form": "2.0.0",
  "core-js": "3.36.1",
  "dayjs": "1.11.10",
  "iban": "0.0.14",

clients/banking/src/components/AccountMembershipArea.tsx

@@ -21,8 +21,8 @@ type Props = {
 const COOKIE_REFRESH_INTERVAL = 30000; // 30s
 
 export const AccountMembershipArea = ({ accountMembershipId }: Props) => {
- const [data, query] = useDeferredQuery(AccountAreaDocument);
- const [lastRelevantIdentification, queryLastRelevantIdentification] = useDeferredQuery(
+ const [data, { query }] = useDeferredQuery(AccountAreaDocument);
+ const [lastRelevantIdentification, { query: queryLastRelevantIdentification }] = useDeferredQuery(
  LastRelevantIdentificationDocument,
  );
  const [updateAccountLanguage] = useMutation(UpdateAccountLanguageDocument);

clients/banking/src/components/CardItemArea.tsx

@@ -73,8 +73,8 @@ export const CardItemArea = ({
  "AccountCardsItemOrderAddress",
  ]);
 
- const [data, query] = useDeferredQuery(CardPageDocument);
- const [lastRelevantIdentification, queryLastRelevantIdentification] = useDeferredQuery(
+ const [data, { query }] = useDeferredQuery(CardPageDocument);
+ const [lastRelevantIdentification, { query: queryLastRelevantIdentification }] = useDeferredQuery(
  LastRelevantIdentificationDocument,
  );
 

clients/banking/src/components/CardsArea.tsx

@@ -92,9 +92,11 @@ const useDisplayableCardsInformation = ({
  } as const;
  }, [accountId]);
 
- const [withAccountQuery, queryWithAccount] = useDeferredQuery(CardCountWithAccountDocument);
+ const [withAccountQuery, { query: queryWithAccount }] = useDeferredQuery(
+ CardCountWithAccountDocument,
+ );
 
- const [withoutAccountQuery, queryWithoutAccount] = useDeferredQuery(
+ const [withoutAccountQuery, { query: queryWithoutAccount }] = useDeferredQuery(
  CardCountWithoutAccountDocument,
  );
 

clients/banking/src/components/MembershipDetailArea.tsx

@@ -7,6 +7,7 @@ import { LakeText } from "@swan-io/lake/src/components/LakeText";
 import { ListRightPanelContent } from "@swan-io/lake/src/components/ListRightPanel";
 import { LoadingView } from "@swan-io/lake/src/components/LoadingView";
 import { Space } from "@swan-io/lake/src/components/Space";
+import { useIsSuspendable } from "@swan-io/lake/src/components/Suspendable";
 import { TabView } from "@swan-io/lake/src/components/TabView";
 import { Tag } from "@swan-io/lake/src/components/Tag";
 import { Tile } from "@swan-io/lake/src/components/Tile";
@@ -92,9 +93,15 @@ export const MembershipDetailArea = ({
 }: Props) => {
  const route = Router.useRoute(membershipsDetailRoutes);
 
- const [data, { reload }] = useQuery(MembershipDetailDocument, {
- accountMembershipId: editingAccountMembershipId,
- });
+ const suspense = useIsSuspendable();
+
+ const [data, { reload }] = useQuery(
+ MembershipDetailDocument,
+ {
+ accountMembershipId: editingAccountMembershipId,
+ },
+ { suspense },
+ );
 
  const accountMembership = useMemo(() => {
  return data.mapOk(data =>

clients/banking/src/components/MembershipInvitationLinkModal.tsx

@@ -18,7 +18,7 @@ type Props = {
  onPressClose: () => void;
 };
 export const MembershipInvitationLinkModal = ({ accountMembershipId, onPressClose }: Props) => {
- const [data, query] = useDeferredQuery(MembershipDetailDocument);
+ const [data, { query }] = useDeferredQuery(MembershipDetailDocument);
 
  useEffect(() => {
  if (accountMembershipId != null) {

clients/banking/src/components/MembershipsArea.tsx

@@ -7,15 +7,14 @@ import { FocusTrapRef } from "@swan-io/lake/src/components/FocusTrap";
 import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
 import { LakeText } from "@swan-io/lake/src/components/LakeText";
 import { ListRightPanel } from "@swan-io/lake/src/components/ListRightPanel";
-import { LoadingView } from "@swan-io/lake/src/components/LoadingView";
 import { ResponsiveContainer } from "@swan-io/lake/src/components/ResponsiveContainer";
 import { Space } from "@swan-io/lake/src/components/Space";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { breakpoints, colors, spacings } from "@swan-io/lake/src/constants/design";
 import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
 import { Request } from "@swan-io/request";
 import { LakeModal } from "@swan-io/shared-business/src/components/LakeModal";
-import { Suspense, useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { P, match } from "ts-pattern";
 import { AccountCountry, AccountMembershipFragment, MembersPageDocument } from "../graphql/partner";
@@ -354,23 +353,21 @@ export const MembershipsArea = ({
  onClose={() => Router.push("AccountMembersList", { accountMembershipId, ...params })}
  items={memberships}
  render={(membership, large) => (
- <Suspense fallback={<LoadingView color={colors.current[500]} />}>
- <MembershipDetailArea
- params={params}
- currentUserAccountMembershipId={accountMembershipId}
- currentUserAccountMembership={currentUserAccountMembership}
- editingAccountMembershipId={membership.id}
- onAccountMembershipUpdate={onAccountMembershipUpdate}
- canAddCard={cardOrderVisible && canAddCard}
- physicalCardOrderVisible={physicalCardOrderVisible}
- accountCountry={accountCountry}
- shouldDisplayIdVerification={shouldDisplayIdVerification}
- onRefreshRequest={() => {
- reload();
- }}
- large={large}
- />
- </Suspense>
+ <MembershipDetailArea
+ params={params}
+ currentUserAccountMembershipId={accountMembershipId}
+ currentUserAccountMembership={currentUserAccountMembership}
+ editingAccountMembershipId={membership.id}
+ onAccountMembershipUpdate={onAccountMembershipUpdate}
+ canAddCard={cardOrderVisible && canAddCard}
+ physicalCardOrderVisible={physicalCardOrderVisible}
+ accountCountry={accountCountry}
+ shouldDisplayIdVerification={shouldDisplayIdVerification}
+ onRefreshRequest={() => {
+ reload();
+ }}
+ large={large}
+ />
  )}
  closeLabel={t("common.closeButton")}
  previousLabel={t("common.previous")}

clients/banking/src/components/TransferInternationalWizardAmount.tsx

@@ -71,12 +71,16 @@ export const TransferInternationalWizardAmount = ({
  const [input, setInput] = useState<Amount | undefined>();
  const [balance] = useQuery(GetAvailableAccountBalanceDocument, { accountMembershipId });
 
- const [quote, queryQuote] = useDeferredQuery(GetInternationalCreditTransferQuoteDocument);
+ const [quote, { query: queryQuote, reset: resetQuote }] = useDeferredQuery(
+ GetInternationalCreditTransferQuoteDocument,
+ );
 
  useEffect(() => {
  if (input != null && input.value !== "0" && !Number.isNaN(Number(input.value))) {
  const request = queryQuote({ accountId, ...input });
  return () => request.cancel();
+ } else {
+ resetQuote();
  }
  }, [input, accountId, queryQuote]);
 

clients/banking/src/components/TransferWizardBeneficiary.tsx

@@ -11,7 +11,6 @@ import { Space } from "@swan-io/lake/src/components/Space";
 import { Tile } from "@swan-io/lake/src/components/Tile";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { animations, colors } from "@swan-io/lake/src/constants/design";
-import { useDebounce } from "@swan-io/lake/src/hooks/useDebounce";
 import { printIbanFormat, validateIban } from "@swan-io/shared-business/src/utils/validation";
 import { electronicFormat } from "iban";
 import { useEffect } from "react";
@@ -50,15 +49,12 @@ export const TransferWizardBeneficiary = ({
  initialBeneficiary,
  onSave,
 }: Props) => {
- const [ibanVerification, queryIbanVerification] = useDeferredQuery(GetIbanValidationDocument);
- const [beneficiaryVerification, queryBeneficiaryVerification] = useDeferredQuery(
- GetBeneficiaryVerificationDocument,
- );
-
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- const debouncedQueryIbanVerification = useDebounce(queryIbanVerification, 500);
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- const debouncedQueryBeneficiaryVerification = useDebounce(queryBeneficiaryVerification, 500);
+ const [ibanVerification, { query: queryIbanVerification, reset: resetIbanVerification }] =
+ useDeferredQuery(GetIbanValidationDocument, { debounce: 500 });
+ const [
+ beneficiaryVerification,
+ { query: queryBeneficiaryVerification, reset: resetBeneficiaryVerification },
+ ] = useDeferredQuery(GetBeneficiaryVerificationDocument, { debounce: 500 });
 
  const { Field, listenFields, submitForm, FieldsListener, setFieldValue } = useForm({
  name: {
@@ -74,33 +70,56 @@ export const TransferWizardBeneficiary = ({
 
  useEffect(() => {
  return listenFields(["iban"], ({ iban }) => {
- const isTransferFromDutchAccountToDutchIBAN =
- accountCountry === "NLD" && iban.value.startsWith("NL");
+ if (iban.valid) {
+ const isTransferFromDutchAccountToDutchIBAN =
+ accountCountry === "NLD" && iban.value.startsWith("NL");
 
- if (!isTransferFromDutchAccountToDutchIBAN) {
- debouncedQueryIbanVerification({
- iban: electronicFormat(iban.value),
- });
+ if (!isTransferFromDutchAccountToDutchIBAN) {
+ queryIbanVerification({
+ iban: electronicFormat(iban.value),
+ });
+ }
+ } else {
+ resetIbanVerification();
+ resetBeneficiaryVerification();
  }
  });
- }, [accountCountry, listenFields, debouncedQueryIbanVerification]);
+ }, [
+ accountCountry,
+ listenFields,
+ queryIbanVerification,
+ resetIbanVerification,
+ resetBeneficiaryVerification,
+ ]);
 
  useEffect(() => {
  return listenFields(["iban", "name"], ({ iban, name }) => {
- const isTransferFromDutchAccountToDutchIBAN =
- accountCountry === "NLD" && iban.value.startsWith("NL");
+ if (iban.valid) {
+ const isTransferFromDutchAccountToDutchIBAN =
+ accountCountry === "NLD" && iban.value.startsWith("NL");
 
- if (isTransferFromDutchAccountToDutchIBAN) {
- debouncedQueryBeneficiaryVerification({
- input: {
- debtorAccountId: accountId,
- iban: electronicFormat(iban.value),
- name: name.value,
- },
- });
+ if (isTransferFromDutchAccountToDutchIBAN) {
+ queryBeneficiaryVerification({
+ input: {
+ debtorAccountId: accountId,
+ iban: electronicFormat(iban.value),
+ name: name.value,
+ },
+ });
+ }
+ } else {
+ resetIbanVerification();
+ resetBeneficiaryVerification();
  }
  });
- }, [accountCountry, accountId, listenFields, debouncedQueryBeneficiaryVerification]);
+ }, [
+ accountCountry,
+ accountId,
+ listenFields,
+ queryBeneficiaryVerification,
+ resetIbanVerification,
+ resetBeneficiaryVerification,
+ ]);
 
  const onPressSubmit = () => {
  submitForm(values => {

clients/banking/src/utils/gql.ts

@@ -58,9 +58,11 @@ export const filterOutUnauthorizedError = (clientError: ClientError) => {
  })
  ) {
  // never resolve, this way we never trigger an error screen
- return Future.make<Result<unknown, ClientError>>(() => {
+ return Future.make<Result<unknown, ClientError>>(resolve => {
  if (isNullish(Router.getRoute(["ProjectLogin"]))) {
  window.location.replace(Router.ProjectLogin({ sessionExpired: "true" }));
+ } else {
+ resolve(Result.Error(clientError));
  }
  });
  } else {

clients/onboarding/package.json

@@ -16,11 +16,11 @@
  "@juggle/resize-observer": "3.4.0",
  "@sentry/react": "7.109.0",
  "@swan-io/boxed": "2.1.1",
- "@swan-io/chicane": "2.0.0-rc.2",
- "@swan-io/lake": "7.3.1",
- "@swan-io/request": "1.0.2",
- "@swan-io/shared-business": "7.3.1",
- "@swan-io/use-form": "2.0.0-rc.2",
+ "@swan-io/chicane": "2.0.0",
+ "@swan-io/lake": "7.3.3",
+ "@swan-io/request": "1.0.4",
+ "@swan-io/shared-business": "7.3.3",
+ "@swan-io/use-form": "2.0.0",
  "@urql/devtools": "2.0.3",
  "@urql/exchange-graphcache": "7.0.0",
  "core-js": "3.36.1",

clients/payment/package.json

@@ -16,10 +16,10 @@
  "@juggle/resize-observer": "3.4.0",
  "@sentry/react": "7.109.0",
  "@swan-io/boxed": "2.1.1",
- "@swan-io/chicane": "2.0.0-rc.2",
- "@swan-io/lake": "7.3.1",
- "@swan-io/shared-business": "7.3.1",
- "@swan-io/use-form": "2.0.0-rc.2",
+ "@swan-io/chicane": "2.0.0",
+ "@swan-io/lake": "7.3.3",
+ "@swan-io/shared-business": "7.3.3",
+ "@swan-io/use-form": "2.0.0",
  "core-js": "3.36.1",
  "dayjs": "1.11.10",
  "iban": "0.0.14",