\n \n );\n}\n\nProductThumbnail.propTypes = {\n product: PropTypes.object.isRequired,\n};\n\nexport default ProductThumbnail;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { emptyObject } from '../utilities/object_utilities';\n\nfunction ProductCategoryThumbnail({ category }) {\n const { image } = category;\n\n if (emptyObject(image) || image.thumb.url == null) {\n return (\n \n \n \n );\n }\n return (\n \n \n
\n );\n}\n\nTextFieldWithSubmitIcon.propTypes = {\n placeholder: PropTypes.string,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onKeyDown: PropTypes.func,\n submitIcon: PropTypes.string,\n onClear: PropTypes.func,\n onSubmit: PropTypes.func,\n className: PropTypes.string,\n};\n\nexport default TextFieldWithSubmitIcon;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { handleInputChange, toggleRevealPassword, toggleBooleanState } from '../../utilities/form_utilities';\nimport { Button, Link } from '../../ui_kit';\n\nfunction SignInForm({ signInUser, handleSignUpFormChange, errorMessages }) {\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [revealPassword, setRevealPassword] = useState(false);\n const [rememberMe, setRememberMe] = useState(false);\n\n function handleSignInClicked(e) {\n e.preventDefault();\n\n signInUser(email, password, rememberMe);\n }\n\n return (\n \n \n
\n \n \n )}\n \n \n
\n \n {\n if (e.keyCode === 13) handleSignInClicked(e);\n }}\n title=\"Sign In\"\n tabIndex={0}\n />\n\n
\n \n );\n}\n\nSignInForm.propTypes = {\n signInUser: PropTypes.func.isRequired,\n handleSignUpFormChange: PropTypes.func.isRequired,\n errorMessages: PropTypes.object.isRequired,\n};\n\nexport default SignInForm;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { handleInputChange, toggleRevealPassword } from '../../utilities/form_utilities';\nimport { Link, Button } from '../../ui_kit';\n\nfunction SignUpForm({ signUpUser, handleSignInFormChange, errorMessages }) {\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [confirmPassword, setConfirmPassword] = useState('');\n const [revealPassword, setRevealPassword] = useState(false);\n const [revealConfirmPassword, setRevealConfirmPassword] = useState(false);\n\n function handleSignUpClicked(e) {\n e.preventDefault();\n\n signUpUser({ name, email, password, confirmPassword });\n }\n\n return (\n \n
\n {errorMessages.password && Sign In
\nHello, please sign in to access your cart.
\n\n \n\nPassword {errorMessages.password}.
}\n \n\n \n\n\n
\n \n New Here?{' '}\n \n \n Sign Up\n \n \n
\n\n
\n {errorMessages.password_confirmation && (\n \n
\n {errorMessages.password && Sign Up
\nCreate your account.
\n\n \n\n \n\nPassword {errorMessages.password}.
}\n \n\nPassword Confirmation {errorMessages.password_confirmation}.
\n )}\n \n\n\n
\n \n \n );\n}\n\nSignUpForm.propTypes = {\n signUpUser: PropTypes.func.isRequired,\n handleSignInFormChange: PropTypes.func.isRequired,\n errorMessages: PropTypes.object.isRequired,\n};\n\nexport default SignUpForm;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Link } from '../ui_kit';\nimport { toggleBooleanState } from '../utilities/form_utilities';\nimport useOutsideClick from '../hooks/use_outside_click';\n\nfunction MenuDropdown({ title, leftIcon, rightIcon, optionsList }) {\n const [showMenu, setShowMenu] = useState(false);\n\n function closeMenu() {\n if (showMenu) {\n setShowMenu(false);\n }\n }\n\n const { ref } = useOutsideClick(closeMenu);\n\n return (\n \n );\n}\n\nexport default MenuDropdown;\n\nMenuDropdown.defaultProps = {\n leftIcon: null,\n rightIcon: null,\n};\n\nMenuDropdown.propTypes = {\n title: PropTypes.string.isRequired,\n leftIcon: PropTypes.string,\n rightIcon: PropTypes.string,\n optionsList: PropTypes.array.isRequired,\n};\n","import { useEffect, useRef } from 'react';\n\n/**\n * Hook to register a click outside of the passed ref\n * @param {function} onOutsideClick - Callback function ran when user clicks outside of ref\n */\nexport default function useOutsideClick(onOutsideClick) {\n const ref = useRef(null);\n\n const handleClickOutside = (event) => {\n if (ref.current && !ref.current.contains(event.target)) {\n onOutsideClick();\n }\n };\n\n useEffect(() => {\n document.addEventListener('click', handleClickOutside, true);\n return () => {\n document.removeEventListener('click', handleClickOutside, true);\n };\n });\n\n return { ref };\n}\n","import React, { useState, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport ModalDialog from '../src/components/modal_dialog';\nimport { Link } from '../src/ui_kit';\nimport SignInForm from '../src/components/session_forms/sign_in_form';\nimport SignUpForm from '../src/components/session_forms/sign_up_form';\nimport { toggleBooleanState } from '../src/utilities/form_utilities';\nimport { signedIn } from '../src/utilities/session_utilities';\nimport MenuDropdown from '../src/components/menu_dropdown';\n\nfunction SignInOut() {\n const [showModal, setShowModal] = useState(false);\n const [displaySignIn, setDisplaySignIn] = useState(true);\n const [errorMessages, setErrorMessages] = useState({});\n const [userSignedIn, setUserSignedIn] = useState(signedIn());\n\n function signInUser(email, password, rememberMe) {\n $.ajax({\n url: '/users/sign_in',\n method: 'POST',\n data: {\n user: {\n email,\n password,\n remember_me: rememberMe ? 1 : 0,\n },\n },\n success: (response) => {\n window.location.reload();\n },\n error: (response) => {\n const errorsResponse = JSON.parse(response.responseText);\n if (errorsResponse !== {}) {\n setErrorMessages(errorsResponse.errors);\n }\n },\n });\n }\n\n function signUpUser(userInfo) {\n const { name, email, password, passwordConfirmation } = userInfo;\n $.ajax({\n url: '/users',\n method: 'POST',\n data: {\n user: {\n name,\n email,\n password,\n password_confirmation: passwordConfirmation,\n },\n },\n success: (response) => {\n window.location.reload();\n },\n error: (response) => {\n const errorsResponse = JSON.parse(response.responseText);\n if (errorsResponse !== {}) {\n setErrorMessages(errorsResponse.errors);\n }\n },\n });\n }\n\n function handleFormTypeChange(e) {\n e.preventDefault();\n setErrorMessages({});\n toggleBooleanState(setDisplaySignIn, displaySignIn);\n }\n\n function accountSettingsList() {\n return [\n { label: 'Orders History', value: '/orders' },\n { label: 'Account Settings', value: `/users/${window.gon.current_user.id}` },\n { label: 'Log Out', value: '/users/sign_out', dataMethod: 'delete' },\n ];\n }\n\n useEffect(() => {\n window.EventSystem.subscribe('modal-open.sign_up', function () {\n setShowModal(true);\n setDisplaySignIn(false);\n });\n\n window.EventSystem.subscribe('account-deleted.reload', function () {\n setUserSignedIn(false);\n });\n }, []);\n\n return (\n \n Already have an account?{' '}\n \n \n Sign In\n \n \n
\n\n {userSignedIn ? (\n {\n e.preventDefault();\n setShowModal(true);\n }}\n >\n \n Sign in\n \n )}\n\n {showModal && (\n {\n setDisplaySignIn(true);\n setShowModal(false);\n }}\n hideCloseButton\n >\n {displaySignIn ? (\n {\n handleFormTypeChange(e);\n }}\n errorMessages={errorMessages}\n />\n ) : (\n {\n handleFormTypeChange(e);\n }}\n errorMessages={errorMessages}\n />\n )}\n \n )}\n
\n );\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const element = document.getElementById('sign-in-out-mount-point');\n\n if (element) {\n ReactDOM.render(