From 19015ee7716710bcd9f15c2026a9205f7fa099f1 Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Fri, 17 Jan 2025 17:05:21 +0100 Subject: [PATCH] wip --- .../roblox/components/ConnectRoblox.tsx | 378 ++++++++++++------ .../stories/roblox/ConnectRoblox.stories.tsx | 1 + .../src/stories/widgets/Roblox.stories.tsx | 1 + 3 files changed, 250 insertions(+), 130 deletions(-) diff --git a/packages/react-kit/src/components/widgets/roblox/components/ConnectRoblox.tsx b/packages/react-kit/src/components/widgets/roblox/components/ConnectRoblox.tsx index ed7f27a0b..e407ee190 100644 --- a/packages/react-kit/src/components/widgets/roblox/components/ConnectRoblox.tsx +++ b/packages/react-kit/src/components/widgets/roblox/components/ConnectRoblox.tsx @@ -6,11 +6,11 @@ import React, { useRef, useState } from "react"; -import { css, styled } from "styled-components"; +import { css, CSSProperties, styled } from "styled-components"; import { Grid } from "../../../ui/Grid"; import { Typography } from "../../../ui/Typography"; -import { useAccount } from "../../../../hooks"; -import { CheckCircle, Power } from "phosphor-react"; +import { useAccount, useBreakpoints } from "../../../../hooks"; +import { CaretDown, CaretUp, CheckCircle, Power } from "phosphor-react"; import { useIsRobloxLoggedIn } from "../../../../hooks/roblox/useIsRobloxLoggedIn"; import { useRobloxLogout } from "../../../../hooks/roblox/useRobloxLogout"; import { useRobloxConfigContext } from "../../../../hooks/roblox/context/useRobloxConfigContext"; @@ -31,12 +31,83 @@ import { getCssVar } from "../../../../theme"; import ThemedButton from "../../../ui/ThemedButton"; import { maxWidthStepper } from "./styles"; import { productsPageSize, purchasedProductsPageSize, statuses } from "./const"; +import { breakpoint } from "../../../../lib/ui/breakpoint"; -const Wrapper = styled(Grid)` +const stepToIcon = { + 0: ( + + + + + ), + 1: ( + + + + + ), + 2: ( + + + + + ) +} as const; + +const breakpointHorizontal = breakpoint.xs; + +const StepsOverview = styled(Grid)` + padding: 1rem; + ${breakpointHorizontal} { + display: none; + } +`; +const Wrapper = styled(Grid).attrs({ + flexDirection: "column" +})` + background-color: ${getCssVar("--background-accent-color")}; +`; +const FullStepsWrapper = styled(Grid)` container-type: inline-size; display: flex; - flex-direction: row; - background-color: ${getCssVar("--background-accent-color")}; + flex-direction: column; + align-items: center; + ${breakpointHorizontal} { + flex-direction: row; + } `; const StyledPower = styled(Power)` @@ -55,13 +126,13 @@ const iconClass = "icon"; const StepWrapperGrid = styled(Grid)<{ $isActive: StepProps["isActive"]; $isDone: StepProps["isDone"]; - $itemWidthPx: number; + $itemWidthPx?: number; + $padding?: CSSProperties["padding"]; }>` - max-width: ${maxWidthStepper}; min-height: 100%; align-self: stretch; background-color: ${getCssVar("--background-accent-color")}; - padding: 24px; + padding: ${({ $padding }) => ($padding !== undefined ? $padding : "24px")}; svg.${iconClass} { ${({ $isActive }) => { return css` @@ -80,16 +151,21 @@ const StepWrapperGrid = styled(Grid)<{ `; }} } - + ${breakpointHorizontal} { + max-width: ${maxWidthStepper}; + } &:nth-of-type(1) ${IconWrapper} { - &::after { - content: ""; - position: absolute; - top: 50%; - left: 100%; - width: calc(2 * ${({ $itemWidthPx }) => $itemWidthPx + "px"}); - height: 2px; - background-color: ${getCssVar("--background-color")}; + ${breakpointHorizontal} { + // line + &::after { + content: ""; + position: absolute; + top: 50%; + left: 100%; + width: calc(2 * ${({ $itemWidthPx }) => $itemWidthPx + "px"}); + height: 2px; + background-color: ${getCssVar("--background-color")}; + } } } @container (width < 692px) { @@ -183,10 +259,50 @@ const Step = forwardRef( ); } ); +type SmallStepProps = { + icon: ReactElement; + title: string; + isActive: boolean; + isDone: boolean; +}; +const SmallStep = ({ icon: Icon, title, isActive, isDone }: SmallStepProps) => { + return ( + + + {isDone ? ( + + ) : ( + React.cloneElement(Icon, { className: iconClass }) + )} + + + {title} + + + ); +}; export type ConnectRobloxProps = { sellerId: string; step3: { + titleForMobile: string; title: string; subtitle: string; buttonText: string; @@ -288,7 +404,11 @@ export const ConnectRoblox = forwardRef( }); const isWalletAuthenticated = isWalletAuthenticatedSigned || isAuthChecked?.walletAuth; - + useEffect(() => { + if (!robloxLoggedInData?.isLoggedIn) { + setActiveStep(0); + } + }, [robloxLoggedInData?.isLoggedIn]); useQuery( [robloxLoggedInData, address, isAuthChecked], () => { @@ -325,119 +445,117 @@ export const ConnectRoblox = forwardRef( } }, [address, isRobloxLoggedIn]); const isConnectWalletStepActive = activeStep >= 1 || !!address; + const step0Props = { + isActive: true, + isDone: isRobloxLoggedIn, + icon: stepToIcon[0] + } satisfies Partial; + const step1Props = { + isActive: isConnectWalletStepActive, + isDone: !!address, + icon: stepToIcon[1] + } satisfies Partial; + const step2Props = { + isActive: activeStep === 2, + isDone: isSignUpDone, + icon: stepToIcon[2] + } satisfies Partial; + const [showFullSteps, setShowFullSteps] = useState(false); + const { isXS } = useBreakpoints(); + useEffect(() => { + if (!isXS) { + setShowFullSteps(true); + } + }, [isXS]); return ( - - - - - - } - title={ - isRobloxLoggedIn && robloxNickname - ? `Connected as ${robloxNickname}` - : "Connect your Roblox account" - } - subtitle="Depending on your inventory you will see which exclusive products you can buy." - button={ - isRobloxLoggedIn ? ( - { - await robloxLogoutAsync(); - }} - > - Logout Roblox - - ) : ( - { - nextLatestActiveStep(1); - }} - onDisconecctWallet={() => { - disconnectWallet(); - }} - /> - ) - } - /> - - - - - } - title="Create an account" - subtitle="Linking your Roblox account to your wallet to signal your permission." - button={ - - } - /> - - - - - } - title={step3.title} - subtitle={step3.subtitle} - button={ - { - await step3.callback(); - setSignUpDone(true); + + + + + + {showFullSteps && ( + { + setShowFullSteps(false); }} - > - {step3.buttonText} - - } - /> + /> + )} + {!showFullSteps && ( + { + setShowFullSteps(true); + }} + /> + )} + + + + {(activeStep === 0 || showFullSteps) && ( + { + await robloxLogoutAsync(); + }} + > + Logout Roblox + + ) : ( + { + nextLatestActiveStep(1); + }} + onDisconecctWallet={() => { + disconnectWallet(); + }} + /> + ) + } + /> + )} + {(activeStep === 1 || showFullSteps) && ( + + } + /> + )} + {(activeStep === 2 || showFullSteps) && ( + { + await step3.callback(); + setSignUpDone(true); + }} + > + {step3.buttonText} + + } + /> + )} + ); } diff --git a/packages/react-kit/src/stories/roblox/ConnectRoblox.stories.tsx b/packages/react-kit/src/stories/roblox/ConnectRoblox.stories.tsx index ca4c350c6..d547a1864 100644 --- a/packages/react-kit/src/stories/roblox/ConnectRoblox.stories.tsx +++ b/packages/react-kit/src/stories/roblox/ConnectRoblox.stories.tsx @@ -71,6 +71,7 @@ export const Base = { ...BASE_ARGS, sellerId: "4", step3: { + titleForMobile: "Exclusives", buttonText: "Step 3 button text", callback: () => { console.log("Step 3 button clicked"); diff --git a/packages/react-kit/src/stories/widgets/Roblox.stories.tsx b/packages/react-kit/src/stories/widgets/Roblox.stories.tsx index 0241d6845..d22135482 100644 --- a/packages/react-kit/src/stories/widgets/Roblox.stories.tsx +++ b/packages/react-kit/src/stories/widgets/Roblox.stories.tsx @@ -72,6 +72,7 @@ export const Base = { }, connectProps: { step3: { + titleForMobile: "Exclusives", title: "Get access to exclusives!", subtitle: `Now you can purchase GYMSHARK exclusives that are available to you.`, buttonText: "Sign up",