{"version":3,"file":"index-CUR4xFR6.js","sources":["../../../app/javascript/src/shoppe/elements/NotificationForm/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport cls from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheckCircle, faEnvelope } from '@fortawesome/pro-regular-svg-icons';\nimport { faCheck } from '@fortawesome/pro-solid-svg-icons';\nimport { useFormState } from 'react-use-form-state';\n\nimport api from 'src/explore/services/api';\nimport { ErrorBox } from 'src/explore/elements/bs4/ErrorBox';\nimport { FormStateInput } from 'src/explore/elements/FormStateInput';\nimport { LoadingButton } from 'src/shoppe/elements/LoadingButton';\nimport { Modal } from 'src/shoppe/elements/Modal';\n\nimport styles from './index.module.sass';\n\ntype INotificationForm = {\n  email: string;\n  subscribe: boolean;\n};\n\ninterface NotificationFormProps {\n  overlayClass?: string;\n  open: boolean;\n  productID: number;\n  showSubscribeCheckbox?: boolean;\n  onClose: () => void;\n}\n\nexport const NotificationForm = ({\n  open,\n  overlayClass,\n  productID,\n  showSubscribeCheckbox = true,\n  onClose,\n}: NotificationFormProps ) => {\n  const [ emailRef, setEmailRef ] = React.useState<HTMLInputElement | null>( null );\n  const [ error, setError ] = useState<string[]>( null );\n  const [ loading, setLoading ] = useState<boolean>( false );\n  const [ success, setSuccess ] = useState<boolean>( false );\n\n  const [ formState, { email, checkbox }] = useFormState<INotificationForm>({\n    subscribe: true,\n  });\n\n  const handleClose = () => {\n    setTimeout(() => setSuccess( false ), 201 );\n    onClose();\n  };\n\n  const handleSubmit = () => {\n    if ( !formState.values.email || formState.errors.email ) {\n      return setError( formState.errors.email ? [ formState.errors.email ] : null );\n    }\n\n    setError( null );\n    setLoading( true );\n\n    return api\n      .post( `products/${productID}/waitlists`, {\n        email: formState.values.email,\n        email_opt_in: showSubscribeCheckbox ? formState.values.subscribe : false,\n      })\n      .then(() => {\n        emailRef?.blur();\n        setSuccess( true );\n      })\n      .catch(() => {\n        setError([ 'Sorry, there was an error. Please try again.' ]);\n      })\n      .finally(() => {\n        setLoading( false );\n      });\n  };\n\n  useEffect(() => {\n    if ( !success ) {\n      emailRef?.focus();\n    }\n  }, [ emailRef, success ]);\n\n  return (\n    <Modal\n      closeBtn\n      overlayClass={overlayClass}\n      containerClass={cls(\n        `${styles.container} w-100 pt-5 pb-7 pb-md-8 border-0 text-center overflow-hidden spec__notify-me-modal`\n      )}\n      open={open}\n      onClick={handleClose}\n    >\n      <FontAwesomeIcon className=\"text-dark fs-5 fs-md-10\" icon={faEnvelope} />\n      <h2 className=\"px-8 mt-1 fs-5 fs-md-8\">Notify Me When This Item is Available</h2>\n\n      {!!error && <ErrorBox className=\"mt-4 mt-md-7\" errors={error} />}\n\n      <div className=\"row\">\n        <div className=\"col-12 form-group pb-0\">\n          <FormStateInput\n            className=\"mt-4 mt-md-7 fs-5\"\n            {...email( 'email' )}\n            aria-label=\"Email Address\"\n            placeholder=\"Enter Your Email Address\"\n            ref={( elementRef ) => setEmailRef( elementRef )}\n            required\n            onKeyDown={( e: React.KeyboardEvent<HTMLInputElement> ) => {\n              if ( e.keyCode === 13 ) {\n                e.preventDefault();\n                handleSubmit();\n              }\n            }}\n          />\n        </div>\n      </div>\n\n      {showSubscribeCheckbox && (\n        <div className=\"row mt-2\">\n          <div className=\"col-12 form-group d-flex justify-content-center pb-0\">\n            <label\n              className={`${styles.subscribe} d-flex justify-content-center align-items-start align-items-sm-center font-weight-normal fs-4 text-left text-md-center`}\n              htmlFor=\"marketing-subscription\"\n            >\n              <FormStateInput\n                className=\"d-none\"\n                id=\"marketing-subscription\"\n                {...checkbox( 'subscribe' )}\n              />\n              <div className={`${styles.checkbox} position-relative flex-shrink-0 mr-2`}>\n                <FontAwesomeIcon\n                  className={`${styles.check} position-absolute m-auto fs-5`}\n                  icon={faCheck}\n                />\n              </div>\n              Keep me up to date on the latest news and exclusive promotions.\n            </label>\n          </div>\n        </div>\n      )}\n\n      <div className=\"row\">\n        <div className=\"col-6 form-group pb-0 mb-0\">\n          <button\n            type=\"button\"\n            className=\"btn btn-block py-2 text-secondary font-weight-bold\"\n            onClick={handleClose}\n          >\n            Cancel\n          </button>\n        </div>\n        <div className=\"col-6 form-group pb-0 mb-0\">\n          <LoadingButton\n            className=\"btn btn-block btn-secondary py-2 font-weight-bold\"\n            disabled={!formState.values.email}\n            loading={loading}\n            type=\"button\"\n            onClick={handleSubmit}\n          >\n            Submit\n          </LoadingButton>\n        </div>\n      </div>\n\n      {success && (\n        <div\n          className={cls(\n            styles.success,\n            'position-absolute d-flex flex-column justify-content-center align-items-center p-8 bg-white',\n            {\n              [styles.show]: success,\n            }\n          )}\n        >\n          <FontAwesomeIcon\n            className={`${styles.thanks} text-secondary fs-5 fs-md-10`}\n            icon={faCheckCircle}\n          />\n          <h2 className=\"mt-1 text-secondary fs-5 fs-md-8\">Thank You</h2>\n          <p className={styles.confirmation}>\n            We will email you as soon as this product is available\n          </p>\n        </div>\n      )}\n    </Modal>\n  );\n};\n"],"names":["NotificationForm","open","overlayClass","productID","showSubscribeCheckbox","onClose","emailRef","setEmailRef","React","error","setError","useState","loading","setLoading","success","setSuccess","formState","email","checkbox","useFormState","handleClose","handleSubmit","api","useEffect","Modal","cls","styles","FontAwesomeIcon","faEnvelope","ErrorBox","FormStateInput","elementRef","e","faCheck","LoadingButton","faCheckCircle"],"mappings":"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"}