{"version":3,"sources":["webpack:///./Avensia.Common/Features/Account/MyPages/OrderHistory/components/OrderListProduct.tsx","webpack:///./Avensia.Common/Features/Account/MyPages/OrderHistory/components/OrderList.tsx","webpack:///./Avensia.Common/Features/Account/MyPages/OrderHistory/index.tsx"],"names":["props","products","orderStatusDisplay","ProductsList","Status","ProductWrapper","length","map","item","idx","Product","key","CustomImage","css","imageUrl","backgroundColor","src","ratio","OneToOne","DetailsContainer","productName","returnQuantity","div","marginBottom","color","minHeight","padding","xy","display","flexFlow","maxHeight","width","flexDirection","justifyContent","paddingLeft","maxWidth","onOpenMobileProductDetail","setState","prevState","isProductsOpen","state","height","isItemOpen","myOrderDetailProdRef","clientHeight","myOrderDetailMobileRef","mounted","componentDidMount","this","updateState","addListener","componentWillUnmount","removeListener","unsubscribeResize","render","isMobile","url","shortDateCreated","currency","totalPrice","orderNumber","paymentStatus","sent","Fragment","OrderWrapper","onClick","cursor","Order","ShowOrderDetail","to","culture","CustomCheckIcon","ViewOrder","ViewOrderText","ArrowPosition","transform","OrderDetailsContainer","property","OrderDetailWrapper","ref","el","MobileHeader","Div","OrderListProduct","order","orderLineItems","Component","Check","x","y","flexBasis","position","overflow","borderBottom","style","Link","textDecoration","alignItems","marginTop","margin","right","duration","paddingBottom","overflowY","GETORDERS_URL","activateInfiniteScroll","loadSpinner","infinityScroll","unbindInfiniteScroll","MyOrdersList","currentlyReloading","hasMore","deactivateInfinityScroll","getMoreOrders","ordersUrl","pathname","searchParams","set","page","data","allData","orders","updateOrders","totalRecords","componentDidUpdate","prevstate","currentBreakpoint","Medium","FeedbackButton","feedback","Button","MyPagesBaseLayout","HeaderWrapper","Header","o","NoOrders","Pagination","variant","Large","appearance","Secondary","LoadingSpinner","maximumFulfilled","connect","appShellData","fontWeight","textAlign","Spinner"],"mappings":"wMAYe,WAACA,GACN,IAAAC,EAAA,EAAAA,SAAUC,EAAA,EAAAA,mBAClB,OACE,kBAACC,EAAY,KACX,kBAACC,EAAM,KACL,gCAAY,aAAU,wCAAuC,MAC5DF,GAEH,kBAACG,EAAc,OACVJ,GACDA,EAASK,OAAS,GAClBL,EAASM,KAAI,SAACC,EAA8BC,GAAgB,OAC1D,kBAACC,EAAO,CAACC,IAAKF,GACZ,kBAACG,EAAW,CACVC,IAAKL,EAAKM,UAAY,CAAEC,gBAAiB,MACzCC,IAAKR,EAAKM,SACVG,MAAO,IAAWC,aAEjBV,GACD,kBAACW,EAAgB,KACf,6BAAMX,EAAKY,aACVZ,EAAKa,eAAiB,GACrB,6BACM,aAAU,wCAAuC,KACpD,aAAU,mDAY3BjB,EAAS,IAAOkB,IAAI,CACxBC,aAAc,aAAa,MAGvBpB,EAAe,IAAOmB,IAAI,CAC9BP,gBAAiB,KACjBS,MAAO,KACPC,UAAW,aAAa,KACxBC,QAAS,CACPC,GAAI,aAAa,OAIftB,EAAiB,IAAOiB,IAAI,CAChCM,QAAS,OACTC,SAAU,aAGNnB,EAAU,IAAOY,MAAG,GACxBM,QAAS,OACTL,aAAc,aAAa,IAC3BO,UAAW,aAAa,KACxBC,MAAO,SACN,MAAsB,CACrBA,MAAO,O,IAILnB,EAAc,YAAO,MAAK,GAC9BmB,MAAO,aAAa,OACnB,MAAsB,CACrBA,MAAO,O,IAILZ,EAAmB,IAAOG,IAAI,CAClCM,QAAS,OACTI,cAAe,SACfC,eAAgB,eAChBC,YAAa,aAAa,IAC1BC,SAAU,Q,oCC5DZ,YAME,WAAYnC,GAAZ,MACE,YAAMA,IAAM,K,OAwCd,EAAAoC,0BAA4B,WAC1B,EAAKC,UAAS,SAACC,GAAc,OAAC,WAAD,CAAC,eACzBA,GAAS,CACZC,gBAAiB,EAAKC,MAAMD,eAC5BE,OACE,EAAKD,MAAMD,gBAAkB,EAAKC,MAAME,WACpC,aAAa,EAAKC,qBAAqBC,aAAe,EAAKC,uBAAuBD,cAClF,aAAa,EAAKD,qBAAqBC,aAAe,EAAKC,uBAAuBD,oBA7C1F,EAAKJ,MAAQ,CACXE,YAAY,EACZH,gBAAgB,EAChBE,OAAQ,EACRK,SAAS,G,EAoJf,OAjKuC,iBAiBrC,YAAAC,kBAAA,WACEC,KAAKX,UAAS,WAAM,OAAGS,SAAS,MAChCE,KAAKC,cACLD,KAAKE,eAGP,YAAAC,qBAAA,WACEH,KAAKI,kBAGP,YAAAF,YAAA,sBACM,gBACFF,KAAKK,kBAAoB,YACvB,SACA,oBAAS,WACH,EAAKb,MAAMM,SACb,EAAKG,gBAnCE,QA0CjB,YAAAA,YAAA,sBACED,KAAKX,UAAS,SAACC,GAAc,OAAC,WAAD,CAAC,eACzBA,GAAS,CACZG,OAAQ,aAAa,EAAKE,qBAAqBC,oBAenD,YAAAQ,eAAA,WACMJ,KAAKK,oBACPL,KAAKK,oBACLL,KAAKK,kBAAoB,OAI7B,YAAAC,OAAA,sBACUC,EAAA,WAAAA,SACF,aAAEb,EAAA,EAAAA,WAAYH,EAAA,EAAAA,eACd,mBACJiB,EAAA,EAAAA,IACAC,EAAA,EAAAA,iBACAC,EAAA,EAAAA,SACAC,EAAA,EAAAA,WACAC,EAAA,EAAAA,YACAC,EAAA,EAAAA,cACA3D,EAAA,EAAAA,mBACA4D,EAAA,EAAAA,KAGF,OACE,kBAAC,IAAMC,SAAQ,KACb,kBAACC,E,CACCC,QAAS,WAAM,OAAAV,GAAY,EAAKlB,SAAS,CAAEK,YAAaA,KACxD7B,IAAK0C,GAAY,CAAEW,OAAQ,YAE3B,kBAACC,EAAK,KACJ,kBAACC,EAAe,CAACC,GAAIb,GAAMI,IAE7B,kBAACO,EAAK,KAAEV,IACNF,GACA,oCACE,kBAACY,EAAK,KAAE,YAAYR,EAAYD,EAAUV,KAAKhD,MAAMsE,UACrD,kBAACH,EAAK,KACHN,E,IAAe,kBAACU,EAAe,OAElC,kBAACJ,EAAK,KACHjE,E,IAAqB4D,GAAQ,kBAACS,EAAe,QAIpD,kBAACC,E,CAECP,QAAS,WAAM,OAACV,GAAY,EAAKlB,SAAS,CAAEK,YAAaA,KACzD7B,IAAK,CAAEoB,eAAgBsB,EAAW,WAAa,gBAE7CA,GAAY,kBAACkB,EAAa,KAAE,aAAU,4CACxC,kBAACC,EAAa,CAAC7D,IAAK6B,GAAc,CAAEiC,UAAW,sBAInD,kBAACC,EAAqB,CACpB/D,IAAG,aACD4B,OAAQC,EAAaM,KAAKR,MAAMC,OAAS,GACtC,aAAW,CAAEoC,SAAU,aAG5B,kBAACC,E,CAECC,IAAK,SAACC,GAAuB,OAAC,EAAKrC,qBAAuBqC,IAEzDzB,EACC,kBAAC0B,EAAY,KACX,6BACG,aAAU,0C,KAA6CrB,GAE1D,6BACG,aAAU,yC,KAA4CH,GAEzD,6BACM,aAAU,qCAAoC,KACjD,YAAYE,EAAYD,EAAUV,KAAKhD,MAAMsE,UAEhD,6BACG,aAAU,+C,KAAkDT,GAE/D,6BACG,aAAU,6C,KAAgD3D,GAE7D,kBAACsE,EAAS,CAACP,QAASjB,KAAKZ,2BACvB,kBAACqC,EAAa,KAAE,aAAU,6CAE5B,kBAAC,IAAOS,IAAG,CAACrE,IAAK,CAAE4B,OAAQF,EAAiB,OAAS,IACnD,kBAACuC,E,CAECC,IAAK,SAACC,GAAuB,OAAC,EAAKnC,uBAAyBmC,IAE5D,kBAACG,EAAgB,CACflF,SAAU+C,KAAKhD,MAAMoF,MAAMC,eAC3BnF,mBAAoBA,OAM5B,kBAACiF,EAAgB,CAAClF,SAAU+C,KAAKhD,MAAMoF,MAAMC,eAAgBnF,mBAAoBA,QAO/F,EAjKA,CAAuC,IAAMoF,WAmKvCf,EAAkB,YAAOgB,EAAA,EAAO,CACpC/D,MAAO,MAGHwC,EAAe,IAAO1C,IAAI,CAC9BM,QAAS,OACTK,eAAgB,gBAChBP,QAAS,CACP8D,EAAG,EACHC,EAAG,aAAa,OAIdtB,EAAQ,IAAO7C,MAAG,GACtBoE,UAAW,QACV,MAAsB,CACrBA,UAAW,O,IAITd,EAAwB,IAAOtD,IAAI,CACvCqE,SAAU,WACVC,SAAU,SACVC,aAAc,CACZrE,MAAO,KACPsE,MAAO,QACP/D,MAAO,aAAa,MAIlBqC,EAAkB,YAAO2B,EAAA,EAAM,CACnCC,eAAgB,YAChBxE,MAAO,MAGHgD,EAAY,IAAOlD,MAAG,GAC1B2E,WAAY,SACZ/B,OAAQ,UACRtC,QAAS,OACT8D,UAAW,QACV,MAAsB,CACrBA,UAAW,O,IAITjB,EAAgB,IAAOnD,MAAG,GAC9BC,aAAc,aAAa,IAC3B2E,UAAW,aAAa,IACxBF,eAAgB,cACf,MAAsB,CACrBG,OAAQ,CACNV,EAAG,EACHW,MAAO,aAAa,M,IAKpB1B,EAAgB,YAAO,IAAM,2BAC9B,aAAW,CACZG,SAAU,YACVwB,SAAU,OACV,CACF5D,OAAQ,aAAa,GACrBV,MAAO,aAAa,OAGhB+C,EAAqB,IAAOxD,IAAI,CACpCgF,cAAe,EACfC,UAAW,WAGPtB,EAAe,IAAO3D,IAAI,CAC9B4E,UAAW,aAAa,IACxBK,UAAW,W,0CCxOPC,EAAgB,aAEtB,cAGE,WAAYxG,GAAZ,MACE,YAAMA,IAAM,K,OAyBd,EAAAyG,uBAAyB,WACvB,EAAKC,cACL,EAAKrE,SAAS,CAAEsE,gBAAgB,IAChC,EAAKC,qBAAuB,YAAmB,EAAKC,aAAc,EAAKH,aAAc,MAGvF,EAAAA,YAAc,WACP,EAAKlE,MAAMsE,qBACV,EAAKC,UACP,EAAK1E,SAAS,CACZyE,oBAAoB,IAGtB,EAAKE,6BAKX,EAAAC,cAAgB,0D,uEACRC,EAAY,IAAI,IAAK,aAAY,cAAaC,SAAUX,KACpDY,aAAaC,IAAI,OAAQ,IAAGrE,KAAKR,MAAM8E,KAAO,I,iBAEzC,O,sBAAA,GAAM,YAAQJ,I,cAArBK,EAAO,SACPC,EAAU,YAAIxE,KAAKR,MAAMiF,OAAWF,GAC1CvE,KAAK0E,aAAaF,G,6BAGlBxE,KAAKX,SAAS,CACZyE,oBAAoB,I,+BAK1B,EAAAY,aAAe,SAACD,GACd,EAAKpF,SAAS,CACZoF,OAAM,EACNH,KAAM,EAAK9E,MAAM8E,KAAO,EACxBR,oBAAoB,KAIxB,EAAAC,QAAU,WACR,OAAO,EAAK/G,MAAM2H,aAAe,EAAKnF,MAAMiF,OAAOnH,QAlEnD,EAAKkC,MAAQ,CACX8E,KAAM,EACNG,OAAQzH,EAAMyH,OACdd,gBAAgB,EAChBG,oBAAoB,G,EA+G1B,OAxH+B,iBAY7B,YAAA3D,qBAAA,WACEH,KAAKgE,4BAEP,YAAAY,mBAAA,SAAmB,EAAIC,GACjB7E,KAAKR,MAAMsE,qBAAuBe,EAAUf,oBAC9C9D,KAAKiE,iBAGT,YAAAD,yBAAA,WACMhE,KAAKR,MAAMmE,gBACb3D,KAAKX,SAAS,CAAEsE,gBAAgB,IAE9B3D,KAAK4D,sBACP5D,KAAK4D,wBAiDT,YAAAtD,OAAA,sBACQC,EAAWP,KAAKhD,MAAM8H,kBAAoB,IAAWC,OACrD,aAAEN,EAAA,EAAAA,OAAQd,EAAA,EAAAA,eAAgBG,EAAA,EAAAA,mBAC1BkB,EAAiBhF,KAAKhD,MAAMiI,SAASC,OAE3C,OACE,gBAACC,EAAA,EAAiB,eAAKnF,KAAKhD,OAC1B,gBAACoI,EAAa,KACZ,gBAACC,EAAM,KAAE,aAAU,4CACjB9E,GACA,gCACE,gBAAC8E,EAAM,KAAE,aAAU,0CACnB,gBAACA,EAAM,KAAE,aAAU,sCACnB,gBAACA,EAAM,KAAE,aAAU,gDACnB,gBAACA,EAAM,KAAE,aAAU,8CACnB,gBAACA,EAAM,QAIb,uBAAKtD,IAAK,SAAAC,GAAM,OAAC,EAAK6B,aAAe7B,IAChCyC,GAAUA,EAAOnH,OAAS,EAC3BmH,EAAOlH,KAAI,SAAC+H,EAAG7H,GAAQ,uBAAC,EAAS,CAACE,IAAKF,EAAK2E,MAAOkD,EAAG/E,SAAUA,EAAUe,QAAS,EAAKtE,MAAMsE,aAE9F,gBAACiE,EAAQ,KAAE,aAAU,4CAGzB,gBAACC,EAAU,MACP1B,IAAuBH,GAAkB3D,KAAK+D,WAC9C,gBAACiB,EAAc,CACbnH,IAAK,CACHa,QAAS,CACP8D,EAAG,MAGPiD,QAASP,EAAA,EAAcQ,MACvBC,WAAYT,EAAA,EAAiBU,UAC7B3E,QAASjB,KAAKyD,wBAEb,aAAU,6BAGdK,GAAsB,gBAAC+B,EAAc,SAKhD,EAxHA,CAA+B,aAiIzBT,GAPS,sBAAoB,CAAEU,iBAAkB,GAAxC,CACb,OAAAC,EAAA,IAAQ,SAAAvG,GAAS,OACfsF,kBAAmBtF,EAAMsF,kBACzBxD,QAAS9B,EAAMwG,aAAa1E,WAF9B,CAGI,IAGgB,IAAOhD,IAAI,CAC/BuE,aAAc,CACZrE,MAAO,KACPsE,MAAO,QACP/D,MAAO,aAAa,IAEtBH,QAAS,OACTK,eAAgB,gBAChBiE,UAAW,aAAa,IACxBI,cAAe,aAAa,OAGxB+B,EAAS,IAAO/G,IAAI,CACxBoE,UAAW,MACXuD,WAAY,SAGRV,EAAW,YAAO,IAAI,CAC1BrC,UAAW,aAAa,IACxBgD,UAAW,WAGPV,EAAa,IAAOlH,IAAI,CAC5BM,QAAS,QACTsH,UAAW,SACX/C,OAAQ,CACNV,EAAG,aAAa,OAIdoD,EAAiB,YAAOM,EAAA,IAAO,GACnCvH,QAAS,OACTqE,WAAY,SAEZE,OAAQ,CACNX,EAAG,OACHC,EAAG,aAAa,OAEjB,MAAsB,CACrBU,OAAQ,CACNV,EAAG,aAAa,KAElBhD,OAAQ,aAAa,IACrBV,MAAO,aAAa,K","file":"assets/41.chunk.d5a85d0f7343e929cb65.js","sourcesContent":["import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport Image, { Ratio as ImageRatio } from 'Shared/Image/Ratio';\r\nimport { pixelsToUnit, minMediumMediaQuery, white, tundora, whiteLilacFaded } from 'Shared/Style';\r\nimport OrderLineItemViewModel from 'Order/Details/OrderLineItemViewModel.type';\r\nimport { translate } from '@avensia/scope';\r\n\r\ntype PropType = {\r\n  products: OrderLineItemViewModel[];\r\n  orderStatusDisplay: string;\r\n};\r\n\r\nexport default (props: PropType) => {\r\n  const { products, orderStatusDisplay } = props;\r\n  return (\r\n    <ProductsList>\r\n      <Status>\r\n        <strong>{`${translate('/Account/MyPages/OrderHistory/Status')}: `}</strong>\r\n        {orderStatusDisplay}\r\n      </Status>\r\n      <ProductWrapper>\r\n        {!!products &&\r\n          products.length > 0 &&\r\n          products.map((item: OrderLineItemViewModel, idx: number) => (\r\n            <Product key={idx}>\r\n              <CustomImage\r\n                css={item.imageUrl && { backgroundColor: white }}\r\n                src={item.imageUrl}\r\n                ratio={ImageRatio.OneToOne}\r\n              />\r\n              {!!item && (\r\n                <DetailsContainer>\r\n                  <div>{item.productName}</div>\r\n                  {item.returnQuantity > 0 && (\r\n                    <div>\r\n                      {`${translate('/Account/MyPages/OrderHistory/Status')}: `}\r\n                      {translate('/Account/MyPages/OrderHistory/Returned')}\r\n                    </div>\r\n                  )}\r\n                </DetailsContainer>\r\n              )}\r\n            </Product>\r\n          ))}\r\n      </ProductWrapper>\r\n    </ProductsList>\r\n  );\r\n};\r\n\r\nconst Status = styled.div({\r\n  marginBottom: pixelsToUnit(30),\r\n});\r\n\r\nconst ProductsList = styled.div({\r\n  backgroundColor: whiteLilacFaded,\r\n  color: tundora,\r\n  minHeight: pixelsToUnit(235),\r\n  padding: {\r\n    xy: pixelsToUnit(20),\r\n  },\r\n});\r\n\r\nconst ProductWrapper = styled.div({\r\n  display: 'flex',\r\n  flexFlow: 'row wrap',\r\n});\r\n\r\nconst Product = styled.div({\r\n  display: 'flex',\r\n  marginBottom: pixelsToUnit(15),\r\n  maxHeight: pixelsToUnit(100),\r\n  width: '100%',\r\n  [minMediumMediaQuery]: {\r\n    width: '33%',\r\n  },\r\n});\r\n\r\nconst CustomImage = styled(Image, {\r\n  width: pixelsToUnit(100),\r\n  [minMediumMediaQuery]: {\r\n    width: '30%',\r\n  },\r\n});\r\n\r\nconst DetailsContainer = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  justifyContent: 'space-around',\r\n  paddingLeft: pixelsToUnit(20),\r\n  maxWidth: '65%',\r\n});\r\n","import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { translate, isBrowser, on } from '@avensia/scope';\r\nimport { lightGrey, pixelsToUnit, minMediumMediaQuery, transition } from 'Shared/Style';\r\nimport { Down } from 'Shared/Icon/Arrow';\r\nimport Check from 'Shared/Icon/Check';\r\nimport OrderListProduct from './OrderListProduct';\r\nimport { throttle } from 'lodash';\r\nimport Link from 'Shared/Link';\r\nimport { jade, mineShaft } from 'Shared/Style/colors';\r\nimport { formatPrice } from 'Shared/number-format';\r\nimport OrderDetailsViewModel from 'Order/Details/OrderDetailsViewModel.type';\r\n\r\ntype PropType = {\r\n  order: OrderDetailsViewModel;\r\n  isMobile?: boolean;\r\n  culture: string;\r\n};\r\n\r\ntype StateType = {\r\n  isItemOpen: boolean;\r\n  isProductsOpen: boolean;\r\n  height: string | number;\r\n  mounted: boolean;\r\n};\r\n\r\nconst TIME_DELAY = 500;\r\n\r\nexport default class OrderList extends React.Component<PropType, StateType> {\r\n  myOrderDetailProdRef: HTMLDivElement;\r\n  myOrderDetailMobileRef: HTMLDivElement;\r\n\r\n  unsubscribeResize: () => void;\r\n\r\n  constructor(props: PropType) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      isItemOpen: false,\r\n      isProductsOpen: false,\r\n      height: 0,\r\n      mounted: false,\r\n    };\r\n  }\r\n\r\n  componentDidMount() {\r\n    this.setState(() => ({ mounted: true }));\r\n    this.updateState();\r\n    this.addListener();\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    this.removeListener();\r\n  }\r\n\r\n  addListener() {\r\n    if (isBrowser()) {\r\n      this.unsubscribeResize = on(\r\n        'resize',\r\n        throttle(() => {\r\n          if (this.state.mounted) {\r\n            this.updateState();\r\n          }\r\n        }, TIME_DELAY),\r\n      );\r\n    }\r\n  }\r\n\r\n  updateState() {\r\n    this.setState((prevState) => ({\r\n      ...prevState,\r\n      height: pixelsToUnit(this.myOrderDetailProdRef.clientHeight),\r\n    }));\r\n  }\r\n\r\n  onOpenMobileProductDetail = () => {\r\n    this.setState((prevState) => ({\r\n      ...prevState,\r\n      isProductsOpen: !this.state.isProductsOpen,\r\n      height:\r\n        this.state.isProductsOpen && this.state.isItemOpen\r\n          ? pixelsToUnit(this.myOrderDetailProdRef.clientHeight - this.myOrderDetailMobileRef.clientHeight)\r\n          : pixelsToUnit(this.myOrderDetailProdRef.clientHeight + this.myOrderDetailMobileRef.clientHeight),\r\n    }));\r\n  };\r\n\r\n  removeListener() {\r\n    if (this.unsubscribeResize) {\r\n      this.unsubscribeResize();\r\n      this.unsubscribeResize = null;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const { isMobile } = this.props;\r\n    const { isItemOpen, isProductsOpen } = this.state;\r\n    const {\r\n      url,\r\n      shortDateCreated,\r\n      currency,\r\n      totalPrice,\r\n      orderNumber,\r\n      paymentStatus,\r\n      orderStatusDisplay,\r\n      sent,\r\n    } = this.props.order;\r\n\r\n    return (\r\n      <React.Fragment>\r\n        <OrderWrapper // tslint:disable-next-line:jsx-no-lambda\r\n          onClick={() => isMobile && this.setState({ isItemOpen: !isItemOpen })}\r\n          css={isMobile && { cursor: 'pointer' }}\r\n        >\r\n          <Order>\r\n            <ShowOrderDetail to={url}>{orderNumber}</ShowOrderDetail>\r\n          </Order>\r\n          <Order>{shortDateCreated}</Order>\r\n          {!isMobile && (\r\n            <>\r\n              <Order>{formatPrice(totalPrice, currency, this.props.culture)}</Order>\r\n              <Order>\r\n                {paymentStatus} <CustomCheckIcon />\r\n              </Order>\r\n              <Order>\r\n                {orderStatusDisplay} {sent && <CustomCheckIcon />}\r\n              </Order>\r\n            </>\r\n          )}\r\n          <ViewOrder\r\n            // tslint:disable-next-line:jsx-no-lambda\r\n            onClick={() => !isMobile && this.setState({ isItemOpen: !isItemOpen })}\r\n            css={{ justifyContent: isMobile ? 'flex-end' : 'flex-start' }}\r\n          >\r\n            {!isMobile && <ViewOrderText>{translate('/Account/MyPages/OrderHistory/ViewOrder')}</ViewOrderText>}\r\n            <ArrowPosition css={isItemOpen && { transform: 'rotate(180deg)' }} />\r\n          </ViewOrder>\r\n        </OrderWrapper>\r\n\r\n        <OrderDetailsContainer\r\n          css={{\r\n            height: isItemOpen ? this.state.height : 0,\r\n            ...transition({ property: 'height' }),\r\n          }}\r\n        >\r\n          <OrderDetailWrapper\r\n            // tslint:disable-next-line:jsx-no-lambda\r\n            ref={(el: HTMLDivElement) => (this.myOrderDetailProdRef = el)}\r\n          >\r\n            {isMobile ? (\r\n              <MobileHeader>\r\n                <div>\r\n                  {translate('/Account/MyPages/OrderHistory/Ordering')}: {orderNumber}\r\n                </div>\r\n                <div>\r\n                  {translate('/Account/MyPages/OrderHistory/AddedIt')}: {shortDateCreated}\r\n                </div>\r\n                <div>\r\n                  {`${translate('/Account/MyPages/OrderHistory/Sum')}: `}\r\n                  {formatPrice(totalPrice, currency, this.props.culture)}\r\n                </div>\r\n                <div>\r\n                  {translate('/Account/MyPages/OrderHistory/PaymentStatus')}: {paymentStatus}\r\n                </div>\r\n                <div>\r\n                  {translate('/Account/MyPages/OrderHistory/OrderStatus')}: {orderStatusDisplay}\r\n                </div>\r\n                <ViewOrder onClick={this.onOpenMobileProductDetail}>\r\n                  <ViewOrderText>{translate('/Account/MyPages/OrderHistory/ViewOrder')}</ViewOrderText>\r\n                </ViewOrder>\r\n                <styled.Div css={{ height: isProductsOpen ? 'auto' : 0 }}>\r\n                  <OrderDetailWrapper\r\n                    // tslint:disable-next-line:jsx-no-lambda\r\n                    ref={(el: HTMLDivElement) => (this.myOrderDetailMobileRef = el)}\r\n                  >\r\n                    <OrderListProduct\r\n                      products={this.props.order.orderLineItems}\r\n                      orderStatusDisplay={orderStatusDisplay}\r\n                    />\r\n                  </OrderDetailWrapper>\r\n                </styled.Div>\r\n              </MobileHeader>\r\n            ) : (\r\n              <OrderListProduct products={this.props.order.orderLineItems} orderStatusDisplay={orderStatusDisplay} />\r\n            )}\r\n          </OrderDetailWrapper>\r\n        </OrderDetailsContainer>\r\n      </React.Fragment>\r\n    );\r\n  }\r\n}\r\n\r\nconst CustomCheckIcon = styled(Check, {\r\n  color: jade,\r\n});\r\n\r\nconst OrderWrapper = styled.div({\r\n  display: 'flex',\r\n  justifyContent: 'space-between',\r\n  padding: {\r\n    x: 0,\r\n    y: pixelsToUnit(10),\r\n  },\r\n});\r\n\r\nconst Order = styled.div({\r\n  flexBasis: '33%',\r\n  [minMediumMediaQuery]: {\r\n    flexBasis: '16%',\r\n  },\r\n});\r\n\r\nconst OrderDetailsContainer = styled.div({\r\n  position: 'relative',\r\n  overflow: 'hidden',\r\n  borderBottom: {\r\n    color: lightGrey,\r\n    style: 'solid',\r\n    width: pixelsToUnit(1),\r\n  },\r\n});\r\n\r\nconst ShowOrderDetail = styled(Link, {\r\n  textDecoration: 'underline',\r\n  color: mineShaft,\r\n});\r\n\r\nconst ViewOrder = styled.div({\r\n  alignItems: 'center',\r\n  cursor: 'pointer',\r\n  display: 'flex',\r\n  flexBasis: '33%',\r\n  [minMediumMediaQuery]: {\r\n    flexBasis: '16%',\r\n  },\r\n});\r\n\r\nconst ViewOrderText = styled.div({\r\n  marginBottom: pixelsToUnit(28),\r\n  marginTop: pixelsToUnit(22),\r\n  textDecoration: 'underline',\r\n  [minMediumMediaQuery]: {\r\n    margin: {\r\n      y: 0,\r\n      right: pixelsToUnit(12),\r\n    },\r\n  },\r\n});\r\n\r\nconst ArrowPosition = styled(Down, {\r\n  ...transition({\r\n    property: 'transform',\r\n    duration: 200,\r\n  }),\r\n  height: pixelsToUnit(8),\r\n  width: pixelsToUnit(14),\r\n});\r\n\r\nconst OrderDetailWrapper = styled.div({\r\n  paddingBottom: 0,\r\n  overflowY: 'hidden',\r\n});\r\n\r\nconst MobileHeader = styled.div({\r\n  marginTop: pixelsToUnit(28),\r\n  overflowY: 'hidden',\r\n});\r\n","/**\r\n * @ComponentFor OrderHistoryPageViewModel\r\n */\r\n\r\nimport * as React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { Breakpoint, translate, URLX, getJson, pathCombine, currentUrl } from '@avensia/scope';\r\nimport connect from 'Shared/connect';\r\nimport OrderHistoryPageViewModel from './OrderHistoryPageViewModel.type';\r\nimport MyPagesBaseLayout from '../MyPagesBaseLayout';\r\nimport { lightGrey, pixelsToUnit, huge, minMediumMediaQuery } from 'Shared/Style';\r\nimport OrderList from './components/OrderList';\r\nimport H1 from 'Shared/Generic/h1';\r\nimport { connectWithFeedback, ConnectPropType } from 'Shared/Button/Feedback';\r\nimport OrderDetailsViewModel from 'Order/Details/OrderDetailsViewModel.type';\r\nimport { bindInfiniteScroll } from 'Shared/infinite-scroll';\r\nimport Spinner from 'Shared/Icon/Spinner';\r\nimport { Variant as ButtonVariant, Appearance as ButtonAppearance } from 'Shared/Button';\r\n\r\ntype ConnectStateType = {\r\n  currentBreakpoint: number;\r\n  culture: string;\r\n};\r\n\r\ntype StateType = {\r\n  page: number;\r\n  orders: OrderDetailsViewModel[];\r\n  infinityScroll: boolean;\r\n  currentlyReloading: boolean;\r\n};\r\n\r\ntype PropType = OrderHistoryPageViewModel & ConnectStateType & ConnectPropType;\r\nconst GETORDERS_URL = '/getorders';\r\n\r\nclass OrderHistoryPage extends React.Component<PropType, StateType> {\r\n  unbindInfiniteScroll: () => void;\r\n  MyOrdersList: HTMLDivElement;\r\n  constructor(props: PropType) {\r\n    super(props);\r\n    this.state = {\r\n      page: 1,\r\n      orders: props.orders,\r\n      infinityScroll: false,\r\n      currentlyReloading: false,\r\n    };\r\n  }\r\n  componentWillUnmount() {\r\n    this.deactivateInfinityScroll();\r\n  }\r\n  componentDidUpdate({}, prevstate: StateType) {\r\n    if (this.state.currentlyReloading && !prevstate.currentlyReloading) {\r\n      this.getMoreOrders();\r\n    }\r\n  }\r\n  deactivateInfinityScroll() {\r\n    if (this.state.infinityScroll) {\r\n      this.setState({ infinityScroll: false });\r\n    }\r\n    if (this.unbindInfiniteScroll) {\r\n      this.unbindInfiniteScroll();\r\n    }\r\n  }\r\n\r\n  activateInfiniteScroll = () => {\r\n    this.loadSpinner();\r\n    this.setState({ infinityScroll: true });\r\n    this.unbindInfiniteScroll = bindInfiniteScroll(this.MyOrdersList, this.loadSpinner, -500);\r\n  };\r\n\r\n  loadSpinner = () => {\r\n    if (!this.state.currentlyReloading) {\r\n      if (this.hasMore()) {\r\n        this.setState({\r\n          currentlyReloading: true,\r\n        });\r\n      } else {\r\n        this.deactivateInfinityScroll();\r\n      }\r\n    }\r\n  };\r\n\r\n  getMoreOrders = async () => {\r\n    const ordersUrl = new URLX(pathCombine(currentUrl().pathname, GETORDERS_URL));\r\n    ordersUrl.searchParams.set('page', `${this.state.page + 1}`);\r\n    try {\r\n      const data = await getJson(ordersUrl);\r\n      const allData = [...this.state.orders, ...data];\r\n      this.updateOrders(allData);\r\n    } catch (e) {\r\n      console.warn('There was a problem fetching more orders');\r\n      this.setState({\r\n        currentlyReloading: false,\r\n      });\r\n    }\r\n  };\r\n\r\n  updateOrders = (orders: OrderDetailsViewModel[]) => {\r\n    this.setState({\r\n      orders,\r\n      page: this.state.page + 1,\r\n      currentlyReloading: false,\r\n    });\r\n  };\r\n\r\n  hasMore = () => {\r\n    return this.props.totalRecords > this.state.orders.length;\r\n  };\r\n\r\n  render() {\r\n    const isMobile = this.props.currentBreakpoint < Breakpoint.Medium;\r\n    const { orders, infinityScroll, currentlyReloading } = this.state;\r\n    const FeedbackButton = this.props.feedback.Button;\r\n\r\n    return (\r\n      <MyPagesBaseLayout {...this.props}>\r\n        <HeaderWrapper>\r\n          <Header>{translate('/Account/MyPages/OrderHistory/Ordering')}</Header>\r\n          {!isMobile && (\r\n            <>\r\n              <Header>{translate('/Account/MyPages/OrderHistory/AddedIt')}</Header>\r\n              <Header>{translate('/Account/MyPages/OrderHistory/Sum')}</Header>\r\n              <Header>{translate('/Account/MyPages/OrderHistory/PaymentStatus')}</Header>\r\n              <Header>{translate('/Account/MyPages/OrderHistory/OrderStatus')}</Header>\r\n              <Header />\r\n            </>\r\n          )}\r\n        </HeaderWrapper>\r\n        <div ref={el => (this.MyOrdersList = el)}>\r\n          {!!orders && orders.length > 0 ? (\r\n            orders.map((o, idx) => <OrderList key={idx} order={o} isMobile={isMobile} culture={this.props.culture} />)\r\n          ) : (\r\n            <NoOrders>{translate('/Account/MyPages/OrderHistory/NoOrders')}</NoOrders>\r\n          )}\r\n        </div>\r\n        <Pagination>\r\n          {!currentlyReloading && !infinityScroll && this.hasMore() && (\r\n            <FeedbackButton\r\n              css={{\r\n                padding: {\r\n                  x: huge,\r\n                },\r\n              }}\r\n              variant={ButtonVariant.Large}\r\n              appearance={ButtonAppearance.Secondary}\r\n              onClick={this.activateInfiniteScroll}\r\n            >\r\n              {translate('/ProductListing/ShowMore')}\r\n            </FeedbackButton>\r\n          )}\r\n          {currentlyReloading && <LoadingSpinner />}\r\n        </Pagination>\r\n      </MyPagesBaseLayout>\r\n    );\r\n  }\r\n}\r\n\r\nexport default connectWithFeedback({ maximumFulfilled: 0 })(\r\n  connect(state => ({\r\n    currentBreakpoint: state.currentBreakpoint,\r\n    culture: state.appShellData.culture,\r\n  }))(OrderHistoryPage),\r\n);\r\n\r\nconst HeaderWrapper = styled.div({\r\n  borderBottom: {\r\n    color: lightGrey,\r\n    style: 'solid',\r\n    width: pixelsToUnit(1),\r\n  },\r\n  display: 'flex',\r\n  justifyContent: 'space-between',\r\n  marginTop: pixelsToUnit(46),\r\n  paddingBottom: pixelsToUnit(11),\r\n});\r\n\r\nconst Header = styled.div({\r\n  flexBasis: '16%',\r\n  fontWeight: 'bold',\r\n});\r\n\r\nconst NoOrders = styled(H1, {\r\n  marginTop: pixelsToUnit(70),\r\n  textAlign: 'center',\r\n});\r\n\r\nconst Pagination = styled.div({\r\n  display: 'block',\r\n  textAlign: 'center',\r\n  margin: {\r\n    y: pixelsToUnit(40),\r\n  },\r\n});\r\n\r\nconst LoadingSpinner = styled(Spinner, {\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n\r\n  margin: {\r\n    x: 'auto',\r\n    y: pixelsToUnit(30),\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    margin: {\r\n      y: pixelsToUnit(50),\r\n    },\r\n    height: pixelsToUnit(35),\r\n    width: pixelsToUnit(35),\r\n  },\r\n});\r\n"],"sourceRoot":""}