https://www.merchbar.com/_next/static/chunks/pages/component-examples/experiments-9af2caacf132cba6.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[889],{37324:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/component-examples/experiments",function(){return t(53139)}])},97815:function(e,n,t){"use strict";var a=t(85893);t(67294);var r=t(62255),i=t(53457),s=t(47738),o=t(59417),l=t(67814);let c=e=>{let{children:n,...t}=e,r=n.toLowerCase().replace(/\s/g,"-").replace(/[^-a-z0-9]/g,"");return(0,a.jsxs)(i.Z,{as:"h4",id:r,...t,children:[n,(0,a.jsx)(s.Z,{className:"ms-1",value:"#".concat(r),children:(0,a.jsx)("a",{title:"Click to Copy Link",children:(0,a.jsx)(l.G,{icon:o.Alc})})})]})},d=e=>{let{children:n,...t}=e;return(0,a.jsx)(r.Z,{className:"mb-3",...t,children:n})};n.Z=Object.assign(d,{Header:c,Body:r.Z.Body})},71275:function(e,n,t){"use strict";var a=t(85893),r=t(10682),i=t(66338),s=t(26739);let{actions:{setBreadcrumbs:o}}=s.Z,l=e=>{let{title:n,breadcrumbs:t=[],children:s}=e,l=[{name:"Component Examples",route:"/component-examples"},...t],c=(0,i.I0)();return c(o(l)),(0,a.jsxs)(r.Z,{className:"my-4 container",children:[(0,a.jsx)("h1",{className:"mb-3",children:n}),s]})};n.Z=l},47738:function(e,n,t){"use strict";var a=t(85893),r=t(67294),i=t(78875),s=t(22336),o=t.n(s),l=t(94184),c=t.n(l);let d=e=>{let{children:n,value:t,className:s=""}=e,[l,d]=(0,r.useState)(!1),m=(0,r.useRef)(null),p=t;(0,r.useEffect)(()=>{if(t.startsWith("#")){let e=window.location;p=e.protocol+"//"+e.host+e.pathname+t}},[]);let u=()=>{d(!0),setTimeout(()=>{d(!1)},1500)},x=()=>{},h=e=>{e.preventDefault(),navigator.clipboard.writeText(p).then(u,x)},v=r.cloneElement(n,{className:c()(o().target,s),onClick:h,ref:m});return(0,a.jsxs)(a.Fragment,{children:[v,(0,a.jsx)(i.Z,{target:m.current,show:l,placement:"top",children:(0,a.jsx)("div",{className:c()(o().overlay,"bs-v4-legacy-overlay-font"),children:"Copied!"})})]})};n.Z=d},53139:function(e,n,t){"use strict";t.r(n);var a=t(85893),r=t(66338),i=t(96486),s=t.n(i),o=t(71275),l=t(97815),c=t(35005);let d=e=>({pageExperimentsLoaded:e.shared.pageExperimentsLoaded,pageExperiments:e.shared.pageExperiments}),m=(0,r.$j)(d)(e=>{let{pageExperiments:n,pageExperimentsLoaded:t}=e,r=()=>{alert("click")};if(!t)return(0,a.jsx)(a.Fragment,{children:"[EXPERIMENTS HAVE NOT LOADED]"});let i=s().get(n,"testExperiment1"),o=s().get(n,"testExperiment2");return(0,a.jsxs)("div",{children:[(0,a.jsx)("h2",{className:"mb-3",children:"Sample Page"}),"A"===i&&(0,a.jsx)(c.Z,{variant:"primary",onClick:r,className:"mb-2",children:"Experiment1 Variation A (33%)"}),"B"===i&&(0,a.jsx)(c.Z,{variant:"success",onClick:r,className:"mb-2",children:"Experiment1 Variation B (33%)"}),"C"===i&&(0,a.jsx)(c.Z,{variant:"danger",onClick:r,className:"mb-2",children:"Experiment1 Variation C (34%)"}),(0,a.jsx)("br",{}),"control"===o&&(0,a.jsx)(c.Z,{variant:"primary",onClick:r,className:"mb-2",children:"Experiment2 Control (0%)"}),"v1"===o&&(0,a.jsx)(c.Z,{variant:"primary",onClick:r,className:"mb-2",children:"Experiment2 Variation 1 (100%)"})]})}),p=()=>(0,a.jsx)(o.Z,{title:"Experiments",breadcrumbs:[{name:"Experiments",route:"/component-examples/experiments"}],children:(0,a.jsxs)(l.Z,{children:[(0,a.jsx)(l.Z.Header,{children:"Sample Experiment"}),(0,a.jsxs)(l.Z.Body,{children:[(0,a.jsx)("pre",{children:(0,a.jsx)("code",{children:'\nconst mapStateToProps = (state: AppState) => {\n    return {\n        pageExperimentsLoaded: state.shared.pageExperimentsLoaded,\n        pageExperiments: state.shared.pageExperiments,\n    };\n};\n\nconst SamplePage = connect(mapStateToProps)(\n    ({\n        pageExperiments,\n        pageExperimentsLoaded,\n    }: Props) => {\n\n        const handleButtonClick = () => {\n            alert("click");\n        };\n\n        // prevent sudden layout changes between initial load and experiment load\n        if (!pageExperimentsLoaded) {\n            return <></>;\n        }\n\n        const variation = _.get(pageExperiments, \'testExperiment\');\n\n        return (\n            <div>\n                <h2 className="mb-3">Sample Page</h2>\n                {variation === \'A\' && (<Button variant="primary" onClick={handleButtonClick}>Experiment Variation A</Button>)}\n                {variation === \'B\' && (<Button variant="success" onClick={handleButtonClick}>Experiment Variation B</Button>)}\n                {variation === \'C\' && (<Button variant="danger" onClick={handleButtonClick}>

1Experiment Variation C</Button>)}\n            </div>\n        );\n    }\n);\n\ntype Props = ReturnType<typeof mapStateToProps>;\n'})}),(0,a.jsx)(m,{})]})]})});n.default=p},22336:function(e){e.exports={target:"CopyToClipboard_target__gKwn4",overlay:"CopyToClipboard_overlay__ZA3lq"}},62255:function(e,n,t){"use strict";t.d(n,{Z:function(){return Z}});var a=t(94184),r=t.n(a),i=t(67294),s=t(76792),o=t(75528),l=t(39602),c=t(85893);let d=i.forwardRef(({bsPrefix:e,className:n,variant:t,as:a="img",...i},o)=>{let l=(0,s.vE)(e,"card-img");return(0,c.jsx)(a,{ref:o,className:r()(t?`${l}-${t}`:l,n),...i})});d.displayName="CardImg";var m=t(53457);let p=(0,l.Z)("h5"),u=(0,l.Z)("h6"),x=(0,o.Z)("card-body"),h=(0,o.Z)("card-title",{Component:p}),v=(0,o.Z)("card-subtitle",{Component:u}),E=(0,o.Z)("card-link",{Component:"a"}),g=(0,o.Z)("card-text",{Component:"p"}),f=(0,o.Z)("card-footer"),C=(0,o.Z)("card-img-overlay"),j=i.forwardRef(({bsPrefix:e,className:n,bg:t,text:a,border:i,body:o,children:l,as:d="div",...m},p)=>{let u=(0,s.vE)(e,"card");return(0,c.jsx)(d,{ref:p,...m,className:r()(n,u,t&&`bg-${t}`,a&&`text-${a}`,i&&`border-${i}`),children:o?(0,c.jsx)(x,{children:l}):l})});j.displayName="Card",j.defaultProps={body:!1};var Z=Object.assign(j,{Img:d,Title:h,Subtitle:v,Body:x,Link:E,Text:g,Header:m.Z,Footer:f,ImgOverlay:C})},53457:function(e,n,t){"use strict";var a=t(94184),r=t.n(a),i=t(67294),s=t(76792),o=t(49059),l=t(85893);let c=i.forwardRef(({bsPrefix:e,className:n,as:t="div",...a},c)=>{let d=(0,s.vE)(e,"card-header"),m=(0,i.useMemo)(()=>({cardHeaderBsPrefix:d}),[d]);return(0,l.jsx)(o.Z.Provider,{value:m,children:(0,l.jsx)(t,{ref:c,...a,className:r()(n,d)})})});c.displayName="CardHeader",n.Z=c}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=37324)}),_N_E=e.O()}]);