{"version":3,"sources":["webpack:///./Avensia.Common/Features/Account/MyPages/OrderDetail/components/OrderListProduct.tsx","webpack:///./Avensia.Common/Features/Account/MyPages/OrderDetail/OrderDetailsPage.tsx"],"names":["props","products","orderStatus","ProductsList","StatusValue","ProductWrapper","length","map","item","idx","ProductItem","key","Product","CustomLink","to","productUrl","css","imageUrl","backgroundColor","src","ratio","OneToOne","DetailsContainer","ProductNameLink","productName","productCode","ArticleNumberWrapper","sku","returnQuantity","ProductPrice","current","price","currency","PaymentWrapper","Payment","SummaryHeader","Cost","Price","shippingFee","paymentFee","TotalPrice","totalPrice","span","textAlign","flexBasis","fontSize","fontWeight","div","color","minHeight","overflowY","padding","xy","x","y","paddingBottom","display","flexDirection","border","width","style","marginBottom","marginTop","alignItems","justifyContent","flexGrow","maxHeight","Link","minWidth","maxWidth","flexFlow","textDecoration","position","float","letterSpacing","alignSelf","wordBreak","OrderDetailsPage","shippingAddress","billingAddress","paymentMethodName","shippingMethodName","paymentType","ordersHistoryUrl","breadcrumbs","url","MyPagesBaseLayout","Content","TextGroup","TextWrapper","Label","Text","order","created","orderGroupId","paymentStatus","orderStatusDisplay","page","orderMessage","for","OrderListProduct","orderLineItems","AdditionalDetails","DetailsSection","TitleAndDescription","Title","Description","firstName","lastName","address1","address2","postalCode","city","phoneNumber","email","ActionButton","appearance","Button","Secondary","flexWrap","height","borderBottom","label","marginLeft","textTransform","margin"],"mappings":"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","file":"assets/40.chunk.db7af4c1b1ffba5c5e52.js","sourcesContent":["import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { translate } from '@avensia/scope';\r\nimport Price from 'Pricing/Price';\r\nimport Image, { Ratio as ImageRatio } from 'Shared/Image/Ratio';\r\nimport { pixelsToUnit, minMediumMediaQuery, white, thin, minSmallMediaQuery, minTinyMediaQuery } from 'Shared/Style';\r\nimport OrderLineItemViewModel from 'Order/Details/OrderLineItemViewModel.type';\r\nimport { alto, mountainmeadow, black, whiteLilacFaded, tundora } from 'Shared/Style/colors';\r\nimport { iota, gamma, epsilon, delta, sigma } from 'Shared/Style/typography';\r\nimport { small } from 'Shared/Style/spacing';\r\nimport Link from 'Shared/Link';\r\n\r\ntype PropType = {\r\n  products: OrderLineItemViewModel[];\r\n  orderStatus: string;\r\n  shippingFee: number;\r\n  paymentFee: number;\r\n  totalPrice: number;\r\n  currency: string;\r\n};\r\n\r\nexport default (props: PropType) => {\r\n  const { products, orderStatus } = props;\r\n  return (\r\n    <ProductsList>\r\n      <h4>\r\n        {translate('/Account/MyPages/OrderHistory/Status')}: <StatusValue>{orderStatus}</StatusValue>\r\n      </h4>\r\n      <ProductWrapper>\r\n        {!!products &&\r\n          products.length > 0 &&\r\n          products.map((item: OrderLineItemViewModel, idx: number) => (\r\n            <ProductItem key={idx}>\r\n              <Product>\r\n                <CustomLink to={item.productUrl}>\r\n                  <Image\r\n                    css={item.imageUrl && { backgroundColor: white }}\r\n                    src={item.imageUrl}\r\n                    ratio={ImageRatio.OneToOne}\r\n                  />\r\n                </CustomLink>\r\n                {!!item && (\r\n                  <>\r\n                    <DetailsContainer>\r\n                      <ProductNameLink to={item.productUrl}>{item.productName}</ProductNameLink>\r\n                      {item.productCode && (\r\n                        <ArticleNumberWrapper>\r\n                          <span>\r\n                            {`${translate('/Account/MyPages/OrderHistory/Detail/ArticleNumber')}: ${item.sku}`}\r\n                          </span>\r\n                        </ArticleNumberWrapper>\r\n                      )}\r\n                      {item.returnQuantity > 0 && (\r\n                        <div>\r\n                          {translate('/Account/MyPages/OrderHistory/Detail/Status')}:\r\n                          {translate('/Account/MyPages/OrderHistory/Returned')}\r\n                        </div>\r\n                      )}\r\n                    </DetailsContainer>\r\n                    <ProductPrice current={item.price} currency={props.currency} />\r\n                  </>\r\n                )}\r\n              </Product>\r\n            </ProductItem>\r\n          ))}\r\n      </ProductWrapper>\r\n      <PaymentWrapper>\r\n        <Payment>\r\n          <SummaryHeader>{translate('/Account/MyPages/OrderHistory/Detail/Shipping')}</SummaryHeader>\r\n          <Cost>\r\n            <Price current={props.shippingFee} currency={props.currency} />\r\n          </Cost>\r\n        </Payment>\r\n        <Payment>\r\n          <SummaryHeader>{translate('/Account/MyPages/OrderHistory/Detail/PaymentCost')}</SummaryHeader>\r\n          <Cost>\r\n            <Price current={props.paymentFee} currency={props.currency} />\r\n          </Cost>\r\n        </Payment>\r\n        <Payment>\r\n          <SummaryHeader css={{ fontWeight: 'bold' }}>\r\n            {translate('/Account/MyPages/OrderHistory/Detail/TotalIncludeVat')}\r\n          </SummaryHeader>\r\n          <TotalPrice current={props.totalPrice} currency={props.currency} />\r\n        </Payment>\r\n      </PaymentWrapper>\r\n    </ProductsList>\r\n  );\r\n};\r\n\r\nconst SummaryHeader = styled.span({\r\n  textAlign: 'right',\r\n  flexBasis: '60%',\r\n});\r\n\r\nconst StatusValue = styled.span({\r\n  fontSize: epsilon,\r\n  fontWeight: 'normal',\r\n});\r\n\r\nconst ProductsList = styled.div({\r\n  backgroundColor: whiteLilacFaded,\r\n  color: tundora,\r\n  minHeight: pixelsToUnit(235),\r\n  overflowY: 'hidden',\r\n  padding: {\r\n    xy: small,\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    padding: {\r\n      x: pixelsToUnit(30),\r\n      y: pixelsToUnit(20),\r\n    },\r\n    paddingBottom: pixelsToUnit(30),\r\n  },\r\n});\r\n\r\nconst ProductWrapper = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  border: {\r\n    y: {\r\n      color: alto,\r\n      width: thin,\r\n      style: 'solid',\r\n    },\r\n  },\r\n  paddingBottom: pixelsToUnit(30),\r\n  marginBottom: pixelsToUnit(15),\r\n  marginTop: pixelsToUnit(5),\r\n  [minMediumMediaQuery]: {\r\n    marginBottom: pixelsToUnit(30),\r\n  },\r\n});\r\n\r\nconst ProductItem = styled.div({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'space-between',\r\n  width: '100%',\r\n});\r\n\r\nconst Product = styled.div({\r\n  display: 'flex',\r\n  flexGrow: 1,\r\n  marginTop: pixelsToUnit(30),\r\n  width: '70%',\r\n  [minMediumMediaQuery]: {\r\n    maxHeight: pixelsToUnit(100),\r\n  },\r\n});\r\n\r\nconst CustomLink = styled(Link, {\r\n  width: pixelsToUnit(15),\r\n  minWidth: pixelsToUnit(51),\r\n  maxHeight: pixelsToUnit(51),\r\n  [minSmallMediaQuery]: {\r\n    maxHeight: 'none',\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    width: '35%',\r\n    maxWidth: pixelsToUnit(101),\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  flexFlow: 'column-wrap',\r\n  fontSize: sigma,\r\n  flexGrow: 1,\r\n  padding: {\r\n    x: pixelsToUnit(10),\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    padding: {\r\n      x: pixelsToUnit(20),\r\n    },\r\n  },\r\n});\r\n\r\nconst ProductNameLink = styled(Link, {\r\n  color: black,\r\n  maxWidth: pixelsToUnit(150),\r\n  ':hover': { textDecoration: 'underLine' },\r\n  [minTinyMediaQuery]: { maxWidth: 'initial' },\r\n});\r\n\r\nconst PaymentWrapper = styled.div({\r\n  position: 'relative',\r\n  float: 'right',\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  maxWidth: pixelsToUnit(297),\r\n  width: '100%',\r\n});\r\n\r\nconst Payment = styled.div({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'space-between',\r\n  flexFlow: 'row',\r\n  width: '100%',\r\n});\r\n\r\nconst Cost = styled.span({\r\n  fontWeight: 'normal',\r\n  fontSize: epsilon,\r\n  letterSpacing: pixelsToUnit(0.23),\r\n  [minMediumMediaQuery]: {\r\n    fontSize: gamma,\r\n  },\r\n});\r\nconst TotalPrice = styled(Price, {\r\n  color: mountainmeadow,\r\n  fontSize: delta,\r\n  [minMediumMediaQuery]: {\r\n    fontSize: iota,\r\n  },\r\n});\r\n\r\nconst ProductPrice = styled(Price, {\r\n  fontSize: sigma,\r\n  alignSelf: 'center',\r\n  [minMediumMediaQuery]: { fontSize: epsilon },\r\n});\r\n\r\nconst ArticleNumberWrapper = styled.div({\r\n  wordBreak: 'break-word',\r\n});\r\n","/**\r\n * @ComponentFor OrderDetailsPageViewModel\r\n */\r\n\r\nimport * as React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { translate } from '@avensia/scope';\r\nimport { EpiProperty, epiPropertyValue } from '@avensia/scope-episerver';\r\nimport OrderDetailsPageViewModel from './OrderDetailsPageViewModel.type';\r\nimport Button, { Appearance as ButtonAppearance } from 'Shared/Button';\r\nimport OrderListProduct from './components/OrderListProduct';\r\nimport MyPagesBaseLayout from '../MyPagesBaseLayout';\r\nimport { pixelsToUnit, thin, minMediumMediaQuery } from 'Shared/Style';\r\nimport { mercurySolid } from 'Shared/Style/colors';\r\nimport { sigma, epsilon } from 'Shared/Style/typography';\r\nimport { minTinyMediaQuery } from 'Shared/Style/media';\r\n\r\nexport default function OrderDetailsPage(props: OrderDetailsPageViewModel) {\r\n  const { shippingAddress, billingAddress, paymentMethodName, shippingMethodName, paymentType } = props.order;\r\n  const ordersHistoryUrl = props.breadcrumbs[props.breadcrumbs.length - 2].url;\r\n\r\n  return (\r\n    <MyPagesBaseLayout {...props}>\r\n      <Content>\r\n        <TextGroup>\r\n          <TextWrapper>\r\n            <Label>{translate('/Account/MyPages/OrderHistory/Detail/OrderCreated')}:</Label>\r\n            <Text>{props.order.created}</Text>\r\n          </TextWrapper>\r\n          <TextWrapper>\r\n            <Label>{translate('/Account/MyPages/OrderHistory/Detail/CustomerNumber')}:</Label>\r\n            <Text>{props.order.orderGroupId}</Text>\r\n          </TextWrapper>\r\n        </TextGroup>\r\n        <TextGroup>\r\n          <TextWrapper>\r\n            <Label>{translate('/Account/MyPages/OrderHistory/Detail/PaymentStatus')}:</Label>\r\n            <Text>{props.order.paymentStatus}</Text>\r\n          </TextWrapper>\r\n          <TextWrapper>\r\n            <Label>{translate('/Account/MyPages/OrderHistory/OrderStatus')}:</Label>\r\n            <Text>{props.order.orderStatusDisplay}</Text>\r\n          </TextWrapper>\r\n        </TextGroup>\r\n        <TextGroup css={{ marginTop: pixelsToUnit(10) }}>\r\n          <TextWrapper>\r\n            <Label>{translate('/Account/MyPages/OrderHistory/Detail/OrderedItems')}</Label>\r\n          </TextWrapper>\r\n          {epiPropertyValue(props.page.orderMessage) && (\r\n            <TextWrapper>\r\n              <EpiProperty for={props.page.orderMessage} />\r\n            </TextWrapper>\r\n          )}\r\n        </TextGroup>\r\n        <OrderListProduct\r\n          products={props.order.orderLineItems}\r\n          orderStatus={props.order.orderStatusDisplay}\r\n          shippingFee={props.order.shippingFee}\r\n          paymentFee={props.order.paymentFee}\r\n          totalPrice={props.order.totalPrice}\r\n          currency={props.order.currency}\r\n        />\r\n        <AdditionalDetails>\r\n          <DetailsSection>\r\n            <TitleAndDescription>\r\n              <Title>{translate('/Account/MyPages/OrderHistory/Detail/Title/PackageSentTo')}</Title>\r\n              <Description>\r\n                {`${shippingAddress.firstName} ${shippingAddress.lastName}`}\r\n                <div>{shippingAddress.address1}</div>\r\n                <div>{shippingAddress.address2}</div>\r\n                {`${shippingAddress.postalCode} ${shippingAddress.city}`}\r\n              </Description>\r\n            </TitleAndDescription>\r\n            <TitleAndDescription>\r\n              <Title>{translate('/Account/MyPages/OrderHistory/Detail/Title/SelectedDeliveryMethod')}</Title>\r\n              <Description>{shippingMethodName}</Description>\r\n            </TitleAndDescription>\r\n            {/* TODO: Enable this html Description tag if backend data provide and map data here<TitleAndDescription>\r\n              <Title>{translate('/Account/MyPages/OrderHistory/Detail/Title/PaymentMethod')}</Title>\r\n                <Description>\r\n                  Faktura\r\n                  <styled.Div css={{ marginBottom: pixelsToUnit(20) }}>\r\n                    Betalningsmottagare: Skeidarv <br />\r\n                    Bankgiro: 852-7541 <br />\r\n                    Referensnummer: 11103011412198\r\n                  </styled.Div>\r\n                  <styled.Div css={{ marginBottom: pixelsToUnit(20) }}>\r\n                    Efter erhållandet av leveransen/varan, vänligen betala till: <br />\r\n                    IBAN: SE02 9500 0099 6042 0083 8631 <br />\r\n                    BIC: NDEASESS\r\n                  </styled.Div>\r\n                </Description>\r\n            </TitleAndDescription> */}\r\n          </DetailsSection>\r\n          <DetailsSection>\r\n            <TitleAndDescription>\r\n              <Title>{translate('/Account/MyPages/OrderHistory/Detail/Title/InvoiceAddress')}</Title>\r\n              <Description>\r\n                {`${billingAddress.firstName} ${billingAddress.lastName}`}\r\n                <div>{billingAddress.address1}</div>\r\n                <div>{billingAddress.address2}</div>\r\n                <div>{`${billingAddress.postalCode} ${billingAddress.city}`}</div>\r\n                <div>{billingAddress.phoneNumber}</div>\r\n                {billingAddress.email}\r\n              </Description>\r\n            </TitleAndDescription>\r\n            <TitleAndDescription>\r\n              <Title>{translate('/Account/MyPages/OrderHistory/Detail/Title/SelectedPaymentMethod')}</Title>\r\n              <Description>{paymentMethodName}{paymentType ? ` - ${paymentType}` : ''}</Description>\r\n            </TitleAndDescription>\r\n            {/* UnComment if the Data is avalable:\r\n             <TitleAndDescription>\r\n              <Title>{translate('/Account/MyPages/OrderHistory/Detail/Title/OrderType')}</Title>\r\n                <Description>Webshop</Description>\r\n            </TitleAndDescription> */}\r\n          </DetailsSection>\r\n        </AdditionalDetails>\r\n        <ActionButton to={ordersHistoryUrl} appearance={ButtonAppearance.Secondary}>\r\n          {translate('/Account/MyPages/OrderHistory/Detail/ButtonText')}\r\n        </ActionButton>\r\n      </Content>\r\n    </MyPagesBaseLayout>\r\n  );\r\n}\r\nconst Content = styled.div({\r\n  display: 'flex',\r\n  maxWidth: pixelsToUnit(840),\r\n  flexDirection: 'column',\r\n  marginTop: pixelsToUnit(25),\r\n  fontSize: sigma,\r\n  [minTinyMediaQuery]: {\r\n    fontSize: epsilon,\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    marginBottom: pixelsToUnit(97),\r\n  },\r\n});\r\n\r\nconst TextGroup = styled.div({\r\n  marginBottom: pixelsToUnit(20),\r\n});\r\n\r\nconst AdditionalDetails = styled.div({\r\n  marginTop: pixelsToUnit(50),\r\n  display: 'flex',\r\n  flexGrow: 1,\r\n  flexWrap: 'wrap',\r\n  justifyContent: 'space-between',\r\n});\r\n\r\nconst DetailsSection = styled.div({\r\n  flexBasis: '100%',\r\n  fontSize: pixelsToUnit(16),\r\n  [minMediumMediaQuery]: {\r\n    flexBasis: '45%',\r\n  },\r\n});\r\n\r\nconst TextWrapper = styled.div({\r\n  width: '100%',\r\n  display: 'flex',\r\n  alignItems: 'flex-start',\r\n});\r\n\r\nconst Title = styled(TextWrapper, {\r\n  marginBottom: pixelsToUnit(10),\r\n  height: pixelsToUnit(35),\r\n  fontWeight: 'bold',\r\n  borderBottom: {\r\n    width: thin,\r\n    style: 'solid',\r\n    color: mercurySolid,\r\n  },\r\n});\r\n\r\nconst Label = styled.label({\r\n  fontWeight: 'bold',\r\n});\r\n\r\nconst Text = styled.span({\r\n  width: '100%',\r\n  marginLeft: pixelsToUnit(5),\r\n});\r\n\r\nconst TitleAndDescription = styled(TextGroup, {\r\n  marginBottom: pixelsToUnit(50),\r\n});\r\n\r\nconst Description = styled(Text, {\r\n  marginLeft: 0,\r\n});\r\n\r\nconst ActionButton = styled(Button, {\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  height: pixelsToUnit(45),\r\n  maxWidth: pixelsToUnit(264),\r\n  letterSpacing: pixelsToUnit(0.7),\r\n  textTransform: 'none',\r\n  fontSize: sigma,\r\n  padding: {\r\n    x: pixelsToUnit(27),\r\n    y: 0,\r\n  },\r\n  margin: {\r\n    x: 'auto',\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    marginTop: pixelsToUnit(20),\r\n    margin: {\r\n      x: 0,\r\n    },\r\n  },\r\n});\r\n"],"sourceRoot":""}