i(s,n)))break e;e[r]=s,e[c]=n,r=c}}}return t}function i(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}if("object"==typeof performance&&"function"==typeof performance.now){var a=performance;t.unstable_now=function(){return a.now()}}else{var l=Date,u=l.now();t.unstable_now=function(){return l.now()-u}}var c=[],s=[],f=1,d=null,p=3,m=!1,h=!1,v=!1,g="function"==typeof setTimeout?setTimeout:null,y="function"==typeof clearTimeout?clearTimeout:null,b="undefined"!=typeof setImmediate?setImmediate:null;function w(e){for(var t=r(s);null!==t;){if(null===t.callback)o(s);else{if(!(t.startTime<=e))break;o(s),t.sortIndex=t.expirationTime,n(c,t)}t=r(s)}}function E(e){if(v=!1,w(e),!h)if(null!==r(c))h=!0,T(S);else{var t=r(s);null!==t&&j(E,t.startTime-e)}}function S(e,n){h=!1,v&&(v=!1,y(C),C=-1),m=!0;var i=p;try{for(w(n),d=r(c);null!==d&&(!(d.expirationTime>n)||e&&!D());){var a=d.callback;if("function"==typeof a){d.callback=null,p=d.priorityLevel;var l=a(d.expirationTime<=n);n=t.unstable_now(),"function"==typeof l?d.callback=l:d===r(c)&&o(c),w(n)}else o(c);d=r(c)}if(null!==d)var u=!0;else{var f=r(s);null!==f&&j(E,f.startTime-n),u=!1}return u}finally{d=null,p=i,m=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var x,k=!1,O=null,C=-1,P=5,I=-1;function D(){return!(t.unstable_now()-Ie||125a?(e.sortIndex=i,n(s,e),null===r(c)&&e===r(s)&&(v?(y(C),C=-1):v=!0,j(E,i-a))):(e.sortIndex=l,n(c,e),h||m||(h=!0,T(S))),e},t.unstable_shouldYield=D,t.unstable_wrapCallback=function(e){var t=p;return function(){var n=p;p=t;try{return e.apply(this,arguments)}finally{p=n}}}},840:(e,t,n)=>{"use strict";e.exports=n(53)},473:e=>{"use strict";e.exports=function(){}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r].call(i.exports,i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=n(294),t=n(745),r=n(697),o=n.n(r),i=n(962),a=n.n(i);function l(e,t){return e.contains?e.contains(t):e.compareDocumentPosition?e===t||!!(16&e.compareDocumentPosition(t)):void 0}function u(){const t=(0,e.useRef)(!0),n=(0,e.useRef)((()=>t.current));return(0,e.useEffect)((()=>(t.current=!0,()=>{t.current=!1})),[]),n.current}const c=2**31-1;function s(e,t,n){const r=n-Date.now();e.current=r<=c?setTimeout(t,r):setTimeout((()=>s(e,t,n)),c)}function f(){const t=u(),n=(0,e.useRef)();return function(t){const n=function(t){const n=(0,e.useRef)(t);return n.current=t,n}(t);(0,e.useEffect)((()=>()=>n.current()),[])}((()=>clearTimeout(n.current))),(0,e.useMemo)((()=>{const e=()=>clearTimeout(n.current);return{set:function(r,o=0){t()&&(e(),o<=c?n.current=setTimeout(r,o):s(n,r,Date.now()+o))},clear:e}}),[])}var d=n(473),p=n.n(d);n(143);const m=e=>e&&"function"!=typeof e?t=>{e.current=t}:e,h=function(t,n){return(0,e.useMemo)((()=>function(e,t){const n=m(e),r=m(t);return e=>{n&&n(e),r&&r(e)}}(t,n)),[t,n])};var v=n(184),g=n.n(v),y=n(935);function b(){return(0,e.useState)(null)}var w=Object.prototype.hasOwnProperty;function E(e,t,n){for(n of e.keys())if(S(n,t))return n}function S(e,t){var n,r,o;if(e===t)return!0;if(e&&t&&(n=e.constructor)===t.constructor){if(n===Date)return e.getTime()===t.getTime();if(n===RegExp)return e.toString()===t.toString();if(n===Array){if((r=e.length)===t.length)for(;r--&&S(e[r],t[r]););return-1===r}if(n===Set){if(e.size!==t.size)return!1;for(r of e){if((o=r)&&"object"==typeof o&&!(o=E(t,o)))return!1;if(!t.has(o))return!1}return!0}if(n===Map){if(e.size!==t.size)return!1;for(r of e){if((o=r[0])&&"object"==typeof o&&!(o=E(t,o)))return!1;if(!S(r[1],t.get(o)))return!1}return!0}if(n===ArrayBuffer)e=new Uint8Array(e),t=new Uint8Array(t);else if(n===DataView){if((r=e.byteLength)===t.byteLength)for(;r--&&e.getInt8(r)===t.getInt8(r););return-1===r}if(ArrayBuffer.isView(e)){if((r=e.byteLength)===t.byteLength)for(;r--&&e[r]===t[r];);return-1===r}if(!n||"object"==typeof e){for(n in r=0,e){if(w.call(e,n)&&++r&&!w.call(t,n))return!1;if(!(n in t)||!S(e[n],t[n]))return!1}return Object.keys(t).length===r}}return e!=e&&t!=t}function x(e){return e.split("-")[0]}function k(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function O(e){return e instanceof k(e).Element||e instanceof Element}function C(e){return e instanceof k(e).HTMLElement||e instanceof HTMLElement}function P(e){return"undefined"!=typeof ShadowRoot&&(e instanceof k(e).ShadowRoot||e instanceof ShadowRoot)}var I=Math.max,D=Math.min,_=Math.round;function R(){var e=navigator.userAgentData;return null!=e&&e.brands&&Array.isArray(e.brands)?e.brands.map((function(e){return e.brand+"/"+e.version})).join(" "):navigator.userAgent}function N(){return!/^((?!chrome|android).)*safari/i.test(R())}function T(e,t,n){void 0===t&&(t=!1),void 0===n&&(n=!1);var r=e.getBoundingClientRect(),o=1,i=1;t&&C(e)&&(o=e.offsetWidth>0&&_(r.width)/e.offsetWidth||1,i=e.offsetHeight>0&&_(r.height)/e.offsetHeight||1);var a=(O(e)?k(e):window).visualViewport,l=!N()&&n,u=(r.left+(l&&a?a.offsetLeft:0))/o,c=(r.top+(l&&a?a.offsetTop:0))/i,s=r.width/o,f=r.height/i;return{width:s,height:f,top:c,right:u+s,bottom:c+f,left:u,x:u,y:c}}function j(e){var t=T(e),n=e.offsetWidth,r=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-r)<=1&&(r=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:r}}function A(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&P(n)){var r=t;do{if(r&&e.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function M(e){return e?(e.nodeName||"").toLowerCase():null}function L(e){return k(e).getComputedStyle(e)}function B(e){return["table","td","th"].indexOf(M(e))>=0}function F(e){return((O(e)?e.ownerDocument:e.document)||window.document).documentElement}function z(e){return"html"===M(e)?e:e.assignedSlot||e.parentNode||(P(e)?e.host:null)||F(e)}function U(e){return C(e)&&"fixed"!==L(e).position?e.offsetParent:null}function W(e){for(var t=k(e),n=U(e);n&&B(n)&&"static"===L(n).position;)n=U(n);return n&&("html"===M(n)||"body"===M(n)&&"static"===L(n).position)?t:n||function(e){var t=/firefox/i.test(R());if(/Trident/i.test(R())&&C(e)&&"fixed"===L(e).position)return null;var n=z(e);for(P(n)&&(n=n.host);C(n)&&["html","body"].indexOf(M(n))<0;){var r=L(n);if("none"!==r.transform||"none"!==r.perspective||"paint"===r.contain||-1!==["transform","perspective"].indexOf(r.willChange)||t&&"filter"===r.willChange||t&&r.filter&&"none"!==r.filter)return n;n=n.parentNode}return null}(e)||t}function G(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function H(e,t,n){return I(e,D(t,n))}function V(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function $(e,t){return t.reduce((function(t,n){return t[n]=e,t}),{})}var q="top",Q="bottom",Y="right",K="left",J="auto",X=[q,Q,Y,K],Z="start",ee="end",te="viewport",ne="popper",re=X.reduce((function(e,t){return e.concat([t+"-"+Z,t+"-"+ee])}),[]),oe=[].concat(X,[J]).reduce((function(e,t){return e.concat([t,t+"-"+Z,t+"-"+ee])}),[]),ie=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];const ae={name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,n=e.state,r=e.name,o=e.options,i=n.elements.arrow,a=n.modifiersData.popperOffsets,l=x(n.placement),u=G(l),c=[K,Y].indexOf(l)>=0?"height":"width";if(i&&a){var s=function(e,t){return V("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:$(e,X))}(o.padding,n),f=j(i),d="y"===u?q:K,p="y"===u?Q:Y,m=n.rects.reference[c]+n.rects.reference[u]-a[u]-n.rects.popper[c],h=a[u]-n.rects.reference[u],v=W(i),g=v?"y"===u?v.clientHeight||0:v.clientWidth||0:0,y=m/2-h/2,b=s[d],w=g-f[c]-s[p],E=g/2-f[c]/2+y,S=H(b,E,w),k=u;n.modifiersData[r]=((t={})[k]=S,t.centerOffset=S-E,t)}},effect:function(e){var t=e.state,n=e.options.element,r=void 0===n?"[data-popper-arrow]":n;null!=r&&("string"!=typeof r||(r=t.elements.popper.querySelector(r)))&&A(t.elements.popper,r)&&(t.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function le(e){return e.split("-")[1]}var ue={top:"auto",right:"auto",bottom:"auto",left:"auto"};function ce(e){var t,n=e.popper,r=e.popperRect,o=e.placement,i=e.variation,a=e.offsets,l=e.position,u=e.gpuAcceleration,c=e.adaptive,s=e.roundOffsets,f=e.isFixed,d=a.x,p=void 0===d?0:d,m=a.y,h=void 0===m?0:m,v="function"==typeof s?s({x:p,y:h}):{x:p,y:h};p=v.x,h=v.y;var g=a.hasOwnProperty("x"),y=a.hasOwnProperty("y"),b=K,w=q,E=window;if(c){var S=W(n),x="clientHeight",O="clientWidth";S===k(n)&&"static"!==L(S=F(n)).position&&"absolute"===l&&(x="scrollHeight",O="scrollWidth"),(o===q||(o===K||o===Y)&&i===ee)&&(w=Q,h-=(f&&S===E&&E.visualViewport?E.visualViewport.height:S[x])-r.height,h*=u?1:-1),o!==K&&(o!==q&&o!==Q||i!==ee)||(b=Y,p-=(f&&S===E&&E.visualViewport?E.visualViewport.width:S[O])-r.width,p*=u?1:-1)}var C,P=Object.assign({position:l},c&&ue),I=!0===s?function(e,t){var n=e.x,r=e.y,o=t.devicePixelRatio||1;return{x:_(n*o)/o||0,y:_(r*o)/o||0}}({x:p,y:h},k(n)):{x:p,y:h};return p=I.x,h=I.y,u?Object.assign({},P,((C={})[w]=y?"0":"",C[b]=g?"0":"",C.transform=(E.devicePixelRatio||1)<=1?"translate("+p+"px, "+h+"px)":"translate3d("+p+"px, "+h+"px, 0)",C)):Object.assign({},P,((t={})[w]=y?h+"px":"",t[b]=g?p+"px":"",t.transform="",t))}const se={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,n=e.options,r=n.gpuAcceleration,o=void 0===r||r,i=n.adaptive,a=void 0===i||i,l=n.roundOffsets,u=void 0===l||l,c={placement:x(t.placement),variation:le(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:o,isFixed:"fixed"===t.options.strategy};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,ce(Object.assign({},c,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:a,roundOffsets:u})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,ce(Object.assign({},c,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:u})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}};var fe={passive:!0};const de={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,n=e.instance,r=e.options,o=r.scroll,i=void 0===o||o,a=r.resize,l=void 0===a||a,u=k(t.elements.popper),c=[].concat(t.scrollParents.reference,t.scrollParents.popper);return i&&c.forEach((function(e){e.addEventListener("scroll",n.update,fe)})),l&&u.addEventListener("resize",n.update,fe),function(){i&&c.forEach((function(e){e.removeEventListener("scroll",n.update,fe)})),l&&u.removeEventListener("resize",n.update,fe)}},data:{}};var pe={left:"right",right:"left",bottom:"top",top:"bottom"};function me(e){return e.replace(/left|right|bottom|top/g,(function(e){return pe[e]}))}var he={start:"end",end:"start"};function ve(e){return e.replace(/start|end/g,(function(e){return he[e]}))}function ge(e){var t=k(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function ye(e){return T(F(e)).left+ge(e).scrollLeft}function be(e){var t=L(e),n=t.overflow,r=t.overflowX,o=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+o+r)}function we(e){return["html","body","#document"].indexOf(M(e))>=0?e.ownerDocument.body:C(e)&&be(e)?e:we(z(e))}function Ee(e,t){var n;void 0===t&&(t=[]);var r=we(e),o=r===(null==(n=e.ownerDocument)?void 0:n.body),i=k(r),a=o?[i].concat(i.visualViewport||[],be(r)?r:[]):r,l=t.concat(a);return o?l:l.concat(Ee(z(a)))}function Se(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function xe(e,t,n){return t===te?Se(function(e,t){var n=k(e),r=F(e),o=n.visualViewport,i=r.clientWidth,a=r.clientHeight,l=0,u=0;if(o){i=o.width,a=o.height;var c=N();(c||!c&&"fixed"===t)&&(l=o.offsetLeft,u=o.offsetTop)}return{width:i,height:a,x:l+ye(e),y:u}}(e,n)):O(t)?function(e,t){var n=T(e,!1,"fixed"===t);return n.top=n.top+e.clientTop,n.left=n.left+e.clientLeft,n.bottom=n.top+e.clientHeight,n.right=n.left+e.clientWidth,n.width=e.clientWidth,n.height=e.clientHeight,n.x=n.left,n.y=n.top,n}(t,n):Se(function(e){var t,n=F(e),r=ge(e),o=null==(t=e.ownerDocument)?void 0:t.body,i=I(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=I(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),l=-r.scrollLeft+ye(e),u=-r.scrollTop;return"rtl"===L(o||n).direction&&(l+=I(n.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:l,y:u}}(F(e)))}function ke(e){var t,n=e.reference,r=e.element,o=e.placement,i=o?x(o):null,a=o?le(o):null,l=n.x+n.width/2-r.width/2,u=n.y+n.height/2-r.height/2;switch(i){case q:t={x:l,y:n.y-r.height};break;case Q:t={x:l,y:n.y+n.height};break;case Y:t={x:n.x+n.width,y:u};break;case K:t={x:n.x-r.width,y:u};break;default:t={x:n.x,y:n.y}}var c=i?G(i):null;if(null!=c){var s="y"===c?"height":"width";switch(a){case Z:t[c]=t[c]-(n[s]/2-r[s]/2);break;case ee:t[c]=t[c]+(n[s]/2-r[s]/2)}}return t}function Oe(e,t){void 0===t&&(t={});var n=t,r=n.placement,o=void 0===r?e.placement:r,i=n.strategy,a=void 0===i?e.strategy:i,l=n.boundary,u=void 0===l?"clippingParents":l,c=n.rootBoundary,s=void 0===c?te:c,f=n.elementContext,d=void 0===f?ne:f,p=n.altBoundary,m=void 0!==p&&p,h=n.padding,v=void 0===h?0:h,g=V("number"!=typeof v?v:$(v,X)),y=d===ne?"reference":ne,b=e.rects.popper,w=e.elements[m?y:d],E=function(e,t,n,r){var o="clippingParents"===t?function(e){var t=Ee(z(e)),n=["absolute","fixed"].indexOf(L(e).position)>=0&&C(e)?W(e):e;return O(n)?t.filter((function(e){return O(e)&&A(e,n)&&"body"!==M(e)})):[]}(e):[].concat(t),i=[].concat(o,[n]),a=i[0],l=i.reduce((function(t,n){var o=xe(e,n,r);return t.top=I(o.top,t.top),t.right=D(o.right,t.right),t.bottom=D(o.bottom,t.bottom),t.left=I(o.left,t.left),t}),xe(e,a,r));return l.width=l.right-l.left,l.height=l.bottom-l.top,l.x=l.left,l.y=l.top,l}(O(w)?w:w.contextElement||F(e.elements.popper),u,s,a),S=T(e.elements.reference),x=ke({reference:S,element:b,strategy:"absolute",placement:o}),k=Se(Object.assign({},b,x)),P=d===ne?k:S,_={top:E.top-P.top+g.top,bottom:P.bottom-E.bottom+g.bottom,left:E.left-P.left+g.left,right:P.right-E.right+g.right},R=e.modifiersData.offset;if(d===ne&&R){var N=R[o];Object.keys(_).forEach((function(e){var t=[Y,Q].indexOf(e)>=0?1:-1,n=[q,Q].indexOf(e)>=0?"y":"x";_[e]+=N[n]*t}))}return _}const Ce={name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,r=e.name;if(!t.modifiersData[r]._skip){for(var o=n.mainAxis,i=void 0===o||o,a=n.altAxis,l=void 0===a||a,u=n.fallbackPlacements,c=n.padding,s=n.boundary,f=n.rootBoundary,d=n.altBoundary,p=n.flipVariations,m=void 0===p||p,h=n.allowedAutoPlacements,v=t.options.placement,g=x(v),y=u||(g!==v&&m?function(e){if(x(e)===J)return[];var t=me(e);return[ve(e),t,ve(t)]}(v):[me(v)]),b=[v].concat(y).reduce((function(e,n){return e.concat(x(n)===J?function(e,t){void 0===t&&(t={});var n=t,r=n.placement,o=n.boundary,i=n.rootBoundary,a=n.padding,l=n.flipVariations,u=n.allowedAutoPlacements,c=void 0===u?oe:u,s=le(r),f=s?l?re:re.filter((function(e){return le(e)===s})):X,d=f.filter((function(e){return c.indexOf(e)>=0}));0===d.length&&(d=f);var p=d.reduce((function(t,n){return t[n]=Oe(e,{placement:n,boundary:o,rootBoundary:i,padding:a})[x(n)],t}),{});return Object.keys(p).sort((function(e,t){return p[e]-p[t]}))}(t,{placement:n,boundary:s,rootBoundary:f,padding:c,flipVariations:m,allowedAutoPlacements:h}):n)}),[]),w=t.rects.reference,E=t.rects.popper,S=new Map,k=!0,O=b[0],C=0;C=0,R=_?"width":"height",N=Oe(t,{placement:P,boundary:s,rootBoundary:f,altBoundary:d,padding:c}),T=_?D?Y:K:D?Q:q;w[R]>E[R]&&(T=me(T));var j=me(T),A=[];if(i&&A.push(N[I]<=0),l&&A.push(N[T]<=0,N[j]<=0),A.every((function(e){return e}))){O=P,k=!1;break}S.set(P,A)}if(k)for(var M=function(e){var t=b.find((function(t){var n=S.get(t);if(n)return n.slice(0,e).every((function(e){return e}))}));if(t)return O=t,"break"},L=m?3:1;L>0&&"break"!==M(L);L--);t.placement!==O&&(t.modifiersData[r]._skip=!0,t.placement=O,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function Pe(e,t,n){return void 0===n&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function Ie(e){return[q,Y,Q,K].some((function(t){return e[t]>=0}))}const De={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,n=e.options,r=e.name,o=n.offset,i=void 0===o?[0,0]:o,a=oe.reduce((function(e,n){return e[n]=function(e,t,n){var r=x(e),o=[K,q].indexOf(r)>=0?-1:1,i="function"==typeof n?n(Object.assign({},t,{placement:e})):n,a=i[0],l=i[1];return a=a||0,l=(l||0)*o,[K,Y].indexOf(r)>=0?{x:l,y:a}:{x:a,y:l}}(n,t.rects,i),e}),{}),l=a[t.placement],u=l.x,c=l.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=u,t.modifiersData.popperOffsets.y+=c),t.modifiersData[r]=a}},_e={name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,r=e.name,o=n.mainAxis,i=void 0===o||o,a=n.altAxis,l=void 0!==a&&a,u=n.boundary,c=n.rootBoundary,s=n.altBoundary,f=n.padding,d=n.tether,p=void 0===d||d,m=n.tetherOffset,h=void 0===m?0:m,v=Oe(t,{boundary:u,rootBoundary:c,padding:f,altBoundary:s}),g=x(t.placement),y=le(t.placement),b=!y,w=G(g),E="x"===w?"y":"x",S=t.modifiersData.popperOffsets,k=t.rects.reference,O=t.rects.popper,C="function"==typeof h?h(Object.assign({},t.rects,{placement:t.placement})):h,P="number"==typeof C?{mainAxis:C,altAxis:C}:Object.assign({mainAxis:0,altAxis:0},C),_=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,R={x:0,y:0};if(S){if(i){var N,T="y"===w?q:K,A="y"===w?Q:Y,M="y"===w?"height":"width",L=S[w],B=L+v[T],F=L-v[A],z=p?-O[M]/2:0,U=y===Z?k[M]:O[M],V=y===Z?-O[M]:-k[M],$=t.elements.arrow,J=p&&$?j($):{width:0,height:0},X=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},ee=X[T],te=X[A],ne=H(0,k[M],J[M]),re=b?k[M]/2-z-ne-ee-P.mainAxis:U-ne-ee-P.mainAxis,oe=b?-k[M]/2+z+ne+te+P.mainAxis:V+ne+te+P.mainAxis,ie=t.elements.arrow&&W(t.elements.arrow),ae=ie?"y"===w?ie.clientTop||0:ie.clientLeft||0:0,ue=null!=(N=null==_?void 0:_[w])?N:0,ce=L+oe-ue,se=H(p?D(B,L+re-ue-ae):B,L,p?I(F,ce):F);S[w]=se,R[w]=se-L}if(l){var fe,de="x"===w?q:K,pe="x"===w?Q:Y,me=S[E],he="y"===E?"height":"width",ve=me+v[de],ge=me-v[pe],ye=-1!==[q,K].indexOf(g),be=null!=(fe=null==_?void 0:_[E])?fe:0,we=ye?ve:me-k[he]-O[he]-be+P.altAxis,Ee=ye?me+k[he]+O[he]-be-P.altAxis:ge,Se=p&&ye?function(e,t,n){var r=H(e,t,n);return r>n?n:r}(we,me,Ee):H(p?we:ve,me,p?Ee:ge);S[E]=Se,R[E]=Se-me}t.modifiersData[r]=R}},requiresIfExists:["offset"]};function Re(e,t,n){void 0===n&&(n=!1);var r,o,i=C(t),a=C(t)&&function(e){var t=e.getBoundingClientRect(),n=_(t.width)/e.offsetWidth||1,r=_(t.height)/e.offsetHeight||1;return 1!==n||1!==r}(t),l=F(t),u=T(e,a,n),c={scrollLeft:0,scrollTop:0},s={x:0,y:0};return(i||!i&&!n)&&(("body"!==M(t)||be(l))&&(c=(r=t)!==k(r)&&C(r)?{scrollLeft:(o=r).scrollLeft,scrollTop:o.scrollTop}:ge(r)),C(t)?((s=T(t,!0)).x+=t.clientLeft,s.y+=t.clientTop):l&&(s.x=ye(l))),{x:u.left+c.scrollLeft-s.x,y:u.top+c.scrollTop-s.y,width:u.width,height:u.height}}function Ne(e){var t=new Map,n=new Set,r=[];function o(e){n.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach((function(e){if(!n.has(e)){var r=t.get(e);r&&o(r)}})),r.push(e)}return e.forEach((function(e){t.set(e.name,e)})),e.forEach((function(e){n.has(e.name)||o(e)})),r}var Te={placement:"bottom",modifiers:[],strategy:"absolute"};function je(){for(var e=arguments.length,t=new Array(e),n=0;n{}},Be={name:"ariaDescribedBy",enabled:!0,phase:"afterWrite",effect:({state:e})=>()=>{const{reference:t,popper:n}=e.elements;if("removeAttribute"in t){const e=(t.getAttribute("aria-describedby")||"").split(",").filter((e=>e.trim()!==n.id));e.length?t.setAttribute("aria-describedby",e.join(",")):t.removeAttribute("aria-describedby")}},fn:({state:e})=>{var t;const{popper:n,reference:r}=e.elements,o=null==(t=n.getAttribute("role"))?void 0:t.toLowerCase();if(n.id&&"tooltip"===o&&"setAttribute"in r){const e=r.getAttribute("aria-describedby");if(e&&-1!==e.split(",").indexOf(n.id))return;r.setAttribute("aria-describedby",e?`${e},${n.id}`:n.id)}}},Fe=[],ze=function(t,n,r={}){let{enabled:o=!0,placement:i="bottom",strategy:a="absolute",modifiers:l=Fe}=r,c=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(r,Me);const s=(0,e.useRef)(l),f=(0,e.useRef)(),d=(0,e.useCallback)((()=>{var e;null==(e=f.current)||e.update()}),[]),p=(0,e.useCallback)((()=>{var e;null==(e=f.current)||e.forceUpdate()}),[]),[m,h]=function(t){const n=u();return[t[0],(0,e.useCallback)((e=>{if(n())return t[1](e)}),[n,t[1]])]}((0,e.useState)({placement:i,update:d,forceUpdate:p,attributes:{},styles:{popper:{},arrow:{}}})),v=(0,e.useMemo)((()=>({name:"updateStateModifier",enabled:!0,phase:"write",requires:["computeStyles"],fn:({state:e})=>{const t={},n={};Object.keys(e.elements).forEach((r=>{t[r]=e.styles[r],n[r]=e.attributes[r]})),h({state:e,styles:t,attributes:n,update:d,forceUpdate:p,placement:e.placement})}})),[d,p,h]),g=(0,e.useMemo)((()=>(S(s.current,l)||(s.current=l),s.current)),[l]);return(0,e.useEffect)((()=>{f.current&&o&&f.current.setOptions({placement:i,strategy:a,modifiers:[...g,v,Le]})}),[a,i,v,o,g]),(0,e.useEffect)((()=>{if(o&&null!=t&&null!=n)return f.current=Ae(t,n,Object.assign({},c,{placement:i,strategy:a,modifiers:[...g,Be,v]})),()=>{null!=f.current&&(f.current.destroy(),f.current=void 0,h((e=>Object.assign({},e,{attributes:{},styles:{popper:{}}}))))}}),[o,t,n]),m},Ue=!("undefined"==typeof window||!window.document||!window.document.createElement);var We=!1,Ge=!1;try{var He={get passive(){return We=!0},get once(){return Ge=We=!0}};Ue&&(window.addEventListener("test",He,He),window.removeEventListener("test",He,!0))}catch(e){}const Ve=function(e,t,n,r){return function(e,t,n,r){if(r&&"boolean"!=typeof r&&!Ge){var o=r.once,i=r.capture,a=n;!Ge&&o&&(a=n.__once||function e(r){this.removeEventListener(t,e,i),n.call(this,r)},n.__once=a),e.addEventListener(t,a,We?r:i)}e.addEventListener(t,n,r)}(e,t,n,r),function(){!function(e,t,n,r){var o=r&&"boolean"!=typeof r?r.capture:r;e.removeEventListener(t,n,o),n.__once&&e.removeEventListener(t,n.__once,o)}(e,t,n,r)}};function $e(e){return e&&e.ownerDocument||document}const qe=function(t){const n=(0,e.useRef)(t);return(0,e.useEffect)((()=>{n.current=t}),[t]),n};function Qe(t){const n=qe(t);return(0,e.useCallback)((function(...e){return n.current&&n.current(...e)}),[n])}const Ye=()=>{},Ke=e=>e&&("current"in e?e.current:e),Je={click:"mousedown",mouseup:"mousedown",pointerup:"pointerdown"},Xe=()=>{},Ze=function(t,n,{disabled:r,clickTrigger:o}={}){const i=n||Xe;!function(t,n=Ye,{disabled:r,clickTrigger:o="click"}={}){const i=(0,e.useRef)(!1),a=(0,e.useRef)(!1),u=(0,e.useCallback)((e=>{const n=Ke(t);var r;p()(!!n,"ClickOutside captured a close event but does not have a ref to compare it to. useClickOutside(), should be passed a ref that resolves to a DOM node"),i.current=!n||!!((r=e).metaKey||r.altKey||r.ctrlKey||r.shiftKey)||!function(e){return 0===e.button}(e)||!!l(n,e.target)||a.current,a.current=!1}),[t]),c=Qe((e=>{const n=Ke(t);n&&l(n,e.target)&&(a.current=!0)})),s=Qe((e=>{i.current||n(e)}));(0,e.useEffect)((()=>{var e,n;if(r||null==t)return;const i=$e(Ke(t)),a=i.defaultView||window;let l=null!=(e=a.event)?e:null==(n=a.parent)?void 0:n.event,f=null;Je[o]&&(f=Ve(i,Je[o],c,!0));const d=Ve(i,o,u,!0),p=Ve(i,o,(e=>{e!==l?s(e):l=void 0}));let m=[];return"ontouchstart"in i.documentElement&&(m=[].slice.call(i.body.children).map((e=>Ve(e,"mousemove",Ye)))),()=>{null==f||f(),d(),p(),m.forEach((e=>e()))}}),[t,r,o,u,c,s])}(t,i,{disabled:r,clickTrigger:o});const a=Qe((e=>{(function(e){return"Escape"===e.code||27===e.keyCode})(e)&&i(e)}));(0,e.useEffect)((()=>{if(r||null==t)return;const e=$e(Ke(t));let n=(e.defaultView||window).event;const o=Ve(e,"keyup",(e=>{e!==n?a(e):n=void 0}));return()=>{o()}}),[t,r,a])},et=(0,e.createContext)(Ue?window:void 0);et.Provider;const tt=(e,t)=>Ue?null==e?(t||$e()).body:("function"==typeof e&&(e=e()),e&&"current"in e&&(e=e.current),e&&("nodeType"in e||e.getBoundingClientRect)?e:null):null;function nt(t,n){const r=(0,e.useContext)(et),[o,i]=(0,e.useState)((()=>tt(t,null==r?void 0:r.document)));if(!o){const e=tt(t);e&&i(e)}return(0,e.useEffect)((()=>{n&&o&&n(o)}),[n,o]),(0,e.useEffect)((()=>{const e=tt(t);e!==o&&i(e)}),[t,o]),o}function rt(e={}){return Array.isArray(e)?e:Object.keys(e).map((t=>(e[t].name=t,e[t])))}const ot=void 0!==n.g&&n.g.navigator&&"ReactNative"===n.g.navigator.product,it="undefined"!=typeof document||ot?e.useLayoutEffect:e.useEffect,at=function({children:t,in:n,onExited:r,mountOnEnter:o,unmountOnExit:i}){const a=(0,e.useRef)(null),l=(0,e.useRef)(n),u=Qe(r);(0,e.useEffect)((()=>{n?l.current=!0:u(a.current)}),[n,u]);const c=h(a,t.ref),s=(0,e.cloneElement)(t,{ref:c});return n?s:i||!l.current&&o?null:s};var lt=n(893);function ut({children:t,in:n,onExited:r,onEntered:o,transition:i}){const[a,l]=(0,e.useState)(!n);n&&a&&l(!1);const u=function({in:t,onTransition:n}){const r=(0,e.useRef)(null),o=(0,e.useRef)(!0),i=Qe(n);return it((()=>{if(!r.current)return;let e=!1;return i({in:t,element:r.current,initial:o.current,isStale:()=>e}),()=>{e=!0}}),[t,i]),it((()=>(o.current=!1,()=>{o.current=!0})),[]),r}({in:!!n,onTransition:e=>{Promise.resolve(i(e)).then((()=>{e.isStale()||(e.in?null==o||o(e.element,e.initial):(l(!0),null==r||r(e.element)))}),(t=>{throw e.in||l(!0),t}))}}),c=h(u,t.ref);return a&&!n?null:(0,e.cloneElement)(t,{ref:c})}const ct=e.forwardRef(((t,n)=>{const{flip:r,offset:o,placement:i,containerPadding:a,popperConfig:l={},transition:u,runTransition:c}=t,[s,f]=b(),[d,p]=b(),m=h(f,n),v=nt(t.container),g=nt(t.target),[w,E]=(0,e.useState)(!t.show),S=ze(g,s,function({enabled:e,enableEvents:t,placement:n,flip:r,offset:o,fixed:i,containerPadding:a,arrowElement:l,popperConfig:u={}}){var c,s,f,d,p;const m=function(e){const t={};return Array.isArray(e)?(null==e||e.forEach((e=>{t[e.name]=e})),t):e||t}(u.modifiers);return Object.assign({},u,{placement:n,enabled:e,strategy:i?"fixed":u.strategy,modifiers:rt(Object.assign({},m,{eventListeners:{enabled:t,options:null==(c=m.eventListeners)?void 0:c.options},preventOverflow:Object.assign({},m.preventOverflow,{options:a?Object.assign({padding:a},null==(s=m.preventOverflow)?void 0:s.options):null==(f=m.preventOverflow)?void 0:f.options}),offset:{options:Object.assign({offset:o},null==(d=m.offset)?void 0:d.options)},arrow:Object.assign({},m.arrow,{enabled:!!l,options:Object.assign({},null==(p=m.arrow)?void 0:p.options,{element:l})}),flip:Object.assign({enabled:!!r},m.flip)}))})}({placement:i,enableEvents:!!t.show,containerPadding:a||5,flip:r,offset:o,arrowElement:d,popperConfig:l}));t.show&&w&&E(!1);const x=t.show||!w;if(Ze(s,t.onHide,{disabled:!t.rootClose||t.rootCloseDisabled,clickTrigger:t.rootCloseEvent}),!x)return null;const{onExit:k,onExiting:O,onEnter:C,onEntering:P,onEntered:I}=t;let D=t.children(Object.assign({},S.attributes.popper,{style:S.styles.popper,ref:m}),{popper:S,placement:i,show:!!t.show,arrowProps:Object.assign({},S.attributes.arrow,{style:S.styles.arrow,ref:p})});return D=function(e,t,n){return e?(0,lt.jsx)(e,Object.assign({},n)):t?(0,lt.jsx)(ut,Object.assign({},n,{transition:t})):(0,lt.jsx)(at,Object.assign({},n))}(u,c,{in:!!t.show,appear:!0,mountOnEnter:!0,unmountOnExit:!0,children:D,onExit:k,onExiting:O,onExited:(...e)=>{E(!0),t.onExited&&t.onExited(...e)},onEnter:C,onEntering:P,onEntered:I}),v?y.createPortal(D,v):null}));ct.displayName="Overlay";const st=ct;function ft(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}const dt=e.createContext({prefixes:{},breakpoints:["xxl","xl","lg","md","sm","xs"],minBreakpoint:"xs"}),{Consumer:pt,Provider:mt}=dt;function ht(t,n){const{prefixes:r}=(0,e.useContext)(dt);return t||r[n]||n}function vt(){const{dir:t}=(0,e.useContext)(dt);return"rtl"===t}const gt=e.forwardRef((({className:e,bsPrefix:t,as:n="div",...r},o)=>(t=ht(t,"popover-header"),(0,lt.jsx)(n,{ref:o,className:g()(e,t),...r}))));gt.displayName="PopoverHeader";const yt=gt,bt=e.forwardRef((({className:e,bsPrefix:t,as:n="div",...r},o)=>(t=ht(t,"popover-body"),(0,lt.jsx)(n,{ref:o,className:g()(e,t),...r}))));bt.displayName="PopoverBody";const wt=bt;function Et(e,t){let n=e;return"left"===e?n=t?"end":"start":"right"===e&&(n=t?"start":"end"),n}function St(e="absolute"){return{position:e,top:"0",left:"0",opacity:"0",pointerEvents:"none"}}e.Component;const xt=e.forwardRef((({bsPrefix:e,placement:t="right",className:n,style:r,children:o,body:i,arrowProps:a,hasDoneInitialMeasure:l,popper:u,show:c,...s},f)=>{const d=ht(e,"popover"),p=vt(),[m]=(null==t?void 0:t.split("-"))||[],h=Et(m,p);let v=r;return c&&!l&&(v={...r,...St(null==u?void 0:u.strategy)}),(0,lt.jsxs)("div",{ref:f,role:"tooltip",style:v,"x-placement":m,className:g()(n,d,m&&`bs-popover-${h}`),...s,children:[(0,lt.jsx)("div",{className:"popover-arrow",...a}),i?(0,lt.jsx)(wt,{children:o}):o]})})),kt=Object.assign(xt,{Header:yt,Body:wt,POPPER_OFFSET:[0,8]}),Ot=e.forwardRef((({bsPrefix:e,placement:t="right",className:n,style:r,children:o,arrowProps:i,hasDoneInitialMeasure:a,popper:l,show:u,...c},s)=>{e=ht(e,"tooltip");const f=vt(),[d]=(null==t?void 0:t.split("-"))||[],p=Et(d,f);let m=r;return u&&!a&&(m={...r,...St(null==l?void 0:l.strategy)}),(0,lt.jsxs)("div",{ref:s,style:m,role:"tooltip","x-placement":d,className:g()(n,e,`bs-tooltip-${p}`),...c,children:[(0,lt.jsx)("div",{className:"tooltip-arrow",...i}),(0,lt.jsx)("div",{className:`${e}-inner`,children:o})]})}));Ot.displayName="Tooltip";const Ct=Object.assign(Ot,{TOOLTIP_OFFSET:[0,6]});function Pt(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}function It(e,t){return It=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},It(e,t)}function Dt(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,It(e,t)}const _t=e.createContext(null);var Rt="unmounted",Nt="exited",Tt="entering",jt="entered",At="exiting",Mt=function(t){function n(e,n){var r;r=t.call(this,e,n)||this;var o,i=n&&!n.isMounting?e.enter:e.appear;return r.appearStatus=null,e.in?i?(o=Nt,r.appearStatus=Tt):o=jt:o=e.unmountOnExit||e.mountOnEnter?Rt:Nt,r.state={status:o},r.nextCallback=null,r}Dt(n,t),n.getDerivedStateFromProps=function(e,t){return e.in&&t.status===Rt?{status:Nt}:null};var r=n.prototype;return r.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},r.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==Tt&&n!==jt&&(t=Tt):n!==Tt&&n!==jt||(t=At)}this.updateStatus(!1,t)},r.componentWillUnmount=function(){this.cancelNextCallback()},r.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},r.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t)if(this.cancelNextCallback(),t===Tt){if(this.props.unmountOnExit||this.props.mountOnEnter){var n=this.props.nodeRef?this.props.nodeRef.current:y.findDOMNode(this);n&&function(e){e.scrollTop}(n)}this.performEnter(e)}else this.performExit();else this.props.unmountOnExit&&this.state.status===Nt&&this.setState({status:Rt})},r.performEnter=function(e){var t=this,n=this.props.enter,r=this.context?this.context.isMounting:e,o=this.props.nodeRef?[r]:[y.findDOMNode(this),r],i=o[0],a=o[1],l=this.getTimeouts(),u=r?l.appear:l.enter;e||n?(this.props.onEnter(i,a),this.safeSetState({status:Tt},(function(){t.props.onEntering(i,a),t.onTransitionEnd(u,(function(){t.safeSetState({status:jt},(function(){t.props.onEntered(i,a)}))}))}))):this.safeSetState({status:jt},(function(){t.props.onEntered(i)}))},r.performExit=function(){var e=this,t=this.props.exit,n=this.getTimeouts(),r=this.props.nodeRef?void 0:y.findDOMNode(this);t?(this.props.onExit(r),this.safeSetState({status:At},(function(){e.props.onExiting(r),e.onTransitionEnd(n.exit,(function(){e.safeSetState({status:Nt},(function(){e.props.onExited(r)}))}))}))):this.safeSetState({status:Nt},(function(){e.props.onExited(r)}))},r.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},r.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},r.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},r.onTransitionEnd=function(e,t){this.setNextCallback(t);var n=this.props.nodeRef?this.props.nodeRef.current:y.findDOMNode(this),r=null==e&&!this.props.addEndListener;if(n&&!r){if(this.props.addEndListener){var o=this.props.nodeRef?[this.nextCallback]:[n,this.nextCallback],i=o[0],a=o[1];this.props.addEndListener(i,a)}null!=e&&setTimeout(this.nextCallback,e)}else setTimeout(this.nextCallback,0)},r.render=function(){var t=this.state.status;if(t===Rt)return null;var n=this.props,r=n.children,o=(n.in,n.mountOnEnter,n.unmountOnExit,n.appear,n.enter,n.exit,n.timeout,n.addEndListener,n.onEnter,n.onEntering,n.onEntered,n.onExit,n.onExiting,n.onExited,n.nodeRef,Pt(n,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]));return e.createElement(_t.Provider,{value:null},"function"==typeof r?r(t,o):e.cloneElement(e.Children.only(r),o))},n}(e.Component);function Lt(){}Mt.contextType=_t,Mt.propTypes={},Mt.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:Lt,onEntering:Lt,onEntered:Lt,onExit:Lt,onExiting:Lt,onExited:Lt},Mt.UNMOUNTED=Rt,Mt.EXITED=Nt,Mt.ENTERING=Tt,Mt.ENTERED=jt,Mt.EXITING=At;const Bt=Mt;var Ft=/([A-Z])/g,zt=/^ms-/;function Ut(e){return function(e){return e.replace(Ft,"-$1").toLowerCase()}(e).replace(zt,"-ms-")}var Wt=/^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;const Gt=function(e,t){var n="",r="";if("string"==typeof t)return e.style.getPropertyValue(Ut(t))||function(e,t){return function(e){var t=$e(e);return t&&t.defaultView||window}(e).getComputedStyle(e,t)}(e).getPropertyValue(Ut(t));Object.keys(t).forEach((function(o){var i=t[o];i||0===i?function(e){return!(!e||!Wt.test(e))}(o)?r+=o+"("+i+") ":n+=Ut(o)+": "+i+";":e.style.removeProperty(Ut(o))})),r&&(n+="transform: "+r+";"),e.style.cssText+=";"+n};function Ht(e,t,n,r){var o,i;null==n&&(i=-1===(o=Gt(e,"transitionDuration")||"").indexOf("ms")?1e3:1,n=parseFloat(o)*i||0);var a=function(e,t,n){void 0===n&&(n=5);var r=!1,o=setTimeout((function(){r||function(e,t,n,r){if(void 0===n&&(n=!1),void 0===r&&(r=!0),e){var o=document.createEvent("HTMLEvents");o.initEvent("transitionend",n,r),e.dispatchEvent(o)}}(e,0,!0)}),t+n),i=Ve(e,"transitionend",(function(){r=!0}),{once:!0});return function(){clearTimeout(o),i()}}(e,n,r),l=Ve(e,"transitionend",t);return function(){a(),l()}}function Vt(e,t){const n=Gt(e,t)||"",r=-1===n.indexOf("ms")?1e3:1;return parseFloat(n)*r}function $t(e,t){const n=Vt(e,"transitionDuration"),r=Vt(e,"transitionDelay"),o=Ht(e,(n=>{n.target===e&&(o(),t(n))}),n+r)}function qt(e){return e&&"setState"in e?y.findDOMNode(e):null!=e?e:null}const Qt=e.forwardRef((({onEnter:t,onEntering:n,onEntered:r,onExit:o,onExiting:i,onExited:a,addEndListener:l,children:u,childRef:c,...s},f)=>{const d=(0,e.useRef)(null),p=h(d,c),m=e=>{p(qt(e))},v=e=>t=>{e&&d.current&&e(d.current,t)},g=(0,e.useCallback)(v(t),[t]),y=(0,e.useCallback)(v(n),[n]),b=(0,e.useCallback)(v(r),[r]),w=(0,e.useCallback)(v(o),[o]),E=(0,e.useCallback)(v(i),[i]),S=(0,e.useCallback)(v(a),[a]),x=(0,e.useCallback)(v(l),[l]);return(0,lt.jsx)(Bt,{ref:f,...s,onEnter:g,onEntered:b,onEntering:y,onExit:w,onExited:S,onExiting:E,addEndListener:x,nodeRef:d,children:"function"==typeof u?(e,t)=>u(e,{...t,ref:m}):e.cloneElement(u,{ref:m})})})),Yt={[Tt]:"show",[jt]:"show"},Kt=e.forwardRef((({className:t,children:n,transitionClasses:r={},onEnter:o,...i},a)=>{const l={in:!1,timeout:300,mountOnEnter:!1,unmountOnExit:!1,appear:!1,...i},u=(0,e.useCallback)(((e,t)=>{!function(e){e.offsetHeight}(e),null==o||o(e,t)}),[o]);return(0,lt.jsx)(Qt,{ref:a,addEndListener:$t,...l,onEnter:u,childRef:n.ref,children:(o,i)=>e.cloneElement(n,{...i,className:g()("fade",t,n.props.className,Yt[o],r[o])})})}));Kt.displayName="Fade";const Jt=Kt,Xt=e.forwardRef((({children:t,transition:n=Jt,popperConfig:r={},rootClose:o=!1,placement:i="top",show:a=!1,...l},u)=>{const c=(0,e.useRef)({}),[s,f]=(0,e.useState)(null),[d,p]=function(t){const n=(0,e.useRef)(null),r=ht(void 0,"popover"),o=ht(void 0,"tooltip"),i=(0,e.useMemo)((()=>({name:"offset",options:{offset:()=>{if(t)return t;if(n.current){if(ft(n.current,r))return kt.POPPER_OFFSET;if(ft(n.current,o))return Ct.TOOLTIP_OFFSET}return[0,0]}}})),[t,r,o]);return[n,[i]]}(l.offset),m=h(u,d),v=!0===n?Jt:n||void 0,y=Qe((e=>{f(e),null==r||null==r.onFirstUpdate||r.onFirstUpdate(e)}));return it((()=>{s&&l.target&&(null==c.current.scheduleUpdate||c.current.scheduleUpdate())}),[s,l.target]),(0,e.useEffect)((()=>{a||f(null)}),[a]),(0,lt.jsx)(st,{...l,ref:m,popperConfig:{...r,modifiers:p.concat(r.modifiers||[]),onFirstUpdate:y},transition:v,rootClose:o,placement:i,show:a,children:(o,{arrowProps:i,popper:a,show:l})=>{var u,f;!function(e,t){const{ref:n}=e,{ref:r}=t;e.ref=n.__wrapped||(n.__wrapped=e=>n(qt(e))),t.ref=r.__wrapped||(r.__wrapped=e=>r(qt(e)))}(o,i);const d=null==a?void 0:a.placement,p=Object.assign(c.current,{state:null==a?void 0:a.state,scheduleUpdate:null==a?void 0:a.update,placement:d,outOfBoundaries:(null==a||null==(u=a.state)||null==(f=u.modifiersData.hide)?void 0:f.isReferenceHidden)||!1,strategy:r.strategy}),m=!!s;return"function"==typeof t?t({...o,placement:d,show:l,...!n&&l&&{className:"show"},popper:p,arrowProps:i,hasDoneInitialMeasure:m}):e.cloneElement(t,{...o,placement:d,arrowProps:i,popper:p,hasDoneInitialMeasure:m,className:g()(t.props.className,!n&&l&&"show"),style:{...t.props.style,...o.style}})}})}));Xt.displayName="Overlay";const Zt=Xt;function en(e,t,n){const[r]=t,o=r.currentTarget,i=r.relatedTarget||r.nativeEvent[n];i&&i===o||l(o,i)||e(...t)}o().oneOf(["click","hover","focus"]);const tn=({trigger:t=["hover","focus"],overlay:n,children:r,popperConfig:o={},show:i,defaultShow:a=!1,onToggle:l,delay:u,placement:c,flip:s=c&&-1!==c.indexOf("auto"),...d})=>{const p=(0,e.useRef)(null),m=h(p,r.ref),v=f(),g=(0,e.useRef)(""),[y,b]=(T=i,j=a,A=l,M=(0,e.useRef)(void 0!==T),L=(0,e.useState)(j),B=L[0],F=L[1],z=void 0!==T,U=M.current,M.current=z,!z&&U&&B!==j&&F(j),[z?T:B,(0,e.useCallback)((function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{v.clear(),g.current="show",w.show?v.set((()=>{"show"===g.current&&b(!0)}),w.show):b(!0)}),[w.show,b,v]),O=(0,e.useCallback)((()=>{v.clear(),g.current="hide",w.hide?v.set((()=>{"hide"===g.current&&b(!1)}),w.hide):b(!1)}),[w.hide,b,v]),C=(0,e.useCallback)(((...e)=>{k(),null==E||E(...e)}),[k,E]),P=(0,e.useCallback)(((...e)=>{O(),null==S||S(...e)}),[O,S]),I=(0,e.useCallback)(((...e)=>{b(!y),null==x||x(...e)}),[x,b,y]),D=(0,e.useCallback)(((...e)=>{en(k,e,"fromElement")}),[k]),_=(0,e.useCallback)(((...e)=>{en(O,e,"toElement")}),[O]),R=null==t?[]:[].concat(t),N={ref:e=>{m(qt(e))}};var T,j,A,M,L,B,F,z,U;return-1!==R.indexOf("click")&&(N.onClick=I),-1!==R.indexOf("focus")&&(N.onFocus=C,N.onBlur=P),-1!==R.indexOf("hover")&&(N.onMouseOver=D,N.onMouseOut=_),(0,lt.jsxs)(lt.Fragment,{children:["function"==typeof r?r(N):(0,e.cloneElement)(r,N),(0,lt.jsx)(Zt,{...d,show:y,onHide:O,flip:s,placement:c,popperConfig:o,target:p.current,children:n})]})};function nn(t){var n=t.id,r=t.tip;return e.createElement(tn,{placement:"auto",trigger:["click","hover","focus"],style:{display:"inline"},overlay:e.createElement(Ct,{id:n},r)},e.createElement("img",{src:"/images/shop/icon-reminder.svg",className:"options-icon"}))}function rn(e){return rn="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},rn(e)}function on(e,t){for(var n=0;n=0;r--){var o=t[r](e);if(o)return o}return function(t,r){throw new Error("Invalid value of type "+typeof e+" for "+n+" argument when connecting component "+r.wrappedComponentName+".")}}function Lr(e,t){return e===t}function Br(e){var t=void 0===e?{}:e,n=t.connectHOC,r=void 0===n?Er:n,o=t.mapStateToPropsFactories,i=void 0===o?Ir:o,a=t.mapDispatchToPropsFactories,l=void 0===a?Pr:a,u=t.mergePropsFactories,c=void 0===u?_r:u,s=t.selectorFactory,f=void 0===s?jr:s;return function(e,t,n,o){void 0===o&&(o={});var a=o,u=a.pure,s=void 0===u||u,d=a.areStatesEqual,p=void 0===d?Lr:d,m=a.areOwnPropsEqual,h=void 0===m?xr:m,v=a.areStatePropsEqual,g=void 0===v?xr:v,y=a.areMergedPropsEqual,b=void 0===y?xr:y,w=Pt(a,Ar),E=Mr(e,i,"mapStateToProps"),S=Mr(t,l,"mapDispatchToProps"),x=Mr(n,c,"mergeProps");return r(f,Gn({methodName:"connect",getDisplayName:function(e){return"Connect("+e+")"},shouldHandleStateChanges:Boolean(e),initMapStateToProps:E,initMapDispatchToProps:S,initMergeProps:x,pure:s,areStatesEqual:p,areOwnPropsEqual:h,areStatePropsEqual:g,areMergedPropsEqual:b},w))}}const Fr=Br();var zr;function Ur(t,n){var r=(0,e.useState)((function(){return{inputs:n,result:t()}}))[0],o=(0,e.useRef)(!0),i=(0,e.useRef)(r),a=o.current||Boolean(n&&i.current.inputs&&function(e,t){if(e.length!==t.length)return!1;for(var n=0;n");return t.callbacks},t.setCallbacks=function(e){t.callbacks=e},t}Dt(t,e);var n=t.prototype;return n.componentDidMount=function(){this.unbind=ao(window,[{eventName:"error",fn:this.onWindowError}])},n.componentDidCatch=function(e){if(!(e instanceof co))throw e;this.setState({})},n.componentWillUnmount=function(){this.unbind()},n.render=function(){return this.props.children(this.setCallbacks)},t}(e.Component),po=function(e){return e+1},mo=function(e,t){var n=e.droppableId===t.droppableId,r=po(e.index),o=po(t.index);return n?"\n You have moved the item from position "+r+"\n to position "+o+"\n ":"\n You have moved the item from position "+r+"\n in list "+e.droppableId+"\n to list "+t.droppableId+"\n in position "+o+"\n "},ho=function(e,t,n){return t.droppableId===n.droppableId?"\n The item "+e+"\n has been combined with "+n.draggableId:"\n The item "+e+"\n in list "+t.droppableId+"\n has been combined with "+n.draggableId+"\n in list "+n.droppableId+"\n "},vo=function(e){return"\n The item has returned to its starting position\n of "+po(e.index)+"\n"},go=function(e){return"\n You have lifted an item in position "+po(e.source.index)+"\n"},yo=function(e){var t=e.destination;if(t)return mo(e.source,t);var n=e.combine;return n?ho(e.draggableId,e.source,n):"You are over an area that cannot be dropped on"},bo=function(e){if("CANCEL"===e.reason)return"\n Movement cancelled.\n "+vo(e.source)+"\n ";var t=e.destination,n=e.combine;return t?"\n You have dropped the item.\n "+mo(e.source,t)+"\n ":n?"\n You have dropped the item.\n "+ho(e.draggableId,e.source,n)+"\n ":"\n The item has been dropped while not over a drop area.\n "+vo(e.source)+"\n "},wo={x:0,y:0},Eo=function(e,t){return{x:e.x+t.x,y:e.y+t.y}},So=function(e,t){return{x:e.x-t.x,y:e.y-t.y}},xo=function(e,t){return e.x===t.x&&e.y===t.y},ko=function(e){return{x:0!==e.x?-e.x:0,y:0!==e.y?-e.y:0}},Oo=function(e,t,n){var r;return void 0===n&&(n=0),(r={})[e]=t,r["x"===e?"y":"x"]=n,r},Co=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))},Po=function(e,t){return Math.min.apply(Math,t.map((function(t){return Co(e,t)})))},Io=function(e){return function(t){return{x:e(t.x),y:e(t.y)}}},Do=function(e,t){return{top:e.top+t.y,left:e.left+t.x,bottom:e.bottom+t.y,right:e.right+t.x}},_o=function(e){return[{x:e.left,y:e.top},{x:e.right,y:e.top},{x:e.left,y:e.bottom},{x:e.right,y:e.bottom}]},Ro=function(e,t){return t&&t.shouldClipSubject?function(e,t){var n=Hr({top:Math.max(t.top,e.top),right:Math.min(t.right,e.right),bottom:Math.min(t.bottom,e.bottom),left:Math.max(t.left,e.left)});return n.width<=0||n.height<=0?null:n}(t.pageMarginBox,e):Hr(e)},No=function(e){var t=e.page,n=e.withPlaceholder,r=e.axis,o=e.frame,i=function(e,t){return t?Do(e,t.scroll.diff.displacement):e}(t.marginBox,o),a=function(e,t,n){var r;return n&&n.increasedBy?Gn({},e,((r={})[t.end]=e[t.end]+n.increasedBy[t.line],r)):e}(i,r,n);return{page:t,withPlaceholder:n,active:Ro(a,o)}},To=function(e,t){e.frame||so(!1);var n=e.frame,r=So(t,n.scroll.initial),o=ko(r),i=Gn({},n,{scroll:{initial:n.scroll.initial,current:t,diff:{value:r,displacement:o},max:n.scroll.max}});return Gn({},e,{frame:i,subject:No({page:e.subject.page,withPlaceholder:e.subject.withPlaceholder,axis:e.axis,frame:i})})};function jo(e){return Object.values?Object.values(e):Object.keys(e).map((function(t){return e[t]}))}function Ao(e,t){if(e.findIndex)return e.findIndex(t);for(var n=0;ne.bottom,l=r.lefte.right;return!(!a||!l)||a&&i||l&&o}},Xo=function(e){var t=Ko(e.top,e.bottom),n=Ko(e.left,e.right);return function(e){return t(e.top)&&t(e.bottom)&&n(e.left)&&n(e.right)}},Zo={direction:"vertical",line:"y",crossAxisLine:"x",start:"top",end:"bottom",size:"height",crossAxisStart:"left",crossAxisEnd:"right",crossAxisSize:"width"},ei={direction:"horizontal",line:"x",crossAxisLine:"y",start:"left",end:"right",size:"width",crossAxisStart:"top",crossAxisEnd:"bottom",crossAxisSize:"height"},ti=function(e){var t=e.target,n=e.destination,r=e.viewport,o=e.withDroppableDisplacement,i=e.isVisibleThroughFrameFn,a=o?function(e,t){var n=t.frame?t.frame.scroll.diff.displacement:wo;return Do(e,n)}(t,n):t;return function(e,t,n){return!!t.subject.active&&n(t.subject.active)(e)}(a,n,i)&&function(e,t,n){return n(t)(e)}(a,r,i)},ni=function(e){return ti(Gn({},e,{isVisibleThroughFrameFn:Jo}))},ri=function(e){return ti(Gn({},e,{isVisibleThroughFrameFn:Xo}))},oi=function(e,t,n){if("boolean"==typeof n)return n;if(!t)return!0;var r=t.invisible,o=t.visible;if(r[e])return!1;var i=o[e];return!i||i.shouldAnimate};function ii(e){var t=e.afterDragging,n=e.destination,r=e.displacedBy,o=e.viewport,i=e.forceShouldAnimate,a=e.last;return t.reduce((function(e,t){var l=function(e,t){var n=e.page.marginBox,r={top:t.point.y,right:0,bottom:0,left:t.point.x};return Hr(Vr(n,r))}(t,r),u=t.descriptor.id;if(e.all.push(u),!ni({target:l,destination:n,viewport:o,withDroppableDisplacement:!0}))return e.invisible[t.descriptor.id]=!0,e;var c={draggableId:u,shouldAnimate:oi(u,a,i)};return e.visible[u]=c,e}),{all:[],visible:{},invisible:{}})}function ai(e){var t=e.insideDestination,n=e.inHomeList,r=e.displacedBy,o=e.destination,i=function(e,t){if(!e.length)return 0;var n=e[e.length-1].descriptor.index;return t.inHomeList?n:n+1}(t,{inHomeList:n});return{displaced:Qo,displacedBy:r,at:{type:"REORDER",destination:{droppableId:o.descriptor.id,index:i}}}}function li(e){var t=e.draggable,n=e.insideDestination,r=e.destination,o=e.viewport,i=e.displacedBy,a=e.last,l=e.index,u=e.forceShouldAnimate,c=$o(t,r);if(null==l)return ai({insideDestination:n,inHomeList:c,displacedBy:i,destination:r});var s=Mo(n,(function(e){return e.descriptor.index===l}));if(!s)return ai({insideDestination:n,inHomeList:c,displacedBy:i,destination:r});var f=Vo(t,n),d=n.indexOf(s);return{displaced:ii({afterDragging:f.slice(d),destination:r,displacedBy:i,last:a,viewport:o.frame,forceShouldAnimate:u}),displacedBy:i,at:{type:"REORDER",destination:{droppableId:r.descriptor.id,index:l}}}}function ui(e,t){return Boolean(t.effected[e])}var ci=function(e,t){return t.margin[e.start]+t.borderBox[e.size]/2},si=function(e,t,n){return t[e.crossAxisStart]+n.margin[e.crossAxisStart]+n.borderBox[e.crossAxisSize]/2},fi=function(e){var t=e.axis,n=e.moveRelativeTo,r=e.isMoving;return Oo(t.line,n.marginBox[t.end]+ci(t,r),si(t,n.marginBox,r))},di=function(e){var t=e.axis,n=e.moveRelativeTo,r=e.isMoving;return Oo(t.line,n.marginBox[t.start]-function(e,t){return t.margin[e.end]+t.borderBox[e.size]/2}(t,r),si(t,n.marginBox,r))},pi=function(e,t){var n=e.frame;return n?Eo(t,n.scroll.diff.displacement):t},mi=function(e){var t=function(e){var t=e.impact,n=e.draggable,r=e.droppable,o=e.draggables,i=e.afterCritical,a=n.page.borderBox.center,l=t.at;return r&&l?"REORDER"===l.type?function(e){var t=e.impact,n=e.draggable,r=e.draggables,o=e.droppable,i=e.afterCritical,a=Wo(o.descriptor.id,r),l=n.page,u=o.axis;if(!a.length)return function(e){var t=e.axis,n=e.moveInto,r=e.isMoving;return Oo(t.line,n.contentBox[t.start]+ci(t,r),si(t,n.contentBox,r))}({axis:u,moveInto:o.page,isMoving:l});var c=t.displaced,s=t.displacedBy,f=c.all[0];if(f){var d=r[f];if(ui(f,i))return di({axis:u,moveRelativeTo:d.page,isMoving:l});var p=Kr(d.page,s.point);return di({axis:u,moveRelativeTo:p,isMoving:l})}var m=a[a.length-1];if(m.descriptor.id===n.descriptor.id)return l.borderBox.center;if(ui(m.descriptor.id,i)){var h=Kr(m.page,ko(i.displacedBy.point));return fi({axis:u,moveRelativeTo:h,isMoving:l})}return fi({axis:u,moveRelativeTo:m.page,isMoving:l})}({impact:t,draggable:n,draggables:o,droppable:r,afterCritical:i}):function(e){var t=e.afterCritical,n=e.impact,r=e.draggables,o=Ho(n);o||so(!1);var i=o.draggableId,a=r[i].page.borderBox.center,l=function(e){var t=e.displaced,n=e.afterCritical,r=e.combineWith,o=e.displacedBy,i=Boolean(t.visible[r]||t.invisible[r]);return ui(r,n)?i?wo:ko(o.point):i?o.point:wo}({displaced:n.displaced,afterCritical:t,combineWith:i,displacedBy:n.displacedBy});return Eo(a,l)}({impact:t,draggables:o,afterCritical:i}):a}(e),n=e.droppable;return n?pi(n,t):t},hi=function(e,t){var n=So(t,e.scroll.initial),r=ko(n);return{frame:Hr({top:t.y,bottom:t.y+e.frame.height,left:t.x,right:t.x+e.frame.width}),scroll:{initial:e.scroll.initial,max:e.scroll.max,current:t,diff:{value:n,displacement:r}}}};function vi(e,t){return e.map((function(e){return t[e]}))}var gi=function(e){var t=e.pageBorderBoxCenter,n=e.draggable,r=function(e,t){return Eo(e.scroll.diff.displacement,t)}(e.viewport,t),o=So(r,n.page.borderBox.center);return Eo(n.client.borderBox.center,o)},yi=function(e){var t=e.draggable,n=e.destination,r=e.newPageBorderBoxCenter,o=e.viewport,i=e.withDroppableDisplacement,a=e.onlyOnMainAxis,l=void 0!==a&&a,u=So(r,t.page.borderBox.center),c={target:Do(t.page.borderBox,u),destination:n,withDroppableDisplacement:i,viewport:o};return l?function(e){return ti(Gn({},e,{isVisibleThroughFrameFn:(t=e.destination.axis,function(e){var n=Ko(e.top,e.bottom),r=Ko(e.left,e.right);return function(e){return t===Zo?n(e.top)&&n(e.bottom):r(e.left)&&r(e.right)}})}));var t}(c):ri(c)},bi=function(e){var t=e.isMovingForward,n=e.draggable,r=e.destination,o=e.draggables,i=e.previousImpact,a=e.viewport,l=e.previousPageBorderBoxCenter,u=e.previousClientSelection,c=e.afterCritical;if(!r.isEnabled)return null;var s=Wo(r.descriptor.id,o),f=$o(n,r),d=function(e){var t=e.isMovingForward,n=e.draggable,r=e.destination,o=e.insideDestination,i=e.previousImpact;if(!r.isCombineEnabled)return null;if(!Go(i))return null;function a(e){var t={type:"COMBINE",combine:{draggableId:e,droppableId:r.descriptor.id}};return Gn({},i,{at:t})}var l=i.displaced.all,u=l.length?l[0]:null;if(t)return u?a(u):null;var c=Vo(n,o);if(!u)return c.length?a(c[c.length-1].descriptor.id):null;var s=Ao(c,(function(e){return e.descriptor.id===u}));-1===s&&so(!1);var f=s-1;return f<0?null:a(c[f].descriptor.id)}({isMovingForward:t,draggable:n,destination:r,insideDestination:s,previousImpact:i})||function(e){var t=e.isMovingForward,n=e.isInHomeList,r=e.draggable,o=e.draggables,i=e.destination,a=e.insideDestination,l=e.previousImpact,u=e.viewport,c=e.afterCritical,s=l.at;if(s||so(!1),"REORDER"===s.type){var f=function(e){var t=e.isMovingForward,n=e.isInHomeList,r=e.insideDestination,o=e.location;if(!r.length)return null;var i=o.index,a=t?i+1:i-1,l=r[0].descriptor.index,u=r[r.length-1].descriptor.index;return a(n?u:u+1)?null:a}({isMovingForward:t,isInHomeList:n,location:s.destination,insideDestination:a});return null==f?null:li({draggable:r,insideDestination:a,destination:i,viewport:u,last:l.displaced,displacedBy:l.displacedBy,index:f})}var d=function(e){var t=e.isMovingForward,n=e.draggables,r=e.combine,o=e.afterCritical;if(!e.destination.isCombineEnabled)return null;var i=r.draggableId,a=n[i].descriptor.index;return ui(i,o)?t?a:a-1:t?a+1:a}({isMovingForward:t,destination:i,displaced:l.displaced,draggables:o,combine:s.combine,afterCritical:c});return null==d?null:li({draggable:r,insideDestination:a,destination:i,viewport:u,last:l.displaced,displacedBy:l.displacedBy,index:d})}({isMovingForward:t,isInHomeList:f,draggable:n,draggables:o,destination:r,insideDestination:s,previousImpact:i,viewport:a,afterCritical:c});if(!d)return null;var p=mi({impact:d,draggable:n,droppable:r,draggables:o,afterCritical:c});if(yi({draggable:n,destination:r,newPageBorderBoxCenter:p,viewport:a.frame,withDroppableDisplacement:!1,onlyOnMainAxis:!0}))return{clientSelection:gi({pageBorderBoxCenter:p,draggable:n,viewport:a}),impact:d,scrollJumpRequest:null};var m=So(p,l),h=function(e){var t=e.impact,n=e.viewport,r=e.destination,o=e.draggables,i=e.maxScrollChange,a=hi(n,Eo(n.scroll.current,i)),l=r.frame?To(r,Eo(r.frame.scroll.current,i)):r,u=t.displaced,c=ii({afterDragging:vi(u.all,o),destination:r,displacedBy:t.displacedBy,viewport:a.frame,last:u,forceShouldAnimate:!1}),s=ii({afterDragging:vi(u.all,o),destination:l,displacedBy:t.displacedBy,viewport:n.frame,last:u,forceShouldAnimate:!1}),f={},d={},p=[u,c,s];return u.all.forEach((function(e){var t=function(e,t){for(var n=0;n1?s.sort((function(e,t){return wi(e)[l.start]-wi(t)[l.start]}))[0]:c.sort((function(e,t){var r=Po(n,_o(wi(e))),o=Po(n,_o(wi(t)));return r!==o?r-o:wi(e)[l.start]-wi(t)[l.start]}))[0]}({isMovingForward:t,pageBorderBoxCenter:n,source:o,droppables:a,viewport:l});if(!c)return null;var s=Wo(c.descriptor.id,i),f=function(e){var t=e.pageBorderBoxCenter,n=e.viewport,r=e.destination,o=e.afterCritical,i=e.insideDestination.filter((function(e){return ri({target:Si(e,o),destination:r,viewport:n.frame,withDroppableDisplacement:!0})})).sort((function(e,n){var i=Co(t,pi(r,Ei(e,o))),a=Co(t,pi(r,Ei(n,o)));return ir.left&&n.topr.top))return!1;if(Di(o)(t.center))return!0;var i=e.axis,a=o.center[i.crossAxisLine],l=t[i.crossAxisStart],u=t[i.crossAxisEnd],c=Ko(o[i.crossAxisStart],o[i.crossAxisEnd]),s=c(l),f=c(u);return!s&&!f||(s?la)}));return o.length?1===o.length?o[0].descriptor.id:function(e){var t=e.pageBorderBox,n=e.candidates,r=e.draggable.page.borderBox.center,o=n.map((function(e){var n=e.axis,o=Oo(e.axis.line,t.center[n.line],e.page.borderBox.center[n.crossAxisLine]);return{id:e.descriptor.id,distance:Co(r,o)}})).sort((function(e,t){return t.distance-e.distance}));return o[0]?o[0].id:null}({pageBorderBox:t,draggable:n,candidates:o}):null}({pageBorderBox:u,draggable:n,droppables:o});if(!c)return Yo;var s=o[c],f=Wo(s.descriptor.id,r),d=function(e,t){var n=e.frame;return n?_i(t,n.scroll.diff.value):t}(s,u);return function(e){var t=e.draggable,n=e.pageBorderBoxWithDroppableScroll,r=e.previousImpact,o=e.destination,i=e.insideDestination,a=e.afterCritical;if(!o.isCombineEnabled)return null;var l=o.axis,u=xi(o.axis,t.displaceBy),c=u.value,s=n[l.start],f=n[l.end],d=Mo(Vo(t,i),(function(e){var t=e.descriptor.id,n=e.page.borderBox,o=n[l.size]/4,i=ui(t,a),u=Ri({displaced:r.displaced,id:t});return i?u?f>n[l.start]+o&&fn[l.start]-c+o&&sn[l.start]+c+o&&fn[l.start]+o&&st.descriptor.index?n.descriptor.index-1:n.descriptor.index:null}({draggable:n,closest:Mo(Vo(n,o),(function(e){var t=e.descriptor.id,n=e.page.borderBox.center[u.line],r=ui(t,l),o=Ri({displaced:i,id:t});return r?o?d<=n:f=1500)return.55;var r=pa+n/1500*.22000000000000003;return Number(("CANCEL"===t?.6*r:r).toFixed(2))}({current:o.current.client.offset,destination:v,reason:i});n({type:"DROP_ANIMATE",payload:{newHomeClientOffset:v,dropDuration:y,completed:g}})}else n(na({completed:g}))}}else n(function(e){return{type:"DROP_PENDING",payload:e}}({reason:i}))}else e(r)}}},ha=function(){return{x:window.pageXOffset,y:window.pageYOffset}};var va=function(e){var t=function(e){var t=e.onWindowScroll,n=ro((function(){t(ha())})),r=function(e){return{eventName:"scroll",options:{passive:!0,capture:!1},fn:function(t){t.target!==window&&t.target!==window.document||e()}}}(n),o=io;function i(){return o!==io}return{start:function(){i()&&so(!1),o=ao(window,[r])},stop:function(){i()||so(!1),n.cancel(),o(),o=io},isActive:i}}({onWindowScroll:function(t){e.dispatch({type:"MOVE_BY_WINDOW_SCROLL",payload:{newScroll:t}})}});return function(e){return function(n){t.isActive()||"INITIAL_PUBLISH"!==n.type||t.start(),t.isActive()&&function(e){return"DROP_COMPLETE"===e.type||"DROP_ANIMATE"===e.type||"FLUSH"===e.type}(n)&&t.stop(),e(n)}}},ga=function(e,t){t()},ya=function(e,t){return{draggableId:e.draggable.id,type:e.droppable.type,source:{droppableId:e.droppable.id,index:e.draggable.index},mode:t}},ba=function(e,t,n,r){if(e){var o=function(e){var t=!1,n=!1,r=setTimeout((function(){n=!0})),o=function(o){t||n||(t=!0,e(o),clearTimeout(r))};return o.wasCalled=function(){return t},o}(n);e(t,{announce:o}),o.wasCalled()||n(r(t))}else n(r(t))},wa=function(e,t){var n=function(e,t){var n,r=(n=[],{add:function(e){var t=setTimeout((function(){return function(e){var t=Ao(n,(function(t){return t.timerId===e}));-1===t&&so(!1),n.splice(t,1)[0].callback()}(t)})),r={timerId:t,callback:e};n.push(r)},flush:function(){if(n.length){var e=[].concat(n);n.length=0,e.forEach((function(e){clearTimeout(e.timerId),e.callback()}))}}}),o=null,i=function(n){o||so(!1),o=null,ga(0,(function(){return ba(e().onDragEnd,n,t,bo)}))};return{beforeCapture:function(t,n){o&&so(!1),ga(0,(function(){var r=e().onBeforeCapture;r&&r({draggableId:t,mode:n})}))},beforeStart:function(t,n){o&&so(!1),ga(0,(function(){var r=e().onBeforeDragStart;r&&r(ya(t,n))}))},start:function(n,i){o&&so(!1);var a=ya(n,i);o={mode:i,lastCritical:n,lastLocation:a.source,lastCombine:null},r.add((function(){ga(0,(function(){return ba(e().onDragStart,a,t,go)}))}))},update:function(n,i){var a=Go(i),l=Ho(i);o||so(!1);var u=!function(e,t){if(e===t)return!0;var n=e.draggable.id===t.draggable.id&&e.draggable.droppableId===t.draggable.droppableId&&e.draggable.type===t.draggable.type&&e.draggable.index===t.draggable.index,r=e.droppable.id===t.droppable.id&&e.droppable.type===t.droppable.type;return n&&r}(n,o.lastCritical);u&&(o.lastCritical=n);var c,s,f=(s=a,!(null==(c=o.lastLocation)&&null==s||null!=c&&null!=s&&c.droppableId===s.droppableId&&c.index===s.index));f&&(o.lastLocation=a);var d=!function(e,t){return null==e&&null==t||null!=e&&null!=t&&e.draggableId===t.draggableId&&e.droppableId===t.droppableId}(o.lastCombine,l);if(d&&(o.lastCombine=l),u||f||d){var p=Gn({},ya(n,o.mode),{combine:l,destination:a});r.add((function(){ga(0,(function(){return ba(e().onDragUpdate,p,t,yo)}))}))}},flush:function(){o||so(!1),r.flush()},drop:i,abort:function(){if(o){var e=Gn({},ya(o.lastCritical,o.mode),{combine:null,destination:null,reason:"CANCEL"});i(e)}}}}(e,t);return function(e){return function(t){return function(r){if("BEFORE_INITIAL_CAPTURE"!==r.type){if("INITIAL_PUBLISH"===r.type){var o=r.payload.critical;return n.beforeStart(o,r.payload.movementMode),t(r),void n.start(o,r.payload.movementMode)}if("DROP_COMPLETE"===r.type){var i=r.payload.completed.result;return n.flush(),t(r),void n.drop(i)}if(t(r),"FLUSH"!==r.type){var a=e.getState();"DRAGGING"===a.phase&&n.update(a.critical,a.impact)}else n.abort()}else n.beforeCapture(r.payload.draggableId,r.payload.movementMode)}}}},Ea=function(e){return function(t){return function(n){if("DROP_ANIMATION_FINISHED"===n.type){var r=e.getState();"DROP_ANIMATING"!==r.phase&&so(!1),e.dispatch(na({completed:r.completed}))}else t(n)}}},Sa=function(e){var t=null,n=null;return function(r){return function(o){if("FLUSH"!==o.type&&"DROP_COMPLETE"!==o.type&&"DROP_ANIMATION_FINISHED"!==o.type||(n&&(cancelAnimationFrame(n),n=null),t&&(t(),t=null)),r(o),"DROP_ANIMATE"===o.type){var i={eventName:"scroll",options:{capture:!0,passive:!1,once:!0},fn:function(){"DROP_ANIMATING"===e.getState().phase&&e.dispatch({type:"DROP_ANIMATION_FINISHED",payload:null})}};n=requestAnimationFrame((function(){n=null,t=ao(window,[i])}))}}}},xa=function(e){return function(t){return function(n){if(t(n),"PUBLISH_WHILE_DRAGGING"===n.type){var r=e.getState();"DROP_PENDING"===r.phase&&(r.isWaiting||e.dispatch(ra({reason:r.reason})))}}}},ka=tr,Oa=function(e){var t,n=e.dimensionMarshal,r=e.focusMarshal,o=e.styleMarshal,i=e.getResponders,a=e.announce,l=e.autoScroller;return Xn(Gi,ka(function(){for(var e=arguments.length,t=new Array(e),n=0;nt.startScrollingFrom)return 0;if(e<=t.maxScrollValueAt)return 28;if(e===t.startScrollingFrom)return 1;var n=La({startOfRange:t.maxScrollValueAt,endOfRange:t.startScrollingFrom,current:e}),r=28*Ma(1-n);return Math.ceil(r)}(t,n);return 0===i?0:o?Math.max(function(e,t){var n=t,r=Fa,o=Date.now()-n;if(o>=Fa)return e;if(ot.height,i=n.width>t.width;return i||o?i&&o?null:{x:i?0:r.x,y:o?0:r.y}:r}({container:n,subject:r,proposedScroll:c});return s?xo(s,wo)?null:s:null},Ha=Io((function(e){return 0===e?0:e>0?1:-1})),Va=(_a=function(e,t){return e<0?e:e>t?e-t:0},function(e){var t=e.current,n=e.max,r=e.change,o=Eo(t,r),i={x:_a(o.x,n.x),y:_a(o.y,n.y)};return xo(i,wo)?null:i}),$a=function(e){var t=e.max,n=e.current,r=e.change,o={x:Math.max(n.x,t.x),y:Math.max(n.y,t.y)},i=Ha(r),a=Va({max:o,current:n,change:i});return!a||0!==i.x&&0===a.x||0!==i.y&&0===a.y},qa=function(e,t){return $a({current:e.scroll.current,max:e.scroll.max,change:t})},Qa=function(e,t){var n=e.frame;return!!n&&$a({current:n.scroll.current,max:n.scroll.max,change:t})},Ya=function(e){var t=e.state,n=e.dragStartTime,r=e.shouldUseTimeDampening,o=e.scrollWindow,i=e.scrollDroppable,a=t.current.page.borderBoxCenter,l=t.dimensions.draggables[t.critical.draggable.id].page.marginBox;if(t.isWindowScrollAllowed){var u=function(e){var t=e.viewport,n=e.subject,r=e.center,o=e.shouldUseTimeDampening,i=Ga({dragStartTime:e.dragStartTime,container:t.frame,subject:n,center:r,shouldUseTimeDampening:o});return i&&qa(t,i)?i:null}({dragStartTime:n,viewport:t.viewport,subject:l,center:a,shouldUseTimeDampening:r});if(u)return void o(u)}var c=function(e){var t=e.center,n=e.destination,r=e.droppables;if(n){var o=r[n];return o.frame?o:null}var i=function(e,t){var n=Mo(Aa(t),(function(t){return t.frame||so(!1),Di(t.frame.pageMarginBox)(e)}));return n}(t,r);return i}({center:a,destination:Ci(t.impact),droppables:t.dimensions.droppables});if(c){var s=function(e){var t=e.droppable,n=e.subject,r=e.center,o=e.dragStartTime,i=e.shouldUseTimeDampening,a=t.frame;if(!a)return null;var l=Ga({dragStartTime:o,container:a.pageMarginBox,subject:n,center:r,shouldUseTimeDampening:i});return l&&Qa(t,l)?l:null}({dragStartTime:n,droppable:c,subject:l,center:a,shouldUseTimeDampening:r});s&&i(c.descriptor.id,s)}},Ka=function(e){var t=e.move,n=e.scrollDroppable,r=e.scrollWindow;return function(e){var o=e.scrollJumpRequest;if(o){var i=Ci(e.impact);i||so(!1);var a=function(e,t){if(!Qa(e,t))return t;var r=function(e,t){var n=e.frame;return n&&Qa(e,t)?Va({current:n.scroll.current,max:n.scroll.max,change:t}):null}(e,t);if(!r)return n(e.descriptor.id,t),null;var o=So(t,r);return n(e.descriptor.id,o),So(t,o)}(e.dimensions.droppables[i],o);if(a){var l=e.viewport,u=function(e,t,n){if(!e)return n;if(!qa(t,n))return n;var o=function(e,t){if(!qa(e,t))return null;var n=e.scroll.max,r=e.scroll.current;return Va({current:r,max:n,change:t})}(t,n);if(!o)return r(n),null;var i=So(n,o);return r(i),So(n,i)}(e.isWindowScrollAllowed,l,a);u&&function(e,n){var r=Eo(e.current.client.selection,n);t({client:r})}(e,u)}}}},Ja=function(e){var t=e.scrollDroppable,n=e.scrollWindow,r=e.move,o=function(e){var t=e.scrollDroppable,n=ro(e.scrollWindow),r=ro(t),o=null,i=function(e){o||so(!1);var t=o,i=t.shouldUseTimeDampening,a=t.dragStartTime;Ya({state:e,scrollWindow:n,scrollDroppable:r,dragStartTime:a,shouldUseTimeDampening:i})};return{start:function(e){o&&so(!1);var t=Date.now(),n=!1,r=function(){n=!0};Ya({state:e,dragStartTime:0,shouldUseTimeDampening:!1,scrollWindow:r,scrollDroppable:r}),o={dragStartTime:t,shouldUseTimeDampening:n},n&&i(e)},stop:function(){o&&(n.cancel(),r.cancel(),o=null)},scroll:i}}({scrollWindow:n,scrollDroppable:t}),i=Ka({move:r,scrollWindow:n,scrollDroppable:t});return{scroll:function(e){"DRAGGING"===e.phase&&("FLUID"!==e.movementMode?e.scrollJumpRequest&&i(e):o.scroll(e))},start:o.start,stop:o.stop}},Xa="data-rbd",Za={base:Ra=Xa+"-drag-handle",draggableId:Ra+"-draggable-id",contextId:Ra+"-context-id"},el=function(){var e=Xa+"-draggable";return{base:e,contextId:e+"-context-id",id:e+"-id"}}(),tl=function(){var e=Xa+"-droppable";return{base:e,contextId:e+"-context-id",id:e+"-id"}}(),nl={contextId:Xa+"-scroll-container-context-id"},rl=function(e,t){return e.map((function(e){var n=e.styles[t];return n?e.selector+" { "+n+" }":""})).join(" ")},ol=function(e){var t,n,r,o=(t=e,function(e){return"["+e+'="'+t+'"]'}),i=(n="\n cursor: -webkit-grab;\n cursor: grab;\n ",{selector:o(Za.contextId),styles:{always:"\n -webkit-touch-callout: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n touch-action: manipulation;\n ",resting:n,dragging:"pointer-events: none;",dropAnimating:n}}),a=[(r="\n transition: "+ca.outOfTheWay+";\n ",{selector:o(el.contextId),styles:{dragging:r,dropAnimating:r,userCancel:r}}),i,{selector:o(tl.contextId),styles:{always:"overflow-anchor: none;"}},{selector:"body",styles:{dragging:"\n cursor: grabbing;\n cursor: -webkit-grabbing;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n overflow-anchor: none;\n "}}];return{always:rl(a,"always"),resting:rl(a,"resting"),dragging:rl(a,"dragging"),dropAnimating:rl(a,"dropAnimating"),userCancel:rl(a,"userCancel")}},il="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?e.useLayoutEffect:e.useEffect,al=function(){var e=document.querySelector("head");return e||so(!1),e},ll=function(e){var t=document.createElement("style");return e&&t.setAttribute("nonce",e),t.type="text/css",t},ul=function(e){return e&&e.ownerDocument?e.ownerDocument.defaultView:window};function cl(e){return e instanceof ul(e).HTMLElement}function sl(){var e={draggables:{},droppables:{}},t=[];function n(e){t.length&&t.forEach((function(t){return t(e)}))}function r(t){return e.draggables[t]||null}function o(t){return e.droppables[t]||null}return{draggable:{register:function(t){e.draggables[t.descriptor.id]=t,n({type:"ADDITION",value:t})},update:function(t,n){var r=e.draggables[n.descriptor.id];r&&r.uniqueId===t.uniqueId&&(delete e.draggables[n.descriptor.id],e.draggables[t.descriptor.id]=t)},unregister:function(t){var o=t.descriptor.id,i=r(o);i&&t.uniqueId===i.uniqueId&&(delete e.draggables[o],n({type:"REMOVAL",value:t}))},getById:function(e){var t=r(e);return t||so(!1),t},findById:r,exists:function(e){return Boolean(r(e))},getAllByType:function(t){return jo(e.draggables).filter((function(e){return e.descriptor.type===t}))}},droppable:{register:function(t){e.droppables[t.descriptor.id]=t},unregister:function(t){var n=o(t.descriptor.id);n&&t.uniqueId===n.uniqueId&&delete e.droppables[t.descriptor.id]},getById:function(e){var t=o(e);return t||so(!1),t},findById:o,exists:function(e){return Boolean(o(e))},getAllByType:function(t){return jo(e.droppables).filter((function(e){return e.descriptor.type===t}))}},subscribe:function(e){return t.push(e),function(){var n=t.indexOf(e);-1!==n&&t.splice(n,1)}},clean:function(){e.draggables={},e.droppables={},t.length=0}}}var fl=e.createContext(null),dl=function(){var e=document.body;return e||so(!1),e},pl={position:"absolute",width:"1px",height:"1px",margin:"-1px",border:"0",padding:"0",overflow:"hidden",clip:"rect(0 0 0 0)","clip-path":"inset(100%)"},ml=function(e){return"rbd-announcement-"+e},hl=0,vl={separator:"::"};function gl(e,t){return void 0===t&&(t=vl),Wr((function(){return""+e+t.separator+hl++}),[t.separator,e])}var yl=e.createContext(null);function bl(t){var n=(0,e.useRef)(t);return(0,e.useEffect)((function(){n.current=t})),n}var wl,El,Sl=((wl={})[13]=!0,wl[9]=!0,wl),xl=function(e){Sl[e.keyCode]&&e.preventDefault()},kl=function(){var e="visibilitychange";return"undefined"==typeof document?e:Mo([e,"ms"+e,"webkit"+e,"moz"+e,"o"+e],(function(e){return"on"+e in document}))||e}(),Ol={type:"IDLE"};function Cl(){}var Pl=((El={})[34]=!0,El[33]=!0,El[36]=!0,El[35]=!0,El);var Il={type:"IDLE"},Dl={input:!0,button:!0,textarea:!0,select:!0,option:!0,optgroup:!0,video:!0,audio:!0};function _l(e,t){if(null==t)return!1;if(Boolean(Dl[t.tagName.toLowerCase()]))return!0;var n=t.getAttribute("contenteditable");return"true"===n||""===n||t!==e&&_l(e,t.parentElement)}function Rl(e,t){var n=t.target;return!!cl(n)&&_l(e,n)}var Nl=function(e){return Hr(e.getBoundingClientRect()).center},Tl=function(){var e="matches";return"undefined"==typeof document?e:Mo([e,"msMatchesSelector","webkitMatchesSelector"],(function(e){return e in Element.prototype}))||e}();function jl(e,t){return null==e?null:e[Tl](t)?e:jl(e.parentElement,t)}function Al(e,t){return e.closest?e.closest(t):jl(e,t)}function Ml(e){e.preventDefault()}function Ll(e){var t=e.expected,n=e.phase,r=e.isLockActive;return e.shouldWarn,!!r()&&t===n}function Bl(e){var t=e.lockAPI,n=e.store,r=e.registry,o=e.draggableId;if(t.isClaimed())return!1;var i=r.draggable.findById(o);return!!i&&!!i.options.isEnabled&&!!Ta(n.getState(),o)}var Fl=[function(t){var n=(0,e.useRef)(Ol),r=(0,e.useRef)(io),o=Wr((function(){return{eventName:"mousedown",fn:function(e){if(!e.defaultPrevented&&0===e.button&&!(e.ctrlKey||e.metaKey||e.shiftKey||e.altKey)){var n=t.findClosestDraggableId(e);if(n){var o=t.tryGetLock(n,l,{sourceEvent:e});if(o){e.preventDefault();var i={x:e.clientX,y:e.clientY};r.current(),s(o,i)}}}}}}),[t]),i=Wr((function(){return{eventName:"webkitmouseforcewillbegin",fn:function(e){if(!e.defaultPrevented){var n=t.findClosestDraggableId(e);if(n){var r=t.findOptionsForDraggable(n);r&&(r.shouldRespectForcePress||t.canGetLock(n)&&e.preventDefault())}}}}}),[t]),a=Gr((function(){r.current=ao(window,[i,o],{passive:!1,capture:!0})}),[i,o]),l=Gr((function(){"IDLE"!==n.current.type&&(n.current=Ol,r.current(),a())}),[a]),u=Gr((function(){var e=n.current;l(),"DRAGGING"===e.type&&e.actions.cancel({shouldBlockNextClick:!0}),"PENDING"===e.type&&e.actions.abort()}),[l]),c=Gr((function(){var e=function(e){var t=e.cancel,n=e.completed,r=e.getPhase,o=e.setPhase;return[{eventName:"mousemove",fn:function(e){var t=e.button,n=e.clientX,i=e.clientY;if(0===t){var a={x:n,y:i},l=r();if("DRAGGING"===l.type)return e.preventDefault(),void l.actions.move(a);if("PENDING"!==l.type&&so(!1),u=l.point,c=a,Math.abs(c.x-u.x)>=5||Math.abs(c.y-u.y)>=5){var u,c;e.preventDefault();var s=l.actions.fluidLift(a);o({type:"DRAGGING",actions:s})}}}},{eventName:"mouseup",fn:function(e){var o=r();"DRAGGING"===o.type?(e.preventDefault(),o.actions.drop({shouldBlockNextClick:!0}),n()):t()}},{eventName:"mousedown",fn:function(e){"DRAGGING"===r().type&&e.preventDefault(),t()}},{eventName:"keydown",fn:function(e){if("PENDING"!==r().type)return 27===e.keyCode?(e.preventDefault(),void t()):void xl(e);t()}},{eventName:"resize",fn:t},{eventName:"scroll",options:{passive:!0,capture:!1},fn:function(){"PENDING"===r().type&&t()}},{eventName:"webkitmouseforcedown",fn:function(e){var n=r();"IDLE"===n.type&&so(!1),n.actions.shouldRespectForcePress()?t():e.preventDefault()}},{eventName:kl,fn:t}]}({cancel:u,completed:l,getPhase:function(){return n.current},setPhase:function(e){n.current=e}});r.current=ao(window,e,{capture:!0,passive:!1})}),[u,l]),s=Gr((function(e,t){"IDLE"!==n.current.type&&so(!1),n.current={type:"PENDING",point:t,actions:e},c()}),[c]);il((function(){return a(),function(){r.current()}}),[a])},function(t){var n=(0,e.useRef)(Cl),r=Wr((function(){return{eventName:"keydown",fn:function(e){if(!e.defaultPrevented&&32===e.keyCode){var r=t.findClosestDraggableId(e);if(r){var i=t.tryGetLock(r,u,{sourceEvent:e});if(i){e.preventDefault();var a=!0,l=i.snapLift();n.current(),n.current=ao(window,function(e,t){function n(){t(),e.cancel()}return[{eventName:"keydown",fn:function(r){return 27===r.keyCode?(r.preventDefault(),void n()):32===r.keyCode?(r.preventDefault(),t(),void e.drop()):40===r.keyCode?(r.preventDefault(),void e.moveDown()):38===r.keyCode?(r.preventDefault(),void e.moveUp()):39===r.keyCode?(r.preventDefault(),void e.moveRight()):37===r.keyCode?(r.preventDefault(),void e.moveLeft()):void(Pl[r.keyCode]?r.preventDefault():xl(r))}},{eventName:"mousedown",fn:n},{eventName:"mouseup",fn:n},{eventName:"click",fn:n},{eventName:"touchstart",fn:n},{eventName:"resize",fn:n},{eventName:"wheel",fn:n,options:{passive:!0}},{eventName:kl,fn:n}]}(l,u),{capture:!0,passive:!1})}}}function u(){a||so(!1),a=!1,n.current(),o()}}}}),[t]),o=Gr((function(){n.current=ao(window,[r],{passive:!1,capture:!0})}),[r]);il((function(){return o(),function(){n.current()}}),[o])},function(t){var n=(0,e.useRef)(Il),r=(0,e.useRef)(io),o=Gr((function(){return n.current}),[]),i=Gr((function(e){n.current=e}),[]),a=Wr((function(){return{eventName:"touchstart",fn:function(e){if(!e.defaultPrevented){var n=t.findClosestDraggableId(e);if(n){var o=t.tryGetLock(n,u,{sourceEvent:e});if(o){var i=e.touches[0],a={x:i.clientX,y:i.clientY};r.current(),d(o,a)}}}}}}),[t]),l=Gr((function(){r.current=ao(window,[a],{capture:!0,passive:!1})}),[a]),u=Gr((function(){var e=n.current;"IDLE"!==e.type&&("PENDING"===e.type&&clearTimeout(e.longPressTimerId),i(Il),r.current(),l())}),[l,i]),c=Gr((function(){var e=n.current;u(),"DRAGGING"===e.type&&e.actions.cancel({shouldBlockNextClick:!0}),"PENDING"===e.type&&e.actions.abort()}),[u]),s=Gr((function(){var e={capture:!0,passive:!1},t={cancel:c,completed:u,getPhase:o},n=ao(window,function(e){var t=e.cancel,n=e.completed,r=e.getPhase;return[{eventName:"touchmove",options:{capture:!1},fn:function(e){var n=r();if("DRAGGING"===n.type){n.hasMoved=!0;var o=e.touches[0],i={x:o.clientX,y:o.clientY};e.preventDefault(),n.actions.move(i)}else t()}},{eventName:"touchend",fn:function(e){var o=r();"DRAGGING"===o.type?(e.preventDefault(),o.actions.drop({shouldBlockNextClick:!0}),n()):t()}},{eventName:"touchcancel",fn:function(e){"DRAGGING"===r().type?(e.preventDefault(),t()):t()}},{eventName:"touchforcechange",fn:function(e){var n=r();"IDLE"===n.type&&so(!1);var o=e.touches[0];if(o&&o.force>=.15){var i=n.actions.shouldRespectForcePress();if("PENDING"!==n.type)return i?n.hasMoved?void e.preventDefault():void t():void e.preventDefault();i&&t()}}},{eventName:kl,fn:t}]}(t),e),i=ao(window,function(e){var t=e.cancel,n=e.getPhase;return[{eventName:"orientationchange",fn:t},{eventName:"resize",fn:t},{eventName:"contextmenu",fn:function(e){e.preventDefault()}},{eventName:"keydown",fn:function(e){"DRAGGING"===n().type?(27===e.keyCode&&e.preventDefault(),t()):t()}},{eventName:kl,fn:t}]}(t),e);r.current=function(){n(),i()}}),[c,o,u]),f=Gr((function(){var e=o();"PENDING"!==e.type&&so(!1);var t=e.actions.fluidLift(e.point);i({type:"DRAGGING",actions:t,hasMoved:!1})}),[o,i]),d=Gr((function(e,t){"IDLE"!==o().type&&so(!1);var n=setTimeout(f,120);i({type:"PENDING",point:t,actions:e,longPressTimerId:n}),s()}),[s,o,i,f]);il((function(){return l(),function(){r.current();var e=o();"PENDING"===e.type&&(clearTimeout(e.longPressTimerId),i(Il))}}),[o,l,i]),il((function(){return ao(window,[{eventName:"touchmove",fn:function(){},options:{capture:!1,passive:!1}}])}),[])}];function zl(t){var n=t.contextId,r=t.store,o=t.registry,i=t.customSensors,a=t.enableDefaultSensors,l=[].concat(a?Fl:[],i||[]),u=(0,e.useState)((function(){return function(){var e=null;function t(){e||so(!1),e=null}return{isClaimed:function(){return Boolean(e)},isActive:function(t){return t===e},claim:function(t){e&&so(!1);var n={abandon:t};return e=n,n},release:t,tryAbandon:function(){e&&(e.abandon(),t())}}}()}))[0],c=Gr((function(e,t){e.isDragging&&!t.isDragging&&u.tryAbandon()}),[u]);il((function(){var e=r.getState();return r.subscribe((function(){var t=r.getState();c(e,t),e=t}))}),[u,r,c]),il((function(){return u.tryAbandon}),[u.tryAbandon]);for(var s=Gr((function(e){return Bl({lockAPI:u,registry:o,store:r,draggableId:e})}),[u,o,r]),f=Gr((function(e,t,i){return function(e){var t=e.lockAPI,n=e.contextId,r=e.store,o=e.registry,i=e.draggableId,a=e.forceSensorStop,l=e.sourceEvent;if(!Bl({lockAPI:t,store:r,registry:o,draggableId:i}))return null;var u=o.draggable.getById(i),c=function(e,t){var n="["+el.contextId+'="'+e+'"]',r=Mo(Lo(document.querySelectorAll(n)),(function(e){return e.getAttribute(el.id)===t}));return r&&cl(r)?r:null}(n,u.descriptor.id);if(!c)return null;if(l&&!u.options.canDragInteractiveElements&&Rl(c,l))return null;var s=t.claim(a||io),f="PRE_DRAG";function d(){return u.options.shouldRespectForcePress}function p(){return t.isActive(s)}var m=function(e,t){Ll({expected:e,phase:f,isLockActive:p,shouldWarn:!0})&&r.dispatch(t())}.bind(null,"DRAGGING");function h(e){function n(){t.release(),f="COMPLETED"}function o(t,o){if(void 0===o&&(o={shouldBlockNextClick:!1}),e.cleanup(),o.shouldBlockNextClick){var i=ao(window,[{eventName:"click",fn:Ml,options:{once:!0,passive:!1,capture:!0}}]);setTimeout(i)}n(),r.dispatch(ra({reason:t}))}return"PRE_DRAG"!==f&&(n(),"PRE_DRAG"!==f&&so(!1)),r.dispatch(Hi(e.liftActionArgs)),f="DRAGGING",Gn({isActive:function(){return Ll({expected:"DRAGGING",phase:f,isLockActive:p,shouldWarn:!1})},shouldRespectForcePress:d,drop:function(e){return o("DROP",e)},cancel:function(e){return o("CANCEL",e)}},e.actions)}var v={isActive:function(){return Ll({expected:"PRE_DRAG",phase:f,isLockActive:p,shouldWarn:!1})},shouldRespectForcePress:d,fluidLift:function(e){var t=ro((function(e){m((function(){return Ki({client:e})}))}));return Gn({},h({liftActionArgs:{id:i,clientSelection:e,movementMode:"FLUID"},cleanup:function(){return t.cancel()},actions:{move:t}}),{move:t})},snapLift:function(){var e={moveUp:function(){return m(Ji)},moveRight:function(){return m(Zi)},moveDown:function(){return m(Xi)},moveLeft:function(){return m(ea)}};return h({liftActionArgs:{id:i,clientSelection:Nl(c),movementMode:"SNAP"},cleanup:io,actions:e})},abort:function(){Ll({expected:"PRE_DRAG",phase:f,isLockActive:p,shouldWarn:!0})&&t.release()}};return v}({lockAPI:u,registry:o,contextId:n,store:r,draggableId:e,forceSensorStop:t,sourceEvent:i&&i.sourceEvent?i.sourceEvent:null})}),[n,u,o,r]),d=Gr((function(e){return function(e,t){var n=function(e,t){var n,r=t.target;if(!((n=r)instanceof ul(n).Element))return null;var o=function(e){return"["+Za.contextId+'="'+e+'"]'}(e),i=Al(r,o);return i&&cl(i)?i:null}(e,t);return n?n.getAttribute(Za.draggableId):null}(n,e)}),[n]),p=Gr((function(e){var t=o.draggable.findById(e);return t?t.options:null}),[o.draggable]),m=Gr((function(){u.isClaimed()&&(u.tryAbandon(),"IDLE"!==r.getState().phase&&r.dispatch(ta()))}),[u,r]),h=Gr(u.isClaimed,[u]),v=Wr((function(){return{canGetLock:s,tryGetLock:f,findClosestDraggableId:d,findOptionsForDraggable:p,tryReleaseLock:m,isLockClaimed:h}}),[s,f,d,p,m,h]),g=0;ge.length)&&(t=e.length);for(var n=0,r=new Array(t);n5&&void 0!==arguments[5]&&arguments[5],a={opacity:t.isDragging?.7:1,backgroundColor:r||o?"#eae7f7":"initial"};return!i&&null==t.draggingOver&&(!t.isDragging||t.isDragging&&t.isDropAnimating)&&(e.transform="none"),t.isDropAnimating?(n&&(a.transitionDuration="0.001s"),Pu(Pu({},e),a)):Pu(Pu({},e),a)},Mu=function(e,t){var n=t.isDraggingOver;return Pu(Pu({},e),{backgroundColor:n?"#f2f2f2":"#f9f9f9",border:n?"1px dashed #ccc":"0"})},Lu=function(e){if(!e||!e.nbrCurrentSlot)return{};var t=100*e.nbrCurrentSlot/e.nbrSlotMax;return t>100&&(t=100),{width:"".concat(t,"%")}},Bu=function(e){if(!e||!e.nbrCurrentClock)return{};var t=100*e.nbrCurrentClock/e.nbrClockMax;return t>100&&(t=100),{width:"".concat(t,"%")}},Fu=function(e){return e.reduce((function(e,t){return e+(8===t.hp?2:1)}),0)};function zu(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:".",r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:",";try{t=Math.abs(t),t=isNaN(t)?2:t;var o=e<0?"-":"",i=parseInt(e=Math.abs(Number(e)||0).toFixed(t)).toString(),a=i.length>3?i.length%3:0;return o+(a?i.substr(0,a)+r:"")+i.substr(a).replace(/(\d{3})(?=\d)/g,"$1"+r)+(t?n+Math.abs(e-i).toFixed(t).slice(2):"")}catch(t){return e}}function Uu(e){return Uu="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Uu(e)}function Wu(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Gu(e){for(var t=1;t0)return this.setState(Gu(Gu({},this.state),{},{customconf:e,customconf_ready:null,error:"invalid format"}));t.items=t.items.map((function(e){return{pn:e.pn,options:e.options?e.options:null}}));var n=this,r=t.items.filter((function(e){return!1===n.list_pn.includes(e.pn)})).map((function(e){return e.pn}));if(r.length>0)return this.setState(Gu(Gu({},this.state),{},{customconf:e,customconf_ready:null,error:"".concat(r.join(", ")," unknown").concat(r.length>1?"s":""," pn number")}));this.setState(Gu(Gu({},this.state),{},{customconf:e,error:null,customconf_ready:t}))}},{key:"handleClickLoad",value:function(){this.checkValidation(this.state.customconf),this.props.onClickLoadCustomConf&&this.props.onClickLoadCustomConf(this.state.customconf_ready)}},{key:"render",value:function(){var t=this.props,n=t.aside,r=t.main,o=t.mobileSideMenuShouldOpen,i=t.isMobile,a=t.newCardJustAdded,l=t.onClickToggleMobileSideMenu,u=t.onClickCloseRFQFeedback,c=t.showRFQFeedback,s=t.RFQBodyType,f=t.RFQBodyOrder;return e.createElement("div",{className:"layout"},e.createElement("aside",{className:"aside "+(o?"menu-opened":"")},n),o?e.createElement("section",{className:"main",onClick:l},r):e.createElement("section",{className:"main"},r),i&&a?e.createElement("div",{className:"feedback-add-success"},"✓ added"):null,e.createElement("div",{className:"modal fade ".concat(c?"show":""),style:{display:c?"block":"none"},id:"exampleModal",tabIndex:"-1",role:"dialog","aria-labelledby":"exampleModalLabel","aria-hidden":"true"},e.createElement("div",{className:"modal-dialog",role:"document"},e.createElement("div",{className:"modal-content"},e.createElement("div",{className:"modal-body rfqFeedback"},e.createElement("div",{className:"d-flex w-100"},"email"===s?e.createElement("div",{className:"d-flex"},e.createElement("div",null,e.createElement("img",{width:"30px",src:"/images/shop/icon-done.svg",alt:"close"})),e.createElement("div",{style:{padding:"0 .5em"}},"We've received your request and will be in contact soon.")):null,"show"===s?e.createElement("p",null,f):null,"import"===s?e.createElement("div",{className:"w-100"},e.createElement("form",{className:"w-100"},e.createElement("div",{className:"mb-3"},e.createElement("p",{className:"small"},"Input the JSON description below. Should be something like:",e.createElement("br",null),JSON.stringify({items:[{pn:"1124"},{pn:"2118"},{pn:"2118"},{pn:"2128"}],type:"desktop"}))),e.createElement("div",{className:"mb-3 w-100"},e.createElement("textarea",{onChange:this.handleCustomConfig,value:this.state.customconf,className:"form-control w-100",rows:"5",placeholder:"Input JSON description here."})),this.state.error?e.createElement("div",{className:"mb-3"},e.createElement("p",{className:"text-danger"},this.state.error)):null),e.createElement("div",{className:"d-flex flex-column flex-sm-row justify-content-end"},e.createElement("a",{type:"button",onClick:u,className:"btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2"},"Close"),e.createElement("a",{type:"button",onClick:this.handleClickLoad,className:"btn btn-sm btn-primary m-0 ms-sm-2 ".concat(this.state.error?"disabled":"")},"Load configuration"))):null,e.createElement("div",null,e.createElement("button",{onClick:u},e.createElement("img",{src:"/images/shop/icon-close.svg",alt:"close"})))))))),e.createElement("div",{onClick:u,className:"modal-backdrop fade ".concat(c?"show":""),style:{display:c?"initial":"none"}}))}}])&&Hu(n.prototype,r),i&&Hu(n,i),Object.defineProperty(n,"prototype",{writable:!1}),c}(e.PureComponent);function Ku(e){return Ku="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Ku(e)}function Ju(){return Ju=Object.assign?Object.assign.bind():function(e){for(var t=1;t0&&e.createElement("ul",null,c.map((function(t,n){return e.createElement("li",{key:n},t)}))),p=s&&f&&e.createElement("div",{className:"ds"},e.createElement("span",{className:"doc-icon"}),e.createElement("a",{href:s,target:"_blank",rel:"noopener noreferrer"},f));return e.createElement("section",{className:"productItem"},e.createElement("div",{className:"content"},e.createElement("h3",{style:{marginBottom:i?"5px":"20px"}},o),i?e.createElement("p",null,i):null,e.createElement("div",{className:"price"},"".concat(l," ").concat(zu(a))),d,p),e.createElement("div",{className:"content"},e.createElement("button",{onClick:this.handleOnClickAddItem.bind(this,r,!0)},e.createElement("img",{src:"/images/shop/icon-add.svg",alt:"add"})),e.createElement(wu,{draggableId:n,index:r},(function(t,n){return e.createElement(e.Fragment,null,e.createElement("img",Ju({ref:t.innerRef},t.draggableProps,t.dragHandleProps,{style:Au(t.draggableProps.style,n,!0),src:u})),n.isDragging&&e.createElement("img",{className:"simclone",src:u}))}))))}}])&&Xu(n.prototype,r),i&&Xu(n,i),Object.defineProperty(n,"prototype",{writable:!1}),c}(e.PureComponent);function rc(e){return rc="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},rc(e)}function oc(){return oc=Object.assign?Object.assign.bind():function(e){for(var t=1;t0&&e.createElement("div",{className:"crate-info"},n.map((function(t,n){return e.createElement("p",{key:n,className:"rule",style:{color:t.color?t.color:"inherit"}},e.createElement("img",{src:"/images".concat(t.icon)})," ",e.createElement("i",null,e.createElement("strong",null,t.name,":")," ",t.message))})))))}}])&&Ec(n.prototype,r),i&&Ec(n,i),Object.defineProperty(n,"prototype",{writable:!1}),c}(e.PureComponent);function Oc(t){const n=e.useRef(null),r=e.useRef(t);return e.useLayoutEffect((()=>{r.current=t})),e.useEffect((()=>{const e=e=>{const t=n.current;t&&!t.contains(e.target)&&r.current(e)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[]),n}function Cc(e){var t=e.options,n=e.data,r=e.target,o=e.id,i=An(t);return"array"===i?Array.from(t.map((function(e,t){return Cc({options:e,data:n,target:r,id:o+t})}))):"object"===i?"string"!==An(t.type)||"object"!==An(t.args)&&"array"!==An(t.items)?Cc({options:a().apply(t,n),data:n,target:r,id:o}):t.type in jn?jn[t.type](r,o+t.type,n,t.args):"Group"===t.type?React.createElement("div",{className:"border rounded",key:o+"group"},Cc({options:a().apply(t.items,n),data:n,target:r,id:o})):jn.Default(t.type,o+"missing"):void 0}function Pc(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function jc(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Ac(e){for(var t=1;t0&&(t=c.warnings[h[0]])}if(c&&c.options&&(n=c.options,c.options_data||(c.options_data={}),(r=c.options_data).ext_data=p),c)switch(u.type){case"kasli":o=[e.createElement("p",{key:u.type+u.id+"EEM"},"".concat(c.nbrCurrentSlot,"/").concat(u.nbrSlotMax," EEM connectors used")),e.createElement("p",{key:u.type+u.id+"CLK"},"".concat(c.nbrCurrentClock,"/").concat(u.nbrClockMax," Clock connectors used"))];break;case"vhdcicarrier":o=e.createElement("p",null,"".concat(c.nbrCurrentSlot,"/").concat(u.nbrSlotMax," EEM connectors used"));break;case"zotino":case"hd68":o=e.createElement("p",null,"".concat(c.nbrCurrentSlot,"/").concat(u.nbrSlotMax," connectors used"));break;case"clocker":o=e.createElement("p",null,"".concat(c.nbrCurrentClock,"/").concat(u.nbrClockMax," Clock connectors used"))}return e.createElement(wu,{draggableId:u.id,index:s},(function(a,p){return e.createElement("div",Nc({ref:a.innerRef},a.draggableProps,a.dragHandleProps,{style:Ac({},Au(a.draggableProps.style,p,!0,!!l,!!u.selected,!0)),onMouseEnter:i.handleOnMouseEnterRemoveItem.bind(i,s),onMouseLeave:i.handleOnMouseLeaveRemoveItem.bind(i,s)}),e.createElement("div",{className:"progress-container warning d-flex justify-content-evenly"},t&&e.createElement(tn,{placement:"bottom",trigger:["click","hover","focus"],overlay:function(n){n.arrowProps,n.hasDoneInitialMeasure,n.show;var r=Tc(n,_c);return e.createElement("div",Nc({className:"k-popup-warning"},r),e.createElement("p",{className:"rule warning"},e.createElement("i",null,t.message)))},rootClose:!0},e.createElement("img",{className:"alert-warning",src:"/images".concat(t.icon)})),n&&e.createElement(Ic,{options:n,data:r,options_class:u.options_class,key:"popover"+s,id:"popover"+s,big:"big"===u.size,first:f,last:d,target:{construct:function(e,t){r[e]=t},update:function(e,t){e in r&&(r[e]=t),m()}}})),e.createElement("h6",null,u.name_number),e.createElement("div",{onMouseEnter:i.handleOnMouseEnterRemoveItem.bind(i,s),onClick:i.handleOnClickItem.bind(i,s)},e.createElement("img",{className:"item-cart",src:"/images".concat(u.image)})),e.createElement("div",{style:{display:u.showOverlayRemove?"flex":"none"},className:"overlayRemove",onClick:i.handleOnClickRemoveItem.bind(i,s)},e.createElement("img",{src:"/images/shop/icon-remove.svg",alt:"rm"}),e.createElement("p",null,"Remove")),o&&e.createElement(tn,{placement:"top",trigger:["click","hover","focus"],overlay:function(t){t.arrowProps,t.hasDoneInitialMeasure,t.show;var n=Tc(t,Rc);return e.createElement("div",Nc({className:"k-popup-connectors"},n),o)},rootClose:!0},e.createElement("div",{className:"progress-container"},u.nbrSlotMax>0&&e.createElement("div",{className:"nbr-connectors"},e.createElement("div",{style:Ac({},Lu(c))})),u.nbrClockMax>0&&e.createElement("div",{className:"nbr-clocks"},e.createElement("div",{style:Ac({},Bu(c))})))))}))}}],i=[{key:"propTypes",get:function(){return{isMobile:o().bool,isTouch:o().bool,hovered:o().bool,first:o().bool,last:o().bool,index:o().number.isRequired,model:o().object.isRequired,data:o().object,ext_data:o().object,onToggleOverlayRemove:o().func,onClickRemoveItem:o().func,onClickItem:o().func,onCardUpdate:o().func}}},{key:"defaultProps",get:function(){return{hovered:!1}}}],r&&Mc(n.prototype,r),i&&Mc(n,i),Object.defineProperty(n,"prototype",{writable:!1}),c}(e.PureComponent);function Wc(e){return Wc="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Wc(e)}function Gc(e,t){for(var n=0;n0;a--)i.push(e.createElement("div",{key:a,style:{display:n?"none":"block",border:"1px dashed #ccc",width:"45px",marginBottom:"5px"}}));return e.createElement(e.Fragment,null,i)}}])&&Gc(n.prototype,r),i&&Gc(n,i),Object.defineProperty(n,"prototype",{writable:!1}),c}(e.PureComponent);function qc(e){return qc="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},qc(e)}function Qc(){return Qc=Object.assign?Object.assign.bind():function(e){for(var t=1;t0,has_dds:e.filter((function(e,t){return!("DDS"!==e.name||"4410"!==e.name_number||e.options_data&&e.options_data.mono_eem)})).length>0,has_sampler:e.filter((function(e,t){return!("Sampler"!==e.name||e.options_data&&e.options_data.mono_eem)})).length>0}}(a.itemsData,d);return a.itemsData&&d in a.itemsData&&(p=a.itemsData[d]),e.createElement(Uc,{isMobile:n,isTouch:r,hovered:t.id===i,key:t.id,id:t.id,index:d,first:0===d,last:d===a.items.length-1&&f>=o,data:p,ext_data:m,onToggleOverlayRemove:l,onClickRemoveItem:u,onCardUpdate:s,onClickItem:c,model:t})}));return e.createElement(ku,{droppableId:a.id,direction:"horizontal"},(function(t,n){return e.createElement("div",Qc({ref:t.innerRef},t.droppableProps,{style:Mu(t.droppableProps.style,n),className:"items-cart-list"}),d,t.placeholder&&e.createElement("div",{style:{display:"none"}},t.placeholder),e.createElement($c,{nbrSlots:o,items:a.items,isDraggingOver:n.isDraggingOver}))}))}}],i=[{key:"propTypes",get:function(){return{isMobile:o().bool,isTouch:o().bool,nbrSlots:o().number,itemHovered:o().string,data:o().object.isRequired,onToggleOverlayRemove:o().func,onClickRemoveItem:o().func,onCardUpdate:o().func,onClickItem:o().func}}}],r&&Yc(n.prototype,r),i&&Yc(n,i),Object.defineProperty(n,"prototype",{writable:!1}),c}(e.PureComponent);function Zc(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,l=[],u=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw o}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return es(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?es(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function es(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);nwindow.innerWidth?s({x:r-d.w-20,y:o-d.h/2}):s({x:r-d.w/2,y:o-d.h-20})}else document.removeEventListener("scroll",y,!0)},y=function(e){e.target!==document.getElementById(n)&&h()};return(0,e.useEffect)((function(){if(a){var e=document.getElementById(n),t=e.offsetWidth,r=e.offsetHeight;p({w:t,h:r}),g()}}),[a]),(0,e.useEffect)((function(){a&&g()}),[a,d]),e.createElement("div",{ref:v},e.createElement("img",{className:"alert-info",src:a?"/images/shop/icon-close.svg":"/images/shop/icon-customize.svg",id:n+"img",onClick:function(e){l(!a),a||document.addEventListener("scroll",y,!0)}}),e.createElement("div",{style:{display:a?"flex":"none",top:c.y,left:c.x},className:"overlayVariant card border rounded",id:n},e.createElement("div",{className:"card-body"},Array.from(Object.entries(m).filter((function(e,t){var n=Zc(e,2),r=n[0];return n[1],"ext_data"!==r})).map((function(t,r){var o=Zc(t,2),i=o[0],a=o[1];return e.createElement("p",{className:"card-text",key:n+i},e.createElement("i",null,i),": ",function(e){var t=An(e);if("string"===t)return e;if("object"===t){if(!1===e.checked)return"off";if(!0===e.checked&&e.text)return e.text}return JSON.stringify(e)}(a))}))))))}function ns(e){return ns="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},ns(e)}function rs(e,t){for(var n=0;n0&&(a=i.warnings[s[0]])}return u=l[o]&&l[o].options,c=l[o]&&l[o].options_data,e.createElement("tr",{key:n.id,className:"hoverable ".concat(n.selected?"selected":""),onClick:t.handleOnClickSelectItem.bind(t,o),onMouseEnter:t.handleOnMouseEnterItem.bind(t,n.id),onMouseLeave:t.handleOnMouseLeaveItem},e.createElement("td",{className:"item-card-name"},e.createElement("div",null,"".concat(n.name_number," ").concat(n.name," ").concat(n.name_codename))),e.createElement("td",{className:"price"},e.createElement("div",{className:"d-inline-flex align-content-center"},"".concat(r," ").concat(zu(n.price)),e.createElement("button",{onClick:t.handleOnDeleteItem.bind(t,o)},e.createElement("img",{src:"/images/shop/icon-remove.svg"})),e.createElement("div",{style:{width:"45px",height:"20px"},className:"d-inline-flex align-content-center align-self-center justify-content-evenly"},a?e.createElement("img",{className:"alert-warning align-self-start",src:"/images/".concat(a.icon)}):e.createElement("span",{style:{display:"inline-block",width:"20px"}}," "),u&&c?e.createElement(ts,{id:n.id+"options",options:u,data:c}):e.createElement("span",{style:{display:"inline-block",width:"20px"}}," ")))))}))),e.createElement("tfoot",null,e.createElement("tr",null,e.createElement("td",{className:"item-card-name"},"Price estimate"),e.createElement("td",{className:"price"},e.createElement("div",null,a.length?"".concat(r," ").concat(zu(a.reduce((function(e,t){return e+t.price}),0)+u.price)):"".concat(r," ").concat(zu(u.price)),e.createElement("button",{style:{opacity:"0",cursor:"initial"}},e.createElement("img",{src:"/images/shop/icon-remove.svg",alt:"icon remove"}))),e.createElement("span",{style:{display:"inline-block",width:"30px"}}," "))))))}}],i=[{key:"propTypes",get:function(){return{currency:o().string,modes:o().array,currentMode:o().string,summary:o().array,itemsData:o().array,onDeleteItem:o().func,onDeleteAllItems:o().func,onMouseEnterItem:o().func,onMouseLeaveItem:o().func,onClickSelectItem:o().func}}}],r&&rs(n.prototype,r),i&&rs(n,i),Object.defineProperty(n,"prototype",{writable:!1}),c}(e.PureComponent);function us(e){return us="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},us(e)}function cs(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ss(e){for(var t=1;t=0&&o.push(Ru[n.index]),r)switch(n.droppableId){case"backlog":n.droppableId!==r.droppableId&&this.setState(ws(ws({},this.state),{},{newCardJustAdded:!!t,columns:ws(ws({},this.state.columns),{},Es({},r.droppableId,ws(ws({},this.state.columns[r.droppableId]),{},{items:Nu(this.state.items,this.state.columns[n.droppableId],this.state.columns[r.droppableId],o,r)})))}));break;case r.droppableId:this.setState(ws(ws({},this.state),{},{newCardJustAdded:!1,columns:ws(ws({},this.state.columns),{},Es({},r.droppableId,ws(ws({},this.state.columns[r.droppableId]),{},{items:Tu(this.state.columns[r.droppableId].items,n.index,r.index),itemsData:Tu(this.state.columns[r.droppableId].itemsData,n.index,r.index)})))}))}else"cart"===n.droppableId&&this.setState(ws(ws({},this.state),{},{newCardJustAdded:!1,columns:ws(ws({},this.state.columns),{},Es({},n.droppableId,ws(ws({},this.state.columns[n.droppableId]),{},{items:ju(this.state.columns[n.droppableId].items,n.index),itemsData:ju(this.state.columns[n.droppableId].itemsData,n.index)})))}))}},{key:"handleClickToggleMobileSideMenu",value:function(){this.setState(ws(ws({},this.state),{},{mobileSideMenuShouldOpen:!this.state.mobileSideMenuShouldOpen}))}},{key:"handleClickCloseRFQFeedback",value:function(){this.setState({shouldShowRFQFeedback:!1})}},{key:"checkAlerts",value:function(e){var t=this;console.log("--- START CHECKING CRATE WARNING ---");var n=this.state,r=n.currentMode,o=n.crateModeSlots,i=n.crateRules,a=Array.from(e),l=[],u={};a.forEach((function(e,n){n in l||(l[n]=e),n in t.state.columns.cart.itemsData&&t.state.columns.cart.itemsData[n].options_data&&(a[n].options_data=t.state.columns.cart.itemsData[n].options_data),l[n].warnings={}}));var c=Fu(e);c>o[r]?u[i.maxSlot.type]=ws({},i.maxSlot):21===o[r]&&c<=10&&(u[i.compactSlot.type]=ws({},i.compactSlot));for(var s=a.reduce((function(e,t,n){return"kasli"!==t.type&&"vhdcicarrier"!==t.type||e.push(n),e}),[]),f=function(){var e,t,n,r=s[d];if(e=d!==s.length-1?a.slice(r+1,s[d+1]):a.slice(r+1),0==d){var o=a.slice(0,r).findIndex((function(e){return e.rules&&e.rules.resources}));-1!=o&&(o in l?("warnings"in l[o]||(l[o].warnings={}),l[o].warnings.resources=ws({},a[o].rules.resources)):(l[o]=ws({},a[o]),l[o].warnings={},l[o].warnings.resources=ws({},a[o].rules.resources)))}if(t=e.filter((function(e){return"idc-bnc"!==e.type})).reduce((function(e,t){return e+((n=t).options_data&&!1!==n.options_data.ext_pwr&&!1!==n.options_data.mono_eem?!0===n.options_data.ext_pwr?0:!0===n.options_data.mono_eem||"1 EEM"===n.options_data.n_eem?1:"3 EEM"===n.options_data.n_eem?3:n.slotOccupied:n.slotOccupied);var n}),0),n=e.reduce((function(e,t){return"clocker"===t.type?e+(t.options_data&&!0===t.options_data.ext_clk?0:t.clockOccupied):e}),0),r in l?(l[r].nbrCurrentSlot=t,l[r].nbrCurrentClock=n,"warnings"in l[r]||(l[r].warnings={})):(l[r]=ws({},a[r]),l[r].nbrCurrentSlot=t,l[r].nbrCurrentClock=n,l[r].warnings={}),t>a[r].nbrSlotMax&&(a[r].rules.maxSlot.message&&(u[a[r].rules.maxSlot.type]=ws({},a[r].rules.maxSlot)),l[r].warnings.maxSlotWarning=ws({},a[r].rules.maxSlotWarning)),n>a[r].nbrClockMax&&(u[a[r].rules.maxClock.type]=ws({},a[r].rules.maxClock),l[r].warnings.maxClockWarning=ws({},a[r].rules.maxClockWarning)),a.length>r+1){var i=a[r+1];"kasli"!==i.type&&"vhdcicarrier"!==i.type||(u[i.rules.follow.type]=ws({},i.rules.follow))}},d=0;d<=s.length-1;d++)f();if(0===s.length){var p=a.slice(0).findIndex((function(e){return e.rules&&e.rules.resources}));-1!=p&&(p in l?("warnings"in l[p]||(l[p].warnings={}),l[p].warnings.resources=ws({},a[p].rules.resources)):(l[p]=ws({},a[p]),l[p].warnings={},l[p].warnings.resources=ws({},a[p].rules.resources)))}for(var m=a.reduce((function(e,t,n){return"kasli"!==t.type&&"clocker"!==t.type||e.push(n),e}),[]),h=0;h<=m.length-1;h++){var v,g=m[h];v=(h!==m.length-1?a.slice(g+1,m[h+1]):a.slice(g+1)).reduce((function(e,t){return e+(t.options_data&&t.options_data.ext_clk&&t.options_data.ext_clk.checked?0:t.clockOccupied)}),0),g in l?l[g].nbrCurrentClock&&"clocker"!==l[g].type?l[g].nbrCurrentClock+=v:l[g].nbrCurrentClock=v:(l[g]=ws({},a[g]),l[g].nbrCurrentClock=v,l[g].warnings={}),v>a[g].nbrClockMax&&(u[a[g].rules.maxClock.type]=ws({},a[g].rules.maxClock),l[g].warnings.maxClockWarning=ws({},a[g].rules.maxClockWarning))}a.find((function(e){return"urukul"===e.type}))&&this.state.items.urukul.rules.info&&(u[this.state.items.urukul.rules.info.type]=ws({},this.state.items.urukul.rules.info));for(var y=a.reduce((function(e,t,n){return"idc-bnc"===t.type&&e.push(n),e}),[]),b=y.length-1;b>=0;b--){var w=y[b],E=!1;if(0==w)E=!0;else if(w>=1){var S=y[b]-1;"zotino"!==a[S].type&&"hd68"!==a[S].type&&"idc-bnc"!==a[S].type&&(E=!0)}E&&(l[w]=ws({},a[w]),l[w].warnings={},l[w].warnings.wrong=ws({},a[w].rules.wrong))}for(var x=a.reduce((function(e,t,n){return"zotino"!==t.type&&"hd68"!==t.type||e.push(n),e}),[]),k=function(){var e,t,n=x[O];e=O!==x.length-1?a.slice(n+1,x[O+1]):a.slice(n+1);var r=!1;if(t=e.reduce((function(e,t,n,o){return 0===n&&"idc-bnc"===t.type?e+1:"idc-bnc"===o[0].type&&n>0&&"idc-bnc"===o[n-1].type?("idc-bnc"!==t.type&&(r=!0),e+("idc-bnc"!==t.type||r?0:1)):e}),0),n in l?(l[n].nbrCurrentSlot=t,"warnings"in l[n]||(l[n].warnings={})):(l[n]=ws({},a[n]),l[n].nbrCurrentSlot=t,l[n].warnings={}),t>0&&a[n].rules.maxSlot.message&&(u[a[n].rules.maxSlot.type]=ws({},a[n].rules.maxSlot)),t>a[n].nbrSlotMax&&(l[n].warnings.maxSlotWarning=ws({},a[n].rules.maxSlotWarning)),"hd68"===a[n].type){var o=!1;n groupId.itemIds).flat());
-
-const productStyle = (style, snapshot, removeAnim, hovered, selected, cart=false) => {
- const custom = {
- opacity: snapshot.isDragging ? .7 : 1,
- backgroundColor: (hovered || selected) ? '#eae7f7' : 'initial',
- };
-
- if (!cart && snapshot.draggingOver == null && // hack for backlog
- ((!snapshot.isDragging) // prevent next elements from animation
- || (snapshot.isDragging && snapshot.isDropAnimating))) { // prevent dragged element from weird animation
- style.transform = "none";
- }
-
- if (!snapshot.isDropAnimating) {
- return { ...style, ...custom};
- }
-
- if (removeAnim) {
- // cannot be 0, but make it super tiny
- custom.transitionDuration = '0.001s';
- }
-
- return {
- ...style,
- ...custom,
- };
-}
-
-const cartStyle = (style, snapshot) => {
- const isDraggingOver = snapshot.isDraggingOver;
- return {
- ...style,
- ...{
- backgroundColor: isDraggingOver ? '#f2f2f2' : '#f9f9f9',
- border: isDraggingOver ? '1px dashed #ccc' : '0',
- },
- };
-}
-
-const nbrConnectorsStyle = (data) => {
- if (!data || !data.nbrCurrentSlot) {
- return {};
- }
-
- let p = data.nbrCurrentSlot * 100 / data.nbrSlotMax;
- if (p > 100) {
- p = 100;
- }
- return {
- width: `${p}%`,
- }
-};
-
-const nbrClocksStyle = (data) => {
- if (!data || !data.nbrCurrentClock) {
- return {};
- }
-
- let p = data.nbrCurrentClock * 100 / data.nbrClockMax;
- if (p > 100) {
- p = 100;
- }
- return {
- width: `${p}%`,
- }
-};
-
-const copy = (
- model,
- source,
- destination,
- draggableSource,
- droppableDestination
-) => {
- const destClone = Array.from(destination.items);
-
- destClone.splice(droppableDestination.index, 0, ...draggableSource.map((dragged_item, _) => {
- return {
- ...model[dragged_item],
- id: uuidv4(),
- }
- }));
-
- return destClone;
-};
-
-const reorder = (list, startIndex, endIndex) => {
- const result = Array.from(list);
- const [removed] = result.splice(startIndex, 1);
- result.splice(endIndex, 0, removed);
-
- return result;
-};
-
-const remove = (list, startIndex) => {
- const result = Array.from(list);
- result.splice(startIndex, 1);
- return result;
-};
-
-const nbrOccupiedSlotsInCrate = (items) => {
- return items.reduce((prev, next) => {
- return prev + (next.hp === 8 ? 2 : 1);
- }, 0);
-};
-
-function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",") {
- // https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-currency-string-in-javascript
- // changes: return amount if error in order to avoid empty value
- try {
- decimalCount = Math.abs(decimalCount);
- decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
-
- const negativeSign = amount < 0 ? "-" : "";
-
- let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
- let j = (i.length > 3) ? i.length % 3 : 0;
-
- return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
- } catch (e) {
- return amount;
- }
-};
-
-
-/**
- * Component that provides a base layout (aside/main) for the page.
- */
-class Layout extends React.PureComponent {
-
- static get propTypes() {
- return {
- aside: PropTypes.any,
- main: PropTypes.any,
- mobileSideMenuShouldOpen: PropTypes.bool,
- isMobile: PropTypes.bool,
- newCardJustAdded: PropTypes.bool,
- onClickToggleMobileSideMenu: PropTypes.func,
- onClickCloseRFQFeedback: PropTypes.func,
- RFQBodyType: PropTypes.string,
- RFQBodyOrder: PropTypes.string,
- onClickLoadCustomConf: PropTypes.func,
- items: PropTypes.object,
- };
- }
-
- static get defaultProps() {
- return {
- mobileSideMenuShouldOpen: false,
- };
- }
-
- constructor(props) {
- super(props);
-
- this.state = {
- customconf: '',
- error: null,
- };
-
- this.handleCustomConfig = this.handleCustomConfig.bind(this);
- this.handleClickLoad = this.handleClickLoad.bind(this);
- this.checkValidation = this.checkValidation.bind(this);
-
- // retrieve list of available pn
- const items_keys = Object.keys(props.items);
- this.list_pn = items_keys.map(function (key) {
- return props.items[key].name_number;
- });
- }
-
- handleCustomConfig(e) {
- const value = e.target.value;
-
- this.checkValidation(value);
- }
-
- checkValidation(conf) {
- let conf_obj;
-
- try {
- conf_obj = JSON.parse(conf);
- } catch (e) {
- return this.setState({
- ...this.state,
- customconf: conf,
- customconf_ready: null,
- error: 'invalid format',
- });
- }
-
- if (!conf_obj) {
- return this.setState({
- ...this.state,
- customconf: conf,
- customconf_ready: null,
- error: 'invalid format',
- });
- }
-
- if ((!conf_obj.items || !conf_obj.type) &&
- (Object.prototype.toString.call(conf_obj.items) !== '[object Array]' ||
- Object.prototype.toString.call(conf_obj.type) !== '[object String]')) {
- return this.setState({
- ...this.state,
- customconf: conf,
- customconf_ready: null,
- error: 'invalid format',
- });
- }
-
- if (conf_obj.type !== "desktop" && conf_obj.type !== "rack") {
- return this.setState({
- ...this.state,
- customconf: conf,
- customconf_ready: null,
- error: 'invalid format',
- });
- }
-
- conf_obj.items.map(function (item) {
- try {
- return JSON.parse(item);
- } catch (e) {
- return null;
- }
- });
-
- conf_obj.items = conf_obj.items.filter(function (item) {
- return item;
- });
-
- if (conf_obj.items.filter(function (item) {
- return Object.prototype.toString.call(item) !== '[object Object]' || !item.pn || Object.prototype.toString.call(item.pn) !== '[object String]';
- }).length > 0) {
- return this.setState({
- ...this.state,
- customconf: conf,
- customconf_ready: null,
- error: 'invalid format',
- });
- }
-
- conf_obj.items = conf_obj.items.map(function (item) {
- return {
- pn: item.pn,
- options: item.options ? item.options : null,
- };
- });
-
- const self = this;
- const unknow_pn = conf_obj.items.filter(function (item_pn) {
- return self.list_pn.includes(item_pn.pn) === false;
- }).map(function (item_pn) {
- return item_pn.pn;
- });
-
- if (unknow_pn.length > 0) {
- return this.setState({
- ...this.state,
- customconf: conf,
- customconf_ready: null,
- error: `${unknow_pn.join(', ')} unknown${unknow_pn.length > 1 ? 's':''} pn number`,
- });
- }
-
- this.setState({
- ...this.state,
- customconf: conf,
- error: null,
- customconf_ready: conf_obj,
- });
- }
-
- handleClickLoad() {
- this.checkValidation(this.state.customconf);
-
- if (this.props.onClickLoadCustomConf) {
- this.props.onClickLoadCustomConf(this.state.customconf_ready);
- }
- }
-
- render() {
- const {
- aside,
- main,
- mobileSideMenuShouldOpen,
- isMobile,
- newCardJustAdded,
- onClickToggleMobileSideMenu,
- onClickCloseRFQFeedback,
- showRFQFeedback,
- RFQBodyType,
- RFQBodyOrder,
- } = this.props;
-
- return (
-
-
-
-
- {mobileSideMenuShouldOpen ? (
-
- ) : (
-
- )}
-
- {isMobile && newCardJustAdded ? (
-
- ✓ added
-
- ) : null}
-
-
-
-
-
-
-
-
-
- {RFQBodyType === 'email' ? (
-
-
-
-
-
-
-
- We've received your request and will be in contact soon.
-
-
-
- ) : null }
-
- {RFQBodyType === 'show' ? (
-
- {RFQBodyOrder}
-
- ) : null}
-
- {RFQBodyType === 'import' ? (
-
- ) : null}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-
-/**
- * Component that renders a product.
- * Used in the aside (e.g backlog of product)
- */
-class ProductItem extends React.PureComponent {
-
- static get propTypes() {
- return {
- id: PropTypes.string.isRequired,
- index: PropTypes.number.isRequired,
- name: PropTypes.string.isRequired,
- name_codename: PropTypes.string,
- price: PropTypes.number.isRequired,
- currency: PropTypes.string.isRequired,
- image: PropTypes.string.isRequired,
- specs: PropTypes.array,
- datasheet_file: PropTypes.string,
- datasheet_name: PropTypes.string,
- onClickAddItem: PropTypes.func,
- };
- }
-
- constructor(props) {
- super(props);
- this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
- }
-
- handleOnClickAddItem(id, tap, e) {
- if (this.props.onClickAddItem) {
- this.props.onClickAddItem(id, tap);
- }
- e.preventDefault();
- }
-
- render() {
- const {
- id,
- index,
- name,
- name_codename,
- price,
- currency,
- image,
- specs,
- datasheet_file,
- datasheet_name,
- } = this.props;
-
- const render_specs = (specs && specs.length > 0 && (
-
- {specs.map((spec, index) =>
- - {spec}
- )}
-
- ));
-
- const render_datasheet_link = (datasheet_file && datasheet_name && (
-
- ));
-
- return (
-
-
-
-
{name}
- {name_codename ? (
-
{name_codename}
- ) : null }
-
-
{`${currency} ${formatMoney(price)}`}
-
- {render_specs}
-
- {render_datasheet_link}
-
-
-
-
-
-
-
- {(provided, snapshot) => (
-
-
-
- {/* Allows to simulate a clone */}
- {snapshot.isDragging && (
-
- )}
-
- )}
-
-
-
-
-
- );
- }
-}
-
-
-/**
- * Component that renders a product.
- * Used in the crate
- */
-class ProductCartItem extends React.PureComponent {
-
- static get propTypes() {
- return {
- isMobile: PropTypes.bool,
- isTouch: PropTypes.bool,
- hovered: PropTypes.bool,
- first: PropTypes.bool,
- last: PropTypes.bool,
- index: PropTypes.number.isRequired,
- model: PropTypes.object.isRequired,
- data: PropTypes.object,
- ext_data: PropTypes.object,
- onToggleOverlayRemove: PropTypes.func,
- onClickRemoveItem: PropTypes.func,
- onClickItem: PropTypes.func,
- onCardUpdate: PropTypes.func,
- };
- }
-
- static get defaultProps() {
- return {
- hovered: false,
- };
- }
-
- constructor(props) {
- super(props);
- this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
- this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
- this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
- this.handleOnClickItem = this.handleOnClickItem.bind(this);
- }
-
- handleOnMouseEnterRemoveItem(index, e) {
- if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
- this.props.onToggleOverlayRemove(index, true);
- }
- e.preventDefault();
- }
-
- handleOnMouseLeaveRemoveItem(index, e) {
- if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
- this.props.onToggleOverlayRemove(index, false);
- }
- e.preventDefault();
- }
-
- handleOnClickItem(index, e) {
- if (this.props.onClickItem && this.props.isTouch) {
- this.props.onClickItem(index);
- }
- e.preventDefault();
- }
-
- handleOnClickRemoveItem(index, e) {
- if (this.props.onClickRemoveItem) {
- this.props.onClickRemoveItem(index);
- }
- }
-
- render() {
- const {
- hovered,
- model,
- data,
- index,
- first,
- last,
- ext_data,
- onCardUpdate,
- } = this.props;
-
- let warning, options, options_data;
- if (data && data.warnings) {
- const warningsKeys = Object.keys(data.warnings);
- if (warningsKeys && warningsKeys.length > 0) {
- // we display only the first warning
- warning = data.warnings[warningsKeys[0]];
- }
- }
-
-
-
- if (data && data.options) {
- options = data.options;
- if (!data.options_data) data.options_data = {};
- options_data = data.options_data;
- options_data.ext_data = ext_data;
- }
-
- let render_progress;
- if (data) {
- switch(model.type) {
- case 'kasli':
- render_progress = [
- ({`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}
),
- ({`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}
)
- ];
- break;
-
- case 'vhdcicarrier':
- render_progress = ({`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}
);
- break;
-
- case 'zotino':
- case 'hd68':
- render_progress = ({`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}
);
- break;
-
- case 'clocker':
- render_progress = ({`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}
);
- break;
-
- default:
- break;
- }
- }
-
- return (
-
-
- {(provided, snapshot) => (
-
-
- {/* warning container */}
-
-
- {warning &&
- (
(
-
-
- {warning.message}
-
-
)
- }
- rootClose
- >
-
- )
- }
-
- {options && (
-
{
- // console.log("construct", outvar, value, options_data);
- options_data[outvar] = value;
- }),
- update: ((outvar, value) => {
- // console.log("update", outvar, value, options_data);
- if (outvar in options_data) options_data[outvar] = value;
- onCardUpdate();
- })
- }}
- />
- )}
-
-
-
{model.name_number}
-
-
-
-
-
-
- {/* remove container */}
-
-
-
-
-
Remove
-
-
- {/* progression container */}
- {render_progress && (
-
({render_progress}
)}
- rootClose
- >
-
-
- {model.nbrSlotMax > 0 && (
-
- )}
-
- {model.nbrClockMax > 0 && (
-
- )}
-
-
- )}
-
-
-
- )}
-
-
- );
- }
-}
-
-
-/**
- * Component that displays a placeholder inside crate.
- * Allows to display how it remains space for the current crate.
- */
-class FakePlaceholder extends React.PureComponent {
-
- static get propTypes() {
- return {
- isDraggingOver: PropTypes.bool,
- nbrSlots: PropTypes.number.isRequired,
- items: PropTypes.array.isRequired,
- };
- }
-
- render() {
- const {
- isDraggingOver,
- nbrSlots,
- items,
- } = this.props;
-
- const fakePlaceholder = [];
- const nbrOccupied = nbrOccupiedSlotsInCrate(items);
-
- for (var i = (nbrSlots - nbrOccupied); i > 0; i--) {
- fakePlaceholder.push(
-
- );
- }
-
- return (
-
- {fakePlaceholder}
-
- );
-
- }
-}
-
-
-/**
- * Component that displays a list of
- */
-class Cart extends React.PureComponent {
-
- static get propTypes() {
- return {
- isMobile: PropTypes.bool,
- isTouch: PropTypes.bool,
- nbrSlots: PropTypes.number,
- itemHovered: PropTypes.string,
- data: PropTypes.object.isRequired,
- onToggleOverlayRemove: PropTypes.func,
- onClickRemoveItem: PropTypes.func,
- onCardUpdate: PropTypes.func,
- onClickItem: PropTypes.func,
- };
- }
-
- render() {
- const {
- isMobile,
- isTouch,
- nbrSlots,
- itemHovered,
- data,
- onToggleOverlayRemove,
- onClickRemoveItem,
- onClickItem,
- onCardUpdate,
- } = this.props;
-
- const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
-
- const products = data.items.map((item, index) => {
- let itemData;
- let ext_data = FillExtData(data.itemsData, index);
- if (data.itemsData && index in data.itemsData) {
- itemData = data.itemsData[index];
- }
- return (
- = nbrSlots}
- data={itemData}
- ext_data={ext_data}
- onToggleOverlayRemove={onToggleOverlayRemove}
- onClickRemoveItem={onClickRemoveItem}
- onCardUpdate={onCardUpdate}
- onClickItem={onClickItem}
- model={item}>
-
- );
- });
-
- return (
-
-
- {(provided, snapshot) => (
-
-
- {products}
-
- {provided.placeholder && (
-
- {provided.placeholder}
-
- )}
-
-
-
- )}
-
-
- );
- }
-}
-
-
-/**
- * Component that displays crate modes
- */
-class CrateMode extends React.PureComponent {
-
- static get propTypes() {
- return {
- items: PropTypes.array.isRequired,
- mode: PropTypes.string.isRequired,
- onClickMode: PropTypes.func,
- };
- }
-
- constructor(props) {
- super(props);
- this.handleOnClickMode = this.handleOnClickMode.bind(this);
- }
-
- handleOnClickMode(mode, e) {
- if (this.props.onClickMode) {
- this.props.onClickMode(mode);
- }
- e.preventDefault();
- }
-
- render() {
- const {
- mode,
- items,
- } = this.props;
-
- return (
-
- );
- }
-}
-
-
-/**
- * Component that displays the main crate with reminder rules.
- * It includes and rules
- */
-class Crate extends React.PureComponent {
-
- static get propTypes() {
- return {
- rules: PropTypes.array,
- cart: PropTypes.element,
- };
- }
-
- render() {
- const {
- rules,
- cart,
- } = this.props;
-
- return (
-
-
-
-
- {cart}
-
- {rules && rules.length > 0 && (
-
- {rules.map((rule, index) => (
-
- {rule.name}: {rule.message}
-
- ))}
-
- )}
-
-
-
- );
- }
-}
-
-
-/**
- * Component that renders all things for order.
- * It acts like-a layout, this component do nothing more.
- */
-class OrderPanel extends React.PureComponent {
-
- static get propTypes() {
- return {
- title: PropTypes.string,
- description: PropTypes.element,
- crateMode: PropTypes.element,
- crate: PropTypes.element,
- summaryPrice: PropTypes.element,
- form: PropTypes.element,
- isMobile: PropTypes.bool,
- onClickToggleMobileSideMenu: PropTypes.func,
- onClickOpenImport: PropTypes.func,
- };
- }
-
- render() {
- const {
- title,
- description,
- crateMode,
- crate,
- summaryPrice,
- form,
- isMobile,
- onClickToggleMobileSideMenu,
- onClickOpenImport,
- } = this.props;
-
- return (
-
-
- {title}
-
-
-
{description}
-
- {crateMode}
-
-
-
-
-
-
- {isMobile ? (
-
-
-
- ) : null}
-
- {crate}
-
-
- {summaryPrice}
-
- {form}
-
-
-
- );
- }
-}
-
-
-/**
- * Components that renders the form to request quote.
- */
-class OrderForm extends React.PureComponent {
-
- static get propTypes() {
- return {
- isProcessing: PropTypes.bool,
- isProcessingComplete: PropTypes.bool,
- onClickSubmit: PropTypes.func,
- };
- }
-
- constructor(props) {
- super(props);
- this.state = {
- note: '',
- email: '',
- error: {
- note: null,
- email: null,
- },
- empty: {
- note: null,
- email: null,
- },
- };
-
- this.handleEmail = this.handleEmail.bind(this);
- this.handleNote = this.handleNote.bind(this);
- this.handleSubmit = this.handleSubmit.bind(this);
- this.resetEmptyError = this.resetEmptyError.bind(this);
- this.checkValidation = this.checkValidation.bind(this);
- }
-
- checkValidation() {
- let isValid = true;
- let validationFields = {...this.state};
-
- const {
- isEmpty: isEmailEmpty,
- isError: isEmailError
- } = this.validateEmail(this.state.email);
-
- validationFields = {
- ...validationFields,
- error: {
- ...this.state.error,
- email: isEmailError,
- },
- empty: {
- ...this.state.empty,
- email: isEmailEmpty,
- }
- }
-
- this.setState(validationFields);
-
- isValid =
- !isEmailEmpty &&
- !isEmailError
-
- return isValid;
- }
-
- validateEmail(value) {
- let isEmpty = null;
- let isError = null;
-
- const { t } = this.props;
-
- if (!value || value.trim() === '') {
- isEmpty = true;
- } else if (value && !value.match(/^\w+([\+\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
- isError = {
- message: 'Your email is incomplete',
- };
- }
-
- return { isEmpty, isError };
- }
-
- validateNote(value) {
- let isEmpty = null;
-
- if (!value || value.trim() === '') {
- isEmpty = true;
- }
-
- return { isEmpty };
- }
-
- resetEmptyError(key) {
- this.setState({
- ...this.state,
- error: {
- ...this.state.error,
- [key]: null,
- },
- empty: {
- ...this.state.empty,
- [key]: null,
- },
- });
- }
-
- handleEmail(e) {
- const value = e.target.value;
- const { isEmpty, isError } = this.validateEmail(value);
-
- this.setState({
- ...this.state,
- email: value,
- error: {
- ...this.state.error,
- email: isError,
- },
- empty: {
- ...this.state.empty,
- email: isEmpty,
- }
- });
- }
-
- handleNote(e) {
- const value = e.target.value;
-
- this.setState({
- ...this.state,
- note: value,
- });
- }
-
- handleSubmit(event) {
- event.preventDefault();
-
- if (this.props.onClickSubmit) {
- // check validation input fields
- const isValidated = this.checkValidation();
- if (!isValidated) {
- return false;
- }
-
- this.props.onClickSubmit(this.state.note, this.state.email);
- }
- }
-
- render() {
- const {
- handleEmail,
- handleNote,
- resetEmptyError,
- handleSubmit,
- } = this;
-
- const {
- onClickShow,
- } = this.props;
-
- const {
- email,
- note,
- error,
- empty
- } = this.state;
-
- const { isProcessing, isProcessingComplete } = this.props;
-
- return (
-
- );
- }
-}
-
-
-/**
- * Components that displays the list of card that are used in the crate.
- * It is a summary of purchase
- */
-class OrderSumary extends React.PureComponent {
-
- static get propTypes() {
- return {
- currency: PropTypes.string,
- modes: PropTypes.array,
- currentMode: PropTypes.string,
- summary: PropTypes.array,
- itemsData: PropTypes.array,
- onDeleteItem: PropTypes.func,
- onDeleteAllItems: PropTypes.func,
- onMouseEnterItem: PropTypes.func,
- onMouseLeaveItem: PropTypes.func,
- onClickSelectItem: PropTypes.func,
- };
- }
-
- constructor(props) {
- super(props);
- this.handleOnDeleteItem = this.handleOnDeleteItem.bind(this);
- this.handleOnDeleteAllItems = this.handleOnDeleteAllItems.bind(this);
- this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
- this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
- this.handleOnClickSelectItem = this.handleOnClickSelectItem.bind(this);
- }
-
- handleOnDeleteItem(index, e) {
- if (this.props.onDeleteItem) {
- this.props.onDeleteItem(index);
- }
- e.preventDefault();
- }
-
- handleOnDeleteAllItems(e) {
- if (this.props.onDeleteAllItems) {
- this.props.onDeleteAllItems();
- }
- e.preventDefault();
- }
-
- handleOnMouseEnterItem(id, e) {
- if (this.props.onMouseEnterItem) {
- this.props.onMouseEnterItem(id);
- }
- e.preventDefault();
- }
-
- handleOnMouseLeaveItem(e) {
- if (this.props.onMouseLeaveItem) {
- this.props.onMouseLeaveItem();
- }
- e.preventDefault();
- }
-
- handleOnClickSelectItem(index, e) {
- if (e.target.tagName !== 'IMG') {
- if (this.props.onClickSelectItem) {
- this.props.onClickSelectItem(index);
- }
- }
- return e.preventDefault();
- }
-
- render() {
- const {
- currency,
- modes,
- currentMode,
- summary,
- itemsData,
- } = this.props;
-
- const mode = modes.find(elem => elem.id === currentMode);
-
- return (
-
-
-
-
-
-
-
- Remove all cards
-
-
- |
-
-
- {mode && (
-
- {mode.name} |
-
-
- {`${currency} ${formatMoney(mode.price)}`}
-
-
-
-
-
- |
-
- )}
-
-
-
- {summary.map((item, index) => {
- let alert, warning, options, options_data;
-
- if (itemsData[index] && itemsData[index].warnings) {
- alert = itemsData[index];
- const warningsKeys = Object.keys(alert.warnings);
- if (warningsKeys && warningsKeys.length > 0) {
- warning = alert.warnings[warningsKeys[0]];
- }
- }
- options = itemsData[index] && itemsData[index].options;
- options_data = itemsData[index] && itemsData[index].options_data;
-
- return (
-
-
-
- {`${item.name_number} ${item.name} ${item.name_codename}`}
- |
-
-
-
- {`${currency} ${formatMoney(item.price)}`}
-
-
-
-
- {(warning ? (
-
- ) : (
-
- ))}
- {((options && options_data) ? (
-
- ) : (
-
- ))}
-
-
- |
-
- );
- })}
-
-
-
-
- Price estimate |
-
-
- {summary.length ? (
- `${currency} ${formatMoney(summary.reduce(
- (prev, next) => {
- return prev + next.price;
- }, 0
- ) + mode.price)}`
- ) : (
- `${currency} ${formatMoney(mode.price)}`
- )}
-
-
-
-
-
- |
-
-
-
-
-
-
- );
- }
-}
-
-
-/**
- * Component that renders the backlog in the aside
- */
-class Backlog extends React.PureComponent {
-
- static get propTypes() {
- return {
- currency: PropTypes.string,
- data: PropTypes.object.isRequired,
- items: PropTypes.object,
- isMobile: PropTypes.bool,
- onClickAddItem: PropTypes.func,
- onClickToggleMobileSideMenu: PropTypes.func,
- };
- }
-
- static get defaultProps() {
- return {
- items: {},
- };
- }
-
- render() {
- const {
- currency,
- data,
- items,
- onClickAddItem,
- onClickToggleMobileSideMenu,
- isMobile,
- } = this.props;
-
-
- const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name,
- items: groupItem.itemIds.map(itemId => items[itemId])
- }));
- let item_index = -1;
- const groups = ordered_groups.map((group, g_index) => {
- return (
-
-
-
-
-
-
- {group.items.map(item => {
- item_index++;
- return (
-
- )})}
-
-
-
- );
- }
- );
-
- return (
-
-
- {(provided) => (
-
-
- {isMobile ? (
-
-
-
- ) : null}
-
-
- {groups}
-
-
- {provided.placeholder && (
-
- {provided.placeholder}
-
- )}
-
- )}
-
-
- );
- }
-}
-
-
-/**
- * Component that render the entire shop
- */
-class Shop extends React.PureComponent {
-
- static get propTypes() {
- return {
- data: PropTypes.object.isRequired,
- };
- }
-
- constructor(props) {
- super(props);
- this.state = this.props.data;
- this.handleCrateModeChange = this.handleCrateModeChange.bind(this);
- this.handleOnDragEnd = this.handleOnDragEnd.bind(this);
- this.handleDeleteItem = this.handleDeleteItem.bind(this);
- this.handleDeleteAllItems = this.handleDeleteAllItems.bind(this);
- this.handleMouseEnterItem = this.handleMouseEnterItem.bind(this);
- this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
- this.handleClickAddItem = this.handleClickAddItem.bind(this);
- this.checkAlerts = this.checkAlerts.bind(this);
- this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
- this.handleClickSubmit = this.handleClickSubmit.bind(this);
- this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
- this.handleShowOverlayRemove = this.handleShowOverlayRemove.bind(this);
- this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
- this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
- this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
- this.handleClickOpenImport = this.handleClickOpenImport.bind(this);
- this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this);
- this.handleCardsUpdated = this.handleCardsUpdated.bind(this);
-
- this.timer = null;
- this.timer_remove = null;
- }
-
- componentDidMount() {
- const source = {
- droppableId: 'backlog',
- indexes: [
- itemsUnfoldedList.findIndex(element => element === "eem_pwr_mod"),
- itemsUnfoldedList.findIndex(element => element === "kasli")
- ],
- };
- const destination = {
- droppableId: 'cart',
- index: 0,
- };
-
- this.handleOnDragEnd({
- source,
- destination
- });
- }
-
- componentDidUpdate(prevProps, prevState) {
- /**
- * We check alerts (reminder + warning) only when items inside crate or
- * crate mode change.
- *
- * In the function checkAlerts, we DO NOT want to change items as we will
- * trigger again this function (componentDidUpdate) and thus,
- * making an infinite loop.
- */
- if (
- (prevState.columns.cart.items !== this.state.columns.cart.items) ||
- (prevState.currentMode !== this.state.currentMode)
- ) {
- this.checkAlerts(this.state.columns.cart.items);
- }
-
- if (this.state.newCardJustAdded) {
- this.timer = setTimeout(() => {
- this.setState({
- newCardJustAdded: false,
- });
- }, 2000);
- }
- }
-
- componentWillUnmount() {
- clearTimeout(this.timer);
- }
-
- handleCardsUpdated() {
- this.checkAlerts(this.state.columns.cart.items);
- }
-
- handleCrateModeChange(mode) {
- this.setState({
- currentMode: mode,
- });
- }
-
- handleDeleteItem(index) {
- let cloned = Array.from(this.state.columns.cart.items);
- let cloned_data = Array.from(this.state.columns.cart.itemsData);
- cloned.splice(index, 1);
- cloned_data.splice(index, 1);
-
- this.setState({
- ...this.state,
- columns: {
- ...this.state.columns,
- cart: {
- ...this.state.columns.cart,
- items: cloned,
- itemsData: cloned_data,
- },
- },
- });
- }
-
- handleDeleteAllItems() {
- this.setState({
- ...this.state,
- columns: {
- ...this.state.columns,
- cart: {
- ...this.state.columns.cart,
- items: [],
- itemsData: []
- },
- },
- });
- }
-
- handleMouseEnterItem(id) {
- this.setState({
- ...this.state,
- currentItemHovered: id,
- });
- }
-
- handleMouseLeaveItem() {
- this.setState({
- ...this.state,
- currentItemHovered: null,
- });
- }
-
- handleClickAddItem(index, tap) {
- const source = {
- droppableId: 'backlog',
- index: index,
- };
- const destination = {
- droppableId: 'cart',
- index: this.state.columns.cart.items.length,
- };
-
- this.handleOnDragEnd({
- source,
- destination
- }, tap);
- }
-
- handleClickSelectItem(index) {
- const itemsCloned = Array.from(this.state.columns.cart.items);
-
- this.setState({
- ...this.state,
- columns: {
- ...this.state.columns,
- cart: {
- ...this.state.columns.cart,
- items: itemsCloned.map((item, id) => {
- return {...item, selected: id === index ? true : false};
- }),
- }
- },
- });
- }
-
- handleToggleOverlayRemove(index, show) {
- const itemsCloned = Array.from(this.state.columns.cart.items);
-
- this.setState({
- ...this.state,
- columns: {
- ...this.state.columns,
- cart: {
- ...this.state.columns.cart,
- items: itemsCloned.map((item, id) => {
- return {
- ...item,
- showOverlayRemove: id === index ? show : false
- };
- }),
- }
- },
- });
- }
-
- handleShowOverlayRemove(index) {
- if (this.timer_remove)
- clearTimeout(this.timer_remove);
-
- this.handleToggleOverlayRemove(index, true);
-
- this.timer_remove = setTimeout(() => {
- this.handleToggleOverlayRemove(index, false);
- }, 2000);
- }
-
- handleClickShowOrder() {
- const crate = {
- items: [],
- type: this.state.currentMode,
- };
- const clonedCart = Array.from(this.state.columns.cart.items);
- const clonedCartData = Array.from(this.state.columns.cart.itemsData);
- for (const i in clonedCart) {
- const item = clonedCart[i];
- const item_data = clonedCartData[i];
- crate.items.push({
- 'pn': item.name_number,
- 'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null,
- });
- }
-
- this.setState({
- isProcessing: false,
- shouldShowRFQFeedback: true,
- RFQBodyType: 'show',
- RFQBodyOrder: JSON.stringify(crate, null, 2),
- });
- }
-
- handleClickOpenImport() {
- this.setState({
- isProcessing: false,
- shouldShowRFQFeedback: true,
- RFQBodyType: 'import',
- });
- }
-
- handleLoadCustomConf(customconf) {
- if (!customconf) {return; }
-
- const items = this.props.data.items;
-
- let new_items = [];
- let new_items_data = [];
-
-
- this.setState({
- ...this.state,
- columns: {
- ...this.state.columns,
- cart: {
- ...this.state.columns.cart,
- items: [],
- },
- },
- }, function () {
-
- customconf.items.map(function (item) {
- Object.keys(items).map(key => {
- if (item.pn && item.pn === items[key].name_number) {
- new_items.push(Object.assign({
- ...items[key],
- }, {
- id: uuidv4(),
- options_data: item.options ? item.options : null,
- }));
- new_items_data.push({options_data: item.options ? item.options : null});
- }
- });
-
- return item;
- });
-
- this.setState({
- ...this.state,
- columns: {
- ...this.state.columns,
- cart: {
- ...this.state.columns.cart,
- items: new_items,
- itemsData: new_items_data,
- },
- },
- currentMode: customconf.type,
- });
- });
- }
-
- handleClickSubmit(note, email) {
- const crate = {
- items: [],
- type: this.state.currentMode,
- };
- const clonedCart = Array.from(this.state.columns.cart.items);
- const clonedCartData = Array.from(this.state.columns.cart.itemsData);
- for (const i in clonedCart) {
- const item = clonedCart[i];
- const item_data = clonedCartData[i];
- crate.items.push({
- 'pn': item.name_number,
- 'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null,
- });
- }
-
- const {data} = this.props;
-
- this.setState({isProcessing: true});
-
- fetch(data.API_RFQ, {
- method: "POST",
- headers: {'Content-Type': 'application/json'},
- body: JSON.stringify({
- email,
- note,
- configuration: JSON.stringify(crate)
- })
- }).then(response => {
- if (response.status !== 200) {
- throw Error("Response status is not OK: " + response.status + ".\n" + response);
- }
- this.setState({
- isProcessing: false,
- shouldShowRFQFeedback: true,
- RFQBodyType: 'email',
- isProcessingComplete: true,
- });
- }).catch(err => {
- console.error("Request failed, reason:", err)
- this.setState({isProcessing: false}, () => {
- alert("We cannot receive your request. Try using the export by coping the configuration and send it to us at sales@m-labs.hk");
- });
- })
- }
-
- handleOnDragEnd(result, newAdded) {
- const {
- source,
- destination,
- } = result;
- let dragged_items = [];
- if (source.indexes) {
- source.indexes.forEach((card_index, _) => {
- dragged_items.push(itemsUnfoldedList[card_index]);
- })
- } else if (source.index >= 0) {
- dragged_items.push(itemsUnfoldedList[source.index]);
- }
-
-
- if (!destination) {
- if (source.droppableId === 'cart') {
- this.setState({
- ...this.state,
- newCardJustAdded: false,
- columns: {
- ...this.state.columns,
- [source.droppableId]: {
- ...this.state.columns[source.droppableId],
- items: remove(
- this.state.columns[source.droppableId].items,
- source.index,
- ),
- itemsData: remove(
- this.state.columns[source.droppableId].itemsData,
- source.index,
- )
- },
- },
- });
- }
-
- return;
- }
-
- switch(source.droppableId) {
-
- case 'backlog':
- if (source.droppableId !== destination.droppableId) {
- this.setState({
- ...this.state,
- newCardJustAdded: newAdded ? true : false,
- columns: {
- ...this.state.columns,
- [destination.droppableId]: {
- ...this.state.columns[destination.droppableId],
- items: copy(
- this.state.items,
- this.state.columns[source.droppableId],
- this.state.columns[destination.droppableId],
- dragged_items,
- destination,
- ),
- },
- },
- });
- }
- break;
-
- case destination.droppableId:
- this.setState({
- ...this.state,
- newCardJustAdded: false,
- columns: {
- ...this.state.columns,
- [destination.droppableId]: {
- ...this.state.columns[destination.droppableId],
- items: reorder(
- this.state.columns[destination.droppableId].items,
- source.index,
- destination.index,
- ),
- itemsData: reorder(
- this.state.columns[destination.droppableId].itemsData,
- source.index,
- destination.index,
- ),
- },
- },
- });
- break;
-
- default:
- break;
- }
- }
-
- handleClickToggleMobileSideMenu() {
- this.setState({
- ...this.state,
- mobileSideMenuShouldOpen: !this.state.mobileSideMenuShouldOpen,
- });
- }
-
- handleClickCloseRFQFeedback() {
- this.setState({
- shouldShowRFQFeedback: false,
- });
- }
-
- checkAlerts(newItems) {
- console.log('--- START CHECKING CRATE WARNING ---');
-
- const {
- currentMode,
- crateModeSlots,
- crateRules,
- } = this.state;
-
- const itemsCloned = Array.from(newItems);
- const itemsData = [];
- const rules = {};
-
- itemsCloned.forEach((elem, idx) => {
- if (!(idx in itemsData)) itemsData[idx] = elem;
- if (idx in this.state.columns.cart.itemsData && this.state.columns.cart.itemsData[idx].options_data) {
- itemsCloned[idx].options_data = this.state.columns.cart.itemsData[idx].options_data;
- }
- itemsData[idx].warnings = {};
- });
-
-
- // check number of slot in crate
- const nbrOccupied = nbrOccupiedSlotsInCrate(newItems);
- if (nbrOccupied > crateModeSlots[currentMode]) {
- rules[crateRules.maxSlot.type] = {...crateRules.maxSlot};
- } else if (crateModeSlots[currentMode] === 21 && nbrOccupied <= 10) {
- rules[crateRules.compactSlot.type] = {...crateRules.compactSlot};
- }
-
-
- // check the number of EEM connectors available for all Kasli
- const idxK = itemsCloned.reduce((prev, next, i) => {
- if (next.type === 'kasli' || next.type === 'vhdcicarrier') {
- prev.push(i);
- }
- return prev;
- }, []);
- for (let i = 0; i <= idxK.length - 1; i++) {
- let slots;
- let nbUsedSlot = 0;
- let nbrCurrentClock = 0;
- let idx = idxK[i];
-
- if (i !== idxK.length - 1) {
- slots = itemsCloned.slice(idx + 1, idxK[i + 1]);
- } else {
- slots = itemsCloned.slice(idx + 1);
- }
-
- if (i == 0) {
- const slots_need_resource = itemsCloned.slice(0, idx);
- const idx_need = slots_need_resource.findIndex(e => (e.rules && e.rules.resources));
-
- if (idx_need != -1) {
- if (idx_need in itemsData) {
- if ('warnings' in itemsData[idx_need]) {
- itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
- } else {
- itemsData[idx_need].warnings = {};
- itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
- }
- } else {
- itemsData[idx_need] = {...itemsCloned[idx_need]};
- itemsData[idx_need].warnings = {};
- itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
- }
- }
- }
-
- const process_slots = (item) => {
- if (!item.options_data
- || item.options_data.ext_pwr === false
- || item.options_data.mono_eem === false
- )
- return item.slotOccupied;
- else if (item.options_data.ext_pwr === true)
- return 0;
- else if (item.options_data.mono_eem === true || item.options_data.n_eem === "1 EEM")
- return 1;
- else if (item.options_data.n_eem === "3 EEM")
- return 3;
-
- return item.slotOccupied;
- }
-
- nbUsedSlot = slots
- .filter(item => item.type !== 'idc-bnc')
- .reduce((prev, next) => {
- return prev + process_slots(next);
- }, 0);
-
- nbrCurrentClock = slots
- .reduce((prev, next) => {
- return next.type === 'clocker' ? prev + ((next.options_data && next.options_data.ext_clk === true) ? 0 : next.clockOccupied) : prev;
- }, 0);
-
- if (idx in itemsData) {
- itemsData[idx].nbrCurrentSlot = nbUsedSlot;
- itemsData[idx].nbrCurrentClock = nbrCurrentClock;
- if (!('warnings' in itemsData[idx])) {
- itemsData[idx].warnings = {};
- }
- } else {
- itemsData[idx] = {...itemsCloned[idx]};
- itemsData[idx].nbrCurrentSlot = nbUsedSlot;
- itemsData[idx].nbrCurrentClock = nbrCurrentClock;
- itemsData[idx].warnings = {};
- }
-
- if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
- if (itemsCloned[idx].rules.maxSlot.message) {
- rules[itemsCloned[idx].rules.maxSlot.type] = {...itemsCloned[idx].rules.maxSlot};
- }
- itemsData[idx].warnings.maxSlotWarning = {...itemsCloned[idx].rules.maxSlotWarning};
- }
-
- if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) {
- rules[itemsCloned[idx].rules.maxClock.type] = {...itemsCloned[idx].rules.maxClock};
- itemsData[idx].warnings.maxClockWarning = {...itemsCloned[idx].rules.maxClockWarning};
- }
-
- if (itemsCloned.length > (idx + 1)) {
- const ddkali = itemsCloned[idx + 1];
- if (ddkali.type === 'kasli' || ddkali.type === 'vhdcicarrier') {
- rules[ddkali.rules.follow.type] = {...ddkali.rules.follow};
- }
- }
- }
-
- if (idxK.length === 0) {
- const slots_need_resource = itemsCloned.slice(0);
- const idx_need = slots_need_resource.findIndex(e => (e.rules && e.rules.resources));
-
- if (idx_need != -1) {
- if (idx_need in itemsData) {
- if ('warnings' in itemsData[idx_need]) {
- itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
- } else {
- itemsData[idx_need].warnings = {};
- itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
- }
- } else {
- itemsData[idx_need] = {...itemsCloned[idx_need]};
- itemsData[idx_need].warnings = {};
- itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
- }
- }
- }
-
-
- // check number of clock connector available
- const idxC = itemsCloned.reduce((prev, next, i) => {
- if (next.type === 'kasli' || next.type === 'clocker') {
- prev.push(i);
- }
- return prev;
- }, []);
- for (let i = 0; i <= idxC.length - 1; i++) {
- let slots;
- let nbrCurrentClock = 0;
- let idx = idxC[i];
-
- if (i !== idxC.length - 1) {
- slots = itemsCloned.slice(idx + 1, idxC[i + 1]);
- } else {
- slots = itemsCloned.slice(idx + 1);
- }
-
- nbrCurrentClock = slots.reduce((prev, next) => {
- return prev + ((next.options_data && next.options_data.ext_clk && next.options_data.ext_clk.checked) ? 0 : next.clockOccupied);
- }, 0);
-
- if (idx in itemsData) {
- if (itemsData[idx].nbrCurrentClock && itemsData[idx].type !== "clocker") {
- itemsData[idx].nbrCurrentClock += nbrCurrentClock;
- } else {
- itemsData[idx].nbrCurrentClock = nbrCurrentClock;
- }
- } else {
- itemsData[idx] = {...itemsCloned[idx]};
- itemsData[idx].nbrCurrentClock = nbrCurrentClock;
- itemsData[idx].warnings = {};
- }
-
- if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) {
- rules[itemsCloned[idx].rules.maxClock.type] = {...itemsCloned[idx].rules.maxClock};
- itemsData[idx].warnings.maxClockWarning = {...itemsCloned[idx].rules.maxClockWarning};
- }
- }
-
-
- if (itemsCloned.find(elem => elem.type === 'urukul')) {
- if (this.state.items['urukul'].rules.info) {
- rules[this.state.items['urukul'].rules.info.type] = {...this.state.items['urukul'].rules.info};
- }
- }
-
-
- // check if IDC-BNC is correctly positionned (after Zotino or HD68)
- const idxIDCBNC = itemsCloned.reduce((prev, next, i) => {
- if (next.type === 'idc-bnc') {
- prev.push(i);
- }
- return prev;
- }, []);
- for (var i = idxIDCBNC.length - 1; i >= 0; i--) {
- const ce = idxIDCBNC[i];
- let shouldWarning = false;
-
- if (ce == 0) {
- shouldWarning = true;
- } else if (ce >= 1) {
- const pe = idxIDCBNC[i] - 1;
- if (itemsCloned[pe].type !== 'zotino' &&
- itemsCloned[pe].type !== 'hd68' &&
- itemsCloned[pe].type !== 'idc-bnc') {
- shouldWarning = true;
- }
- }
-
- if (shouldWarning) {
- itemsData[ce] = {...itemsCloned[ce]};
- itemsData[ce].warnings = {};
- itemsData[ce].warnings.wrong = {...itemsCloned[ce].rules.wrong};
- }
- }
-
-
- // check number of IDC-BNC adapters for a Zotino and HD68-IDC
- const idxZH = itemsCloned.reduce((prev, next, i) => {
- if (next.type === 'zotino' || next.type === 'hd68') {
- prev.push(i);
- }
- return prev;
- }, []);
- for (let i = 0; i <= idxZH.length - 1; i++) {
- let slots;
- let nbUsedSlot = 0;
- let idx = idxZH[i];
-
- if (i !== idxZH.length - 1) {
- slots = itemsCloned.slice(idx + 1, idxZH[i + 1]);
- } else {
- slots = itemsCloned.slice(idx + 1);
- }
-
- let stopCount = false;
- nbUsedSlot = slots.reduce((prev, next, ci, ca) => {
- if (ci === 0 && next.type === 'idc-bnc') {
- return prev + 1;
- } else if (ca[0].type === 'idc-bnc' && ci > 0 && ca[ci - 1].type === 'idc-bnc') {
- if (next.type !== 'idc-bnc') { stopCount = true; }
- return prev + (next.type === 'idc-bnc' && !stopCount ? 1 : 0);
- }
- return prev;
- }, 0);
-
- if (idx in itemsData) {
- itemsData[idx].nbrCurrentSlot = nbUsedSlot;
- if (!('warnings' in itemsData[idx])) {
- itemsData[idx].warnings = {};
- }
- } else {
- itemsData[idx] = {...itemsCloned[idx]};
- itemsData[idx].nbrCurrentSlot = nbUsedSlot;
- itemsData[idx].warnings = {};
- }
-
- if (nbUsedSlot > 0) {
- if (itemsCloned[idx].rules.maxSlot.message) {
- rules[itemsCloned[idx].rules.maxSlot.type] = {...itemsCloned[idx].rules.maxSlot};
- }
- }
- if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
- itemsData[idx].warnings.maxSlotWarning = {...itemsCloned[idx].rules.maxSlotWarning};
- }
-
- // check if HD68-IDC has at least 1 IDC-BNC adapter
- if (itemsCloned[idx].type === 'hd68') {
- let shouldWarning = false;
-
- if (idx < itemsCloned.length - 1) {
- if (itemsCloned[idx + 1].type !== 'idc-bnc') {
- shouldWarning = true;
- }
- } else if (idx === itemsCloned.length - 1) {
- shouldWarning = true;
- }
-
- if (shouldWarning) {
- if (idx in itemsData) {
- itemsData[idx].warnings.minAdapter = {...itemsCloned[idx].rules.minAdapter};
- } else {
- itemsData[idx] = {...itemsCloned[idx]};
- itemsData[idx].warnings = {};
- itemsData[idx].warnings.minAdapter = {...itemsCloned[idx].rules.minAdapter};
- }
- }
- }
- }
-
- // update state with rules
- this.setState({
- ...this.state,
- columns: {
- ...this.state.columns,
- cart: {
- ...this.state.columns.cart,
- itemsData: itemsData,
- }
- },
- rules: {
- ...rules,
- },
- });
- }
-
- render() {
-
- const {
- currency,
- currentItemHovered,
- currentMode,
- crateModeSlots,
- crateModeItems,
- items,
- columns,
- rules,
- mobileSideMenuShouldOpen,
- newCardJustAdded,
- isProcessing,
- shouldShowRFQFeedback,
- RFQBodyType,
- RFQBodyOrder,
- isProcessingComplete,
- } = this.state;
-
- const isMobile = window.deviceIsMobile();
- const isTouch = window.isTouchEnabled();
-
- return (
-
-
-
-
- }
- main={(
- Drag and drop the cards you want into the crate below to see how the combination would look like. Setup card's configuration by tapping at the top of the card, most of the options can be modified after shipment. If you have any issues with this ordering system, or if you need other configurations, email us directly anytime at sales@m-labs.hk. The price is estimated and must be confirmed by a quote.
)}
- crateMode={
-
- }
- crate={
-
-
- }
- rules={Object.values(rules).filter(rule => rule)}>
-
- }
- summaryPrice={
-
-
- }
- form={
-
-
- }>
-
- )}>
-
-
-
- );
- }
-}
+import { Shop } from "./shop/Shop.jsx"
+import { data } from "./shop/utils"
createRoot(document.querySelector('#root-shop')).render();
diff --git a/static/js/shop/Backlog.jsx b/static/js/shop/Backlog.jsx
new file mode 100644
index 00000000..0157cca2
--- /dev/null
+++ b/static/js/shop/Backlog.jsx
@@ -0,0 +1,118 @@
+import React, {PureComponent} from 'react';
+import PropTypes from "prop-types";
+import {v4 as uuidv4} from "uuid";
+import {Droppable} from "react-beautiful-dnd";
+import {ProductItem} from "./ProductItem.jsx";
+
+/**
+ * Component that renders the backlog in the aside
+ */
+export class Backlog extends PureComponent {
+
+ static get propTypes() {
+ return {
+ currency: PropTypes.string,
+ data: PropTypes.object.isRequired,
+ items: PropTypes.object,
+ isMobile: PropTypes.bool,
+ onClickAddItem: PropTypes.func,
+ onClickToggleMobileSideMenu: PropTypes.func,
+ };
+ }
+
+ static get defaultProps() {
+ return {
+ items: {},
+ };
+ }
+
+ render() {
+ const {
+ currency,
+ data,
+ items,
+ onClickAddItem,
+ onClickToggleMobileSideMenu,
+ isMobile,
+ } = this.props;
+
+
+ const ordered_groups = data.categories.map(groupItem => ({
+ name: groupItem.name,
+ items: groupItem.itemIds.map(itemId => items[itemId])
+ }));
+ let item_index = -1;
+ const groups = ordered_groups.map((group, g_index) => {
+ return (
+
+
+
+
+
+
+ {group.items.map(item => {
+ item_index++;
+ return (
+
+ )
+ })}
+
+
+
+ );
+ }
+ );
+
+ return (
+
+
+ {(provided) => (
+
+
+ {isMobile ? (
+
+
+
+ ) : null}
+
+
+ {groups}
+
+
+ {provided.placeholder && (
+
+ {provided.placeholder}
+
+ )}
+
+ )}
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/Cart.jsx b/static/js/shop/Cart.jsx
new file mode 100644
index 00000000..ea7977f8
--- /dev/null
+++ b/static/js/shop/Cart.jsx
@@ -0,0 +1,101 @@
+import React, {PureComponent} from 'react'
+import PropTypes from "prop-types";
+import {Droppable} from "react-beautiful-dnd";
+import {cartStyle, nbrOccupiedSlotsInCrate} from "./utils";
+import {ProductCartItem} from "./ProductCartItem.jsx";
+import {FakePlaceholder} from "./FakePlaceholder.jsx";
+import {FillExtData} from "./options/utils";
+
+/**
+ * Component that displays a list of
+ */
+export class Cart extends PureComponent {
+
+ static get propTypes() {
+ return {
+ isMobile: PropTypes.bool,
+ isTouch: PropTypes.bool,
+ nbrSlots: PropTypes.number,
+ itemHovered: PropTypes.string,
+ data: PropTypes.object.isRequired,
+ onToggleOverlayRemove: PropTypes.func,
+ onClickRemoveItem: PropTypes.func,
+ onCardUpdate: PropTypes.func,
+ onClickItem: PropTypes.func,
+ };
+ }
+
+ render() {
+ const {
+ isMobile,
+ isTouch,
+ nbrSlots,
+ itemHovered,
+ data,
+ onToggleOverlayRemove,
+ onClickRemoveItem,
+ onClickItem,
+ onCardUpdate,
+ } = this.props;
+
+ const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
+
+ const products = data.items.map((item, index) => {
+ let itemData;
+ let ext_data = FillExtData(data.itemsData, index);
+ if (data.itemsData && index in data.itemsData) {
+ itemData = data.itemsData[index];
+ }
+ return (
+ = nbrSlots}
+ data={itemData}
+ ext_data={ext_data}
+ onToggleOverlayRemove={onToggleOverlayRemove}
+ onClickRemoveItem={onClickRemoveItem}
+ onCardUpdate={onCardUpdate}
+ onClickItem={onClickItem}
+ model={item}>
+
+ );
+ });
+
+ return (
+
+
+ {(provided, snapshot) => (
+
+
+ {products}
+
+ {provided.placeholder && (
+
+ {provided.placeholder}
+
+ )}
+
+
+
+ )}
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/Crate.jsx b/static/js/shop/Crate.jsx
new file mode 100644
index 00000000..ef9bf805
--- /dev/null
+++ b/static/js/shop/Crate.jsx
@@ -0,0 +1,44 @@
+import React, {PureComponent} from 'react';
+import PropTypes from "prop-types";
+
+/**
+ * Component that displays the main crate with reminder rules.
+ * It includes and rules
+ */
+export class Crate extends PureComponent {
+
+ static get propTypes() {
+ return {
+ rules: PropTypes.array,
+ cart: PropTypes.element,
+ };
+ }
+
+ render() {
+ const {
+ rules,
+ cart,
+ } = this.props;
+
+ return (
+
+
+
+
+ {cart}
+
+ {rules && rules.length > 0 && (
+
+ {rules.map((rule, index) => (
+
+ {rule.name}: {rule.message}
+
+ ))}
+
+ )}
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/CrateMode.jsx b/static/js/shop/CrateMode.jsx
new file mode 100644
index 00000000..121be7be
--- /dev/null
+++ b/static/js/shop/CrateMode.jsx
@@ -0,0 +1,48 @@
+import React, {PureComponent} from 'react';
+import PropTypes from "prop-types";
+
+/**
+ * Component that displays crate modes
+ */
+export class CrateMode extends PureComponent {
+
+ static get propTypes() {
+ return {
+ items: PropTypes.array.isRequired,
+ mode: PropTypes.string.isRequired,
+ onClickMode: PropTypes.func,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ this.handleOnClickMode = this.handleOnClickMode.bind(this);
+ }
+
+ handleOnClickMode(mode, e) {
+ if (this.props.onClickMode) {
+ this.props.onClickMode(mode);
+ }
+ e.preventDefault();
+ }
+
+ render() {
+ const {
+ mode,
+ items,
+ } = this.props;
+
+ return (
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/FakePlaceholder.jsx b/static/js/shop/FakePlaceholder.jsx
new file mode 100644
index 00000000..2eb3abc1
--- /dev/null
+++ b/static/js/shop/FakePlaceholder.jsx
@@ -0,0 +1,47 @@
+import React, {PureComponent} from 'react'
+import PropTypes from "prop-types";
+import {nbrOccupiedSlotsInCrate} from "./utils";
+
+/**
+ * Component that displays a placeholder inside crate.
+ * Allows to display how it remains space for the current crate.
+ */
+export class FakePlaceholder extends PureComponent {
+
+ static get propTypes() {
+ return {
+ isDraggingOver: PropTypes.bool,
+ nbrSlots: PropTypes.number.isRequired,
+ items: PropTypes.array.isRequired,
+ };
+ }
+
+ render() {
+ const {
+ isDraggingOver,
+ nbrSlots,
+ items,
+ } = this.props;
+
+ const fakePlaceholder = [];
+ const nbrOccupied = nbrOccupiedSlotsInCrate(items);
+
+ for (var i = (nbrSlots - nbrOccupied); i > 0; i--) {
+ fakePlaceholder.push(
+
+ );
+ }
+
+ return (
+
+ {fakePlaceholder}
+
+ );
+
+ }
+}
diff --git a/static/js/shop/Layout.jsx b/static/js/shop/Layout.jsx
new file mode 100644
index 00000000..2c399175
--- /dev/null
+++ b/static/js/shop/Layout.jsx
@@ -0,0 +1,273 @@
+import React, {PureComponent} from 'react';
+import PropTypes from "prop-types";
+
+/**
+ * Component that provides a base layout (aside/main) for the page.
+ */
+export class Layout extends PureComponent {
+
+ static get propTypes() {
+ return {
+ aside: PropTypes.any,
+ main: PropTypes.any,
+ mobileSideMenuShouldOpen: PropTypes.bool,
+ isMobile: PropTypes.bool,
+ newCardJustAdded: PropTypes.bool,
+ onClickToggleMobileSideMenu: PropTypes.func,
+ onClickCloseRFQFeedback: PropTypes.func,
+ RFQBodyType: PropTypes.string,
+ RFQBodyOrder: PropTypes.string,
+ onClickLoadCustomConf: PropTypes.func,
+ items: PropTypes.object,
+ };
+ }
+
+ static get defaultProps() {
+ return {
+ mobileSideMenuShouldOpen: false,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ customconf: '',
+ error: null,
+ };
+
+ this.handleCustomConfig = this.handleCustomConfig.bind(this);
+ this.handleClickLoad = this.handleClickLoad.bind(this);
+ this.checkValidation = this.checkValidation.bind(this);
+
+ // retrieve list of available pn
+ const items_keys = Object.keys(props.items);
+ this.list_pn = items_keys.map(function (key) {
+ return props.items[key].name_number;
+ });
+ }
+
+ handleCustomConfig(e) {
+ const value = e.target.value;
+
+ this.checkValidation(value);
+ }
+
+ checkValidation(conf) {
+ let conf_obj;
+
+ try {
+ conf_obj = JSON.parse(conf);
+ } catch (e) {
+ return this.setState({
+ ...this.state,
+ customconf: conf,
+ customconf_ready: null,
+ error: 'invalid format',
+ });
+ }
+
+ if (!conf_obj) {
+ return this.setState({
+ ...this.state,
+ customconf: conf,
+ customconf_ready: null,
+ error: 'invalid format',
+ });
+ }
+
+ if ((!conf_obj.items || !conf_obj.type) &&
+ (Object.prototype.toString.call(conf_obj.items) !== '[object Array]' ||
+ Object.prototype.toString.call(conf_obj.type) !== '[object String]')) {
+ return this.setState({
+ ...this.state,
+ customconf: conf,
+ customconf_ready: null,
+ error: 'invalid format',
+ });
+ }
+
+ if (conf_obj.type !== "desktop" && conf_obj.type !== "rack") {
+ return this.setState({
+ ...this.state,
+ customconf: conf,
+ customconf_ready: null,
+ error: 'invalid format',
+ });
+ }
+
+ conf_obj.items.map(function (item) {
+ try {
+ return JSON.parse(item);
+ } catch (e) {
+ return null;
+ }
+ });
+
+ conf_obj.items = conf_obj.items.filter(function (item) {
+ return item;
+ });
+
+ if (conf_obj.items.filter(function (item) {
+ return Object.prototype.toString.call(item) !== '[object Object]' || !item.pn || Object.prototype.toString.call(item.pn) !== '[object String]';
+ }).length > 0) {
+ return this.setState({
+ ...this.state,
+ customconf: conf,
+ customconf_ready: null,
+ error: 'invalid format',
+ });
+ }
+
+ conf_obj.items = conf_obj.items.map(function (item) {
+ return {
+ pn: item.pn,
+ options: item.options ? item.options : null,
+ };
+ });
+
+ const self = this;
+ const unknow_pn = conf_obj.items.filter(function (item_pn) {
+ return self.list_pn.includes(item_pn.pn) === false;
+ }).map(function (item_pn) {
+ return item_pn.pn;
+ });
+
+ if (unknow_pn.length > 0) {
+ return this.setState({
+ ...this.state,
+ customconf: conf,
+ customconf_ready: null,
+ error: `${unknow_pn.join(', ')} unknown${unknow_pn.length > 1 ? 's':''} pn number`,
+ });
+ }
+
+ this.setState({
+ ...this.state,
+ customconf: conf,
+ error: null,
+ customconf_ready: conf_obj,
+ });
+ }
+
+ handleClickLoad() {
+ this.checkValidation(this.state.customconf);
+
+ if (this.props.onClickLoadCustomConf) {
+ this.props.onClickLoadCustomConf(this.state.customconf_ready);
+ }
+ }
+
+ render() {
+ const {
+ aside,
+ main,
+ mobileSideMenuShouldOpen,
+ isMobile,
+ newCardJustAdded,
+ onClickToggleMobileSideMenu,
+ onClickCloseRFQFeedback,
+ showRFQFeedback,
+ RFQBodyType,
+ RFQBodyOrder,
+ } = this.props;
+
+ return (
+
+
+
+
+ {mobileSideMenuShouldOpen ? (
+
+ ) : (
+
+ )}
+
+ {isMobile && newCardJustAdded ? (
+
+ ✓ added
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+ {RFQBodyType === 'email' ? (
+
+
+
+
+
+
+
+ We've received your request and will be in contact soon.
+
+
+
+ ) : null }
+
+ {RFQBodyType === 'show' ? (
+
+ {RFQBodyOrder}
+
+ ) : null}
+
+ {RFQBodyType === 'import' ? (
+
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/OrderForm.jsx b/static/js/shop/OrderForm.jsx
new file mode 100644
index 00000000..79276196
--- /dev/null
+++ b/static/js/shop/OrderForm.jsx
@@ -0,0 +1,220 @@
+import React, {PureComponent} from 'react'
+import PropTypes from "prop-types";
+
+/**
+ * Components that renders the form to request quote.
+ */
+export class OrderForm extends PureComponent {
+
+ static get propTypes() {
+ return {
+ isProcessing: PropTypes.bool,
+ isProcessingComplete: PropTypes.bool,
+ onClickSubmit: PropTypes.func,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ note: '',
+ email: '',
+ error: {
+ note: null,
+ email: null,
+ },
+ empty: {
+ note: null,
+ email: null,
+ },
+ };
+
+ this.handleEmail = this.handleEmail.bind(this);
+ this.handleNote = this.handleNote.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.resetEmptyError = this.resetEmptyError.bind(this);
+ this.checkValidation = this.checkValidation.bind(this);
+ }
+
+ checkValidation() {
+ let isValid = true;
+ let validationFields = {...this.state};
+
+ const {
+ isEmpty: isEmailEmpty,
+ isError: isEmailError
+ } = this.validateEmail(this.state.email);
+
+ validationFields = {
+ ...validationFields,
+ error: {
+ ...this.state.error,
+ email: isEmailError,
+ },
+ empty: {
+ ...this.state.empty,
+ email: isEmailEmpty,
+ }
+ }
+
+ this.setState(validationFields);
+
+ isValid =
+ !isEmailEmpty &&
+ !isEmailError
+
+ return isValid;
+ }
+
+ validateEmail(value) {
+ let isEmpty = null;
+ let isError = null;
+
+ const { t } = this.props;
+
+ if (!value || value.trim() === '') {
+ isEmpty = true;
+ } else if (value && !value.match(/^\w+([\+\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
+ isError = {
+ message: 'Your email is incomplete',
+ };
+ }
+
+ return { isEmpty, isError };
+ }
+
+ validateNote(value) {
+ let isEmpty = null;
+
+ if (!value || value.trim() === '') {
+ isEmpty = true;
+ }
+
+ return { isEmpty };
+ }
+
+ resetEmptyError(key) {
+ this.setState({
+ ...this.state,
+ error: {
+ ...this.state.error,
+ [key]: null,
+ },
+ empty: {
+ ...this.state.empty,
+ [key]: null,
+ },
+ });
+ }
+
+ handleEmail(e) {
+ const value = e.target.value;
+ const { isEmpty, isError } = this.validateEmail(value);
+
+ this.setState({
+ ...this.state,
+ email: value,
+ error: {
+ ...this.state.error,
+ email: isError,
+ },
+ empty: {
+ ...this.state.empty,
+ email: isEmpty,
+ }
+ });
+ }
+
+ handleNote(e) {
+ const value = e.target.value;
+
+ this.setState({
+ ...this.state,
+ note: value,
+ });
+ }
+
+ handleSubmit(event) {
+ event.preventDefault();
+
+ if (this.props.onClickSubmit) {
+ // check validation input fields
+ const isValidated = this.checkValidation();
+ if (!isValidated) {
+ return false;
+ }
+
+ this.props.onClickSubmit(this.state.note, this.state.email);
+ }
+ }
+
+ render() {
+ const {
+ handleEmail,
+ handleNote,
+ resetEmptyError,
+ handleSubmit,
+ } = this;
+
+ const {
+ onClickShow,
+ } = this.props;
+
+ const {
+ email,
+ note,
+ error,
+ empty
+ } = this.state;
+
+ const { isProcessing, isProcessingComplete } = this.props;
+
+ return (
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/OrderPanel.jsx b/static/js/shop/OrderPanel.jsx
new file mode 100644
index 00000000..5c7c9707
--- /dev/null
+++ b/static/js/shop/OrderPanel.jsx
@@ -0,0 +1,75 @@
+import React, {PureComponent} from 'react'
+import PropTypes from "prop-types";
+
+/**
+ * Component that renders all things for order.
+ * It acts like-a layout, this component do nothing more.
+ */
+export class OrderPanel extends PureComponent {
+
+ static get propTypes() {
+ return {
+ title: PropTypes.string,
+ description: PropTypes.element,
+ crateMode: PropTypes.element,
+ crate: PropTypes.element,
+ summaryPrice: PropTypes.element,
+ form: PropTypes.element,
+ isMobile: PropTypes.bool,
+ onClickToggleMobileSideMenu: PropTypes.func,
+ onClickOpenImport: PropTypes.func,
+ };
+ }
+
+ render() {
+ const {
+ title,
+ description,
+ crateMode,
+ crate,
+ summaryPrice,
+ form,
+ isMobile,
+ onClickToggleMobileSideMenu,
+ onClickOpenImport,
+ } = this.props;
+
+ return (
+
+
+ {title}
+
+
+ {description}
+
+ {crateMode}
+
+
+
+
+
+
+ {isMobile ? (
+
+
+
+ ) : null}
+
+ {crate}
+
+
+ {summaryPrice}
+
+ {form}
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/OrderSummary.jsx b/static/js/shop/OrderSummary.jsx
new file mode 100644
index 00000000..a3f0a4ba
--- /dev/null
+++ b/static/js/shop/OrderSummary.jsx
@@ -0,0 +1,216 @@
+import React, {PureComponent} from 'react';
+import PropTypes from "prop-types";
+import {SummaryPopup} from "./options/SummaryPopup.jsx";
+import {formatMoney} from "./utils";
+
+
+/**
+ * Components that displays the list of card that are used in the crate.
+ * It is a summary of purchase
+ */
+export class OrderSummary extends PureComponent {
+
+ static get propTypes() {
+ return {
+ currency: PropTypes.string,
+ modes: PropTypes.array,
+ currentMode: PropTypes.string,
+ summary: PropTypes.array,
+ itemsData: PropTypes.array,
+ onDeleteItem: PropTypes.func,
+ onDeleteAllItems: PropTypes.func,
+ onMouseEnterItem: PropTypes.func,
+ onMouseLeaveItem: PropTypes.func,
+ onClickSelectItem: PropTypes.func,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ this.handleOnDeleteItem = this.handleOnDeleteItem.bind(this);
+ this.handleOnDeleteAllItems = this.handleOnDeleteAllItems.bind(this);
+ this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
+ this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
+ this.handleOnClickSelectItem = this.handleOnClickSelectItem.bind(this);
+ }
+
+ handleOnDeleteItem(index, e) {
+ if (this.props.onDeleteItem) {
+ this.props.onDeleteItem(index);
+ }
+ e.preventDefault();
+ }
+
+ handleOnDeleteAllItems(e) {
+ if (this.props.onDeleteAllItems) {
+ this.props.onDeleteAllItems();
+ }
+ e.preventDefault();
+ }
+
+ handleOnMouseEnterItem(id, e) {
+ if (this.props.onMouseEnterItem) {
+ this.props.onMouseEnterItem(id);
+ }
+ e.preventDefault();
+ }
+
+ handleOnMouseLeaveItem(e) {
+ if (this.props.onMouseLeaveItem) {
+ this.props.onMouseLeaveItem();
+ }
+ e.preventDefault();
+ }
+
+ handleOnClickSelectItem(index, e) {
+ if (e.target.tagName !== 'IMG') {
+ if (this.props.onClickSelectItem) {
+ this.props.onClickSelectItem(index);
+ }
+ }
+ return e.preventDefault();
+ }
+
+ render() {
+ const {
+ currency,
+ modes,
+ currentMode,
+ summary,
+ itemsData,
+ } = this.props;
+
+ const mode = modes.find(elem => elem.id === currentMode);
+
+ return (
+
+
+
+
+
+
+
+ Remove all cards
+
+
+ |
+
+
+ {mode && (
+
+ {mode.name} |
+
+
+ {`${currency} ${formatMoney(mode.price)}`}
+
+
+
+
+
+ |
+
+ )}
+
+
+
+ {summary.map((item, index) => {
+ let alert, warning, options, options_data;
+
+ if (itemsData[index] && itemsData[index].warnings) {
+ alert = itemsData[index];
+ const warningsKeys = Object.keys(alert.warnings);
+ if (warningsKeys && warningsKeys.length > 0) {
+ warning = alert.warnings[warningsKeys[0]];
+ }
+ }
+ options = itemsData[index] && itemsData[index].options;
+ options_data = itemsData[index] && itemsData[index].options_data;
+
+ return (
+
+
+
+ {`${item.name_number} ${item.name} ${item.name_codename}`}
+ |
+
+
+
+ {`${currency} ${formatMoney(item.price)}`}
+
+
+
+
+ {(warning ? (
+
+ ) : (
+
+ ))}
+ {((options && options_data) ? (
+
+ ) : (
+
+ ))}
+
+
+ |
+
+ );
+ })}
+
+
+
+
+ Price estimate |
+
+
+ {summary.length ? (
+ `${currency} ${formatMoney(summary.reduce(
+ (prev, next) => {
+ return prev + next.price;
+ }, 0
+ ) + mode.price)}`
+ ) : (
+ `${currency} ${formatMoney(mode.price)}`
+ )}
+
+
+
+
+
+ |
+
+
+
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/ProductCartItem.jsx b/static/js/shop/ProductCartItem.jsx
new file mode 100644
index 00000000..d9216ca1
--- /dev/null
+++ b/static/js/shop/ProductCartItem.jsx
@@ -0,0 +1,252 @@
+import React, {PureComponent} from 'react'
+import PropTypes from "prop-types";
+import {Draggable} from "react-beautiful-dnd";
+import {OverlayTrigger} from "react-bootstrap";
+import {DialogPopup} from "./options/DialogPopup.jsx";
+import {nbrClocksStyle, nbrConnectorsStyle, productStyle} from "./utils";
+
+/**
+ * Component that renders a product.
+ * Used in the crate
+ */
+export class ProductCartItem extends PureComponent {
+
+ static get propTypes() {
+ return {
+ isMobile: PropTypes.bool,
+ isTouch: PropTypes.bool,
+ hovered: PropTypes.bool,
+ first: PropTypes.bool,
+ last: PropTypes.bool,
+ index: PropTypes.number.isRequired,
+ model: PropTypes.object.isRequired,
+ data: PropTypes.object,
+ ext_data: PropTypes.object,
+ onToggleOverlayRemove: PropTypes.func,
+ onClickRemoveItem: PropTypes.func,
+ onClickItem: PropTypes.func,
+ onCardUpdate: PropTypes.func,
+ };
+ }
+
+ static get defaultProps() {
+ return {
+ hovered: false,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
+ this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
+ this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
+ this.handleOnClickItem = this.handleOnClickItem.bind(this);
+ }
+
+ handleOnMouseEnterRemoveItem(index, e) {
+ if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
+ this.props.onToggleOverlayRemove(index, true);
+ }
+ e.preventDefault();
+ }
+
+ handleOnMouseLeaveRemoveItem(index, e) {
+ if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
+ this.props.onToggleOverlayRemove(index, false);
+ }
+ e.preventDefault();
+ }
+
+ handleOnClickItem(index, e) {
+ if (this.props.onClickItem && this.props.isTouch) {
+ this.props.onClickItem(index);
+ }
+ e.preventDefault();
+ }
+
+ handleOnClickRemoveItem(index, e) {
+ if (this.props.onClickRemoveItem) {
+ this.props.onClickRemoveItem(index);
+ }
+ }
+
+ render() {
+ const {
+ hovered,
+ model,
+ data,
+ index,
+ first,
+ last,
+ ext_data,
+ onCardUpdate,
+ } = this.props;
+
+ let warning, options, options_data;
+ if (data && data.warnings) {
+ const warningsKeys = Object.keys(data.warnings);
+ if (warningsKeys && warningsKeys.length > 0) {
+ // we display only the first warning
+ warning = data.warnings[warningsKeys[0]];
+ }
+ }
+
+
+
+ if (data && data.options) {
+ options = data.options;
+ if (!data.options_data) data.options_data = {};
+ options_data = data.options_data;
+ options_data.ext_data = ext_data;
+ }
+
+ let render_progress;
+ if (data) {
+ switch(model.type) {
+ case 'kasli':
+ render_progress = [
+ ({`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}
),
+ ({`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}
)
+ ];
+ break;
+
+ case 'vhdcicarrier':
+ render_progress = ({`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}
);
+ break;
+
+ case 'zotino':
+ case 'hd68':
+ render_progress = ({`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}
);
+ break;
+
+ case 'clocker':
+ render_progress = ({`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}
);
+ break;
+
+ default:
+ break;
+ }
+ }
+
+ return (
+
+
+ {(provided, snapshot) => (
+
+
+ {/* warning container */}
+
+
+ {warning &&
+ (
(
+
+
+ {warning.message}
+
+
)
+ }
+ rootClose
+ >
+
+ )
+ }
+
+ {options && (
+
{
+ // console.log("construct", outvar, value, options_data);
+ options_data[outvar] = value;
+ }),
+ update: ((outvar, value) => {
+ // console.log("update", outvar, value, options_data);
+ if (outvar in options_data) options_data[outvar] = value;
+ onCardUpdate();
+ })
+ }}
+ />
+ )}
+
+
+
{model.name_number}
+
+
+
+
+
+
+ {/* remove container */}
+
+
+
+
+
Remove
+
+
+ {/* progression container */}
+ {render_progress && (
+
({render_progress}
)}
+ rootClose
+ >
+
+
+ {model.nbrSlotMax > 0 && (
+
+ )}
+
+ {model.nbrClockMax > 0 && (
+
+ )}
+
+
+ )}
+
+
+
+ )}
+
+
+ );
+ }
+}
diff --git a/static/js/shop/ProductItem.jsx b/static/js/shop/ProductItem.jsx
new file mode 100644
index 00000000..d96b8aee
--- /dev/null
+++ b/static/js/shop/ProductItem.jsx
@@ -0,0 +1,120 @@
+import React, {PureComponent} from 'react';
+import PropTypes from "prop-types";
+import {Draggable} from "react-beautiful-dnd";
+import {formatMoney, productStyle} from "./utils";
+
+/**
+ * Component that renders a product.
+ * Used in the aside (e.g backlog of product)
+ */
+export class ProductItem extends PureComponent {
+
+ static get propTypes() {
+ return {
+ id: PropTypes.string.isRequired,
+ index: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ name_codename: PropTypes.string,
+ price: PropTypes.number.isRequired,
+ currency: PropTypes.string.isRequired,
+ image: PropTypes.string.isRequired,
+ specs: PropTypes.array,
+ datasheet_file: PropTypes.string,
+ datasheet_name: PropTypes.string,
+ onClickAddItem: PropTypes.func,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
+ }
+
+ handleOnClickAddItem(id, tap, e) {
+ if (this.props.onClickAddItem) {
+ this.props.onClickAddItem(id, tap);
+ }
+ e.preventDefault();
+ }
+
+ render() {
+ const {
+ id,
+ index,
+ name,
+ name_codename,
+ price,
+ currency,
+ image,
+ specs,
+ datasheet_file,
+ datasheet_name,
+ } = this.props;
+
+ const render_specs = (specs && specs.length > 0 && (
+
+ {specs.map((spec, index) =>
+ - {spec}
+ )}
+
+ ));
+
+ const render_datasheet_link = (datasheet_file && datasheet_name && (
+
+ ));
+
+ return (
+
+
+
+
{name}
+ {name_codename ? (
+
{name_codename}
+ ) : null }
+
+
{`${currency} ${formatMoney(price)}`}
+
+ {render_specs}
+
+ {render_datasheet_link}
+
+
+
+
+
+
+
+ {(provided, snapshot) => (
+
+
+
+ {/* Allows to simulate a clone */}
+ {snapshot.isDragging && (
+
+ )}
+
+ )}
+
+
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/static/js/shop/Shop.jsx b/static/js/shop/Shop.jsx
new file mode 100644
index 00000000..a5d8e8ab
--- /dev/null
+++ b/static/js/shop/Shop.jsx
@@ -0,0 +1,886 @@
+import React, {PureComponent} from 'react';
+import PropTypes from "prop-types";
+import {FilterOptions} from "./options/utils";
+import {v4 as uuidv4} from "uuid";
+import {DragDropContext} from "react-beautiful-dnd";
+
+import {copy, itemsUnfoldedList, nbrOccupiedSlotsInCrate, remove, reorder} from "./utils";
+
+import {Layout} from "./Layout.jsx";
+import {Backlog} from "./Backlog.jsx";
+import {OrderPanel} from "./OrderPanel.jsx";
+import {CrateMode} from "./CrateMode.jsx";
+import {Crate} from "./Crate.jsx";
+import {Cart} from "./Cart.jsx";
+import {OrderSummary} from "./OrderSummary.jsx";
+import {OrderForm} from "./OrderForm.jsx";
+
+/**
+ * Component that render the entire shop
+ */
+
+export class Shop extends PureComponent {
+
+ static get propTypes() {
+ return {
+ data: PropTypes.object.isRequired,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ this.state = this.props.data;
+ this.handleCrateModeChange = this.handleCrateModeChange.bind(this);
+ this.handleOnDragEnd = this.handleOnDragEnd.bind(this);
+ this.handleDeleteItem = this.handleDeleteItem.bind(this);
+ this.handleDeleteAllItems = this.handleDeleteAllItems.bind(this);
+ this.handleMouseEnterItem = this.handleMouseEnterItem.bind(this);
+ this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
+ this.handleClickAddItem = this.handleClickAddItem.bind(this);
+ this.checkAlerts = this.checkAlerts.bind(this);
+ this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
+ this.handleClickSubmit = this.handleClickSubmit.bind(this);
+ this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
+ this.handleShowOverlayRemove = this.handleShowOverlayRemove.bind(this);
+ this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
+ this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
+ this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
+ this.handleClickOpenImport = this.handleClickOpenImport.bind(this);
+ this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this);
+ this.handleCardsUpdated = this.handleCardsUpdated.bind(this);
+
+ this.timer = null;
+ this.timer_remove = null;
+ }
+
+ componentDidMount() {
+ const source = {
+ droppableId: 'backlog',
+ indexes: [
+ itemsUnfoldedList.findIndex(element => element === "eem_pwr_mod"),
+ itemsUnfoldedList.findIndex(element => element === "kasli")
+ ],
+ };
+ const destination = {
+ droppableId: 'cart',
+ index: 0,
+ };
+
+ this.handleOnDragEnd({
+ source,
+ destination
+ });
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ /**
+ * We check alerts (reminder + warning) only when items inside crate or
+ * crate mode change.
+ *
+ * In the function checkAlerts, we DO NOT want to change items as we will
+ * trigger again this function (componentDidUpdate) and thus,
+ * making an infinite loop.
+ */
+ if (
+ (prevState.columns.cart.items !== this.state.columns.cart.items) ||
+ (prevState.currentMode !== this.state.currentMode)
+ ) {
+ this.checkAlerts(this.state.columns.cart.items);
+ }
+
+ if (this.state.newCardJustAdded) {
+ this.timer = setTimeout(() => {
+ this.setState({
+ newCardJustAdded: false,
+ });
+ }, 2000);
+ }
+ }
+
+ componentWillUnmount() {
+ clearTimeout(this.timer);
+ }
+
+ handleCardsUpdated() {
+ this.checkAlerts(this.state.columns.cart.items);
+ }
+
+ handleCrateModeChange(mode) {
+ this.setState({
+ currentMode: mode,
+ });
+ }
+
+ handleDeleteItem(index) {
+ let cloned = Array.from(this.state.columns.cart.items);
+ let cloned_data = Array.from(this.state.columns.cart.itemsData);
+ cloned.splice(index, 1);
+ cloned_data.splice(index, 1);
+
+ this.setState({
+ ...this.state,
+ columns: {
+ ...this.state.columns,
+ cart: {
+ ...this.state.columns.cart,
+ items: cloned,
+ itemsData: cloned_data,
+ },
+ },
+ });
+ }
+
+ handleDeleteAllItems() {
+ this.setState({
+ ...this.state,
+ columns: {
+ ...this.state.columns,
+ cart: {
+ ...this.state.columns.cart,
+ items: [],
+ itemsData: []
+ },
+ },
+ });
+ }
+
+ handleMouseEnterItem(id) {
+ this.setState({
+ ...this.state,
+ currentItemHovered: id,
+ });
+ }
+
+ handleMouseLeaveItem() {
+ this.setState({
+ ...this.state,
+ currentItemHovered: null,
+ });
+ }
+
+ handleClickAddItem(index, tap) {
+ const source = {
+ droppableId: 'backlog',
+ index: index,
+ };
+ const destination = {
+ droppableId: 'cart',
+ index: this.state.columns.cart.items.length,
+ };
+
+ this.handleOnDragEnd({
+ source,
+ destination
+ }, tap);
+ }
+
+ handleClickSelectItem(index) {
+ const itemsCloned = Array.from(this.state.columns.cart.items);
+
+ this.setState({
+ ...this.state,
+ columns: {
+ ...this.state.columns,
+ cart: {
+ ...this.state.columns.cart,
+ items: itemsCloned.map((item, id) => {
+ return {...item, selected: id === index ? true : false};
+ }),
+ }
+ },
+ });
+ }
+
+ handleToggleOverlayRemove(index, show) {
+ const itemsCloned = Array.from(this.state.columns.cart.items);
+
+ this.setState({
+ ...this.state,
+ columns: {
+ ...this.state.columns,
+ cart: {
+ ...this.state.columns.cart,
+ items: itemsCloned.map((item, id) => {
+ return {
+ ...item,
+ showOverlayRemove: id === index ? show : false
+ };
+ }),
+ }
+ },
+ });
+ }
+
+ handleShowOverlayRemove(index) {
+ if (this.timer_remove)
+ clearTimeout(this.timer_remove);
+
+ this.handleToggleOverlayRemove(index, true);
+
+ this.timer_remove = setTimeout(() => {
+ this.handleToggleOverlayRemove(index, false);
+ }, 2000);
+ }
+
+ handleClickShowOrder() {
+ const crate = {
+ items: [],
+ type: this.state.currentMode,
+ };
+ const clonedCart = Array.from(this.state.columns.cart.items);
+ const clonedCartData = Array.from(this.state.columns.cart.itemsData);
+ for (const i in clonedCart) {
+ const item = clonedCart[i];
+ const item_data = clonedCartData[i];
+ crate.items.push({
+ 'pn': item.name_number,
+ 'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null,
+ });
+ }
+
+ this.setState({
+ isProcessing: false,
+ shouldShowRFQFeedback: true,
+ RFQBodyType: 'show',
+ RFQBodyOrder: JSON.stringify(crate, null, 2),
+ });
+ }
+
+ handleClickOpenImport() {
+ this.setState({
+ isProcessing: false,
+ shouldShowRFQFeedback: true,
+ RFQBodyType: 'import',
+ });
+ }
+
+ handleLoadCustomConf(customconf) {
+ if (!customconf) {return; }
+
+ const items = this.props.data.items;
+
+ let new_items = [];
+ let new_items_data = [];
+
+
+ this.setState({
+ ...this.state,
+ columns: {
+ ...this.state.columns,
+ cart: {
+ ...this.state.columns.cart,
+ items: [],
+ },
+ },
+ }, function () {
+
+ customconf.items.map(function (item) {
+ Object.keys(items).map(key => {
+ if (item.pn && item.pn === items[key].name_number) {
+ new_items.push(Object.assign({
+ ...items[key],
+ }, {
+ id: uuidv4(),
+ options_data: item.options ? item.options : null,
+ }));
+ new_items_data.push({options_data: item.options ? item.options : null});
+ }
+ });
+
+ return item;
+ });
+
+ this.setState({
+ ...this.state,
+ columns: {
+ ...this.state.columns,
+ cart: {
+ ...this.state.columns.cart,
+ items: new_items,
+ itemsData: new_items_data,
+ },
+ },
+ currentMode: customconf.type,
+ });
+ });
+ }
+
+ handleClickSubmit(note, email) {
+ const crate = {
+ items: [],
+ type: this.state.currentMode,
+ };
+ const clonedCart = Array.from(this.state.columns.cart.items);
+ const clonedCartData = Array.from(this.state.columns.cart.itemsData);
+ for (const i in clonedCart) {
+ const item = clonedCart[i];
+ const item_data = clonedCartData[i];
+ crate.items.push({
+ 'pn': item.name_number,
+ 'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null,
+ });
+ }
+
+ const {data} = this.props;
+
+ this.setState({isProcessing: true});
+
+ fetch(data.API_RFQ, {
+ method: "POST",
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({
+ email,
+ note,
+ configuration: JSON.stringify(crate)
+ })
+ }).then(response => {
+ if (response.status !== 200) {
+ throw Error("Response status is not OK: " + response.status + ".\n" + response);
+ }
+ this.setState({
+ isProcessing: false,
+ shouldShowRFQFeedback: true,
+ RFQBodyType: 'email',
+ isProcessingComplete: true,
+ });
+ }).catch(err => {
+ console.error("Request failed, reason:", err)
+ this.setState({isProcessing: false}, () => {
+ alert("We cannot receive your request. Try using the export by coping the configuration and send it to us at sales@m-labs.hk");
+ });
+ })
+ }
+
+ handleOnDragEnd(result, newAdded) {
+ const {
+ source,
+ destination,
+ } = result;
+ let dragged_items = [];
+ if (source.indexes) {
+ source.indexes.forEach((card_index, _) => {
+ dragged_items.push(itemsUnfoldedList[card_index]);
+ })
+ } else if (source.index >= 0) {
+ dragged_items.push(itemsUnfoldedList[source.index]);
+ }
+
+
+ if (!destination) {
+ if (source.droppableId === 'cart') {
+ this.setState({
+ ...this.state,
+ newCardJustAdded: false,
+ columns: {
+ ...this.state.columns,
+ [source.droppableId]: {
+ ...this.state.columns[source.droppableId],
+ items: remove(
+ this.state.columns[source.droppableId].items,
+ source.index,
+ ),
+ itemsData: remove(
+ this.state.columns[source.droppableId].itemsData,
+ source.index,
+ )
+ },
+ },
+ });
+ }
+
+ return;
+ }
+
+ switch(source.droppableId) {
+
+ case 'backlog':
+ if (source.droppableId !== destination.droppableId) {
+ this.setState({
+ ...this.state,
+ newCardJustAdded: newAdded ? true : false,
+ columns: {
+ ...this.state.columns,
+ [destination.droppableId]: {
+ ...this.state.columns[destination.droppableId],
+ items: copy(
+ this.state.items,
+ this.state.columns[source.droppableId],
+ this.state.columns[destination.droppableId],
+ dragged_items,
+ destination,
+ ),
+ },
+ },
+ });
+ }
+ break;
+
+ case destination.droppableId:
+ this.setState({
+ ...this.state,
+ newCardJustAdded: false,
+ columns: {
+ ...this.state.columns,
+ [destination.droppableId]: {
+ ...this.state.columns[destination.droppableId],
+ items: reorder(
+ this.state.columns[destination.droppableId].items,
+ source.index,
+ destination.index,
+ ),
+ itemsData: reorder(
+ this.state.columns[destination.droppableId].itemsData,
+ source.index,
+ destination.index,
+ ),
+ },
+ },
+ });
+ break;
+
+ default:
+ break;
+ }
+ }
+
+ handleClickToggleMobileSideMenu() {
+ this.setState({
+ ...this.state,
+ mobileSideMenuShouldOpen: !this.state.mobileSideMenuShouldOpen,
+ });
+ }
+
+ handleClickCloseRFQFeedback() {
+ this.setState({
+ shouldShowRFQFeedback: false,
+ });
+ }
+
+ checkAlerts(newItems) {
+ console.log('--- START CHECKING CRATE WARNING ---');
+
+ const {
+ currentMode,
+ crateModeSlots,
+ crateRules,
+ } = this.state;
+
+ const itemsCloned = Array.from(newItems);
+ const itemsData = [];
+ const rules = {};
+
+ itemsCloned.forEach((elem, idx) => {
+ if (!(idx in itemsData)) itemsData[idx] = elem;
+ if (idx in this.state.columns.cart.itemsData && this.state.columns.cart.itemsData[idx].options_data) {
+ itemsCloned[idx].options_data = this.state.columns.cart.itemsData[idx].options_data;
+ }
+ itemsData[idx].warnings = {};
+ });
+
+
+ // check number of slot in crate
+ const nbrOccupied = nbrOccupiedSlotsInCrate(newItems);
+ if (nbrOccupied > crateModeSlots[currentMode]) {
+ rules[crateRules.maxSlot.type] = {...crateRules.maxSlot};
+ } else if (crateModeSlots[currentMode] === 21 && nbrOccupied <= 10) {
+ rules[crateRules.compactSlot.type] = {...crateRules.compactSlot};
+ }
+
+
+ // check the number of EEM connectors available for all Kasli
+ const idxK = itemsCloned.reduce((prev, next, i) => {
+ if (next.type === 'kasli' || next.type === 'vhdcicarrier') {
+ prev.push(i);
+ }
+ return prev;
+ }, []);
+ for (let i = 0; i <= idxK.length - 1; i++) {
+ let slots;
+ let nbUsedSlot = 0;
+ let nbrCurrentClock = 0;
+ let idx = idxK[i];
+
+ if (i !== idxK.length - 1) {
+ slots = itemsCloned.slice(idx + 1, idxK[i + 1]);
+ } else {
+ slots = itemsCloned.slice(idx + 1);
+ }
+
+ if (i == 0) {
+ const slots_need_resource = itemsCloned.slice(0, idx);
+ const idx_need = slots_need_resource.findIndex(e => (e.rules && e.rules.resources));
+
+ if (idx_need != -1) {
+ if (idx_need in itemsData) {
+ if ('warnings' in itemsData[idx_need]) {
+ itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
+ } else {
+ itemsData[idx_need].warnings = {};
+ itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
+ }
+ } else {
+ itemsData[idx_need] = {...itemsCloned[idx_need]};
+ itemsData[idx_need].warnings = {};
+ itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
+ }
+ }
+ }
+
+ const process_slots = (item) => {
+ if (!item.options_data
+ || item.options_data.ext_pwr === false
+ || item.options_data.mono_eem === false
+ )
+ return item.slotOccupied;
+ else if (item.options_data.ext_pwr === true)
+ return 0;
+ else if (item.options_data.mono_eem === true || item.options_data.n_eem === "1 EEM")
+ return 1;
+ else if (item.options_data.n_eem === "3 EEM")
+ return 3;
+
+ return item.slotOccupied;
+ }
+
+ nbUsedSlot = slots
+ .filter(item => item.type !== 'idc-bnc')
+ .reduce((prev, next) => {
+ return prev + process_slots(next);
+ }, 0);
+
+ nbrCurrentClock = slots
+ .reduce((prev, next) => {
+ return next.type === 'clocker' ? prev + ((next.options_data && next.options_data.ext_clk === true) ? 0 : next.clockOccupied) : prev;
+ }, 0);
+
+ if (idx in itemsData) {
+ itemsData[idx].nbrCurrentSlot = nbUsedSlot;
+ itemsData[idx].nbrCurrentClock = nbrCurrentClock;
+ if (!('warnings' in itemsData[idx])) {
+ itemsData[idx].warnings = {};
+ }
+ } else {
+ itemsData[idx] = {...itemsCloned[idx]};
+ itemsData[idx].nbrCurrentSlot = nbUsedSlot;
+ itemsData[idx].nbrCurrentClock = nbrCurrentClock;
+ itemsData[idx].warnings = {};
+ }
+
+ if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
+ if (itemsCloned[idx].rules.maxSlot.message) {
+ rules[itemsCloned[idx].rules.maxSlot.type] = {...itemsCloned[idx].rules.maxSlot};
+ }
+ itemsData[idx].warnings.maxSlotWarning = {...itemsCloned[idx].rules.maxSlotWarning};
+ }
+
+ if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) {
+ rules[itemsCloned[idx].rules.maxClock.type] = {...itemsCloned[idx].rules.maxClock};
+ itemsData[idx].warnings.maxClockWarning = {...itemsCloned[idx].rules.maxClockWarning};
+ }
+
+ if (itemsCloned.length > (idx + 1)) {
+ const ddkali = itemsCloned[idx + 1];
+ if (ddkali.type === 'kasli' || ddkali.type === 'vhdcicarrier') {
+ rules[ddkali.rules.follow.type] = {...ddkali.rules.follow};
+ }
+ }
+ }
+
+ if (idxK.length === 0) {
+ const slots_need_resource = itemsCloned.slice(0);
+ const idx_need = slots_need_resource.findIndex(e => (e.rules && e.rules.resources));
+
+ if (idx_need != -1) {
+ if (idx_need in itemsData) {
+ if ('warnings' in itemsData[idx_need]) {
+ itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
+ } else {
+ itemsData[idx_need].warnings = {};
+ itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
+ }
+ } else {
+ itemsData[idx_need] = {...itemsCloned[idx_need]};
+ itemsData[idx_need].warnings = {};
+ itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
+ }
+ }
+ }
+
+
+ // check number of clock connector available
+ const idxC = itemsCloned.reduce((prev, next, i) => {
+ if (next.type === 'kasli' || next.type === 'clocker') {
+ prev.push(i);
+ }
+ return prev;
+ }, []);
+ for (let i = 0; i <= idxC.length - 1; i++) {
+ let slots;
+ let nbrCurrentClock = 0;
+ let idx = idxC[i];
+
+ if (i !== idxC.length - 1) {
+ slots = itemsCloned.slice(idx + 1, idxC[i + 1]);
+ } else {
+ slots = itemsCloned.slice(idx + 1);
+ }
+
+ nbrCurrentClock = slots.reduce((prev, next) => {
+ return prev + ((next.options_data && next.options_data.ext_clk && next.options_data.ext_clk.checked) ? 0 : next.clockOccupied);
+ }, 0);
+
+ if (idx in itemsData) {
+ if (itemsData[idx].nbrCurrentClock && itemsData[idx].type !== "clocker") {
+ itemsData[idx].nbrCurrentClock += nbrCurrentClock;
+ } else {
+ itemsData[idx].nbrCurrentClock = nbrCurrentClock;
+ }
+ } else {
+ itemsData[idx] = {...itemsCloned[idx]};
+ itemsData[idx].nbrCurrentClock = nbrCurrentClock;
+ itemsData[idx].warnings = {};
+ }
+
+ if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) {
+ rules[itemsCloned[idx].rules.maxClock.type] = {...itemsCloned[idx].rules.maxClock};
+ itemsData[idx].warnings.maxClockWarning = {...itemsCloned[idx].rules.maxClockWarning};
+ }
+ }
+
+
+ if (itemsCloned.find(elem => elem.type === 'urukul')) {
+ if (this.state.items['urukul'].rules.info) {
+ rules[this.state.items['urukul'].rules.info.type] = {...this.state.items['urukul'].rules.info};
+ }
+ }
+
+
+ // check if IDC-BNC is correctly positionned (after Zotino or HD68)
+ const idxIDCBNC = itemsCloned.reduce((prev, next, i) => {
+ if (next.type === 'idc-bnc') {
+ prev.push(i);
+ }
+ return prev;
+ }, []);
+ for (var i = idxIDCBNC.length - 1; i >= 0; i--) {
+ const ce = idxIDCBNC[i];
+ let shouldWarning = false;
+
+ if (ce == 0) {
+ shouldWarning = true;
+ } else if (ce >= 1) {
+ const pe = idxIDCBNC[i] - 1;
+ if (itemsCloned[pe].type !== 'zotino' &&
+ itemsCloned[pe].type !== 'hd68' &&
+ itemsCloned[pe].type !== 'idc-bnc') {
+ shouldWarning = true;
+ }
+ }
+
+ if (shouldWarning) {
+ itemsData[ce] = {...itemsCloned[ce]};
+ itemsData[ce].warnings = {};
+ itemsData[ce].warnings.wrong = {...itemsCloned[ce].rules.wrong};
+ }
+ }
+
+
+ // check number of IDC-BNC adapters for a Zotino and HD68-IDC
+ const idxZH = itemsCloned.reduce((prev, next, i) => {
+ if (next.type === 'zotino' || next.type === 'hd68') {
+ prev.push(i);
+ }
+ return prev;
+ }, []);
+ for (let i = 0; i <= idxZH.length - 1; i++) {
+ let slots;
+ let nbUsedSlot = 0;
+ let idx = idxZH[i];
+
+ if (i !== idxZH.length - 1) {
+ slots = itemsCloned.slice(idx + 1, idxZH[i + 1]);
+ } else {
+ slots = itemsCloned.slice(idx + 1);
+ }
+
+ let stopCount = false;
+ nbUsedSlot = slots.reduce((prev, next, ci, ca) => {
+ if (ci === 0 && next.type === 'idc-bnc') {
+ return prev + 1;
+ } else if (ca[0].type === 'idc-bnc' && ci > 0 && ca[ci - 1].type === 'idc-bnc') {
+ if (next.type !== 'idc-bnc') { stopCount = true; }
+ return prev + (next.type === 'idc-bnc' && !stopCount ? 1 : 0);
+ }
+ return prev;
+ }, 0);
+
+ if (idx in itemsData) {
+ itemsData[idx].nbrCurrentSlot = nbUsedSlot;
+ if (!('warnings' in itemsData[idx])) {
+ itemsData[idx].warnings = {};
+ }
+ } else {
+ itemsData[idx] = {...itemsCloned[idx]};
+ itemsData[idx].nbrCurrentSlot = nbUsedSlot;
+ itemsData[idx].warnings = {};
+ }
+
+ if (nbUsedSlot > 0) {
+ if (itemsCloned[idx].rules.maxSlot.message) {
+ rules[itemsCloned[idx].rules.maxSlot.type] = {...itemsCloned[idx].rules.maxSlot};
+ }
+ }
+ if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
+ itemsData[idx].warnings.maxSlotWarning = {...itemsCloned[idx].rules.maxSlotWarning};
+ }
+
+ // check if HD68-IDC has at least 1 IDC-BNC adapter
+ if (itemsCloned[idx].type === 'hd68') {
+ let shouldWarning = false;
+
+ if (idx < itemsCloned.length - 1) {
+ if (itemsCloned[idx + 1].type !== 'idc-bnc') {
+ shouldWarning = true;
+ }
+ } else if (idx === itemsCloned.length - 1) {
+ shouldWarning = true;
+ }
+
+ if (shouldWarning) {
+ if (idx in itemsData) {
+ itemsData[idx].warnings.minAdapter = {...itemsCloned[idx].rules.minAdapter};
+ } else {
+ itemsData[idx] = {...itemsCloned[idx]};
+ itemsData[idx].warnings = {};
+ itemsData[idx].warnings.minAdapter = {...itemsCloned[idx].rules.minAdapter};
+ }
+ }
+ }
+ }
+
+ // update state with rules
+ this.setState({
+ ...this.state,
+ columns: {
+ ...this.state.columns,
+ cart: {
+ ...this.state.columns.cart,
+ itemsData: itemsData,
+ }
+ },
+ rules: {
+ ...rules,
+ },
+ });
+ }
+
+ render() {
+
+ const {
+ currency,
+ currentItemHovered,
+ currentMode,
+ crateModeSlots,
+ crateModeItems,
+ items,
+ columns,
+ rules,
+ mobileSideMenuShouldOpen,
+ newCardJustAdded,
+ isProcessing,
+ shouldShowRFQFeedback,
+ RFQBodyType,
+ RFQBodyOrder,
+ isProcessingComplete,
+ } = this.state;
+
+ const isMobile = window.deviceIsMobile();
+ const isTouch = window.isTouchEnabled();
+
+ return (
+
+
+
+
+ }
+ main={(
+ Drag and drop the cards you want into the crate below to see how the combination would look like. Setup card's configuration by tapping at the top of the card, most of the options can be modified after shipment. If you have any issues with this ordering system, or if you need other configurations, email us directly anytime at sales@m-labs.hk. The price is estimated and must be confirmed by a quote.