diff --git a/apps/passport-client/components/screens/ZappScreens/ZappButton.tsx b/apps/passport-client/components/screens/ZappScreens/ZappButton.tsx index 7ea2af6c6a..a2f54e3338 100644 --- a/apps/passport-client/components/screens/ZappScreens/ZappButton.tsx +++ b/apps/passport-client/components/screens/ZappScreens/ZappButton.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -export const ZAPP_BUTTON_HEIGHT = 80; +export const ZAPP_BUTTON_HEIGHT = 60; export const ZappButton = styled.div` display: flex; width: 100%; diff --git a/apps/passport-client/new-components/screens/Home/NoUpcomingTicketsState.tsx b/apps/passport-client/new-components/screens/Home/NoUpcomingTicketsState.tsx index fdcc11f58c..47878e09e6 100644 --- a/apps/passport-client/new-components/screens/Home/NoUpcomingTicketsState.tsx +++ b/apps/passport-client/new-components/screens/Home/NoUpcomingTicketsState.tsx @@ -9,19 +9,23 @@ import { } from "react"; import { useSearchParams } from "react-router-dom"; import styled from "styled-components"; -import { useDispatch, usePCDCollection } from "../../../src/appHooks"; +import { useDispatch, usePCDCollection, useSelf } from "../../../src/appHooks"; import { BANNER_HEIGHT, MAX_WIDTH_SCREEN } from "../../../src/sharedConstants"; import { nextFrame } from "../../../src/util"; import { PodsCollectionList } from "../../shared/Modals/PodsCollectionBottomModal"; import { Typography } from "../../shared/Typography"; import { hideScrollCSS, replaceDotWithSlash } from "../../shared/utils"; import { ScrollIndicator } from "./ScrollIndicator"; +import { ZappButtonsContainer } from "../../../components/screens/ZappScreens/ZappButtonsContainer"; +import { ZappButton } from "../../../components/screens/ZappScreens/ZappButton"; +import { appConfig } from "../../../src/appConfig"; +import { ZappFullScreen } from "../../../components/screens/ZappScreens/ZappFullScreen"; const EMPTY_CARD_CONTAINER_HEIGHT = 220; const EmptyCardContainer = styled.div<{ longVersion: boolean }>` display: flex; height: ${({ longVersion }): string => - longVersion ? "min(80vh, 549px)" : EMPTY_CARD_CONTAINER_HEIGHT + "px"}; + longVersion ? "min(70vh, 499px)" : EMPTY_CARD_CONTAINER_HEIGHT + "px"}; justify-content: center; align-items: center; border-radius: 16px; @@ -97,8 +101,10 @@ export const NoUpcomingEventsState = ({ const [expandedGroupsIds, setExpandedGroupsIds] = useState< Record >({}); - const [params] = useSearchParams(); + const [params, setParams] = useSearchParams(); const listContainerRef = useRef(null); + const [zappUrl, setZappUrl] = useState(""); + const self = useSelf(); // New function to check scrollability const checkScrollability = (): void => { @@ -149,6 +155,18 @@ export const NoUpcomingEventsState = ({ checkScrollability(); }, [noPods, params, setExpandedGroupsIds]); + if (zappUrl) { + return ( + { + setZappUrl(""); + params.delete("folder"); + setParams(params); + }} + /> + ); + } return ( @@ -189,6 +207,30 @@ export const NoUpcomingEventsState = ({ + {Object.keys(appConfig.embeddedZapps).length > 0 && ( + + {Object.entries(appConfig.embeddedZapps).map(([zappName, url]) => ( + { + setZappUrl(url); + setParams({ folder: zappName }); + }} + > +