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

Pull inConfirmRegistrationModal from Reaction #4484

Merged
merged 1 commit into from
Sep 4, 2019
Merged

Pull inConfirmRegistrationModal from Reaction #4484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
112 changes: 18 additions & 94 deletions src/desktop/apps/auction/components/layout/ConfirmRegistrationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,38 @@
import React, { useEffect, useState } from "react"
import { Modal } from "reaction/Components/Modal/Modal"
import { Serif, Button, CheckCircleIcon, Box } from "@artsy/palette"
import React, { useEffect } from "react"
import { connect } from "react-redux"

import {
ContentKey,
PostRegistrationModal,
} from "reaction/Components/Auction/PostRegistrationModal"

const _ConfirmRegistrationModal = ({ me, modalType, onClose }) => {
useEffect(() => {
const replaceModalTriggerPath = location.pathname.replace(
"/confirm-registration",
""
)

history.replaceState({}, document.title, replaceModalTriggerPath)
}, [])
if (!(me && me.bidders && me.bidders.length)) return null

const bidder = me.bidders[0]

const [modalVisible, setModalVisible] = useState(true)

useEffect(
() => {
if (!modalVisible) {
onClose()
}
},
[modalVisible]
)

const hideModal = () => {
setModalVisible(false)
if (!(me && me.bidders && me.bidders.length)) {
return null
}

let Content
const bidder = me.bidders[0]

let contentKey: ContentKey
if (bidder.qualified_for_bidding) {
Content = RegistrationComplete
contentKey = "registrationConfirmed"
} else {
Content =
modalType === "ConfirmBidAndRegistration" ? CantBid : RegistrationPending
contentKey =
modalType === "ConfirmBidAndRegistration"
? "bidPending"
: "registrationPending"
}

return (
<Modal show={modalVisible} onClose={hideModal}>
<Box pt={[3, 0]} textAlign="center">
<Content onClick={hideModal} />
</Box>
</Modal>
)
}

const CantBid = ({ onClick }) => {
return (
<>
<RegistrationPendingHeader />
<Serif my={3} size="3t">
We're sorry, your bid could not be placed.
</Serif>
<ReviewingRegistrationContent />
<ViewWorksButton onClick={onClick} />
</>
)
}

const RegistrationPending = ({ onClick }) => {
return (
<>
<RegistrationPendingHeader />
<ReviewingRegistrationContent />
<ViewWorksButton onClick={onClick} />
</>
)
}
const RegistrationComplete = ({ onClick }) => {
return (
<>
<Serif size="6">Registration complete</Serif>
<CheckCircleIcon mt={2} height="28px" width="28px" fill="green100" />
<Serif mt={2} mb={3} size="3t">
Thank you for registering.
<br />
You’re now eligible to bid on lots in this sale.
</Serif>
<Button width="100%" onClick={onClick}>
Start bidding
</Button>
</>
)
return <PostRegistrationModal contentKey={contentKey} onClose={onClose} />
}

const mapStateToProps = state => ({
Expand All @@ -94,28 +43,3 @@ const mapStateToProps = state => ({
export const ConfirmRegistrationModal = connect(mapStateToProps)(
_ConfirmRegistrationModal
)

const ReviewingRegistrationContent = () => {
return (
<Serif my={3} size="3t">
Artsy is reviewing your registration and you will receive an email when it
has been confirmed. Please email specialist@artsy.net with any questions.
<br />
<br />
In the meantime, you can still view works and watch lots you’re interested
in.
</Serif>
)
}

const RegistrationPendingHeader = () => {
return <Serif size="6">Registration pending</Serif>
}

const ViewWorksButton = props => {
return (
<Button width="100%" onClick={props.onClick}>
View works in this sale
</Button>
)
}
7 changes: 4 additions & 3 deletions src/desktop/apps/auction/components/layout/__tests__/ConfirmRegistrationModal.jest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ describe("Confirm Registration Modal", () => {
it("shows a qualified message", () => {
const { wrapper } = renderTestComponent({
Component: ConfirmRegistrationModal,
options: { renderMode: "render" },
options: { renderMode: "mount" },
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

render did not work and rendered nothing with the PostRegistrationModal component in Reaction. Not sure why it's working with mount even after reading enzymejs/enzyme#465 (comment).

data: {
app: {
modalType: "ConfirmRegistration",
Expand All @@ -90,6 +90,7 @@ describe("Confirm Registration Modal", () => {
},
},
})

expect(wrapper.text()).toEqual(
expect.stringContaining("Registration complete")
)
Expand All @@ -101,7 +102,7 @@ describe("Confirm Registration Modal", () => {
const { wrapper } = renderTestComponent({
Component: ConfirmRegistrationModal,
props: { cantBid: true },
options: { renderMode: "render" },
options: { renderMode: "mount" },
data: {
app: {
modalType: "ConfirmBidAndRegistration",
Expand All @@ -124,7 +125,7 @@ describe("Confirm Registration Modal", () => {
it("shows a registration pending message if the user was trying to register", () => {
const { wrapper } = renderTestComponent({
Component: ConfirmRegistrationModal,
options: { renderMode: "render" },
options: { renderMode: "mount" },
data: {
app: {
modalType: "ConfirmRegistration",
Expand Down