https://thebeautrium.com/static/js/SelectShade.a4af5790.chunk.js

1(window["webpackJsonpreviewed-based-shopping-frontend"]=window["webpackJsonpreviewed-based-shopping-frontend"]||[]).push([[67],{1523:function(a,e,t){"use strict";t.r(e);t(976);var n=t(0),r=t.n(n),l=t(15),i=t(112),s=t(12),c=t(3),m=t.n(c),o=t(897),d=t(6),u=t(269);class v extends n.Component{constructor(a){super(a),this.state={qty:1,currentVariants:this.getCurrentVariants(this.props.material),variantIndex:-1,imageIndex:"image_1",ratingValue:0},this.changeVariant=this.changeVariant.bind(this),this.changeVariantID=this.changeVariantID.bind(this)}componentDidMount(){const{params:a}=this.props.match;this.props.getProduct(a.mat_id,!0)}componentDidUpdate(a){m.a.isEqual(this.props.match.params,a.match.params)||this.props.getProduct(this.props.match.params.mat_id,!0)}getCurrentVariants(a){if(null===a)return[];let e=[];return null!==a.variant_type_1&&(e[a.variant_type_1]={name:a.variant_name_1,code:a.variant_code_1}),a.variant_type_2&&(e[a.variant_type_2]={name:a.variant_name_2,code:a.variant_code_2}),a.variant_type_3&&(e[a.variant_type_3]={name:a.variant_name_3,code:a.variant_code_3}),a.variant_type_4&&(e[a.variant_type_4]={name:a.variant_name_4,code:a.variant_code_4}),a.variant_type_5&&(e[a.variant_type_5]={name:a.variant_name_5,code:a.variant_code_5}),e}getAllVariantsValue(a,e){let t=m.a.sortBy(m.a.filter(m.a.uniqBy(m.a.map(e.variants,e=>Object(s.r)(e,a)),"name"),a=>a.name),"name");if(null===t[0])return null;"Visual Acuity"===a&&(t=m.a.sortBy(t,a=>-parseFloat(a.name)));const n=m.a.filter(t,a=>a&&a.name);return m.a.map(n,a=>{a.label=a.name+(a.sold_out?" - \u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e2b\u0e21\u0e14":""),a.value=a.name,delete a.name,delete a.code}),t}changeVariant(a,e){const{currentVariants:t}=this.state,{material:n}=this.props;let r=JSON.parse(JSON.stringify(t));r[a]=e;const l=m.a.findIndex(n.variants,a=>{let e=!0;for(var t in r){let n=!1;const l=Object(s.r)(a,t);n=!!l&&l.name===(r[t].name?r[t].name:r[t].value),e=e&&n}return e});this.setState({currentVariants:r,variantIndex:l})}changeVariantID(a,e){const t=e||this.props.material;if(t){const e=t.variants,n=m.a.findIndex(e,e=>parseInt(e.mat_var_id,10)===parseInt(a,10));this.setState({variantIndex:n})}}renderSizes(a,e){const t=/\d+(\.\d+)?/,n=m.a.sortBy(a,[function(a){return a.volume.match(t)?+a.volume.match(t)[0]:0}]);return m.a.map(n,a=>{let t="/item/".concat(a.mat_id);return a.mat_var_id&&(t+="/".concat(a.mat_var_id)),t+="/selectshade",r.a.createElement(o.a,{key:a.mat_id+"_"+a.volume,to:t,className:"mat-size ".concat(a.mat_id===e?"active":"")},r.a.createElement("span",null,a.volume))})}render(){const{material:a}=this.props,{mat_var_id:e}=this.props.match.params,{variantIndex:t}=this.state;let n;if(null==a)return null;if("PRODUCT_NOT_FOUND"===a.code)return this.props.history.push("/404"),null;if(-1!==t)n=Object.assign({},a,a.variants[t]);else{const t=m.a.filter(a.variants,a=>a.mat_var_id===+e);n=t.length<1?Object.assign({},a,a.variants[0]):Object.assign({},a,t[0])}const l=n.sizes;return r.a.createElement("div",{id:"product"},r.a.createElement("div",{className:"container"},r.a.createElement("div",{className:"breadcrumb-container d-none d-xl-flex"},r.a.createElement("ul",{className:"bt-breadcrumb"},r.a.createElement("li",null,r.a.createElement(o.a,{to:"/"},"Home"),r.a.createElement(d.a,{icon:["fal","chevron-right"],className:"ml-2"})),r.a.createElement("li",null,r.a.createElement(o.a,{to:"/shop/".concat(n.brand_en)},n.brand_en),r.a.createElement(d.a,{icon:["fal","chevron-right"],className:"ml-2"})),r.a.createElement("li",null,n.mat_name))),r.a.createElement("div",{className:"product-image-detail-row row"},r.a.createElement("span",{className:"image col-xl-5 col-md-6 col-lg-6 d-xl-inline-block"},r.a.createElement("div",{className:"image-container"},r.a.createElement("img",{alt:"",onClick:()=>this.setState({imageIndex:"image_1"}),src:n.image_1}))),r.a.createElement("span",{className:"product-detail col-12 col-xl-6"},r.a.createElement("div",{className:"brand"},n.brand_en),r.a.createElement("h1",{className:"name"},n.mat_name),r.a.createElement("div",{className:"variants"},l&&l.length>0&&l[0].volume&&r.a.createElement("div",{className:"order-1 order-xl-2 sizes row"},r.a.createElement("div",{className:"col-2 title"},"\u0e02\u0e19\u0e32\u0e14:"),r.a.createElement("div",{className:"col-10 sizes-list"},this.renderSizes(l,n.mat_id))),this.getAllVariantsValue("Colour",n)&&this.getAllVariantsValue("Colour",n).length>0&&r.a.createElement("div",{className:"variant row"},r.a.createElement("span",{className:"col-2"},"\u0e2a\u0e35: "),r.a.createElement("span",{className:"col-6"},r.a.createElement(u.a,{options:this.getAllVariantsValue("Colour",n),selected:(()=>{const a=Object(s.r)(n,"Colour");return a?{label:a.name,value:a.name}:null})(),onChange:a=>{this.changeVariant("Colour",a)}}))),this.getAllVariantsValue("Style",n)&&this.getAllVariantsValue("Style",n).length>0&&r.a.createElement("div",{className:"variant row"},r.a.createElement("span",{className:"col-2"},"\u0e2a\u0e44\u0e15\u0e25\u0e4c: "),r.a.createElement("span",{className:"col-6"},r.a.createElement(u.a,{options:this.getAllVariantsValue("Style",n),selected:(()=>{const a=Object(s.r)(n,"Style");return a?{label:a.name,value:a.name}:null})(),onChange:a=>{this.changeVariant("Style",a)}}))),this.getAllVariantsValue("Visual Acuity",n)&&this.getAllVariantsValue("Style",n).length>0&&r.a.createElement("div",{className:"variant row"},r.a.createElement("div",{className:"col-2"},"\u0e04\u0e48\u0e32\u0e2a\u0e32\u0e22\u0e15\u0e32: "),r.a.createElement("div",{className:"col-6"},r.a.createElement(u.a,{options:this.getAllVariantsValue("Visual Acuity",n),selected:(()=>{const a=Object(s.r)(n,"Visual Acuity");return a?{label:a.name,value:a.name}:null})(),onChange:a=>{this.changeVariant("Visual Acuity",a)}})))),r.a.createElement("div",{className:""},r.a.createElement(o.a,{to:"/item/".concat(n.mat_id,"/").concat(t>=0?n.variants[t].mat_var_id:n.mat_var_id,"/addreview")},r.a.createElement("button",{className:"btn btn-black my-3",type:"submit"},"\u0e23\u0e35\u0e27\u0e34\u0e27\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32")))))))}}e.default=Object(l.connect)((function(a){return{material:a.materials.material,material_err:a.materials.material_err}}),{getProduct:i.f,getVariantValue:s.r})(v)}}]);
2//# sourceMappingURL=SelectShade.a4af5790.chunk.js.map