feat(ONYX-1974): add new layout for signup modal

src/Components/AuthDialog/AuthDialog.tsx

@@ -1,16 +1,18 @@
-import { Box, Image, ModalDialog } from "@artsy/palette"
+import { ModalDialog } from "@artsy/palette"
+import { useFlag } from "@unleash/proxy-client-react"
 import {
   type AuthDialogMode,
   useAuthDialogContext,
 } from "Components/AuthDialog/AuthDialogContext"
+import { AuthDialogLeftPanel } from "Components/AuthDialog/AuthDialogLeftPanel"
 import { AuthDialogTitle } from "Components/AuthDialog/AuthDialogTitle"
 import { useAuthDialogTracking } from "Components/AuthDialog/Hooks/useAuthDialogTracking"
+import { MODAL_WIDTH } from "Components/AuthDialog/Utils/utils"
 import { AuthDialogForgotPassword } from "Components/AuthDialog/Views/AuthDialogForgotPassword"
 import { AuthDialogLogin } from "Components/AuthDialog/Views/AuthDialogLogin"
 import { AuthDialogSignUp } from "Components/AuthDialog/Views/AuthDialogSignUp"
 import { AuthDialogWelcome } from "Components/AuthDialog/Views/AuthDialogWelcome"
 import { useRecaptcha } from "Utils/EnableRecaptcha"
-import { resized } from "Utils/resized"
 import { type FC, useEffect } from "react"
 
 export interface AuthDialogProps {
@@ -21,6 +23,7 @@ export const AuthDialog: FC<React.PropsWithChildren<AuthDialogProps>> = ({
   onClose,
 }) => {
   useRecaptcha()
+  const newSignupEnabled = useFlag("onyx_new-signup-modal")
 
   const {
     state: { mode, options },
@@ -43,6 +46,7 @@ export const AuthDialog: FC<React.PropsWithChildren<AuthDialogProps>> = ({
   }
 
   const isCloseable = options.isCloseable ?? true
+  const modalProps = getModalProps(!!options.image, newSignupEnabled)
 
   return (
     <ModalDialog
@@ -56,12 +60,8 @@ export const AuthDialog: FC<React.PropsWithChildren<AuthDialogProps>> = ({
       }
       hasLogo
       m={[1, 2]}
-      {...(options.image
-        ? {
-            width: ["100%", 900],
-            leftPanel: <AuthDialogLeftPanel />,
-          }
-        : { width: ["100%", 450] })}
+      height={[400, "auto"]}
+      {...modalProps}
     >
       <AuthDialogView />
     </ModalDialog>
@@ -90,25 +90,15 @@ export const DEFAULT_TITLES: Record<AuthDialogMode, string> = {
   Welcome: "Sign up or log in",
 }
 
-const IMAGE = {
-  width: 900,
-  height: 2030,
-  src: "https://files.artsy.net/images/2x_Evergreen-Artist-Page-Sign-Up-Modal.jpg",
-}
-
-const AuthDialogLeftPanel: FC<React.PropsWithChildren<unknown>> = () => {
-  const img = resized(IMAGE.src, { width: 450 })
+const getModalProps = (hasImage: boolean, newSignupEnabled: boolean) => {
+  if (hasImage || newSignupEnabled) {
+    return {
+      width: ["100%", MODAL_WIDTH],
+      leftPanel: <AuthDialogLeftPanel />,
+    }
+  }
 
-  return (
-    <Box display={["none", "block"]} width="100%">
-      <Image
-        {...img}
-        width="100%"
-        height="100%"
-        lazyLoad
-        alt=""
-        style={{ objectFit: "cover" }}
-      />
-    </Box>
-  )
+  return {
+    width: ["100%", 450],
+  }
 }

src/Components/AuthDialog/AuthDialogLeftPanel.tsx

@@ -0,0 +1,199 @@
+import {
+  Box,
+  Carousel,
+  CarouselCell,
+  type CarouselCellProps,
+  CarouselRail,
+  type CarouselRailProps,
+  Flex,
+  Image,
+  THEME,
+} from "@artsy/palette"
+import { useFlag } from "@unleash/proxy-client-react"
+import { MODAL_WIDTH } from "Components/AuthDialog/Utils/utils"
+import {
+  type FC,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react"
+import styled from "styled-components"
+import { useCursor } from "use-cursor"
+import { resized } from "Utils/resized"
+
+export const AuthDialogLeftPanel: FC<React.PropsWithChildren> = () => {
+  const img = resized(IMAGE.src, { width: MODAL_WIDTH / 2 })
+
+  const newSignupEnabled = useFlag("onyx_new-signup-modal")
+
+  if (!newSignupEnabled) {
+    return (
+      <Box display={["none", "block"]} width="100%">
+        <Image
+          {...img}
+          width="100%"
+          height="100%"
+          lazyLoad
+          alt=""
+          style={{ objectFit: "cover" }}
+        />
+      </Box>
+    )
+  }
+
+  return (
+    <Box display={["none", "block"]} width="100%" overflow="hidden">
+      <ImageSlider />
+    </Box>
+  )
+}
+
+const ImageSlider: FC = () => {
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const { index, setCursor } = useCursor({ max: DEFAULT_IMAGES.length })
+
+  const stopAutoPlay = useCallback(() => {
+    intervalRef.current && clearInterval(intervalRef.current)
+  }, [])
+
+  useEffect(() => {
+    intervalRef.current = setInterval(
+      () => setCursor(prevCursor => prevCursor + 1),
+      CAROUSEL_INTERVAL,
+    )
+
+    return stopAutoPlay
+  }, [setCursor, stopAutoPlay])
+
+  const handleClick = (index: number) => {
+    setCursor(index)
+    stopAutoPlay()
+  }
+
+  return (
+    <Flex width={COLUMN_WIDTH} height="100%" position="relative">
+      <Carousel
+        Cell={Cell}
+        Rail={Rail}
+        initialIndex={index}
+        height="100%"
+        display="flex"
+      >
+        {DEFAULT_IMAGES.map((img, index) => (
+          <Box width={COLUMN_WIDTH} height="100%" key={`signup-img-${img.src}`}>
+            <Image
+              {...img}
+              width="100%"
+              height="100%"
+              lazyLoad={index !== 0}
+              fetchPriority={index === 0 ? "high" : "auto"}
+              alt=""
+              style={{
+                objectFit: "cover",
+              }}
+            />
+          </Box>
+        ))}
+      </Carousel>
+
+      <Flex
+        position="absolute"
+        p={2}
+        bottom={0}
+        left={0}
+        gap={1}
+        flexDirection="column"
+      >
+        <DotIndicators data-active-index={index}>
+          {DEFAULT_IMAGES.map((_, dotIndex) => (
+            <Dot
+              key={dotIndex}
+              data-index={dotIndex}
+              backgroundColor="mono0"
+              onClick={() => handleClick(dotIndex)}
+            />
+          ))}
+        </DotIndicators>
+      </Flex>
+    </Flex>
+  )
+}
+
+const Cell: ForwardRefExoticComponent<CarouselCellProps> = forwardRef(
+  (props, ref) => {
+    return (
+      <CarouselCell
+        {...props}
+        id="cell"
+        ref={ref as any}
+        display="inline-flex"
+        flex={1}
+        width="100%"
+        height="100%"
+        verticalAlign="top"
+        pr={0}
+      />
+    )
+  },
+)
+
+const Rail: FC<React.PropsWithChildren<CarouselRailProps>> = props => {
+  return (
+    <CarouselRail
+      {...props}
+      display="flex"
+      height="100%"
+      width="100%"
+      id="carousel-rail"
+    />
+  )
+}
+
+const DotIndicators = styled(Flex)`
+  gap: 8px;
+  align-items: center;
+`
+
+const Dot = styled(Box)`
+  border-radius: 4px;
+  cursor: pointer;
+  height: 8px;
+  transition: width 0.3s ease;
+  width: 8px;
+
+  ${DotIndicators}[data-active-index="0"] &[data-index="0"],
+  ${DotIndicators}[data-active-index="1"] &[data-index="1"],
+  ${DotIndicators}[data-active-index="2"] &[data-index="2"] {
+    width: 24px;
+  }
+`
+
+const CAROUSEL_INTERVAL = 5000
+const COLUMN_WIDTH =
+  MODAL_WIDTH / 2 - Number.parseInt(THEME.space["2"].replace("px", ""))
+const IMAGE_HEIGHT = 2030
+const IMAGE = {
+  width: MODAL_WIDTH,
+  height: IMAGE_HEIGHT,
+  src: "https://files.artsy.net/images/2x_Evergreen-Artist-Page-Sign-Up-Modal.jpg",
+}
+const DEFAULT_IMAGES = [
+  {
+    width: MODAL_WIDTH,
+    height: IMAGE_HEIGHT,
+    src: "https://files.artsy.net/images/signup-01.png",
+  },
+  {
+    width: MODAL_WIDTH,
+    height: IMAGE_HEIGHT,
+    src: "https://files.artsy.net/images/signup-02.png",
+  },
+  {
+    width: MODAL_WIDTH,
+    height: IMAGE_HEIGHT,
+    src: "https://files.artsy.net/images/signup-03.png",
+  },
+]

src/Components/AuthDialog/Utils/utils.ts

@@ -0,0 +1 @@
+export const MODAL_WIDTH = 900