https://www.optus.com.au/etc.clientlibs/aem-oca/clientlibs/clientl…/resources/666.661293dd0fdb1717.js

1"use strict";(self.webpackChunk_lux2_ssr_catalogue_sfcc=self.webpackChunk_lux2_ssr_catalogue_sfcc||[]).push([["666"],{34790:function(e,t,a){a.d(t,{$B:function(){return c},DZ:function(){return u},HG:function(){return s},Pz:function(){return f},ue:function(){return d},zW:function(){return m}});var r=a(8162),n=a(96311),i=a(57080),o=a(41320),l=a(55509);let c=r.default.label`
2  font-family: var(--bm-font-family-mark-pro);
3  font-size: ${(0,l.A)(16)};
4  line-height: ${(0,l.A)(24)};
5  margin: 0;
6  color: ${i.M8.Db};
7  cursor: default;
8  display: inline-block;
9`,d=r.default.div`
10  margin-bottom: ${(0,l.A)(16)};
11`,u=(0,r.default)(c)`
12  font-family: var(--bm-font-family-mark-pro);
13  font-weight: var(--bm-font-weight-bold);
14  display: block;
15`,f=(0,r.default)(n.A)`
16  &,
17  p,
18  a {
19    font-size: ${(0,l.A)(14)};
20  }
21
22  p {
23    margin: 0;
24  }
25`,m=r.default.div`
26  display: flex;
27  flex-wrap: wrap;
28  font-size: ${(0,l.A)(14)};
29  font-family: var(--bm-font-family-mark-pro);
30  font-weight: var(--bm-font-weight-bold);
31  color: ${i.M8.Vc};
32
33  .ProductRadioButton__RadioBtn:last-child .radio-button {
34    margin-right: 0;
35  }
36`,s=r.default.div`
37  .radio-button {
38    width: ${e=>e?.total&&e?.total>=4?(0,l.A)(72):(0,l.A)(100)};
39    border: var(--bm-border-width-md) solid ${i.M8.OA};
40    border-radius: ${(0,l.A)(5)};
41    margin-right: ${(0,l.A)(6)};
42    margin-bottom: ${(0,l.A)(10)};
43
44    @media (min-width: ${o.A.smallAndUp}px) {
45      width: ${(0,l.A)(100)};
46    }
47  }
48
49  .radio-label {
50    display: flex;
51    justify-content: center;
52    align-items: center;
53    margin: 0;
54    padding: 0;
55    background-color: ${({bgColour:e})=>e||"rgba(227, 233, 236, 0.2)"};
56    color: ${i.M8.Vc};
57    height: ${(0,l.A)(42)};
58    font-family: var(--bm-font-family-mark-pro);
59    font-weight: var(--bm-font-weight-bold);
60    line-height: ${(0,l.A)(16)};
61    border-radius: ${(0,l.A)(4)};
62    cursor: pointer;
63    :before {
64      content: none !important;
65    }
66  }
67
68  .radio-input:checked + .radio-label {
69    border: var(--bm-border-width-lg) solid ${i.M8.$S};
70    color: ${i.M8.Ql};
71    background-color: ${i.M8.ON};
72  }
73
74  .radio-input:focus-visible + .radio-label {
75    outline: medium auto currentColor;
76    outline: medium auto invert;
77    outline: ${(0,l.A)(5)} auto -webkit-focus-ring-color;
78    outline-offset: ${(0,l.A)(4)};
79  }
80`},33188:function(e,t,a){var r=a(41594),n=a(6424),i=a(30698);t.A=({realtimeDeviceId:e,leastAvailbleDeviceId:t,variants:a})=>(0,r.useMemo)(()=>{let r=(0,n.A)("deviceId");return r&&(0,i.A)(r,a)?r:e||t},[e,t,a])},6424:function(e,t){t.A=e=>new URLSearchParams(window.location.search).get(e)},2817:function(e,t,a){a.r(t),a.d(t,{mapStateToProps:function(){return m},default:function(){return b}});var r=a(52956),n=a(32485),i=a.n(n),o=a(41594),l=a.n(o),c=a(46975),d=a(34790),u=a(33188),f=a(44931),m=function(e){var t=e.productDetails;return{productSelectedCapacity:t.productSelectedCapacity,productSelectedColor:t.productSelectedColor,productSelectedMecId:t.productSelectedMecId,realtimeDeviceId:t.realtimeDeviceId}},s={setProductSelectedCapacity:f.Qe,setProductSelectedMecInfo:f.BS},b=(0,r.Ng)(m,s)(({productSelectedCapacity:e,productSelectedColor:t,productSelectedMecId:a,setProductSelectedCapacity:r,setProductSelectedMecInfo:n,title:f,leastAvailbleDeviceId:m,radio_btns:s,realtimeDeviceId:b})=>{let[p,h]=(0,o.useState)([]),[g,v]=(0,o.useState)(!1),$=(0,o.useRef)(!0),y=e=>{r(e),g||v(!0)},A=(0,u.A)({realtimeDeviceId:b,leastAvailbleDeviceId:m,variants:s});return(0,o.useEffect)(()=>{if(0===s.length||!A)return;let e=s.find(e=>e.btn_id===A);e&&r(e.value)},[s,r,A]),(0,o.useEffect)(()=>{if(!t)return;let a=s.reduce((e,a)=>(-1===a.uniqueVariation.indexOf(t)||e.push({label:a.label,value:a.value,mecId:a.btn_id,bgCapacity:a.bg_colour}),e),[]).sort((e,t)=>e.value.slice(-2)===t.value.slice(-2)?parseInt(e.value)-parseInt(t.value):e.value.slice(-2).localeCompare(t.value.slice(-2))),n=Math.max(a.findIndex(({mecId:e})=>e===A),0),i=a[n]?.value;$.current?(i&&r(i),$.current=!1):-1===a.findIndex(({value:t})=>t===e)&&i&&r(i),h(a)},[s,t,e,r,A]),(0,o.useEffect)(()=>{if(e&&t){let r,{mecId:i,mecName:o}=(r=s.find(({uniqueVariation:a})=>

80a===t+e),{mecId:r?.btn_id,mecName:r?.nameByLocale});i&&i!==a&&n(i,o)}},[t,e,s,a,n]),l().createElement(l().Fragment,null,l().createElement(d.DZ,{id:"CapacityHeader"},f,l().createElement("span",{"aria-hidden":"true"},":")," ",l().createElement(d.$B,null,e)),l().createElement(d.zW,{role:"radiogroup",className:i()("CapacitySwatchstyle__Swatches",{"btn-max-width":1===p.length}),"data-testid":"radiogroup-capacity","aria-labelledby":"CapacityHeader"},p.map((t,a)=>l().createElement(d.HG,{total:p.length,key:`${a}-${e===t.value}`,className:"ProductRadioButton__RadioBtn"},l().createElement(c.A,{radioBtnClassName:"radio-button",name:"CapacitySwatch",value:t.value,disabled:!1,checked:t.value===e,onChange:y,ariaLabel:`${t.label} capacity`,focusOnChecked:g},l().createElement("span",{"aria-hidden":"true"},t.label))))))})}}]);