{"version":3,"file":"js/340-60efc5503dc0e9872ec3.js","mappings":"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","sources":["webpack://shopify-sms-subscriptions/./app/javascript/components/Image/Waves.tsx","webpack://shopify-sms-subscriptions/./app/javascript/components/OptIn/OptInWidget.tsx","webpack://shopify-sms-subscriptions/./app/javascript/components/OptIn/api.ts","webpack://shopify-sms-subscriptions/./app/javascript/components/OptIn/components/TermsOfService.tsx","webpack://shopify-sms-subscriptions/./app/javascript/components/OptIn/components/index.tsx","webpack://shopify-sms-subscriptions/./app/javascript/components/OptIn/steps/InitialStep.tsx","webpack://shopify-sms-subscriptions/./app/javascript/components/OptIn/steps/ThankYouStep.tsx","webpack://shopify-sms-subscriptions/./app/javascript/components/OptIn/steps/VerificationCodeStep.tsx","webpack://shopify-sms-subscriptions/./app/javascript/config/sentry.ts"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\n\ninterface WavesProps {\n  size?: number;\n  status?: 'Offline' | 'Limited' | 'Online' | 'Optimal' | 'Update';\n}\n\nconst bgColorsByStatus = {\n  Offline: 'rgba(255, 173, 152, 0.42)',\n  Limited: 'rgba(255, 228, 86, 0.42)',\n  Online: 'rgba(173, 231, 225, 0.7)',\n  Optimal: 'rgba(214, 202, 255, 0.42)',\n  Update: 'rgba(98, 104, 243, 0.42)',\n};\n\nconst waveColorsByStatus = {\n  Offline: ['rgba(236, 61, 16, 0.52)'],\n  Limited: ['rgba(255, 228, 86, 0.52)', 'rgba(255, 228, 86, 0.62)'],\n  Online: ['rgba(23, 204, 157, 0.30)', 'rgba(23, 204, 157, 0.40)', 'rgba(23, 204, 157, 0.50)'],\n  Optimal: ['rgba(214, 202, 255, 0.52)', 'rgba(214, 202, 255, 0.62)'],\n  Update: ['rgba(98, 104, 243, 0.52)', 'rgba(98, 104, 243, 0.62)'],\n};\n\nconst waveHeightsByStatus = {\n  Offline: [18],\n  Limited: [4, 10],\n  Online: [4, 10, 20],\n  Optimal: [4, 10],\n  Update: [4, 10],\n};\n\nconst waveFreqStatus = {\n  Offline: 50,\n  Limited: 75,\n  Online: 100,\n  Optimal: 125,\n  Update: 125,\n};\n\nfunction Waves({ size = 126, status = 'Offline' }: WavesProps) {\n  const bgColor = bgColorsByStatus[status];\n  const colors = waveColorsByStatus[status];\n  const heights = waveHeightsByStatus[status];\n  const freq = waveFreqStatus[status];\n\n  return (\n    <WavesContainer color={bgColor} size={size}>\n      <div className=\"inner-container\">\n        <svg\n          className=\"waves\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={`0 10 ${freq} 80`}\n          preserveAspectRatio=\"none\"\n          shapeRendering=\"auto\"\n        >\n          <defs>\n            <path\n              id=\"gentle-wave\"\n              d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\n            />\n          </defs>\n          <g className=\"parallax\">\n            {colors.map((color, i) => (\n              <use key={`wave-${i}`} xlinkHref=\"#gentle-wave\" x=\"48\" y={heights[i]} fill={color} />\n            ))}\n          </g>\n        </svg>\n      </div>\n    </WavesContainer>\n  );\n}\n\nexport default Waves;\n\nconst WavesContainer = styled.div<{ color: string; size: number }>`\n  background-color: #fff;\n  border-radius: 50%;\n  height: ${(props) => props.size}px;\n  width: ${(props) => props.size}px;\n  overflow: hidden;\n\n  .inner-container {\n    background: ${(props) => props.color};\n    color: red;\n    height: ${(props) => props.size}px;\n    width: ${(props) => props.size}px;\n  }\n\n  .waves {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n  /* Animation */\n\n  .parallax > use {\n    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;\n  }\n\n  .parallax > use:nth-of-type(1) {\n    animation-delay: -2s;\n    animation-duration: 8s;\n  }\n\n  .parallax > use:nth-of-type(2) {\n    animation-delay: -7s;\n    animation-duration: 11s;\n  }\n\n  .parallax > use:nth-of-type(3) {\n    animation-delay: -14s;\n    animation-duration: 15s;\n  }\n\n  @keyframes move-forever {\n    0% {\n      transform: translate3d(-90px, 0, 0);\n    }\n    100% {\n      transform: translate3d(85px, 0, 0);\n    }\n  }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { sentrySetup } from '@config/sentry';\nimport { PublicShop } from '@typings/PublicShop';\n\nimport { verifySmsCode } from './api';\nimport { Wrapper } from './components';\nimport { InitialStep, Steps, ThankYouStep, VerificationCodeStep } from './steps';\nimport 'react-phone-input-2/lib/style.css';\n\ninterface OptInWidgetProps {\n  shop?: PublicShop;\n  ctaButtonColor?: string;\n  ctaButtonFontColor?: string;\n  ctaButtonLabel?: string;\n}\n\nexport const OptInWidget = (props: OptInWidgetProps) => {\n  const { shop } = props;\n  const [step, setStep] = useState<Steps>('initial');\n  // const [step, setStep] = useState<Steps>('verification_code');\n\n  const [optInValues, setOptInValues] = useState({\n    phone: '',\n    email: '',\n    country: '',\n  });\n  const urlParams = new URLSearchParams(window.location.search);\n\n  useEffect(() => {\n    sentrySetup.setShop(shop);\n  }, [shop]);\n\n  function getUrlParam(paramName, defaultParam, prefix = '') {\n    if (props[paramName]) return props[paramName];\n\n    const urlParam = urlParams.get(paramName);\n\n    return urlParam ? `${prefix}${urlParam}` : defaultParam;\n  }\n\n  async function handleOptIn(smsCode) {\n    return verifySmsCode(shop?.id, optInValues, smsCode);\n  }\n\n  const ctaButtonColor = getUrlParam('ctaButtonColor', '#3902f0', '#');\n  const ctaButtonFontColor = getUrlParam('ctaButtonFontColor', '#ffffff', '#');\n  const ctaButtonLabel = getUrlParam('ctaButtonLabel', 'Let’s do it 🙏');\n  const termsOfServiceFontColor = getUrlParam('termsOfServiceFontColor', '#999', '#');\n\n  const steps = {\n    initial: (\n      <InitialStep\n        ctaButtonLabel={ctaButtonLabel}\n        setOptInValues={setOptInValues}\n        setStep={setStep}\n        shop={shop}\n      />\n    ),\n    verification_code: (\n      <VerificationCodeStep\n        shop={shop}\n        optInValues={optInValues}\n        setStep={setStep}\n        onVerify={handleOptIn}\n      />\n    ),\n    thank_you: <ThankYouStep email={optInValues.email} />,\n  };\n\n  return (\n    <Wrapper\n      ctaButtonColor={ctaButtonColor}\n      ctaButtonFontColor={ctaButtonFontColor}\n      termsOfServiceFontColor={termsOfServiceFontColor}\n    >\n      {steps[step]}\n    </Wrapper>\n  );\n};\n","import axios from 'axios';\n\nexport function verifySmsCode(shopId: string, params: any, smsCode: string): Promise<Response> {\n  return axios.post(`/sms/opt-in/${shopId}/verify_sms_code`, {\n    email: params.email,\n    phone_number: `+${params?.phone}`,\n    sms_code: smsCode,\n  });\n}\n\nexport function sendCode(\n  shopifyDomain: string,\n  phone: string,\n  email: string,\n  country: string\n): Promise<Response> {\n  return axios.post('/sms/phone_verification/send_code', {\n    shop_domain: shopifyDomain,\n    phone_number: `+${phone}`,\n    country,\n    email,\n  });\n}\n","import React from 'react';\nimport styled from '@emotion/styled';\n\ninterface TermsOfServiceProps {\n  shopName?: string;\n}\n\nconst TermsOfService = ({ shopName }: TermsOfServiceProps) => (\n  <TermsOfServiceContainer>\n    {shopName && `${shopName}: `}You agree to receive subscription management messages and recurring\n    automated text marketing. Purchase is not a condition of consent. Msg rates apply. Recharge Inc.{' '}\n    <a href=\"https://rechargepayments.com/terms-of-service/\" target=\"_blank\" rel=\"noreferrer\">\n      T&C\n    </a>\n  </TermsOfServiceContainer>\n);\n\nconst TermsOfServiceContainer = styled.p`\n  margin-top: 1rem;\n  color: var(--terms-of-service-font-color);\n  font-size: 11px;\n`;\n\nexport default TermsOfService;\n","import styled from '@emotion/styled';\nimport Form from 'react-bootstrap/Form';\nimport Button from 'react-bootstrap/Button';\n\ninterface WrapperProps {\n  ctaButtonColor: string;\n  ctaButtonFontColor: string;\n  termsOfServiceFontColor: string;\n}\n\nexport const Wrapper = styled.div<WrapperProps>`\n  --cta-button-color: ${(props) => props.ctaButtonColor};\n  --cta-button-font-color: ${(props) => props.ctaButtonFontColor};\n  --terms-of-service-font-color: ${(props) => props.termsOfServiceFontColor};\n\n  input {\n    border-color: #cacaca;\n    border-radius: 5px;\n    height: 50px;\n  }\n`;\n\nconst BaseButton = styled(Button)`\n  border-color: var(--cta-button-color);\n  background-color: var(--cta-button-color);\n  color: var(--cta-button-font-color) !important;\n  margin-top: 1rem;\n  height: 50px;\n  border-radius: 5px;\n  font-weight: 600;\n  font-size: 16px;\n`;\n\nexport const PrimaryButton = styled(BaseButton)`\n  &:hover,\n  &:active,\n  &:focus {\n    color: var(--cta-button-color) !important;\n    border-color: var(--cta-button-color) !important;\n    background-color: transparent !important;\n  }\n`;\n\nexport const SecondaryButton = styled(BaseButton)`\n  color: #191d48 !important;\n  border-color: #191d48 !important;\n  background-color: transparent !important;\n  position: relative;\n  overflow: hidden;\n  &:not(.fill):hover,\n  &:not(.fill):active,\n  &:not(.fill):focus {\n    color: var(--cta-button-color) !important;\n    border-color: var(--cta-button-color) !important;\n  }\n  &.fill:before {\n    content: '';\n    width: 100%;\n    height: 100%;\n    background-color: rgba(196, 196, 196, 0.6);\n    position: absolute;\n    transition: all 60s linear;\n    top: 0;\n    left: 0;\n  }\n  &.remove-fill:before {\n    left: -100%;\n  }\n  &.disabled,\n  [disabled] {\n    &:hover,\n    &:active,\n    &:focus {\n      cursor: pointer;\n    }\n  }\n`;\n\nexport const ThankYouContext = styled.div`\n  color: #606270;\n  font-size: 14px;\n  font-weight: 500;\n  margin: 20px auto;\n  padding: 8px;\n  text-align: center;\n`;\n\nexport const ThankYouMessage = styled.div`\n  color: #191d48;\n  font-size: 14px;\n  font-weight: 500;\n  margin: 20px auto;\n  padding: 18px;\n  text-align: center;\n  border: 2px solid #17cc9d;\n  border-radius: 9px;\n  background-color: #ebf9f7;\n`;\n\nexport const CodeField = styled(Form.Control)`\n  -moz-appearance: textfield;\n  font-size: 32px;\n  margin: 0;\n  text-align: center;\n\n  &::placeholder {\n    text-align: center;\n    font-size: 14px;\n  }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n`;\n\nexport const AlertContainer = styled.div`\n  color: #606270;\n  font-size: 12px;\n  margin: 18px auto;\n  text-align: center;\n`;\n\nexport const OtpContainer = styled.div`\n  > div {\n    justify-content: space-between;\n  }\n\n  .inputStyle {\n    width: 55px !important;\n    height: 55px;\n    font-size: 28px;\n    font-weight: bold;\n    border-radius: 9px;\n    border: 2px solid #191d48;\n    background-color: #f4f4f4;\n    outline-color: var(--cta-button-color);\n  }\n\n  input[type='number']::-webkit-inner-spin-button,\n  input[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0;\n  }\n\n  input[type='number'] {\n    -webkit-appearance: textfield;\n    -moz-appearance: textfield;\n    appearance: textfield;\n  }\n\n  .error {\n    border: 2px solid #ec3d10 !important;\n  }\n`;\n","import React, { useState, useEffect } from 'react';\nimport Form from 'react-bootstrap/Form';\nimport PhoneInput from 'react-phone-input-2';\nimport { useForm } from 'react-hook-form';\n\nimport { PublicShop } from '@typings/PublicShop';\n\nimport { PrimaryButton, AlertContainer } from '../components';\nimport TermsOfService from '../components/TermsOfService';\nimport { sendCode } from '../api';\n\ninterface InitialStepProps {\n  ctaButtonLabel: string;\n  shop: PublicShop;\n  setOptInValues?: (values: { email: string; phone: string; country: string }) => void;\n  setStep?: (step) => void;\n}\n\nexport function InitialStep({ ctaButtonLabel, shop, setOptInValues, setStep }: InitialStepProps) {\n  const [loading, setLoading] = useState(false);\n  const [errorAlert, setErrorAlert] = useState(null);\n  const urlParams = new URLSearchParams(window.location.search);\n  const formProps = useForm({\n    defaultValues: {\n      email: urlParams.get('email') || '',\n      phone: '',\n      country: 'us',\n    },\n  });\n  const { register, handleSubmit, setValue, watch, getValues } = formProps;\n\n  useEffect(() => {\n    // Workaround to show placeholder when default country is selected\n    // Set the input value to '' to show the placeholder at the start instead of +1, but keep the default country\n    setTimeout(() => {\n      const el = document.querySelector('#rsms-opt-in-widget-phone-input') as HTMLInputElement;\n      if (el) {\n        el.value = '';\n      }\n    }, 500);\n  }, []);\n\n  const onSubmit = async (values) => {\n    try {\n      setLoading(true);\n      setOptInValues({ ...values, country: getValues().country });\n      await sendCode(shop?.shopifyDomain, values.phone, values.email, 'us');\n      setErrorAlert(null);\n      setStep('verification_code');\n    } catch (error) {\n      if (error?.response?.data?.error) {\n        setErrorAlert(error.response.data.error);\n      } else {\n        setErrorAlert('Failed to send verification code.');\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  function handlePhoneChange(phone, country) {\n    setValue('phone', phone);\n    setValue('country', country?.countryCode);\n  }\n\n  return (\n    <>\n      {errorAlert && <AlertContainer>{errorAlert}</AlertContainer>}\n      <Form onSubmit={handleSubmit(onSubmit)}>\n        <Form.Control\n          type=\"email\"\n          placeholder=\"Enter valid email address\"\n          {...register('email', { required: true })}\n        />\n        <PhoneInput\n          containerStyle={{ marginTop: '1rem' }}\n          inputStyle={{ width: '100%', height: 50 }}\n          country=\"us\"\n          onlyCountries={['us', 'ca']}\n          inputProps={{\n            id: 'rsms-opt-in-widget-phone-input',\n            name: 'phone',\n            required: true,\n          }}\n          value={watch('phone')}\n          onChange={handlePhoneChange}\n          disableDropdown\n        />\n\n        <PrimaryButton type=\"submit\" block>\n          {loading ? 'Sending...' : ctaButtonLabel}\n        </PrimaryButton>\n\n        <TermsOfService shopName={shop?.customName} />\n      </Form>\n    </>\n  );\n}\n","import React from 'react';\nimport styled from '@emotion/styled';\nimport emailDotIcon from '@assets/icons/email-dot-icon.svg';\n\nimport { ThankYouMessage, ThankYouContext } from '../components';\n\ninterface ThankYouStepProps {\n  email: string;\n}\n\nexport const ThankYouStep = ({ email }: ThankYouStepProps) => (\n  <div>\n    <ThankYouContext>Can't find it? Check your spam folder!</ThankYouContext>\n    <ThankYouMessage>\n      <Icon src={emailDotIcon} />\n      Verification email sent to {email}\n    </ThankYouMessage>\n  </div>\n);\n\nconst Icon = styled.img`\n  height: 22px;\n  width: 26px;\n  margin-bottom: 8px;\n  margin-right: 8px;\n`;\n","import React, { useState } from 'react';\nimport styled from '@emotion/styled';\n\nimport { PublicShop } from '@typings/PublicShop';\nimport OtpInput from 'react-otp-input';\nimport { sendCode } from '../api';\nimport { PrimaryButton, SecondaryButton, AlertContainer, OtpContainer } from '../components';\n\ninterface VerificationCodeStepProps {\n  shop: PublicShop;\n  optInValues: {\n    phone: string;\n    email: string;\n    country: string;\n  };\n  setStep?: (step) => void;\n  onVerify?: (smsCode: string) => Promise<Response>;\n}\n\nexport const VerificationCodeStep = ({\n  shop,\n  setStep,\n  onVerify,\n  optInValues,\n}: VerificationCodeStepProps) => {\n  const [loading, setLoading] = useState(false);\n  const [lockResend, setLockResend] = useState(false);\n  const [beginRemoveLock, setBeginRemoveLock] = useState(false);\n  const [code, setCode] = useState('');\n  const [codeFailed, setCodeFailed] = useState(false);\n  const [alertContent, setAlertContent] = useState('we_sent');\n  const RESEND_LOCK_MS = 60000;\n\n  const handleSubmit = async () => {\n    if (!code || code.length !== 4) {\n      return setCodeFailed(true);\n    }\n    try {\n      setLoading(true);\n      await onVerify(code);\n      setStep('thank_you');\n    } catch (error) {\n      const errorBody = error.response.data;\n      if (errorBody.error === 'too_many') {\n        setAlertContent('too_many');\n      } else {\n        setAlertContent('try_again');\n      }\n      setCodeFailed(true);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const resendCode = async () => {\n    setAlertContent('new_code');\n    setLockResend(true);\n    await sendCode(shop?.shopifyDomain, optInValues.phone, optInValues.email, optInValues.country);\n    setBeginRemoveLock(true);\n    setTimeout(() => {\n      setBeginRemoveLock(false);\n      setLockResend(false);\n    }, RESEND_LOCK_MS);\n  };\n\n  function handleOtpChange(e) {\n    setCodeFailed(false);\n    setCode(e);\n  }\n\n  function formatPhoneNumber(phone) {\n    // this only works because we only have canadian and american phone numbers\n    // need more robust solution when we go international\n    const areaCode = phone.slice(1, 4);\n    const firstThree = phone.slice(4, 7);\n    const lastFour = phone.slice(7, 19);\n    return `+1 (${areaCode}) ${firstThree}-${lastFour}`;\n  }\n\n  const alertContentWeSent = `We sent a verification code to ${formatPhoneNumber(\n    optInValues.phone\n  )}`;\n\n  const alertContentNewCode = `New code sent to ${formatPhoneNumber(optInValues.phone)}`;\n\n  const alertContainerTryAgain = `Invalid SMS code. Please try again.`;\n\n  const alertContainerTooMany = (\n    <div>\n      Too many attempts.\n      <br />\n      Please resend code and try again.\n    </div>\n  );\n\n  function renderAlertContent() {\n    switch (alertContent) {\n      case 'too_many':\n        return alertContainerTooMany;\n      case 'try_again':\n        return alertContainerTryAgain;\n      case 'new_code':\n        return alertContentNewCode;\n      default:\n        return alertContentWeSent;\n    }\n  }\n\n  function submitButtonText() {\n    if (loading) {\n      return 'Verifying...';\n    }\n    if (alertContent === 'try_again' || alertContent === 'too_many') {\n      return 'Try Again';\n    }\n    return 'Verify';\n  }\n\n  return (\n    <>\n      <AlertContainer>{renderAlertContent()}</AlertContainer>\n      <div>\n        <OtpContainer>\n          <OtpInput\n            value={code}\n            isInputNum\n            inputStyle=\"inputStyle\"\n            onChange={handleOtpChange}\n            numInputs={4}\n            hasErrored={codeFailed}\n            errorStyle=\"error\"\n            shouldAutoFocus\n          />\n        </OtpContainer>\n      </div>\n      <ButtonContainer>\n        <div className=\"btn-wrap\">\n          <SecondaryButton\n            type=\"button\"\n            block\n            onClick={resendCode}\n            disabled={lockResend}\n            className={`${lockResend ? 'fill' : ''} ${beginRemoveLock ? 'remove-fill' : ''}`}\n          >\n            Resend Code\n          </SecondaryButton>\n        </div>\n        <div className=\"btn-wrap\">\n          <SubmitButton onClick={handleSubmit} block disabled={alertContent === 'too_many'}>\n            {submitButtonText()}\n          </SubmitButton>\n        </div>\n      </ButtonContainer>\n    </>\n  );\n};\n\nconst ButtonContainer = styled.div`\n  display: flex;\n  gap: 16px;\n  .btn-wrap {\n    flex: 0 0 calc(50% - 8px);\n  }\n`;\n\nconst SubmitButton = styled(PrimaryButton)`\n  &[disabled] {\n    background-color: var(--cta-button-color) !important;\n    color: var(--cta-button-font-color) !important;\n    opacity: 0.45 !important;\n  }\n`;\n","import { init, setTag } from '@sentry/react';\nimport { Integrations } from '@sentry/tracing';\nimport { PublicShop } from '@typings/PublicShop';\n\nfunction initialize(dsn: string, environment?: string) {\n  init({\n    dsn,\n    environment,\n    integrations: [new Integrations.BrowserTracing()],\n  });\n}\n\nfunction setShop(shop: PublicShop) {\n  setTag('shop_id', shop.id);\n}\n\nexport const sentrySetup = {\n  initialize,\n  setShop,\n};\n"],"names":["bgColorsByStatus","Offline","Limited","Online","Optimal","Update","waveColorsByStatus","waveHeightsByStatus","waveFreqStatus","size","status","bgColor","colors","heights","freq","WavesContainer","color","className","xmlns","viewBox","preserveAspectRatio","shapeRendering","id","d","map","i","key","xlinkHref","x","y","fill","props","OptInWidget","shop","useState","step","setStep","phone","email","country","optInValues","setOptInValues","urlParams","URLSearchParams","window","location","search","getUrlParam","paramName","defaultParam","prefix","urlParam","get","smsCode","verifySmsCode","useEffect","sentrySetup","ctaButtonColor","ctaButtonFontColor","ctaButtonLabel","termsOfServiceFontColor","steps","initial","InitialStep","verification_code","VerificationCodeStep","onVerify","thank_you","ThankYouStep","Wrapper","shopId","params","axios","phone_number","sms_code","sendCode","shopifyDomain","shop_domain","TermsOfServiceContainer","shopName","href","target","rel","BaseButton","Button","PrimaryButton","SecondaryButton","ThankYouContext","ThankYouMessage","CodeField","Form","AlertContainer","OtpContainer","loading","setLoading","errorAlert","setErrorAlert","formProps","useForm","defaultValues","register","handleSubmit","setValue","watch","getValues","setTimeout","el","document","querySelector","value","onSubmit","values","response","data","error","type","placeholder","required","containerStyle","marginTop","inputStyle","width","height","onlyCountries","inputProps","name","onChange","countryCode","disableDropdown","block","customName","Icon","src","emailDotIcon","lockResend","setLockResend","beginRemoveLock","setBeginRemoveLock","code","setCode","codeFailed","setCodeFailed","alertContent","setAlertContent","length","resendCode","formatPhoneNumber","areaCode","slice","firstThree","lastFour","alertContentWeSent","alertContentNewCode","alertContainerTooMany","renderAlertContent","isInputNum","e","numInputs","hasErrored","errorStyle","shouldAutoFocus","ButtonContainer","onClick","disabled","SubmitButton","initialize","dsn","environment","init","integrations","Integrations","setShop","setTag"],"sourceRoot":""}