1import{x as e,A as t,r as o,j as a,u as r}from"./vendor.mIPXQGLM.js";import{M as i,l as n,a5 as s,av as d,L as l}from"./@constants.BRV_txzJ.js";import{o as p,c as u,w as c}from"./warning.OuzC0B7_.js";import{B as g,b as x,b1 as b,a as h,b2 as m,b3 as f,b7 as k,F as v,c as w,b9 as j,ba as C,u as S,b6 as T,b4 as B,b5 as R}from"./index.bundle.js";import{g as $}from"./getChosenFilteredBreeds.BHXdPjco.js";import{g as I}from"./getPopularBreeds.DnE9CpKT.js";import{G as y}from"./GreenArrowButton.BBPrNOIe.js";import{c as A}from"./questions-check-on.B3DCfWRm.js";import{G as _}from"./GreenArrowButtonFullWidth.BGxda9MI.js";import{g as E}from"./getMockedChosenFilteredBreeds.DgvU3H_0.js";import{C as P}from"./camera.CLvd0xLO.js";import{u as N,T as O}from"./@i18n.Cv0A4uHT.js";import{g as W}from"./helpers.CGavr9I-.js";import"./@amplitude.yMGOHWCQ.js";import"./@xstate.CEsnlirg.js";import"./@firebase.Bkc6--w4.js";import"./@lottie.KPmlgv_O.js";import"./@react-router.hFdD-ZA2.js";import"./@lodash.D8yALn-Z.js";import"./@rudderstack.DVYreKjc.js";import"./breeds.Bkbr4Rnc.js";import"./right-white-arrow.jrmExGPe.js";import"./right-white-arrow.Cj46ex4p.js";const D="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20fill='none'%3e%3cpath%20stroke='%23A49A98'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20d='m22.55%2015.441-5.573%205.573-5.664-5.664'/%3e%3c/svg%3e",M=t` 2 margin: 0; 3 border: none; 4 border-radius: 8px; 5 outline: none; 6 7 display: block; 8 width: 100%; 9 padding: 14px 40px 14px 12px; 10 color: rgb(${n.PRIMARY_TEXT_RGB}); 11 background-color: ${n.WHITE}; 12 caret-color: #35b43f; 13 font-size: 15px; 14 line-height: 18px; 15 font-weight: 700; 16 transition: border-color 0.2s ease-out; 17 18 &::placeholder { 19 font-weight: 600; 20 color: rgba(176, 160, 153, 0.5); 21 } 22 23 &:focus { 24 border-color: #b0a099; 25 } 26 27 [data-is-valid='false'] & { 28 border: 1px solid ${n.ERROR}; 29 color: rgba(${n.ERROR_RGB}); 30 background-color: rgba(${n.ERROR_RGB}, 0.1); 31 background-image: url("${c}"); 32 background-size: 18px 18px; 33 background-repeat: no-repeat; 34 background-position: right 16px center; 35 } 36 37 [data-is-warning-icon-shown='false'] & { 38 background-image: none; 39 } 40`,z={Wrapper:e.div` 41 position: relative; 42 display: block; 43 width: 100%; 44 padding-bottom: ${({isIncreasedText:e})=>e?"16px":"20px"}; 45 46 &::after { 47 display: block; 48 position: absolute; 49 left: 0; 50 font-size: 10px; 51 line-height: 14px; 52 font-weight: 400; 53 } 54 55 &[data-is-valid='false']::after { 56 content: attr(data-validation-text); 57 color: rgba(${n.ERROR_RGB}); 58 } 59 60 &[data-is-valid='true']::after { 61 content: attr(data-hint-text); 62 color: rgba(${n.PRIMARY_TEXT_RGB}, 0.6); 63 } 64 `,Input:e.input` 65 ${M}; 66 `,Input2:e.input` 67 ${M}; 68 border: 1px solid #ddccc5; 69 background-color: #fffaf7; 70 71 ${({isAddDesktopStyles:e=!1})=>e&&`\n @media (min-width: ${i.DESKTOP}px) {\n padding: 20px 40px 20px 12px;\n }\n `} 72 73 ${({isIncreasedText:e})=>e&&t` 74 font-size: 18px; 75 padding: 11px 40px 11px 12px; 76 `} 77 `,Label:e.span` 78 color: rgba(${n.PRIMARY_TEXT_RGB}); 79 font-size: 16px; 80 line-height: 18px; 81 font-weight: 700; 82 margin-bottom: 4px; 83 `,VisibilityButton:e.button` 84 padding: 0; 85 display: block; 86 position: absolute; 87 top: 26px; 88 right: 0; 89 width: 52px; 90 height: 48px; 91 border: none; 92 outline: none; 93 cursor: pointer; 94 background-size: 20px 20px; 95 background-color: transparent; 96 background-repeat: no-repeat; 97 background-position: center; 98 99 &[data-visible='true'] { 100 background-image: url("${p}"); 101 } 102 103 &[data-visible='false'] { 104 background-image: url("${u}"); 105 } 106 `,SelectButton:e.button` 107 padding: 0; 108 display: block; 109 position: absolute; 110 bottom: ${({isIncreasedText:e})=>e?"15px":"20px"}; 111 right: 0; 112 width: 52px; 113 height: 48px; 114 border: none; 115 outline: none; 116 cursor: pointer; 117 background-color: transparent; 118 background-repeat: no-repeat; 119 background-position: center; 120 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 121 122 &[data-open='true'] { 123 background-image: url("${D}"); 124 transform: rotate(180deg); 125 } 126 127 &[data-open='false'] { 128 background-image: url("${D}"); 129 } 130 131 ${({isAddDesktopStyles:e=!1})=>e&&`\n @media (min-width: ${i.DESKTOP}px) {\n bottom: 26px;\n }\n `} 132 `},G=({labelName:e,isValid:t=!0,validationText:r="",hintText:i="",setIsAutoCompleteShown:n,isDataShown:s=!1,isAddDesktopStyles:d=!1,...l})=>{const p=o.useCallback(e=>{const t=e.target;t.value=t.value.trim(),l.onChange&&l.onChange(e),l.onBlur&&l.onBlur(e)},[l]);return a.jsxs(z.Wrapper,{"data-is-valid":t,"data-validation-text":r,"data-hint-text":i,children:[e&&a.jsx(z.Label,{children:e}),a.jsx(z.Input2,{required:!0,type:"text",...l,onBlur:p,isAddDesktopStyles:d}),a.jsx(z.SelectButton,{type:"button",onClick:()=>n&&n(!s),"data-open":s,isAddDesktopStyles:d,"data-testid":"breed-dropdown-arrow"})]})},V={Wrapper:e.div` 133 ${m}; 134 padding-top: 100px; 135 `,Wrapper2:e.div` 136 ${m}; 137 ${f}; 138 padding-top: 91px; 139 140 @media ${k} { 141 padding-top: 115px; 142 } 143 `,Content:e.div` 144 ${h}; 145 `,Content2:e.div` 146 ${x}; 147`,Title3:e.h2` 148 ${b}; 149 margin: ${({isPopularBreedsTest:e})=>e?"32px 0 32px":"48px 0 44px"}; 150 151 @media (min-width: ${i.SALES_SCREEN_MIN_PHONE}px) { 152 margin: ${({isPopularBreedsTest:e})=>e?"20px 0 32px":"48px 0 44px"}; 153 } 154 `,InputWrapper2:e.div` 155 width: 100%; 156 position: relative; 157 padding-bottom: 0; 158 159 @media (min-width: ${i.QUESTIONS_DESKTOP}px) { 160 input { 161 font-size: 17px; 162 } 163 } 164 `,AutoCompleteWrapper2:e.div` 165 max-height: 260px; 166 padding: 0 15px; 167 position: absolute; 168 top: 50px; 169 left: 0; 170 box-shadow: 0 6px 20px rgba(74, 53, 50, 0.2); 171 border-radius: 8px; 172 overflow-y: auto; 173 width: 288px; 174 background-color: ${n.WHITE}; 175 z-index: 2; 176 177 @media (min-width: ${i.MEDIUM_PHONE}px) { 178 width: 343px; 179 } 180 181 ::-webkit-scrollbar {
182 width: 6px; 183 height: auto; 184 margin-right: 11px; 185 } 186 187 ::-webkit-scrollbar-track { 188 background-color: transparent; 189 } 190 191 ::-webkit-scrollbar-thumb { 192 background-color: ${n.BROWNISH_GRAY}; 193 border-radius: 8px; 194 } 195 `,AutocompleteSubtitle:e.p` 196 height: 41px; 197 font-size: 14px; 198 line-height: 41px; 199 letter-spacing: 0.88px; 200 font-weight: 600; 201 color: rgba(${n.PRIMARY_TEXT_RGB}, 0.3); 202 text-align: start; 203 text-transform: uppercase; 204 `,AutoCompleteButtonWithChoose:e.button` 205 height: 40px; 206 width: 100%; 207 padding: 0; 208 display: flex; 209 flex-direction: row-reverse; 210 justify-content: space-between; 211 align-items: center; 212 cursor: pointer; 213 border: none; 214 outline: none; 215 font-size: 16px; 216 font-weight: 500; 217 line-height: 40px; 218 text-decoration: none; 219 text-align: left; 220 color: ${e=>e.isOptionChoosen?n.MEDIUM_GREEN:n.PRIMARY_TEXT}; 221 background-color: transparent; 222 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 223 text-overflow: ellipsis; 224 white-space: nowrap; 225 overflow: hidden; 226 direction: rtl; 227 position: relative; 228 background-repeat: no-repeat; 229 background-position: right 8px center; 230 background-size: 16px 16px; 231 background-image: ${e=>e.isOptionChoosen?`url("${A}")`:"none"}; 232 233 :not(:last-child) { 234 border-bottom: 1px dotted #bcc9d0; 235 } 236 `,AutoCompleteButtonTextWrapper:e.span` 237 unicode-bidi: plaintext; 238 `,OtherBreedLink:e.a` 239 font-size: 14px; 240 margin-top: 16px; 241 font-weight: 700; 242 line-height: 27px; 243 text-decoration-line: underline; 244 color: ${n.BROWNISH_GRAY}; 245 `,StickyButtonsContainerBreedId:e.div` 246 ${x}; 247 position: fixed; 248 display: flex; 249 flex-direction: column; 250 justify-content: center; 251 align-items: center; 252 gap: 16px; 253 z-index: 1; 254 bottom: 56px; 255 background: ${n.WHITE}; 256 257 @media (min-width: ${i.SALES_SCREEN_MIN_PHONE}px) { 258 margin-top: 12px; 259 } 260 `,ButtonWrapper:e.div` 261 ${x}; 262 display: flex; 263 display: flex; 264 flex-direction: column; 265 gap: 16px; 266 `,Divider:e.div` 267 display: flex; 268 width: 100%; 269 justify-content: center; 270 overflow: hidden; 271 `,DividerText:e.div` 272 position: relative; 273 font-size: 14px; 274 line-height: 16px; 275 font-weight: 700; 276 padding: 0 12px; 277 color: rgba(74, 53, 50, 0.4); 278 279 &::before, 280 &::after { 281 content: ''; 282 position: absolute; 283 display: block; 284 height: 1px; 285 width: 139px; 286 top: 8px; 287 background-color: #4A3532; 288 opacity: 0.1; 289 } 290 291 &::before { 292 right: 100%; 293 } 294 295 &::after { 296 left: 100%; 297 } 298 299 @media (min-width: ${i.SALES_SCREEN_MIN_PHONE}px) { 300 &::before, 301 &::after { 302 width: 168px; 303 } 304 } 305 `,ButtonVariant2:e(g)` 306 width: 100%; 307 display: flex; 308 align-items: center; 309 justify-content: center; 310 cursor: pointer; 311 312 @media (min-width: ${i.QUESTIONS_DESKTOP}px) { 313 width: 398px; 314 315 } 316 `},Y={InputWrapper:e.div` 317 width: 100%; 318 position: relative; 319 padding-bottom: 0; 320 321 @media (min-width: ${i.QUESTIONS_DESKTOP}px) { 322 input { 323 font-size: 17px; 324 } 325 } 326 `,AutoCompleteWrapper:e.div` 327 max-height: 328px; 328 padding: 0 15px; 329 position: absolute; 330 top: 50px; 331 left: 0; 332 box-shadow: 0 6px 20px rgba(74, 53, 50, 0.2); 333 border-radius: 8px; 334 overflow-y: auto; 335 width: 328px; 336 background-color: ${n.WHITE}; 337 z-index: 2; 338 339 @media (min-width: ${i.SALES_SCREEN_MIN_PHONE}px) { 340 width: 398px; 341 } 342 343 ::-webkit-scrollbar {
344 width: 6px; 345 height: auto; 346 margin-right: 11px; 347 } 348 349 ::-webkit-scrollbar-track { 350 background-color: transparent; 351 } 352 353 ::-webkit-scrollbar-thumb { 354 background-color: ${n.BROWNISH_GRAY}; 355 border-radius: 8px; 356 } 357 `,AutoCompleteButtonWithChoose:e.button` 358 height: 40px; 359 width: 100%; 360 padding: 0; 361 display: flex; 362 flex-direction: row-reverse; 363 justify-content: space-between; 364 align-items: center; 365 cursor: pointer; 366 border: none; 367 outline: none; 368 font-size: 16px; 369 font-weight: 500; 370 line-height: 40px; 371 text-decoration: none; 372 text-align: left; 373 color: ${e=>e.isOptionChoosen?n.MEDIUM_GREEN:n.PRIMARY_TEXT}; 374 background-color: transparent; 375 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 376 text-overflow: ellipsis; 377 white-space: nowrap; 378 overflow: hidden; 379 direction: rtl; 380 position: relative; 381 background-repeat: no-repeat; 382 background-position: right 8px center; 383 background-size: 16px 16px; 384 background-image: ${e=>e.isOptionChoosen?`url("${A}")`:"none"}; 385 386 :not(:last-child) { 387 border-bottom: 1px dotted #bcc9d0; 388 } 389 `,AutoCompleteButtonTextWrapper:e.span` 390 unicode-bidi: plaintext; 391 `,AutocompleteSubtitle:e.p` 392 height: 41px; 393 font-size: 14px; 394 line-height: 41px; 395 letter-spacing: 0.88px; 396 font-weight: 600; 397 color: rgba(${n.PRIMARY_TEXT_RGB}, 0.3); 398 text-align: start; 399 text-transform: uppercase; 400 `},H=t` 401 margin: 0; 402 border: none; 403 border-radius: 8px; 404 outline: none; 405 406 display: block; 407 width: 100%; 408 padding: 14px 40px 14px 12px; 409 color: rgb(${n.PRIMARY_TEXT_RGB}); 410 background-color: ${n.WHITE}; 411 caret-color: #35b43f; 412 font-size: 15px; 413 line-height: 18px; 414 font-weight: 700; 415 transition: border-color 0.2s ease-out; 416 417 &::placeholder { 418 font-weight: 600; 419 color: rgba(176, 160, 153, 0.5); 420 } 421 422 &:focus { 423 border-color: #b0a099; 424 } 425 426 [data-is-valid='false'] & { 427 border: 1px solid ${n.ERROR}; 428 color: rgba(${n.ERROR_RGB}); 429 background-color: rgba(${n.ERROR_RGB}, 0.1); 430 background-image: url("${c}"); 431 background-size: 18px 18px; 432 background-repeat: no-repeat; 433 background-position: right 16px center; 434 } 435 436 [data-is-warning-icon-shown='false'] & { 437 background-image: none; 438 } 439`,q={Wrapper:e.div` 440 position: relative; 441 display: block; 442 width: 100%; 443 padding-bottom: ${({isIncreasedText:e})=>e?"16px":"20px"}; 444 445 &::after { 446 display: block; 447 position: absolute; 448 left: 0; 449 font-size: 10px; 450 line-height: 14px; 451 font-weight: 400; 452 } 453 454 &[data-is-valid='false']::after { 455 content: attr(data-validation-text); 456 color: rgba(${n.ERROR_RGB}); 457 } 458 459 &[data-is-valid='true']::after { 460 content: attr(data-hint-text); 461 color: rgba(${n.PRIMARY_TEXT_RGB}, 0.6); 462 } 463 `,Input2:e.input` 464 ${H}; 465 border: 1px solid #ddccc5; 466 background-color: #fffaf7; 467 468 ${({isAddDesktopStyles:e=!1})=>e&&`\n @media (min-width: ${i.DESKTOP}px) {\n padding: 20px 40px 20px 12px;\n }\n `} 469 470 ${({isIncreasedText:e})=>e&&t` 471 font-size: 18px; 472 padding: 11px 40px 11px 12px; 473 `} 474 `,Label:e.span` 475 color: rgba(${n.PRIMARY_TEXT_RGB}); 476 font-size: 16px; 477 line-height: 18px; 478 font-weight: 700; 479 margin-bottom: 4px; 480 `,SelectButton:e.button` 481 padding: 0; 482 display: block; 483 position: absolute; 484 bottom: ${({isIncreasedText:e})=>e?"15px":"20px"}; 485 right: 0; 486 width: 52px; 487 height: 48px; 488 border: none; 489 outline: none; 490 cursor: pointer; 491 background-color: transparent; 492 background-repeat: no-repeat; 493 background-position: center; 494 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 495 496 &[data-open='true'] { 497 background-image: url("${D}"); 498 transform: rotate(180deg); 499 } 500 501 &[data-open='false'] { 502 background-image: url("${D}"); 503 } 504 505 ${({isAddDesktopStyles:e=!1})=>e&&`\n @media (min-width: ${i.DESKTOP}px) {\n bottom: 26px;\n }\n `} 506 `},F=({labelName:e,isValid:t=!0,validationText:r="",hintText:i="",setIsAutoCompleteShown:n,isDataShown:s=!1,isAddDesktopStyles:d=!1,isIncreasedText:l=!1,...p})=>{const u=o.useCallback(e=>{const t=e.target;t.value=t.value.trim(),p.onBlur&&p.onBlur(e)},[p]);return a.jsxs(q.Wrapper,{"data-is-valid":t,"data-validation-text":r,"data-hint-text":i,isIncreasedText:l,children:[e&&a.jsx(q.Label,{children:e}),a.jsx(q.Input2,{required:!0,type:"text",...p,onBlur:u,isAddDesktopStyles:d,isIncreasedText:l}),a.jsx(q.SelectButton,{isIncreasedText:l,type:"button",onClick:()=>n&&n(!s),"data-open":s,isAddDesktopStyles:d,"data-testid":"breed-dropdown-arrow"})]})},K=({inputValue:e,inputName:t,setIsAutoCompleteShown:o,isAutoCompleteShown:r,onChange:i,onInputChange:n,setInputHasFocus:s,filteredPopularBreed:d,filteredBreedNames:l,setBreedKey:p,isIncreasedText:u=!1})=>{const{t:c}=N();return a.jsxs(Y.InputWrapper,{children:[a.jsx(F,{placeholder:c`onboarding.breed.chooseBreed`,value:e,name:t,isIncreasedText:u,autoComplete:"off",setIsAutoCompleteShown:o,isDataShown:r,onChange:n,onFocus:()=>s(!0)}),r&&a.jsxs(Y.AutoCompleteWrapper,{"data-testid":"breed-dropdown-list",children:[d.length>=1&&l.length>1&&a.jsxs(a.Fragment,{children:[a.jsx(Y.AutocompleteSubtitle,{children:c`onboarding.planBlock.mostPopularBadge`}),d.map(t=>{const o=t.name||t,r=t.key||t;return a.jsx(Y.AutoCompleteButtonWithChoose,{type:"button",value:o,isOptionCh
506oosen:o===e,onClick:e=>{p(r),i({target:{value:e.currentTarget.value}}),s(!1)},children:a.jsx(Y.AutoCompleteButtonTextWrapper,{children:o})},r)})]}),a.jsx(Y.AutocompleteSubtitle,{children:"A-Z"}),l.map(t=>{const o=t.name||t,r=t.key||t;return a.jsx(Y.AutoCompleteButtonWithChoose,{type:"button",value:o,isOptionChoosen:o===e,onClick:e=>{p(r),i({target:{value:e.currentTarget.value}}),s(!1)},children:a.jsx(Y.AutoCompleteButtonTextWrapper,{children:o})},r)})]})]})},L="identify_breed",X="What breed is your dog?",U=()=>{const{t:e}=N(),{onNextStep:t,onSkipOneStep:i}=o.useContext(v),{currentPageId:n,currentPageNumber:l,isProcessing:p,breeds:u}=w(r(e=>({currentPageId:e.currentPageId,currentPageNumber:e.currentPageNumber,isProcessing:e.isProcessing,breeds:e.breeds}))),c=j(),g=o.useMemo(()=>C(c,n),[c,n]),{language:x}=S(r(e=>({language:e.language}))),[b,h]=o.useState(!1),[m,f]=o.useState(!1),[k,y]=o.useState({value:"",isValid:!0,validationText:""}),[A,W]=o.useState(""),D=o.useMemo(()=>I(u),[u]),[M,z]=o.useState(!0);T();const G=o.useMemo(()=>!k.value||!k.isValid||p,[k.isValid,k.value,p]),Y=o.useCallback(({target:{value:e}})=>{z(!1),y(t=>({...t,value:e,isValid:!0,validationText:""}))},[y]),H=o.useMemo(()=>
506u.length?$(u,M?"":k.value):E(M?"":k.value,x,!1),[k.value,u,x,M]),q=o.useMemo(()=>D.length?$(D,k.value):E(k.value,x,!0),[k.value,x,D]);o.useEffect(()=>{H.length&&b?f(!0):f(!1)},[k.value,H.length,b]);const F=o.useCallback(({target:{value:e}})=>{y(t=>({...t,value:e,isValid:!0,validationText:""}))},[y]),U=o.useCallback(()=>{n&&l&&(S.setState({dogBreedValue:k.value}),B({question:X,answers:k.value,pageName:n,pageNumber:l,quiz:{dog_breed_22v4:k.value,...A&&{breed_key:A}}}),R({dog_breed:k.value}),i())},[n,l,k.value,A,i]),Q=o.useCallback(()=>{n&&l&&(S.setState({dogBreedValue:""}),B({question:X,answers:L,pageName:n,pageNumber:l}),R({dog_breed:L}),t())},[n,l,t]);return o.useEffect(()=>{g.length&&g!==s&&g!==L&&y(e=>({...e,value:g,isValid:!0,validationText:""}))},[g]),T(),a.jsx(V.Wrapper2,{children:a.jsxs(V.Content2,{children:[a.jsx(V.Title3,{children:a.jsx(O,{values:{YOUR_DOG:d},i18nKey:"onboarding.breed.question2"})}),a.jsx(K,{inputValue:k.value,inputName:"breeds",setIsAutoCompleteShown:f,isAutoCompleteShown:m,onChange:F,onInputChange:Y,setInputHasFocus:h,filteredPopularBreed:q,filteredBreedNames:H,setBreedKey:W}
506),a.jsx(V.StickyButtonsContainerBreedId,{children:a.jsxs(V.ButtonWrapper,{children:[a.jsx(_,{isButtonDisabled:G,onClick:U,testId:"quiz-continue-button"}),a.jsx(V.Divider,{children:a.jsx(V.DividerText,{children:e`payment.OR`})}),a.jsxs(V.ButtonVariant2,{onClick:Q,"data-testid":"identify-dog-breed",children:[a.jsx(P,{style:{marginRight:"12px"},width:24,height:24}),e`onboarding.breed.identifyBreed`]})]})})]})})},Q="What breed is your dog?",Z=()=>{const{onSkipOneStep:e}=o.useContext(v),{currentPageId:t,currentPageNumber:i,isProcessing:n,breeds:l}=w(r(e=>({currentPageId:e.currentPageId,currentPageNumber:e.currentPageNumber,isProcessing:e.isProcessing,breeds:e.breeds}))),{t:p,i18n:u}=N(),[c,g]=o.useState(!1),[x,b]=o.useState(!1),h=j(),[m,f]=o.useState({value:"",isValid:!0,validationText:""}),[k,C]=o.useState(""),S=o.useMemo(()=>I(l),[l]),A=o.useMemo(()=>!m.value||!m.isValid||n,[m.isValid,m.value,n]),_=o.useMemo(()=>l?$(l,m.value):W(m.value,u.language,!1),[m.value,l,u.language]),E=o.useMemo(()=>S?$(S,m.value):W(m.value,u.language,!0),[m.value,u.language,S]);o.useEffect(()=>{_.length&&c?b(!0):b(!1)},[m.value,c,_.length]);const P=o.useCallback(({target:{value:e}})=>{f(t=>({...t,value:e,isValid:!0,validationText:""}))},[f]),D=o.useCallback(()=>{t&&i&&(B({question:Q,answers:s,pageName:t,pageNumber:i,quiz:{dog_breed_22v4:s,breed_key:""}}),R({dog_breed:s}),e())},[t,i,e]),M=o.useCallback(()=>{t&&i&&(B({question:Q,answers:m.value,pageName:t,pageNumber:i,quiz:{dog_breed_22v4:m.value,...k&&{breed_key:k}}}),R({dog_breed:m.value}),e())},[t,i,m.value,k,e]);return o.useEffect(()=>{h&&t&&h[t]&&h[t]!==s&&f({value:h[t],isValid:!0,validationText:""})},[h,t]),T(),a.jsx(V.Wrapper2,{children:a.jsxs(V.Content,{children:[a.jsx(V.Title3,{children:a.jsx(O,{values:{YOUR_DOG:d},i18nKey:"onboarding.breed.question2"})}),a.jsxs(V.InputWrapper2,{children:[a.jsx(G,{placeholder:p`onboarding.breed.chooseBreed`,value:m.value,name:"breeds",autoComplete:"off",setIsAutoCompleteShown:b,isDataShown:x,onChange:P,onFocus:()=>g(!0)}),x&&a.jsxs(V.AutoCompleteWrapper2,{"data-testid":"breed-dropdown-list",children:[E.length>=1&&_.length>1&&a.jsxs(a.Fragment,{children:[a.jsx(V.AutocompleteSubtitle,{children:p`onboarding.planBlock.mostPopularBadge`}),E.map(e=>{const t=e.name||e,o=e.key||e;return a.jsx(V.AutoCompleteButtonWithChoose,{type:"button",value:t,isOptionChoosen:t===m.value,onClick:t=>{C(e.key),P({target:{value:t.currentTarget.value}}),g(!1)},children:a.jsx(V.AutoCompleteButtonTextWrapper,{children:t})},o)})]}),a.jsx(V.AutocompleteSubtitle,{children:"A-Z"}),_.map(e=>{const t=e.name||e,o=e.key||e;return a.jsx(V.AutoCompleteButtonWithChoose,{type:"button",value:t,isOptionChoosen:t===m.value,onClick:t=>{C(e.key),P({target:{value:t.currentTarget.value}}),g(!1)},children:a.jsx(V.AutoCompleteButtonTextWrapper,{children:t})},o)})]})]}),a.jsx(y,{isButtonDisabled:A,onClick:M}),a.jsx(V.OtherBreedLink,{onClick:D,"data-testid":"breed-unknown-link",children:p`onboarding.breed.idk`})]})})},J=e=>{const{i18n:t}=N(),r=w(e=>e.firebaseRemoteConfig),i=null==r?void 0:r.getBoolean("breed_id_setup"),n=o.useMemo(()=>i&&t.language===l.EN,[i,t.language]);return a.jsx(a.Fragment,{children:n?a.jsx(U,{...e}):a.jsx(Z,{...e})})};export{J as DogBreedQuestion};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.