Skip to content

Commit

Permalink
fix filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandrine-ds
sandrine-ds committed Dec 4, 2024
1 parent 5b6a2f3 commit ef6a846
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 71 deletions.
92 changes: 45 additions & 47 deletions clients/banking/src/components/MerchantProfilePaymentArea.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useQuery } from "@swan-io/graphql-client";
import { AutoWidthImage } from "@swan-io/lake/src/components/AutoWidthImage";
import { BorderedIcon } from "@swan-io/lake/src/components/BorderedIcon";
import { Box } from "@swan-io/lake/src/components/Box";
import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
import { FocusTrapRef } from "@swan-io/lake/src/components/FocusTrap";
import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
import { LakeHeading } from "@swan-io/lake/src/components/LakeHeading";
Expand All @@ -13,7 +14,7 @@ import { ListRightPanel } from "@swan-io/lake/src/components/ListRightPanel";
import { PlainListViewPlaceholder } from "@swan-io/lake/src/components/PlainListView";
import { Space } from "@swan-io/lake/src/components/Space";
import { LinkConfig } from "@swan-io/lake/src/components/VirtualizedList";
import { spacings } from "@swan-io/lake/src/constants/design";
import { colors, spacings } from "@swan-io/lake/src/constants/design";
import { useDisclosure } from "@swan-io/lake/src/hooks/useDisclosure";
import { isNotNullish, nullishOrEmptyToUndefined } from "@swan-io/lake/src/utils/nullish";
import { useCallback, useMemo, useRef, useState } from "react";
Expand Down Expand Up @@ -108,11 +109,13 @@ const EmptyListWithCta = ({ merchantProfile, action }: EmptyListWithCtaProps) =>

<Space height={24} />

<LakeText variant="medium" align="center">
<LakeText variant="medium" align="center" color={colors.gray[900]}>
{title}
</LakeText>

<LakeText variant="light" align="center">
<Space height={4} />

<LakeText align="center" variant="smallRegular">
{subtitle}
</LakeText>

Expand Down Expand Up @@ -149,15 +152,7 @@ export const MerchantProfilePaymentArea = ({ params, large }: Props) => {
paymentMethod: isNotNullish(params.paymentMethod)
? Array.filterMap(params.paymentMethod, item =>
match(item)
.with(
"Card",
"Check",
"SepaDirectDebitB2b",
"SepaDirectDebitCore",
"InternalDirectDebitStandard",
"InternalDirectDebitB2b",
value => Option.Some(value),
)
.with("Card", "Check", "DirectDebit", value => Option.Some(value))
.otherwise(() => Option.None()),
)
: undefined,
Expand All @@ -171,10 +166,31 @@ export const MerchantProfilePaymentArea = ({ params, large }: Props) => {
} as const;
}, [params.paymentMethod, params.status]);

const search = nullishOrEmptyToUndefined(params.search);
const hasSearch =
isNotNullish(search) || isNotNullish(params.paymentMethod) || isNotNullish(params.status);

const [data, { isLoading, reload, setVariables }] = useQuery(MerchantPaymentsDocument, {
merchantProfileId,
filters,
first: PER_PAGE,
filters: {
status: filters.status,
search,
paymentMethod: filters.paymentMethod?.reduce<MerchantPaymentMethodType[]>((acc, item) => {
if (item === "DirectDebit") {
acc.push(
"SepaDirectDebitB2b",
"SepaDirectDebitCore",
"InternalDirectDebitStandard",
"InternalDirectDebitB2b",
);
} else {
acc.push(item);
}

return acc;
}, []),
},
});

const panelRef = useRef<FocusTrapRef | null>(null);
Expand Down Expand Up @@ -225,8 +241,6 @@ export const MerchantProfilePaymentArea = ({ params, large }: Props) => {

const [pickerVisible, setPickerModal] = useDisclosure(false);

const search = nullishOrEmptyToUndefined(params.search);

const [shouldShowTopbar, setShouldShowTopbar] = useState(
data
.toOption()
Expand Down Expand Up @@ -328,10 +342,17 @@ export const MerchantProfilePaymentArea = ({ params, large }: Props) => {
});
}
}}
renderEmptyList={() => (
<EmptyListWithCta
action={
match({ canCreatePayments, waitingForReview })
renderEmptyList={() =>
hasSearch ? (
<EmptyView
icon="lake-transfer"
borderedIcon={true}
title={t("merchantProfile.payments.list.noResults")}
subtitle={t("common.list.noResultsSuggestion")}
/>
) : (
<EmptyListWithCta
action={match({ canCreatePayments, waitingForReview })
.returnType<Action>()
.with({ canCreatePayments: true }, () => ({
actionType: "canCreatePayment",
Expand Down Expand Up @@ -360,34 +381,11 @@ export const MerchantProfilePaymentArea = ({ params, large }: Props) => {
buttonText: t(
"merchantProfile.payments.enablePaymentMethod.button",
),
}))
// canCreatePayments
// ? {
// actionType: "canCreatePayment",
// title: t("merchantProfile.payments.newPayment.title"),
// subtitle: t("merchantProfile.payments.newPayment.subtitle"),
// handleAction: () => setPickerModal.open(),
// buttonText: t("merchantProfile.payments.newPayment.button"),
// }
// : {
// actionType: "shouldEnablePaymentMethod",
// title: t("merchantProfile.payments.enablePaymentMethod.title"),
// subtitle: t(
// "merchantProfile.payments.enablePaymentMethod.subtitle",
// ),
// handleAction: () =>
// Router.push("AccountMerchantsProfileSettings", {
// accountMembershipId,
// merchantProfileId,
// }),
// buttonText: t(
// "merchantProfile.payments.enablePaymentMethod.button",
// ),
// }
}
merchantProfile={merchantProfile}
/>
)}
}))}
merchantProfile={merchantProfile}
/>
)
}
/>

<ListRightPanel
Expand Down
15 changes: 4 additions & 11 deletions clients/banking/src/components/MerchantProfilePaymentListFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,7 @@ import { ReactNode, useEffect, useMemo, useState } from "react";
import { MerchantPaymentStatus } from "../graphql/partner";
import { t } from "../utils/i18n";

type SimplifiedPaymentMethod =
| "Card"
| "Check"
| "SepaDirectDebitB2b"
| "SepaDirectDebitCore"
| "InternalDirectDebitStandard"
| "InternalDirectDebitB2b";
type SimplifiedPaymentMethod = "Card" | "Check" | "DirectDebit";

const paymentMethodFilter: FilterCheckboxDef<SimplifiedPaymentMethod> = {
type: "checkbox",
Expand All @@ -30,10 +24,7 @@ const paymentMethodFilter: FilterCheckboxDef<SimplifiedPaymentMethod> = {
items: [
{ value: "Card", label: t("paymentMethod.card") },
{ value: "Check", label: t("paymentMethod.check") },
{ value: "SepaDirectDebitB2b", label: t("paymentMethod.directDebit") },
{ value: "SepaDirectDebitCore", label: t("paymentMethod.directDebit") },
{ value: "InternalDirectDebitStandard", label: t("paymentMethod.directDebit") },
{ value: "InternalDirectDebitB2b", label: t("paymentMethod.directDebit") },
{ value: "DirectDebit", label: t("paymentMethod.directDebit") },
],
};

Expand Down Expand Up @@ -112,9 +103,11 @@ export const MerchantProfilePaymentListFilter = ({
useEffect(() => {
setOpenFilters(openFilters => {
const currentlyOpenFilters = new Set(openFilters);

const openFiltersNotYetInState = Dict.entries(filters)
.filter(([name, value]) => isNotNullish(value) && !currentlyOpenFilters.has(name))
.map(([name]) => name);

return [...openFilters, ...openFiltersNotYetInState];
});
}, [filters]);
Expand Down
27 changes: 14 additions & 13 deletions clients/banking/src/graphql/partner.gql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2261,19 +2261,6 @@ fragment PaymentLink on MerchantPaymentLink {
}
}

fragment PaymentLinkConnection on MerchantPaymentLinkConnection {
pageInfo {
endCursor
hasNextPage
}
totalCount
edges {
node {
...PaymentLink
}
}
}

fragment MerchantPayment on MerchantPayment {
id
label
Expand Down Expand Up @@ -2331,6 +2318,7 @@ fragment MerchantPaymentsConnection on MerchantPaymentConnection {
endCursor
hasNextPage
}
totalCount
edges {
node {
...MerchantPayment
Expand Down Expand Up @@ -2380,6 +2368,19 @@ query GetFullMerchantPaymentDetails($paymentId: ID!, $paymentLinkId: ID!) {
}
}

fragment PaymentLinkConnection on MerchantPaymentLinkConnection {
pageInfo {
endCursor
hasNextPage
}
totalCount
edges {
node {
...PaymentLink
}
}
}

query MerchantPaymentLinks(
$merchantProfileId: ID!
$filters: MerchantPaymentLinkFiltersInput!
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,6 +601,7 @@
"merchantProfile.payments.status.initiated": "Initiated",
"merchantProfile.payments.status.rejected": "Rejected",
"merchantProfile.payments.list.amount": "Amount",
"merchantProfile.payments.list.noResults": "No payments",
"merchantProfile.payments.newPayment.title": "You are ready to start!",
"merchantProfile.payments.newPayment.subtitle": "You are ready to create your first payment",
"merchantProfile.payments.newPayment.button": "Create a payment",
Expand Down

0 comments on commit ef6a846

Please sign in to comment.