Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(IT Wallet): [SIW-1723] Cards and documents not always stacked #6309

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+9 −44
Open

fix(IT Wallet): [SIW-1723] Cards and documents not always stacked #6309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f1b76ba
bug: fixed wallet cards always staked
Oct 18, 2024
2d8c85f
chore: delete isStacked switch from DSWallet
Oct 18, 2024
1a9047e
chore: delete unused import
Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 1 addition & 16 deletions ts/features/design-system/core/DSWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
Banner,
ListItemSwitch,
VSpacer,
VStack
} from "@pagopa/io-app-design-system";
import { Banner, VSpacer, VStack } from "@pagopa/io-app-design-system";
import * as React from "react";
import { CredentialType } from "../../itwallet/common/utils/itwMocksUtils";
import { WalletCardsCategoryContainer } from "../../newWallet/components/WalletCardsCategoryContainer";
Expand All @@ -12,8 +7,6 @@ import { DesignSystemScreen } from "../components/DesignSystemScreen";
import { DesignSystemSection } from "../components/DesignSystemSection";

export const DSWallet = () => {
const [isStacked, setStacked] = React.useState(true);

const cards: ReadonlyArray<WalletCard> = [
{
key: "1",
Expand Down Expand Up @@ -108,11 +101,6 @@ export const DSWallet = () => {

return (
<DesignSystemScreen title={"Wallet"}>
<ListItemSwitch
label="Show stacked cards"
value={isStacked}
onSwitchValueChange={setStacked}
/>
<VStack space={blockMargin}>
<DesignSystemSection title="With Documenti su IO">
<WalletCardsCategoryContainer
Expand All @@ -122,7 +110,6 @@ export const DSWallet = () => {
iconName: "legalValue",
iconColor: "blueIO-500"
}}
isStacked={isStacked}
/>
<WalletCardsCategoryContainer
cards={[
Expand All @@ -133,7 +120,6 @@ export const DSWallet = () => {
header={{
label: "Altro"
}}
isStacked={isStacked}
topElement={
<>
<Banner
Expand All @@ -155,7 +141,6 @@ export const DSWallet = () => {
...cardsByCategory.cgn,
...cardsByCategory.bonus
]}
isStacked={isStacked}
/>
</DesignSystemSection>
</VStack>
Expand Down
2 changes: 1 addition & 1 deletion ts/features/newWallet/components/WalletCardBaseComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const withWalletCardBaseComponent =
>(
CardContent: React.ComponentType<CardProps>
) =>
({ cardProps, isStacked = false, testID }: ContentProps) =>
({ cardProps, isStacked = true, testID }: ContentProps) =>
LazyAfternoons marked this conversation as resolved.
Show resolved Hide resolved
(
<Animated.View
testID={testID}
Expand Down
5 changes: 1 addition & 4 deletions ts/features/newWallet/components/WalletCardsCategoryContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { renderWalletCardFn } from "../utils";

export type WalletCardsCategoryContainerProps = WithTestID<{
cards: ReadonlyArray<WalletCard>;
isStacked?: boolean;
header?: ListItemHeader;
topElement?: JSX.Element;
}>;
Expand All @@ -33,7 +32,6 @@ const itemLayoutAnimation =
*/
export const WalletCardsCategoryContainer = ({
cards,
isStacked = false,
header,
topElement,
testID
Expand All @@ -44,9 +42,8 @@ export const WalletCardsCategoryContainer = ({
<Animated.FlatList
scrollEnabled={false}
data={cards}
ItemSeparatorComponent={() => (!isStacked ? <VSpacer size={16} /> : null)}
renderItem={({ index, item }) =>
renderWalletCardFn(item, isStacked && index < cards.length - 1)
renderWalletCardFn(item, index < cards.length - 1)
}
itemLayoutAnimation={itemLayoutAnimation}
entering={FadeInDown.duration(150)}
Expand Down
29 changes: 6 additions & 23 deletions ts/features/newWallet/components/WalletCardsContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@ import { useIONavigation } from "../../../navigation/params/AppParamsList";
import { WalletCardCategoryFilter } from "../types";
import { ItwUpcomingWalletBanner } from "../../itwallet/common/components/ItwUpcomingWalletBanner";
import { WalletCardSkeleton } from "./WalletCardSkeleton";
import {
WalletCardsCategoryContainer,
WalletCardsCategoryContainerProps
} from "./WalletCardsCategoryContainer";
import { WalletCardsCategoryContainer } from "./WalletCardsCategoryContainer";
import { WalletEmptyScreenContent } from "./WalletEmptyScreenContent";

const EID_INFO_BOTTOM_PADDING = 128;
Expand All @@ -39,15 +36,9 @@ const WalletCardsContainer = () => {
const cards = useIOSelector(selectSortedWalletCards);
const selectedCategory = useIOSelector(selectWalletCategoryFilter);

const stackCards = cards.length > 4;
mastro993 marked this conversation as resolved.
Show resolved Hide resolved

if (isLoading && cards.length === 0) {
return (
<WalletCardSkeleton
testID="walletCardSkeletonTestID"
cardProps={{}}
isStacked={false}
/>
<WalletCardSkeleton testID="walletCardSkeletonTestID" cardProps={{}} />
);
}

Expand All @@ -72,18 +63,14 @@ const WalletCardsContainer = () => {
>
<View testID="walletCardsContainerTestID">
<ItwBanners />
{shouldRender("itw") && <ItwCardsContainer isStacked={stackCards} />}
{shouldRender("other") && (
<OtherCardsContainer isStacked={stackCards} />
)}
{shouldRender("itw") && <ItwCardsContainer />}
{shouldRender("other") && <OtherCardsContainer />}
</View>
</Animated.View>
);
};

const ItwCardsContainer = ({
isStacked
}: Pick<WalletCardsCategoryContainerProps, "isStacked">) => {
const ItwCardsContainer = () => {
const cards = useIOSelector(selectWalletItwCards);
const isItwTrialEnabled = useIOSelector(isItwTrialActiveSelector);
const isItwValid = useIOSelector(itwLifecycleIsValidSelector);
Expand Down Expand Up @@ -138,7 +125,6 @@ const ItwCardsContainer = ({
key={`cards_category_itw`}
testID={`walletCardsCategoryTestID_itw`}
cards={cards}
isStacked={isStacked}
header={getHeader()}
topElement={<ItwWalletReadyBanner />}
/>
Expand All @@ -147,9 +133,7 @@ const ItwCardsContainer = ({
);
};

const OtherCardsContainer = ({
isStacked
}: Pick<WalletCardsCategoryContainerProps, "isStacked">) => {
const OtherCardsContainer = () => {
const cards = useIOSelector(selectWalletOtherCards);
const isItwTrialEnabled = useIOSelector(isItwTrialActiveSelector);
const isItwEnabled = useIOSelector(isItwEnabledSelector);
Expand All @@ -166,7 +150,6 @@ const OtherCardsContainer = ({
key={`cards_category_other`}
testID={`walletCardsCategoryTestID_other`}
cards={cards}
isStacked={isStacked}
header={
displayHeader
? {
Expand Down
Loading