https://mangan-fork-build.vercel.app/packs/js/features/onboarding-e7b4148576d3b1e6b6f8.chunk.js

1"use strict";(self.webpackChunkmangan=self.webpackChunkmangan||[]).push([[61],{1257:function(e,t,n){n.r(t),n.d(t,{default:function(){return D}});var i=n(1763),o=n(3),a=n.n(o),r=n(0),s=n(4),d=n(675),l=n(1774),u=n(1787),c=n(1),v=n(1784),m=n(37),g=n(9),p=n(2),f=n(244),b=["/avatars/original/missing.png","/images/avi.png"],Z=function(e){var t,o=e.onNext,d=(0,s.I0)(),l=(0,p.Tr)(),u=r.useRef(null),Z=r.useState(),h=Z[0],x=Z[1],y=r.useState(!1),w=y[0],k=y[1],N=r.useState(!0),C=N[0],P=N[1],M=!!l&&(t=l.avatar,b.every((function(e){return t.endsWith(e)})));return(0,i.Z)(c.Zb,{variant:"rounded",size:"xl"},void 0,(0,i.Z)(c.eW,{},void 0,(0,i.Z)("div",{},void 0,(0,i.Z)("div",{className:"pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-slate-900/50 border-solid -mx-4 sm:-mx-10"},void 0,(0,i.Z)(c.Kq,{space:2},void 0,(0,i.Z)(c.xv,{size:"2xl",align:"center",weight:"bold"},void 0,(0,i.Z)(v.Z,{id:"onboarding.avatar.title",defaultMessage:"Choose a profile picture"})),(0,i.Z)(c.xv,{theme:"muted",align:"center"},void 0,(0,i.Z)(v.Z,{id:"onboarding.avatar.subtitle",defaultMessage:"Just have fun with it."})))),(0,i.Z)("div",{className:"sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto"},void 0,(0,i.Z)(c.Kq,{space:10},void 0,(0,i.Z)("div",{className:"bg-gray-200 rounded-full relative mx-auto"},void 0,l&&(0,i.Z)(c.qE,{src:h||l.avatar,size:175}),w&&(0,i.Z)("div",{className:"absolute inset-0 rounded-full flex justify-center items-center bg-white/80"},void 0,(0,i.Z)(c.$j,{withText:!1})),(0,i.Z)("button",{onClick:function(){var e;null===(e=u.current)||void 0===e||e.click()},type:"button",className:a()({"absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-slate-800 hover:bg-primary-700":!0,"opacity-50 pointer-events-none":w}),disabled:w},void 0,(0,i.Z)(c.JO,{src:n(41),className:"text-white w-5 h-5"})),r.createElement("input",{type:"file",className:"hidden",ref:u,onChange:function(e){var t,n=null===(t=e.target.files)||void 0===t?void 0:t.item(0);n&&(0,f.Z)(n,16e4).then((function(e){var t=e?URL.createObjectURL(e):null==l?void 0:l.avatar;x(t),k(!0);var i=new FormData;i.append("avatar",n);var a=d((0,m.sQ)(i));Promise.all([a]).then((function(){P(!1),k(!1),o()})).catch((function(e){var t;k(!1),P(!1),x(null),422===(null===(t=e.response)||void 0===t?void 0:t.status)?d(g.ZP.error(e.response.data.error.replace("Validation failed: ",""))):d(g.ZP.error("An unexpected error occurred. Please try again or skip this step."))}))})).catch(console.error)}})),(0,i.Z)(c.Kq,{justifyContent:"center",space:2},void 0,(0,i.Z)(c.zx,{block:!0,theme:"primary",type:"button",onClick:o,disabled:M&&C||w},void 0,w?(0,i.Z)(v.Z,{id:"onboarding.saving",defaultMessage:"Saving…"}):(0,i.Z)(v.Z,{id:"onboarding.next",defaultMessage:"Next"})),C&&(0,i.Z)(c.zx,{block:!0,theme:"link",type:"button",onClick:o},void 0,(0,i.Z)(v.Z,{id:"onboarding.skip",defaultMessage:"Skip for now"}))))))))},h=function(e){var t=e.onNext,n=(0,s.I0)(),o=(0,p.Tr)(),a=r.useState((null==o?void 0:o.source.get("note"))||""),d=a[0],l=a[1],u=r.useState(!1),f=u[0],b=u[1],Z=r.useState([]),h=Z[0],x=Z[1],y=!(d.trim().length>0);return(0,i.Z)(c.Zb,{variant:"rounded",size:"xl"},void 0,(0,i.Z)(c.eW,{},void 0,(0,i.Z)("div",{},void 0,(0,i.Z)("div",{className:"pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10"},void 0,(0,i.Z)(c.Kq,{space:2},void 0,(0,i.Z)(c.xv,{size:"2xl",align:"center",weight:"bold"},void 0,(0,i.Z)(v.Z,{id:"onboarding.note.title",defaultMessage:"Write a short bio"})),(0,i.Z)(c.xv,{theme:"muted",align:"center"},void 0,(0,i.Z)(v.Z,{id:"onboarding.note.subtitle",defaultMessage:"You can always edit this later."})))),(0,i.Z)(c.Kq,{space:5},void 0,(0,i.Z)("div",{className:"sm:pt-10 sm:w-2/3 mx-auto"},void 0,(0,i.Z)(c.cw,{hintText:"Max 500 characters",labelText:"Bio",errors:h},void 0,(0,i.Z)(c.gx,{onChange:function(e){return l(e.target.value)},placeholder:"Tell the world a little about yourself…",value:d,maxLength:500}))),(0,i.Z)("div",{className:"sm:w-2/3 md:w-1/2 mx-auto"},void 0,(0,i.Z)(c.Kq,{justifyContent:"center",space:2},void 0,(0,i.Z)(c.zx,{block:!0,theme:"primary",type:"submit",disabled:y||f,onClick:function(){b(!0);var e=n((0,m.sQ)({note:d}));Promise.all([e]).then((function(){b(!1),t()})).catch((function(e){var t;b(!1),422===(null===(t=e.response)||void 0===t?void 0:t.status)?x([e.response.data.error.replace("Validation failed: ","")]):n(g.ZP.error("An unexpected error occurred. Please try again or skip this 

1step."))}))}},void 0,f?(0,i.Z)(v.Z,{id:"onboarding.saving",defaultMessage:"Saving…"}):(0,i.Z)(v.Z,{id:"onboarding.next",defaultMessage:"Next"})),(0,i.Z)(c.zx,{block:!0,theme:"link",type:"button",onClick:t},void 0,(0,i.Z)(v.Z,{id:"onboarding.skip",defaultMessage:"Skip for now"}))))))))},x=function(e){var t=e.onComplete;return(0,i.Z)(c.Zb,{variant:"rounded",size:"xl"},void 0,(0,i.Z)(c.eW,{},void 0,(0,i.Z)(c.Kq,{space:2},void 0,(0,i.Z)(c.JO,{strokeWidth:1,src:n(1743),className:"w-16 h-16 mx-auto text-primary-600 dark:text-primary-400"}),(0,i.Z)(c.xv,{size:"2xl",align:"center",weight:"bold"},void 0,(0,i.Z)(v.Z,{id:"onboarding.finished.title",defaultMessage:"Onboarding complete"})),(0,i.Z)(c.xv,{theme:"muted",align:"center"},void 0,(0,i.Z)(v.Z,{id:"onboarding.finished.message",defaultMessage:"We are very excited to welcome you to our community! Tap the button below to get started."}))),(0,i.Z)("div",{className:"pt-10 sm:w-2/3 md:w-1/2 mx-auto"},void 0,(0,i.Z)(c.Kq,{justifyContent:"center",space:2},void 0,(0,i.Z)(c.zx,{block:!0,theme:"primary",onClick:t},void 0,(0,i.Z)(v.Z,{id:"onboarding.view_feed",defaultMessage:"View Feed"}))))))},y=n(66),w=["/headers/original/missing.png","/images/banner.png"],k=function(e){var t,o=e.onNext,d=(0,s.I0)(),l=(0,p.Tr)(),u=r.useRef(null),b=r.useState(),Z=b[0],h=b[1],x=r.useState(!1),k=x[0],N=x[1],C=r.useState(!0),P=C[0],M=C[1],S=!!l&&(t=l.header,w.every((function(e){return t.endsWith(e)})));return(0,i.Z)(c.Zb,{variant:"rounded",size:"xl"},void 0,(0,i.Z)(c.eW,{},void 0,(0,i.Z)("div",{},void 0,(0,i.Z)("div",{className:"pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10"},void 0,(0,i.Z)(c.Kq,{space:2},void 0,(0,i.Z)(c.xv,{size:"2xl",align:"center",weight:"bold"},void 0,(0,i.Z)(v.Z,{id:"onboarding.header.title",defaultMessage:"Pick a cover image"})),(0,i.Z)(c.xv,{theme:"muted",align:"center"},void 0,(0,i.Z)(v.Z,{id:"onboarding.header.subtitle",defaultMessage:"This will be shown at the top of your profile."})))),(0,i.Z)("div",{className:"sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto"},void 0,(0,i.Z)(c.Kq,{space:10},void 0,(0,i.Z)("div",{className:"border border-solid border-gray-200 rounded-lg"},void 0,(0,i.Z)("div",{role:"button",className:"relative h-24 bg-primary-100 rounded-t-md flex items-center justify-center"},void 0,Z||(null==l?void 0:l.header)&&(0,i.Z)(y.Z,{src:Z||l.header,alt:"Profile Header",className:"absolute inset-0 object-cover rounded-t-md"}),k&&(0,i.Z)("div",{className:"absolute inset-0 rounded-t-md flex justify-center items-center bg-white/80"},void 0,(0,i.Z)(c.$j,{withText:!1})),(0,i.Z)("button",{onClick:function(){var e;null===(e=u.current)||void 0===e||e.click()},type:"button",className:a()({"absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white hover:bg-primary-700":!0,"opacity-50 pointer-events-none":k}),disabled:k},void 0,(0,i.Z)(c.JO,{src:n(41),className:"text-white w-5 h-5"})),r.createElement("input",{type:"file",className:"hidden",ref:u,onChange:function(e){var t,n=null===(t=e.target.files)||void 0===t?void 0:t.item(0);n&&(0,f.Z)(n,2073600).then((function(e){var t=e?URL.createObjectURL(e):null==l?void 0:l.header;h(t),N(!0);var n=new FormData;n.append("header",e);var i=d((0,m.sQ)(n));Promise.all([i]).then((function(){M(!1),N(!1),o()})).catch((function(e){var t;N(!1),M(!1),h(null),422===(null===(t=e.response)||void 0===t?void 0:t.status)?d(g.ZP.error(e.response.data.error.replace("Validation failed: ",""))):d(g.ZP.error("An unexpected error occurred. Please try again or skip this step."))}))})).catch(console.error)}})),(0,i.Z)("div",{className:"flex flex-col px-4 pb-4"},void 0,l&&(0,i.Z)(c.qE,{src:l.avatar,size:64,className:"ring-2 ring-white -mt-8 mb-2"}),(0,i.Z)(c.xv,{weight:"bold",size:"sm"},void 0,null==l?void 0:l.display_name),(0,i.Z)(c.xv,{theme:"muted",size:"sm"},void 0,"@",null==l?void 0:l.username))),(0,i.Z)(c.Kq,{justifyContent:"center",space:2},void 0,(0,i.Z)(c.zx,{block:!0,theme:"primary",type:"button",onClick:o,disabled:S&&P||k},void 0,k?"Saving…":"Next"),P&&(0,i.Z)(c.zx,{block:!0,theme:"link",type:"button",onClick:o},void 0,(0,i.Z)(v.Z,{id:"onboarding.skip",defaultMessage:"Skip for now"}))))))))},N=function(e){var t=e.onNext,n=(0,s.I0)(),o=(0,p.Tr)(),a=r.useState((null==o?void 0:o.display_name)||""),d=a[0],l=a[1],u=r.useState(!1),f=u[0],b=u[1],Z=r.useState([]),h=Z[0],x=Z[1],y=!(d.trim().length>0)||d.length>30,w=r.useMemo((function(){var e=30-d.length,t=1===e?"character remaining":"characters remaining";return"".concat(e," ").concat(t)}),[d]);return(0,i.Z)(c.Zb,{variant:"rounded",size:"xl"},void 0,(0,i.Z)(c.eW,{},void 0,(0,i.Z)("div",{},void 0,(0,i.Z)("div",{className:"pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10"},void 0,(0,i.Z)(c.Kq,{space:2},void 0,(0,i.Z)(c.xv,{size:"2xl",align:"center",weight:"bold"},void 0,(0,i.Z)(v.Z,{id:"onboarding.display_name.title",defaultMessage:"Choose a display name"})),(0,i.Z)(c.xv,{theme:"muted",align:"center"},void 0,(0,i.Z)(v.Z,{id:"onboarding.display_name.subtitle",defaultMessage:"You can always edit this later."})))),(0,i.Z)("div",{className:"sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto"},void 0,(0,i.Z)(c.Kq,{space:5},void 0,(0,i.Z)(c.cw,{hintText:w,labelText:"Display name",errors:h},void 0,(0,i.Z)(c.II,{onChange:function(e){return l(e.target.value)},placeholder:"Eg. John Smith",type:"text",value:d,maxLength:30})),(0,i.Z)(c.Kq,{justifyContent:"center",space:2},void 0,(0,i.Z)(c.zx,{block:!0,theme:"primary",type:"submit",disabled:y||f,onClick:function(){b(!0);var e=n((0,m.sQ)({display_name:d}));Promise.all([e]).then((function(){b(!1),t()})).catch((function(e){var t;b(!1),422===(null===(t=e.response)||void 0===t?void 0:t.status)?x([e.response.data.error.replace("Validation failed: ","")]):n(g.ZP.error("An unexpected error occurred. Please try again or skip this 

1step."))}))}},void 0,f?"Saving…":"Next"),(0,i.Z)(c.zx,{block:!0,theme:"link",type:"button",onClick:t},void 0,(0,i.Z)(v.Z,{id:"onboarding.skip",defaultMessage:"Skip for now"}))))))))},C=n(17),P=n.n(C),M=n(15),S=n(18),z=n(1750),j=n(450),O=n(10),q=n(13),K=n(6),T=function(e,t,n){if(n||2===arguments.length)for(var i,o=0,a=t.length;o<a;o++)!i&&o in t||(i||(i=Array.prototype.slice.call(t,0,o)),i[o]=t[o]);return e.concat(i||Array.prototype.slice.call(t))};function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach((function(t){(0,z.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function W(){var e,t=this,n=(0,p.h_)(),i=(0,p.TL)(),o=(0,j.useInfiniteQuery)(["suggestions","v2"],(function(e){return o=e.pageParam,a=t,r=void 0,d=function(){var e,t,a,r,s,d,l;return function(e,t){var n,i,o,a,r={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(a){return function(s){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;r;)try{if(n=1,i&&(o=2&a[0]?i.return:a[0]?i.throw||((o=i.return)&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;switch(i=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return r.label++,{value:a[1],done:!1};case 5:r.label++,i=a[1],a=[0];continue;case 7:a=r.ops.pop(),r.trys.pop();continue;default:if(!((o=(o=r.trys).length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){r=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){r.label=a[1];break}if(6===a[0]&&r.label<o[1]){r.label=o[1],o=a;break}if(o&&r.label<o[2]){r.label=o[2],r.ops.push(a);break}o[2]&&r.ops.pop(),r.trys.pop();continue}a=t.call(e,r)}catch(e){a=[6,e],i=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}(this,(function(u){switch(u.label){case 0:return t=(null==o?void 0:o.link)||"/api/v2/suggestions",[4,n.get(t)];case 1:return a=u.sent(),r=!!a.headers.link,s=null===(e=(0,K.rx)(a).refs.find((function(e){return"next"===e.rel})))||void 0===e?void 0:e.uri,d=a.data.map((function(e){return e.account})),l=d.map((function(e){return e.id})),i((0,q.YI)(d)),i((0,O.dmJ)(l)),[2,{data:a.data,link:s,hasMore:r}]}}))},new((s=void 0)||(s=Promise))((function(e,t){function n(e){try{o(d.next(e))}catch(e){t(e)}}function i(e){try{o(d.throw(e))}catch(e){t(e)}}function o(t){var o;t.done?e(t.value):(o=t.value,o instanceof s?o:new s((function(e){e(o)}))).then(n,i)}o((d=d.apply(a,r||[])).next())}));var o,a,r,s,d}),{keepPreviousData:!0,getNextPageParam:function(e){if(e.hasMore)return{link:e.link}}}),a=null===(e=o.data)||void 0===e?void 0:e.pages.reduce((function(e,t){return T(T([],e,!0),t.data,!0)}),[]);return I(I({},o),{},{data:a})}var E=function(e){var t=e.onNext,n=W(),o=n.data,a=n.fetchNextPage,r=n.hasNextPage,s=n.isFetching,d=P()((function(){return s?null:a()}),300);return(0,i.Z)(c.Zb,{variant:"rounded",size:"xl"},void 0,(0,i.Z)(c.eW,{},void 0,(0,i.Z)("div",{},void 0,(0,i.Z)("div",{className:"pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10"},void 0,(0,i.Z)(c.Kq,{space:2},void 0,(0,i.Z)(c.xv,{size:"2xl",align:"center",weight:"bold"},void 0,(0,i.Z)(v.Z,{id:"onboarding.suggestions.title",defaultMessage:"Suggested accounts"})),(0,i.Z)(c.xv,{theme:"muted",align:"center"},void 0,(0,i.Z)(v.Z,{id:"onboarding.suggestions.subtitle",defaultMessage:"Here are a few of the most popular accounts you might like."})))),o&&0!==o.length?o?(0,i.Z)("div",{className:"sm:pt-4 sm:pb-10 flex flex-col"},void 0,(0,i.Z)(M.Z,{isLoading:s,scrollKey:"suggestions",onLoadMore:d,hasMore:r,useWindowScroll:!1,style:{height:320}},void 0,o.map((function(e){return(0,i.Z)("div",{className:"py-2"},e.account.id,(0,i.Z)(S.Z,{id:e.account.id,showProfileHoverCard:!1,withLinkToProfile:!1}))})))):null:(0,i.Z)("div",{className:"bg-primary-50 dark:bg-slate-700 my-2 rounded-lg text-center p-8"},void 0,(0,i.Z)(c.xv,{},void 0,(0,i.Z)(v.Z,{id:"empty_column.follow_recommendations",defaultMessage:"Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags."}))),(0,i.Z)("div",{className:"sm:w-2/3 md:w-1/2 mx-auto"},void 0,(0,i.Z)(c.Kq,{},void 0,(0,i.Z)(c.Kq,{justifyContent:"center",space:2},void 0,(0,i.Z)(c.zx,{block:!0,theme:"primary",onClick:t},void 0,(0,i.Z)(v.Z,{id:"onboarding.done",defaultMessage:"Done"})),(0,i.Z)(c.zx,{block:!0,theme:"link",type:"button",onClick:t},void 0,(0,i.Z)(v.Z,{id:"onboarding.skip",defaultMessage:"Skip for now"}))))))))},D=function(){var e=(0,s.I0)(),t=r.useState(0),n=t[0],o=t[1],v=function(){o((function(e){return Math.min(e+1,m.length-1)}))},m=[(0,i.Z)(Z,{onNext:v}),(0,i.Z)(N,{onNext:v}),(0,i.Z)(h,{onNext:v}),(0,i.Z)(k,{onNext:v}),(0,i.Z)(E,{onNext:v}),(0,i.Z)(x,{onComplete:function(){e((0,l.CT)())}})],g=function(e){switch(e.key){case"ArrowLeft":o((function(e){return Math.max(0,e-1)}));break;case"ArrowRight":v()}};return r.useEffect((function(){return document.addEventListener("keyup",g),function(){document.removeEventListener("keyup",g)}}),[]),(0,i.Z)("div",{"data-testid":"onboarding-wizard"},void 0,(0,i.Z)(u.Z,{}),(0,i.Z)("main",{className:"h-screen flex flex-col overflow-x-hidden"},void 0,(0,i.Z)("div",{className:"flex flex-col justify-center items-center h-full"},void 0,(0,i.Z)(d.ZP,{animateHeight:!0,index:n,onChangeIndex:function(e){o(e)}},void 0,m.map((function(e,t){return(0,i.Z)("div",{className:"py-6 sm:mx-auto w-full max-w-[100vw] sm:max-w-lg md:max-w-2xl"},t,(0,i.Z)("div",{className:a()({"transition-opacity ease-linear":!0,"opacity-0 duration-500":n!==t,"opacity-100 duration-75":n===t})},void 0,e))}))),(0,i.Z)(c.Ug,{space:3,alignItems:"center",justifyContent:"center",className:"relative"},void 0,m.map((function(e,t){return(0,i.Z)("button",{tabIndex:0,onClick:function(){o(t)},className:a()({"w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2":!0,"bg-gray-200 hover:bg-gray-300":t!==n,"bg-primary-600":t===n})},t)}))))))}},1743:function(e,t,n){e.exports=n.p+"packs/icons/confetti-630b49be.svg"}}]);
2//# sourceMappingURL=onboarding-e7b4148576d3b1e6b6f8.chunk.js.map