{"version":3,"file":"index-6b61b4b9.js","sources":["../../../../src/scripts/coveo/modules/contractor-request-a-quote-form/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport Card from './card';\nimport { isTabletLandscape } from '../../../helpers/breakpoints';\nimport { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\n\nimport {\n  RequestAQuoteFormProps,\n  CardProps\n} from '../../components/request-a-quote-form/types';\n\nimport RequestAQuoteForm from '../../components/request-a-quote-form';\nimport { ExtendedWindowType } from '../../engine';\nimport { createDataLayerString } from '../../../helpers/helpers';\n\nconst ContractorRequestAForm: React.FC<RequestAQuoteFormProps> = ({\n  contractorCard,\n  formLabels,\n  callUsLabels,\n  contractor,\n  ...props\n}) => {\n  const { heading } = formLabels ? JSON.parse(formLabels) : '';\n  const callUsCardLabels: CardProps = callUsLabels\n    ? JSON.parse(callUsLabels)\n    : '';\n  const contractorData = contractor ? JSON.parse(contractor as string) : '';\n\n  const [sticky, setSticky] = useState<boolean>(false);\n  const [expanded, setExpanded] = useState<boolean>(false);\n  const [fixedHeight, setFixedHeight] = useState<number>(0);\n  const [cardHeight, setCardHeight] = useState<number>(0);\n  const card = useRef<HTMLDivElement | null>(null);\n  const styleRequestAQuote: { [key: string]: string } = {\n    '--request-a-quote-fixed': `${fixedHeight}px`,\n    '--request-a-quote-card-height': `${cardHeight}px`\n  };\n\n  const handleScroll = () => {\n    const rect = (card.current as HTMLElement)?.getBoundingClientRect();\n    if (rect.top <= rect.height * -1) {\n      if (!sticky) {\n        setSticky(true);\n        const global = window as ExtendedWindowType;\n        if (\n          (global.dataLayer as { event_action: string }[]).findIndex(\n            item => item.event_action === 'sticky request a quote: view'\n          ) === -1\n        ) {\n          global.dataLayer.push({\n            event: 'sticky_request_quote',\n            event_category: 'find a contractor',\n            event_action: 'sticky request a quote: view',\n            event_attributes: {\n              contractor_type: 'residential, commercial, undefined'\n            }\n          });\n        }\n      }\n    } else {\n      setSticky(false);\n      if (sticky) {\n        card.current?.parentElement?.classList.remove(\n          'contractor-request-a-quote-form--sticky'\n        );\n      }\n    }\n  };\n\n  const handleResize = () => {\n    const header = (card.current as HTMLElement).querySelector(\n      '.request-a-quote__header'\n    );\n    const footer = (card.current as HTMLElement).querySelector(\n      '.request-a-quote__footer'\n    );\n\n    const cardFixed = (card.current as HTMLElement).querySelector(\n      '.request-a-quote__card'\n    );\n\n    setFixedHeight(\n      (header as HTMLElement)?.offsetHeight +\n        (footer as HTMLElement)?.offsetHeight\n    );\n\n    if (!expanded) {\n      setCardHeight((cardFixed as HTMLElement)?.offsetHeight);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll);\n    window.addEventListener('resize', handleResize);\n\n    return () => {\n      window.removeEventListener('scroll', handleScroll);\n      window.removeEventListener('resize', handleResize);\n      clearAllBodyScrollLocks();\n    };\n  }, []);\n\n  const handleExpandButton = () => {\n    setExpanded(prev => !prev);\n\n    const cardFixed = (card.current as HTMLElement).querySelector(\n      '.request-a-quote__card'\n    );\n    if (!expanded) {\n      setCardHeight((cardFixed as HTMLElement)?.offsetHeight);\n      disableBodyScroll(card.current as HTMLDivElement);\n    } else {\n      clearAllBodyScrollLocks();\n    }\n  };\n\n  if ((contractorCard as string).trim() === 'true') {\n    return (\n      <div\n        ref={card}\n        style={styleRequestAQuote}\n        className={`request-a-quote__card-row row ${\n          sticky ? 'request-a-quote__card-row--sticky ' : ''\n        }${\n          expanded && isTabletLandscape ? 'request-a-quote__card-row--open' : ''\n        }`}\n      >\n        <div className=\"request-a-quote__card-wrapper\">\n          <div className=\"request-a-quote__card\">\n            <Card {...callUsCardLabels} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      {sticky && isTabletLandscape && (\n        <button\n          onClick={() => handleExpandButton()}\n          className={`request-a-quote__expand-btn ${\n            expanded ? 'request-a-quote__expand-btn--open' : ''\n          }`}\n          data-visible-layer={createDataLayerString({\n            event_attributes: {\n              contractor_id: contractorData.id,\n              contractor_name: contractorData.contractorName,\n              contractor_certificates_count:\n                contractorData.numberOfCertificates,\n              contractor_rating: contractorData.rating,\n              contractor_reviews_count: contractorData.numberOfReviews,\n              contractor_type: contractorData.type,\n              contractor_certificate_name: contractorData.certificateName\n            },\n            event: 'sticky_request_quote',\n            event_category: 'find a contractor',\n            event_action: 'sticky request a quote: view',\n            event_label: ''\n          })}\n          data-layer={createDataLayerString([\n            {\n              event_attributes: {\n                contractor_id: contractorData.id,\n                contractor_name: contractorData.contractorName,\n                contractor_certificates_count:\n                  contractorData.numberOfCertificates,\n                contractor_rating: contractorData.rating,\n                contractor_reviews_count: contractorData.numberOfReviews,\n                contractor_type: contractorData.type,\n                contractor_certificate_name: contractorData.certificateName\n              },\n              event: 'sticky_request_quote',\n              event_category: 'find a contractor',\n              event_action: 'sticky request a quote: click',\n              event_label: ''\n            }\n          ])}\n        >\n          {heading}\n        </button>\n      )}\n      <div\n        ref={card}\n        style={styleRequestAQuote}\n        className={`request-a-quote__card-row row ${\n          sticky ? 'request-a-quote__card-row--sticky ' : ''\n        }${\n          expanded && isTabletLandscape ? 'request-a-quote__card-row--open' : ''\n        }`}\n      >\n        <div className=\"request-a-quote__card-wrapper\">\n          <div className=\"request-a-quote__card\">\n            <RequestAQuoteForm\n              {...props}\n              contractor={contractorData}\n              formLabels={formLabels}\n            ></RequestAQuoteForm>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default ContractorRequestAForm;\n"],"names":["ContractorRequestAForm","contractorCard","formLabels","callUsLabels","contractor","props","heading","callUsCardLabels","contractorData","sticky","setSticky","useState","expanded","setExpanded","fixedHeight","setFixedHeight","cardHeight","setCardHeight","card","useRef","styleRequestAQuote","handleScroll","rect","_a","global","item","_c","_b","handleResize","header","footer","cardFixed","useEffect","clearAllBodyScrollLocks","handleExpandButton","prev","disableBodyScroll","React","isTabletLandscape","Card","createDataLayerString","RequestAQuoteForm"],"mappings":"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"}