https://www.ulta.com/ux/assets/js/5619.c9a17563.chunk.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[5619],{95619:(e,t,a)=>{a.r(t),a.d(t,{MyListsForm:()=>E,composeHandleDeleteClick:()=>M,composeMutationHandler:()=>N,default:()=>O,propTypes:()=>x});var l=a(55462),r=a(16793),i=a(19115),n=a(64713),s=a(53507),o=a(17636),c=a(6601),m=a(21365),u=a(22593),d=a(83058),y=a(5572),b=a(45454),g=a(86710),p=a(74511);const h=e=>{const{subTitle:t=f.subTitle,confirmAction:a,cancelAction:r,deleteAction:i,onClose:n=f.onClose}=e,s=(0,l.useCallback)(()=>{a?.onClick?.(),n?.()},[a,n]),o=(0,l.useCallback)(()=>{r?.onClick?.(),n?.()},[r,n]);return l.createElement("div",{className:"ConfirmDelete"},t&&l.createElement("div",{className:"ConfirmDelete__sub-title"},l.createElement(g.Ay,{textStyle:"body"},t)),l.createElement("div",{className:"ConfirmDelete__actions"},a&&l.createElement(p.default,{fullWidth:!0,action:i,label:a.label,ariaLabel:a.ariaLabel||a.label,compact:!0,onClick:s}),r&&l.createElement(p.default,{fullWidth:!0,secondary:!0,label:r.label,ariaLabel:r.ariaLabel||r.label,compact:!0,onClick:o})))};h.propTypes={subTitle:i.string,confirmAction:i.shape({label:i.string.isRequired,ariaLabel:i.string,onClick:i.func}).isRequired,cancelAction:i.shape({label:i.string.isRequired,ariaLabel:i.string,onClick:i.func}).isRequired,deleteAction:i.object,onClose:i.func,adaRegionLabel:i.string};const f={subTitle:"You are attempting to remove an item from your list. Are you sure you want to continue?",onClose:()=>{}},v=h;var L=a(9945),C=a(94689),A=a(21309);function T(){return T=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)({}).hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},T.apply(null,arguments)}const _=({setHelperText:e,maxCharacterLimit:t,countLabel:a,formikRef:i})=>{const{values:n}=(0,r.j7)();return(0,l.useEffect)(()=>{const l=(0,C.F)(n.listName),r=Math.max(0,t-l);l>t&&i.current?.setTouched({listName:!0}),e((0,L.A)(a,[r]))},[n.listName,t,a,e,i]),null},E=e=>{const{myListsForm:t={},createAction:a,saveAction:i,deleteAction:y,invokeMutation:g,deleteDialog:p,contentId:h,confirmDeleteAction:f,componentKey:E,loading:x,flyoutOpener:O}=e,{closeOverlay:R,displayOverlay:F,setPostOverlayTeardown:I}=(0,u.e)(),{createTitle:S={},editTitle:D={},listName:q={},listId:w,countLabel:H,maxCharacterLimit:P=55,errorMessage:j}=t,{breakpoint:B}=(0,m.bT)()||{},K="SM"===B?.CURRENT_BREAKPOINT,[W,Y]=(0,l.useState)(!1),U=(0,l.useRef)(F),V=(0,l.useRef)(),[$,z]=(0,l.useState)(""),[G,J,Q]=(0,c.Ay)({}),X=!!q?.value,Z=X?D:S,ee=X&&y&&f,{text:te,htmlTag:ae}=Z,le=q?.validations?.find(e=>"required"===e.anchorID)?.message||"",re=q?.validations?.find(e=>"maxlength"===e.anchorID)?.message||"",ie=q?.validations?.find(e=>"error"===e.anchorID)||"",ne=n.Ik({listName:n.Yj().required(le).matches(ie.regex,ie.message).test("max-visual-length",re,function(e){return(0,C.F)(e)<=P})}),se=(0,l.useRef)();(0,l.useEffect)(()=>(se.current=setTimeout(()=>{k({isSubmitting:W,overlayWasOpen:U,errorMessage:j,loading:x},{closeOverlay:R,hideLoader:Q,setIsSubmitting:Y})},100),()=>clearTimeout(se.current)),[W,x,j,R,Y,Q]);const oe=(0,l.useCallback)(e=>{const t=X?i:a,l={listName:e.listName.trim(),...X&&{listId:w}};Y(!0),N({action:t,moduleParams:l,contentId:h},{invokeMutation:g,showLoader:J,hideLoader:Q})},[X,i,a,w,g,J,h,Q]),ce=(0,l.useCallback)(()=>{const e=f,t={listId:w};Y(!0),N({action:e,moduleParams:t,contentId:h},{invokeMutation:g,showLoader:J,hideLoader:Q})},[f,w,g,J,h,Q]),me=(0,l.useCallback)(M({flyoutOpener:O},{setPostOverlayTeardown:I}),[I,O]);return l.createElement("div",{className:"MyListsForm"},G,l.createElement("div",{className:"MyListsForm__Content"},l.createElement("div",{className:"MyListsForm__Header"},te&&l.createElement(A.default,{textStyle:"title-lg",htmlTag:ae},te)),l.createElement(r.l1,{initialValues:{listName:q?.value||""},validationSchema:ne,onSubmit:oe,innerRef:V},({values:e,errors:t,touched:n})=>{const c=X?i:a,m=G||!!t.listName,g=X?m||e.listName.trim()===q?.value:m||!e.listName.trim(),h=j?.length>0&&!W;return l.createElement(r.lV,{className:"MyListsForm__Form",noValidate:!0},l.createElement(_,{setHelperText:z,maxCharacterLimit:P,countLabel:H,formikRef:V}),l.createElement("div",{className:"MyListsForm__FormBody"},h&&j?.map((e,t)=>l.createElement("div",{key:`${E}-${t}`,className:"MyListsForm__BlockMessage"},l.createElement(b.Ay,{message:e.message,messageType:e.icon,backgroundColor:e.backgroundColor,borderColor:e.borderColor,textColor:e.textColor,dismissAction:e.dismissAction,action1:e.action1,action1Style:"link",action2:e.action2,ariaLiveType:"assertive",role:"alert"}))),l.createElement("div",{className:"MyListsForm__InputField"},l.createElement(o.Ay,T({},(0,d.iU)({...q}),{name:"listName",helpText:$})))),l.createElement("div",{className:"MyListsForm__Buttons"},c&&l.createElement(s.Ay,{action:c,withHover:!0,type:"submit",label:c?.label,primary:!0,compact:!0,width:"fullWidth",disabled:g}),ee&&l.createElement(s.Ay,{withHover:!0,type:"button",label:y?.label,secondary:!0,compact:!0,width:"fullWidth",disabled:G,onClick:me,action:(0,d.iU)({...y,navigationType:K?u._4.BottomSheet:u._4.Modal}),overlayTitle:{text:p?.title,htmlTag:"h2",textStyle:"title-lg"},overlayAriaLabel:p?.title,overlayContent:l.createElement(v,{subTitle:(0,L.A)(p?.message,[q?.value]),confirmAction:{label:p?.confirmLabel,onClick:ce},deleteAction:f,cancelAction:{label:p?.cancelLabel,onClick:R},onClose:R})})))})))},N=(e,t)=>{const{action:a,moduleParams:l,contentId:r}=(0,y.Y)(e),{showLoader:i,hideLoader:n,invokeMutation:s}=(0,y.Y)(t),{customHeaders:o,graphql:c,params:m}=a;s&&c&&(i(),s({graphql:c,variables:{moduleParams:l,contentId:r},...o&&{customHeaders:o},...m&&{params:m}}))},k=(e,t)=>{const{loading:a,isSubmitting:l,overlayWasOpen:r,errorMessage:i}=e,{closeOverlay:n,hideLoader:s,setIsSubmitting:o}=t;r.current&&l&&!a&&(i?.length||n(),o(!1),s())},M=(e,t)=>()=>{const{flyoutOpener:a}=(0,y.Y)(e),{setPostOverlayTeardown:l}=(0,y.Y)(t);l&&a?.current?.focus&&l(()=>a.current.focus())},x={myListsForm:i.shape({createTitle:i.shape({text:i.string,htmlTag:i.string}),editTitle:i.shape({text:i.string,htmlTag:i.string}),listName:i.shape({label:i.string,name:i.string,value:i.string,validations:i.array}),listId:i.string,countLabel:i.string.isRequired,maxCharacterLimit:i.number,errorMessage:i.array}).isRequired,createAction:i.object.isRequired,saveAction:i.object.isRequired,deleteAction:i.object.isRequired,deleteDialog:i.object,componentKey:i.string,flyoutOpener:i.shape({current:i.any})};E.defaultProps={myListsForm:{listName:{value:""},maxCharacterLimit:55,errorMessage:[]},componentKey:"my-lists-form"},E.propTypes=x;const O=E},94689:(e,t,a)=>{a.d(t,{F:()=>l});const l=e=>{if(!e)return 0;const t=new Intl.Segmenter("en",{granularity:"grapheme"});return Array.from(t.segment(e)).length}},9945:(e,t,a)=>{a.d(t,{A:()=>l});const l=(e,t=[])=>{if(!e)return null;if(!t||e&&!e.includes("%"))return e;return t.reduce((e,t,a)=>{const l=`%${a+1}`;return e.replace(l,t)},e)}}}]);
2//# sourceMappingURL=5619.c9a17563.chunk.js.map