Merge pull request artsy#3239 from artsy/type-open-auth

Helpers for opening auth modals are strictly typed

src/Apps/Artist/Components/ArtistHeader.tsx

@@ -391,6 +391,7 @@ const handleOpenAuth = (mediator, artist) => {
     entity: artist,
     contextModule: Schema.ContextModule.ArtistPage,
     intent: AuthModalIntent.FollowArtist,
+    kind: "artist",
   })
 }
 

src/Apps/Artist/Routes/Overview/Components/RecommendedArtist.tsx

@@ -22,6 +22,7 @@ const handleOpenAuth = (mediator, artist) => {
     entity: artist,
     contextModule: Schema.ContextModule.RecommendedArtists,
     intent: AuthModalIntent.FollowArtist,
+    kind: "artist",
   })
 }
 

src/Apps/Artist/Routes/Overview/Components/ZeroState.tsx

@@ -13,6 +13,7 @@ export const ZeroState = props => {
       entity: artist,
       contextModule: AnalyticsSchema.ContextModule.ArtworkFilter,
       intent: AuthModalIntent.FollowArtist,
+      kind: "artist",
     })
   }
 

src/Apps/Artwork/Components/ArtistInfo.tsx

@@ -87,6 +87,7 @@ export class ArtistInfo extends Component<ArtistInfoProps, ArtistInfoState> {
       entity: artist,
       contextModule: Schema.ContextModule.ArtworkPage,
       intent: AuthModalIntent.FollowArtist,
+      kind: "artist",
     })
   }
 

src/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAboutTheWorkFromPartner.tsx

@@ -57,6 +57,7 @@ export class ArtworkDetailsAboutTheWorkFromPartner extends React.Component<
       entity: partner,
       contextModule: Schema.ContextModule.ArtworkPage,
       intent: AuthModalIntent.FollowPartner,
+      kind: "profile",
     })
   }
 

src/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarArtists.tsx

@@ -34,6 +34,7 @@ export class ArtworkSidebarArtists extends React.Component<ArtistsProps> {
       entity: artist,
       contextModule: Schema.ContextModule.ArtworkPage,
       intent: AuthModalIntent.FollowArtist,
+      kind: "artist",
     })
   }
 

src/Apps/Collect2/Routes/Collection/Components/Header/index.tsx

@@ -41,6 +41,7 @@ const handleOpenAuth = (mediator, artist) => {
     entity: artist,
     contextModule: AnalyticsSchema.ContextModule.CollectionDescription,
     intent: AuthModalIntent.FollowArtist,
+    kind: "artist",
   })
 }
 

src/Components/Artwork/Save.tsx

@@ -132,9 +132,10 @@ export class SaveButton extends React.Component<SaveProps, SaveState> {
       openAuthModal(this.props.mediator, {
         contextModule: Schema.ContextModule.ArtworkPage,
         entity: {
-          id: this.props.artwork.id,
+          id: this.props.artwork.slug,
           name: this.props.artwork.title,
         },
+        kind: "artworks",
         intent: AuthModalIntent.SaveArtwork,
       })
     }

src/Components/Authentication/FormSwitcher.tsx

@@ -12,6 +12,7 @@ import { MobileForgotPasswordForm } from "Components/Authentication/Mobile/Forgo
 import { MobileLoginForm } from "Components/Authentication/Mobile/LoginForm"
 import { MobileSignUpForm } from "Components/Authentication/Mobile/SignUpForm"
 import {
+  AfterSignUpAction,
   FormComponentType,
   InputValues,
   ModalOptions,
@@ -66,6 +67,7 @@ export class FormSwitcher extends React.Component<FormSwitcherProps, State> {
         destination,
         redirectTo,
         intent,
+        title,
         trigger,
         triggerSeconds,
       },
@@ -79,7 +81,7 @@ export class FormSwitcher extends React.Component<FormSwitcherProps, State> {
         action: "Auth impression",
         type,
         context_module: contextModule,
-        modal_copy: copy,
+        modal_copy: copy || title,
         trigger: trigger || "click",
         trigger_seconds: triggerSeconds,
         intent,
@@ -119,6 +121,17 @@ export class FormSwitcher extends React.Component<FormSwitcherProps, State> {
     }
   }
 
+  getAfterSignupAction = (options: ModalOptions): AfterSignUpAction => {
+    const { afterSignUpAction, action, kind, objectId } = options
+    return (
+      afterSignUpAction || {
+        action,
+        kind,
+        objectId,
+      }
+    )
+  }
+
   render() {
     const {
       error,
@@ -135,10 +148,11 @@ export class FormSwitcher extends React.Component<FormSwitcherProps, State> {
         accepted_terms_of_service: true,
         agreed_to_receive_emails: true,
         "signup-referer": options.signupReferer,
+        afterSignUpAction: this.getAfterSignupAction(options),
       },
-      options.redirectTo
+      options.redirectTo || options["redirect-to"]
         ? {
-            "redirect-to": options.redirectTo,
+            "redirect-to": options.redirectTo || options["redirect-to"],
           }
         : null,
       options.intent

src/Components/Authentication/Types.ts

@@ -36,7 +36,7 @@ export interface FormProps {
   showRecaptchaDisclaimer?: boolean
 }
 
-interface AfterSignUpAction {
+export interface AfterSignUpAction {
   action: "save" | "follow" | "editorialSignup"
   objectId?: string
   kind?: "artist" | "artworks" | "gene" | "profile" | "show"
@@ -99,6 +99,21 @@ export interface ModalOptions {
    * The image rendered with the modal
    */
   image?: string
+  /**
+   * MOBILE ONLY
+   * Used to construct afterSignupAction from query params
+   */
+  kind?: AfterSignUpAction["kind"]
+  /**
+   * MOBILE ONLY
+   * Used to construct afterSignupAction from query params
+   */
+  action?: AfterSignUpAction["action"]
+  /**
+   * MOBILE ONLY
+   * Used to construct afterSignupAction from query params
+   */
+  objectId?: AfterSignUpAction["objectId"]
 }
 
 export type FormComponentType =

src/Components/FollowButton/FollowArtistButton.tsx

@@ -11,6 +11,7 @@ import { FollowButton } from "./Button"
 import { FollowButtonDeprecated } from "./ButtonDeprecated"
 import { FollowTrackingData } from "./Typings"
 
+import { ModalOptions, ModalType } from "Components/Authentication/Types"
 import {
   commitMutation,
   createFragmentContainer,
@@ -25,7 +26,7 @@ interface Props
   artist?: FollowArtistButton_artist
   tracking?: TrackingProp
   trackingData?: FollowTrackingData
-  onOpenAuthModal?: (type: "register" | "login", config?: object) => void
+  onOpenAuthModal?: (type: ModalType, config?: ModalOptions) => void
 
   /**
    * FIXME: Default is true due to legacy code. If false, use new @artsy/palette
@@ -86,7 +87,7 @@ export class FollowArtistButton extends React.Component<Props, State> {
         intent: "follow artist",
         copy: "Sign up to follow artists",
       }
-      onOpenAuthModal("register", config)
+      onOpenAuthModal(ModalType.signup, config)
     }
   }
 

src/Components/FollowButton/FollowGeneButton.tsx

@@ -1,5 +1,6 @@
 import { FollowGeneButtonMutation } from "__generated__/FollowGeneButtonMutation.graphql"
 import * as Artsy from "Artsy"
+import { ModalOptions, ModalType } from "Components/Authentication/Types"
 import { extend } from "lodash"
 import React from "react"
 import {
@@ -20,7 +21,7 @@ interface Props
   gene?: FollowGeneButton_gene
   tracking?: TrackingProp
   trackingData?: FollowTrackingData
-  onOpenAuthModal?: (type: "register" | "login", config?: object) => void
+  onOpenAuthModal?: (type: ModalType, config?: ModalOptions) => void
 }
 
 export class FollowGeneButton extends React.Component<Props> {
@@ -67,7 +68,7 @@ export class FollowGeneButton extends React.Component<Props> {
       this.trackFollow()
     } else {
       onOpenAuthModal &&
-        onOpenAuthModal("register", {
+        onOpenAuthModal(ModalType.signup, {
           contextModule: "intext tooltip",
           intent: "follow gene",
           copy: "Sign up to follow categories",

src/Components/FollowButton/__tests__/FollowArtistButton.test.tsx

@@ -58,7 +58,7 @@ describe("FollowArtistButton", () => {
       component.find(FollowButtonDeprecated).simulate("click")
       const args = testProps.onOpenAuthModal.mock.calls[0]
 
-      expect(args[0]).toBe("register")
+      expect(args[0]).toBe("signup")
       expect(args[1].contextModule).toBe("intext tooltip")
       expect(args[1].intent).toBe("follow artist")
       expect(args[1].copy).toBe("Sign up to follow artists")

src/Components/FollowButton/__tests__/FollowGeneButton.test.tsx

@@ -54,7 +54,7 @@ describe("FollowGeneButton", () => {
       component.find(FollowButtonDeprecated).simulate("click")
       const args = testProps.onOpenAuthModal.mock.calls[0]
 
-      expect(args[0]).toBe("register")
+      expect(args[0]).toBe("signup")
       expect(args[1].contextModule).toBe("intext tooltip")
       expect(args[1].intent).toBe("follow gene")
       expect(args[1].copy).toBe("Sign up to follow categories")

src/Components/Publishing/Article.tsx

@@ -1,6 +1,7 @@
 import { Theme } from "@artsy/palette"
 import React from "react"
 
+import { ModalOptions, ModalType } from "Components/Authentication/Types"
 import { BannerWrapper } from "Components/Publishing/Banner/Banner"
 import { PixelTracker } from "Components/Publishing/Display/ExternalTrackers"
 import { EditorialFeature } from "Components/Publishing/EditorialFeature/EditorialFeature"
@@ -48,7 +49,7 @@ export interface ArticleProps {
   tracking?: TrackingProp
   closeViewer?: () => void
   viewerIsOpen?: boolean
-  onOpenAuthModal?: (type: "register" | "login", config: object) => void
+  onOpenAuthModal?: (type: ModalType, config: ModalOptions) => void
   onExpand?: () => void
   shouldAdRender?: boolean
 }

src/Components/Publishing/ToolTip/__tests__/ArtistToolTip.test.tsx

@@ -89,7 +89,7 @@ describe("ArtistToolTip", () => {
       component.find(FollowArtistButton).simulate("click")
       const args = context.onOpenAuthModal.mock.calls[0]
 
-      expect(args[0]).toBe("register")
+      expect(args[0]).toBe("signup")
       expect(args[1].contextModule).toBe("intext tooltip")
       expect(args[1].intent).toBe("follow artist")
     })

src/Components/Publishing/ToolTip/__tests__/GeneToolTip.test.tsx

@@ -48,7 +48,7 @@ describe("GeneTooltip", () => {
       component.find(FollowGeneButton).simulate("click")
       const args = context.onOpenAuthModal.mock.calls[0]
 
-      expect(args[0]).toBe("register")
+      expect(args[0]).toBe("signup")
       expect(args[1].contextModule).toBe("intext tooltip")
       expect(args[1].intent).toBe("follow gene")
     })

src/Components/v2/ArtistCard.tsx

@@ -142,6 +142,7 @@ const handleOpenAuth = props => {
     entity: props.artist,
     contextModule: Schema.ContextModule.ArtworkPage,
     intent: AuthModalIntent.FollowArtist,
+    kind: "artist",
   })
 }
 

src/Utils/__tests__/openAuthModal.test.ts

@@ -0,0 +1,127 @@
+import * as Schema from "Artsy/Analytics/Schema"
+import {
+  AuthModalIntent,
+  AuthModalOptions,
+  openAuthModal,
+} from "../openAuthModal"
+
+jest.mock("sharify", () => ({ data: jest.fn() }))
+const sd = require("sharify").data
+
+const artistArgs: AuthModalOptions = {
+  contextModule: Schema.ContextModule.ArtistPage,
+  entity: {
+    slug: "andy-warhol",
+    name: "Andy Warhol",
+  },
+  kind: "artist",
+  intent: AuthModalIntent.FollowArtist,
+}
+
+const partnerArgs: AuthModalOptions = {
+  contextModule: Schema.ContextModule.AboutTheWorkPartner,
+  entity: {
+    slug: "david-zwirner",
+    name: "David Zwirner",
+  },
+  kind: "profile",
+  intent: AuthModalIntent.FollowPartner,
+}
+
+const artworkArgs: AuthModalOptions = {
+  contextModule: Schema.ContextModule.ArtworkPage,
+  entity: {
+    id: "andy-warhol-skull",
+    name: "Skull",
+  },
+  intent: AuthModalIntent.SaveArtwork,
+  kind: "artworks",
+}
+
+describe("openAuthModal", () => {
+  let mediator
+
+  beforeEach(() => {
+    mediator = {
+      trigger: jest.fn(),
+    }
+    window.location.assign = jest.fn()
+  })
+
+  describe("desktop", () => {
+    it("transforms args for following artists", () => {
+      openAuthModal(mediator, artistArgs)
+
+      expect(mediator.trigger).toBeCalledWith("open:auth", {
+        afterSignUpAction: {
+          action: "follow",
+          kind: "artist",
+          objectId: "andy-warhol",
+        },
+        copy: "Sign up to follow Andy Warhol",
+        intent: "follow artist",
+        mode: "signup",
+      })
+    })
+
+    it("transforms args for following partners", () => {
+      openAuthModal(mediator, partnerArgs)
+
+      expect(mediator.trigger).toBeCalledWith("open:auth", {
+        afterSignUpAction: {
+          action: "follow",
+          kind: "profile",
+          objectId: "david-zwirner",
+        },
+        copy: "Sign up to follow David Zwirner",
+        intent: "follow partner",
+        mode: "signup",
+      })
+    })
+
+    it("transforms args for saving artworks", () => {
+      openAuthModal(mediator, artworkArgs)
+
+      expect(mediator.trigger).toBeCalledWith("open:auth", {
+        afterSignUpAction: {
+          action: "save",
+          kind: "artworks",
+          objectId: "andy-warhol-skull",
+        },
+        copy: "Sign up to save artworks",
+        intent: "save artwork",
+        mode: "signup",
+      })
+    })
+  })
+
+  describe("mobile", () => {
+    beforeEach(() => {
+      sd.IS_MOBILE = true
+    })
+
+    it("transforms args for following artists", () => {
+      openAuthModal(mediator, artistArgs)
+      expect(window.location.assign).toBeCalledWith(
+        "/sign_up?redirect-to=http://localhost/&action=follow&contextModule=Artist%20page&copy=Sign%20up%20to%20follow%20Andy%20Warhol&intent=follow%20artist&kind=artist&objectId=andy-warhol"
+      )
+      expect(mediator.trigger).not.toBeCalled()
+    })
+
+    it("transforms args for following partners", () => {
+      openAuthModal(mediator, partnerArgs)
+      expect(window.location.assign).toBeCalledWith(
+        "/sign_up?redirect-to=http://localhost/&action=follow&contextModule=About%20the%20Work%20%28Partner%29&copy=Sign%20up%20to%20follow%20David%20Zwirner&intent=follow%20partner&kind=profile&objectId=david-zwirner"
+      )
+      expect(mediator.trigger).not.toBeCalled()
+    })
+
+    it("transforms args for saving artworks", () => {
+      openAuthModal(mediator, artworkArgs)
+      expect(window.location.assign).toBeCalledWith(
+        "/sign_up?redirect-to=http://localhost/&action=save&contextModule=Artwork%20page&copy=Sign%20up%20to%20save%20artworks&intent=save%20artwork&kind=artworks&objectId=andy-warhol-skull"
+      )
+      expect(mediator.trigger).not.toBeCalled()
+    })
+  })
+})