(0);\r\n\r\n const renderEditItem = () => {\r\n switch (activeTab) {\r\n case 0:\r\n return (\r\n \r\n \r\n \r\n );\r\n case 1:\r\n return (\r\n \r\n \r\n \r\n );\r\n case 2:\r\n return (\r\n \r\n );\r\n default:\r\n return null;\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {backLinkLabel}\r\n \r\n \r\n setActiveTab(0)}>\r\n {accountTabLabel}\r\n \r\n setActiveTab(1)}>\r\n {addressTabLabel}\r\n \r\n \r\n {renderEditItem()}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst Content = styled('div', {\r\n position: 'relative',\r\n my: 7.5,\r\n});\r\n\r\nconst TabList = styled('ul', {\r\n borderRadius: '5px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexDirection: 'column',\r\n mb: 8,\r\n p: 0,\r\n border: '1px solid $borderPrimary',\r\n '@mediaMaxVerySmall': {\r\n mx: 4,\r\n },\r\n '@mediaMinVerySmall': {\r\n flexDirection: 'row',\r\n maxW: 85,\r\n mx: 'auto',\r\n h: 8,\r\n },\r\n});\r\n\r\nconst Tab = styled('li', {\r\n fs: 8,\r\n lineHeight: '32px',\r\n textAlign: 'center',\r\n ls: '$ls05',\r\n opacity: 0.9,\r\n zIndex: 1,\r\n flexGrow: 1,\r\n cursor: 'pointer',\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n h: 8,\r\n w: '100%',\r\n variants: {\r\n active: {\r\n true: {\r\n backgroundColor: '$backgroundSecondary',\r\n color: '$white',\r\n },\r\n },\r\n },\r\n '@mediaMinLarge': {\r\n h: '100%',\r\n },\r\n});\r\n\r\nconst Wrapper = styled('div', {\r\n maxW: '$maxWidthSmall',\r\n mx: 'auto',\r\n '@mediaMinLarge': {\r\n mx: 'auto',\r\n },\r\n});\r\n\r\nconst StyledLinkButton = styled('button', {\r\n display: 'flex',\r\n alignItems: 'center',\r\n mb: 7,\r\n '&:hover': {\r\n textDecoration: 'underline',\r\n },\r\n '@mediaMinMedium': {\r\n mb: 0,\r\n position: 'absolute',\r\n t: 0,\r\n l: 0,\r\n },\r\n});\r\n\r\nconst StyledArrowLeftLinkIcon = styled(ArrowIcon, {\r\n transform: 'rotate(180deg)',\r\n wh: 5,\r\n mr: 2,\r\n pt: 0,\r\n});\r\n\r\nexport default CustomerInformationProfileEdit;\r\n","import Button from '../Atoms/Buttons/Button';\r\nimport Divider from '../Atoms/Divider/Divider';\r\nimport { H2 } from '../Atoms/Typography/Headings/Heading';\r\nimport CustomerInformationModel from '../MyPagesPage/Models/CustomerInformationModel';\r\nimport { CheckoutSectionTitle } from '../Pages/Checkout/CheckoutProductListing';\r\nimport UserState from '../Shared/Models/UserState.interface';\r\nimport { useTranslationData } from '../Shared/Providers/TranslationProvider';\r\nimport { styled } from '../stitches.config';\r\nimport Select from '../Shared/Input/Select';\r\nimport CtaButton from '../Atoms/Buttons/CtaButton';\r\nimport { EditIcon } from '../Atoms/Icons';\r\n\r\ntype PropTypes = {\r\n onCheckoutPage?: boolean;\r\n customerInformationData?: CustomerInformationModel;\r\n user: UserState;\r\n handleToggleEditMode?: () => any;\r\n isLoading?: boolean;\r\n addressFormValue: any;\r\n setAddressFormValue: (companyAddressId: any) => any;\r\n};\r\n\r\nfunction CustomerInformationProfile({\r\n onCheckoutPage,\r\n customerInformationData,\r\n user,\r\n handleToggleEditMode,\r\n isLoading,\r\n addressFormValue,\r\n setAddressFormValue,\r\n}: PropTypes) {\r\n const {\r\n 'customerInfo/deliveryAddress': deliveryAddressLabel,\r\n 'customerInfo/billingAddress': billingAddressLabel,\r\n 'customerInfo/contact': contactLabel,\r\n 'customerInfo/details': detailsLabel,\r\n 'customerInfo/myDetails': myDetailLabel,\r\n 'customerInfo/number': customerInfoNumberLabel,\r\n 'customerInfo/sameAsDelivery': sameAsDeliveryLabel,\r\n 'customerInfo/company': companyLabel,\r\n 'customerInfo/editInformation': editDataLabel,\r\n 'checkoutPage/yourInformation': yourInformationLabel,\r\n } = useTranslationData();\r\n\r\n return (\r\n <>\r\n \r\n \r\n {onCheckoutPage ? (\r\n {yourInformationLabel}\r\n ) : (\r\n {myDetailLabel}
\r\n )}\r\n {!onCheckoutPage && }\r\n \r\n \r\n \r\n - \r\n {customerInfoNumberLabel}: \r\n \r\n {user.externalCustomerId\r\n ? user.externalCustomerId\r\n : user.customerId}\r\n \r\n
\r\n\r\n - \r\n
\r\n \r\n {customerInformationData ? companyLabel : detailsLabel}{' '}\r\n \r\n
\r\n \r\n {customerInformationData?.companyName || user.fullName}\r\n \r\n \r\n\r\n - \r\n
\r\n {contactLabel}\r\n
\r\n {customerInformationData && (\r\n {`${customerInformationData.firstName} ${customerInformationData.lastName}`}\r\n )}\r\n {customerInformationData && (\r\n {customerInformationData.phone}\r\n )}\r\n {user.email}\r\n \r\n\r\n {!isLoading && !onCheckoutPage && (\r\n - \r\n \r\n \r\n \r\n {editDataLabel}\r\n \r\n \r\n
\r\n )}\r\n \r\n {customerInformationData && (\r\n \r\n - \r\n \r\n {deliveryAddressLabel}\r\n \r\n \r\n {addressFormValue?.street\r\n ? addressFormValue.street\r\n : customerInformationData.deliveryAddress?.street}\r\n \r\n \r\n {addressFormValue?.postalCode || addressFormValue?.city ? (\r\n <>\r\n {addressFormValue?.postalCode} {addressFormValue.city}\r\n >\r\n ) : (\r\n <>\r\n {customerInformationData.deliveryAddress?.postalCode}{' '}\r\n {customerInformationData.deliveryAddress?.city}\r\n >\r\n )}\r\n \r\n
\r\n - \r\n
\r\n {billingAddressLabel}\r\n
\r\n {customerInformationData.invoiceAddress?.sameAsDelivery ? (\r\n {sameAsDeliveryLabel}\r\n ) : (\r\n <>\r\n \r\n {customerInformationData.invoiceAddress?.street}\r\n \r\n \r\n {customerInformationData.invoiceAddress?.postalCode}{' '}\r\n {customerInformationData.invoiceAddress?.city}\r\n \r\n >\r\n )}\r\n \r\n \r\n )}\r\n \r\n \r\n >\r\n );\r\n}\r\n\r\nconst ButtonContainer = styled('div', {\r\n display: 'flex',\r\n w: 'fit-content',\r\n mt: 4,\r\n});\r\n\r\nconst StyledButton = styled(CtaButton, { gap: 2 });\r\n\r\nconst CustomerInformationComponent = styled('div', {\r\n backgroundColor: '$backgroundPrimary',\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n p: 4,\r\n '@mediaMaxLarge': {\r\n w: '100%',\r\n mb: 2,\r\n },\r\n '@mediaMinLarge': {\r\n p: 8,\r\n },\r\n variants: {\r\n onCheckout: {\r\n true: {\r\n mb: 4,\r\n '@mediaMinLarge': {\r\n mb: 8,\r\n },\r\n },\r\n },\r\n },\r\n});\r\n\r\nconst ContentWrapper = styled('div', {\r\n w: '100%',\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n '@mediaMinMedium': {\r\n display: 'flex',\r\n },\r\n});\r\n\r\nconst ContentItemLeft = styled('div', {\r\n flexGrow: 1,\r\n position: 'relative',\r\n pb: 11.5,\r\n w: '100%',\r\n mr: 2,\r\n '@mediaMinLarge': {\r\n w: '50%',\r\n mr: 0,\r\n },\r\n '&:last-child': {\r\n justifySelf: 'flex-end',\r\n },\r\n '@mediaMaxMedium': {\r\n mr: 0,\r\n },\r\n});\r\n\r\nconst ContentItemRight = styled('div', {\r\n flexGrow: 1,\r\n position: 'relative',\r\n pb: 11.5,\r\n w: '100%',\r\n mr: 2,\r\n '@mediaMinLarge': {\r\n w: '50%',\r\n mr: 0,\r\n },\r\n '&:last-child': {\r\n justifySelf: 'flex-end',\r\n },\r\n '@mediaMaxMedium': {\r\n mr: 0,\r\n },\r\n});\r\n\r\nconst HeadingSection = styled('div', {\r\n w: '100%',\r\n});\r\n\r\nconst Item = styled('div', {\r\n mb: 2.5,\r\n variants: {\r\n flex: {\r\n true: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n },\r\n },\r\n});\r\n\r\nconst Address = styled('div', {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n});\r\n\r\nconst StyledSelect = styled('div', {\r\n marginBottom: '-16px',\r\n});\r\n\r\nconst ListItemTitle = styled('p', {\r\n lineHeight: '28px',\r\n ls: '$ls08',\r\n fontWeight: '$fw700',\r\n fs: 8,\r\n m: 0,\r\n});\r\n\r\nconst ListItem = styled('p', {\r\n lineHeight: '28px',\r\n ls: '$ls08',\r\n fs: 8,\r\n fw: '$fw500',\r\n m: 0,\r\n variants: {\r\n flex: {\r\n true: {\r\n marginLeft: 1,\r\n },\r\n },\r\n },\r\n});\r\n\r\nexport default CustomerInformationProfile;\r\n","import React from 'react';\r\nimport { ArrowIcon } from '../Atoms/Icons';\r\nimport Dots from '../Atoms/Loaders/Dots';\r\nimport { H2 } from '../Atoms/Typography/Headings/Heading';\r\nimport KexLink from '../Kex/KexLink';\r\nimport { useTranslationData } from '../Shared/Providers/TranslationProvider';\r\nimport { styled } from '../stitches.config';\r\n\r\ntype PropType = {\r\n isLoading: boolean;\r\n headingLabel: string;\r\n url: string;\r\n showAllLabel: string;\r\n totalOrders: number;\r\n children?: React.ReactNode;\r\n};\r\n\r\nfunction OrderComponent({\r\n isLoading,\r\n headingLabel,\r\n url,\r\n totalOrders,\r\n showAllLabel,\r\n children,\r\n}: PropType) {\r\n const { 'customerInfo/myOrders/noOrders': noOrdersLabel } =\r\n useTranslationData();\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {headingLabel} {`- ${totalOrders}`}\r\n \r\n \r\n {children ? (\r\n <>\r\n {children}\r\n >\r\n ) : !isLoading ? (\r\n {noOrdersLabel}\r\n ) : (\r\n \r\n \r\n \r\n )}\r\n {children && url && totalOrders > 0 ? (\r\n \r\n {showAllLabel}\r\n \r\n \r\n ) : (\r\n <>>\r\n )}\r\n \r\n >\r\n );\r\n}\r\n\r\nconst StyledArrowRightLinkIcon = styled(ArrowIcon, {\r\n wh: 4,\r\n ml: 2,\r\n});\r\n\r\nconst StyledKexLink = styled(KexLink, {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n mt: 'auto',\r\n ':hover': {\r\n textDecoration: 'underline',\r\n },\r\n});\r\n\r\nconst OrderWrapper = styled('div', {\r\n backgroundColor: '$white',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n p: 4,\r\n w: '100%',\r\n br: 2.5,\r\n '@mediaMinLarge': {\r\n p: 8,\r\n },\r\n});\r\n\r\nconst NoOrders = styled('div', {\r\n my: 1,\r\n});\r\n\r\nconst HeadingSection = styled('div', {\r\n '@mediaMaxLarge': { pl: 0.25 },\r\n});\r\n\r\nconst StyledH2 = styled(H2, {\r\n fontWeight: '$fw300',\r\n fs: 13,\r\n lineHeight: '31px',\r\n mx: 0,\r\n mt: 0,\r\n mb: 4,\r\n});\r\n\r\nconst DotsWrapper = styled('div', {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n pb: 9,\r\n});\r\n\r\nconst OrderArray = styled('div', {\r\n w: '100%',\r\n mb: 2.5,\r\n});\r\n\r\nexport default OrderComponent;\r\n","import { getFormattedDate } from '../Shared/Common/Helpers';\r\nimport OrderDetailsModel from '../Order/Models/OrderDetailsModel.interface';\r\nimport { useAppSettingsData } from '../Shared/Providers/AppSettingsProvider';\r\nimport {\r\n AttentionIcon,\r\n DoneIcon,\r\n PackageIcon,\r\n PreviewIcon,\r\n} from '../Atoms/Icons';\r\nimport { styled } from '../stitches.config';\r\nimport KexLink from '../Kex/KexLink';\r\nimport React, { useState } from 'react';\r\n\r\ntype PropType = {\r\n order: OrderDetailsModel;\r\n};\r\n\r\nfunction OrderRow({ order }: PropType) {\r\n const renderIcon = (status: string) => {\r\n switch (status) {\r\n case 'Completed':\r\n return ;\r\n case 'Processing':\r\n return ;\r\n case 'Confirmed':\r\n return ;\r\n case 'Init':\r\n return ;\r\n default:\r\n return null;\r\n }\r\n };\r\n\r\n const {\r\n staticPages: { orderDetailsPage },\r\n } = useAppSettingsData();\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n return (\r\n <>\r\n setIsHovered(true)}\r\n onMouseOut={() => setIsHovered(false)}\r\n >\r\n \r\n \r\n {renderIcon(order.orderStatus)}\r\n
\r\n \r\n {order.externalOrderID}\r\n \r\n {order.status}\r\n {`- ${getFormattedDate(order.orderDate)}`}\r\n \r\n \r\n \r\n \r\n >\r\n );\r\n}\r\n\r\nconst IconStyle = {\r\n wh: 5,\r\n};\r\n\r\nconst IconRounded = styled('div', {\r\n mr: 4,\r\n wh: 8,\r\n br: 4,\r\n backgroundColor: '$green',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n});\r\n\r\nconst ArrayItem = styled('div', {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n pb: 4,\r\n});\r\n\r\nconst ArrayItems = styled('div', {\r\n mb: 4,\r\n my: 5,\r\n});\r\n\r\nconst ContentWrapperLink = styled(KexLink, {\r\n display: 'flex',\r\n alignItems: 'center',\r\n});\r\n\r\nconst OrderId = styled('span', {\r\n fs: 8,\r\n fontWeight: '$fw700',\r\n lineHeight: '28px',\r\n variants: {\r\n underline: {\r\n true: {\r\n textDecoration: 'underline',\r\n },\r\n },\r\n },\r\n});\r\n\r\nconst Status = styled('span', {\r\n fontWeight: '$fw700',\r\n});\r\n\r\nconst ArrayOrderItem = styled('span', {\r\n fs: 7,\r\n lineHeight: '20px',\r\n});\r\n\r\nexport default OrderRow;\r\n","import OrderDetailsModel from '../Order/Models/OrderDetailsModel.interface';\r\nimport { useAppSettingsData } from '../Shared/Providers/AppSettingsProvider';\r\nimport { useTranslationData } from '../Shared/Providers/TranslationProvider';\r\nimport OrderComponent from './OrderComponent';\r\nimport OrderRow from './OrderRow';\r\n\r\ntype PropType = {\r\n orders: OrderDetailsModel[];\r\n ordersCount: number;\r\n isLoading: boolean;\r\n};\r\nfunction OrderHistory({ orders, ordersCount, isLoading }: PropType) {\r\n const {\r\n staticPages: { orderHistoryPage },\r\n } = useAppSettingsData();\r\n\r\n const {\r\n 'customerInfo/myOrders/orderHistory': orderHistoryLabel,\r\n 'customerInfo/myOrders/allOrders': allOrdersLabel,\r\n } = useTranslationData();\r\n\r\n return (\r\n \r\n {orders.map((order: OrderDetailsModel) => (\r\n \r\n ))}\r\n \r\n );\r\n}\r\n\r\nexport default OrderHistory;\r\n","import OrderDetailsModel from '../Order/Models/OrderDetailsModel.interface';\r\nimport { useAppSettingsData } from '../Shared/Providers/AppSettingsProvider';\r\nimport { useTranslationData } from '../Shared/Providers/TranslationProvider';\r\nimport OrderComponent from './OrderComponent';\r\nimport OrderRow from './OrderRow';\r\n\r\ntype PropType = {\r\n orders: OrderDetailsModel[];\r\n ordersCount: number;\r\n isLoading: boolean;\r\n};\r\n\r\nfunction ActiveOrders({ orders, ordersCount, isLoading }: PropType) {\r\n const {\r\n staticPages: { activeOrdersPage },\r\n } = useAppSettingsData();\r\n\r\n const {\r\n 'customerInfo/myOrders/activeOrder': activeOrderLabel,\r\n 'customerInfo/myOrders/allActiveOrders': allActiveOrdersLabel,\r\n } = useTranslationData();\r\n\r\n return (\r\n \r\n {orders.map((order: OrderDetailsModel) => (\r\n \r\n ))}\r\n \r\n );\r\n}\r\n\r\nexport default ActiveOrders;\r\n","import { getFormattedDate } from '../Shared/Common/Helpers';\r\nimport RecurringOrderViewModel from '../Order/Models/RecurringOrderViewModel.interface';\r\nimport { GetOrder, AddItemsToCart } from './RecurringOrder';\r\nimport useCurrentPage from '../Shared/Hooks/useCurrentPage';\r\nimport PageModelBase from '../Shared/Models/PageModelBase.interface';\r\nimport { useUserStateData } from '../Shared/UserContextProvider/UserContextProvider';\r\nimport { useAppSettingsData } from '../Shared/Providers/AppSettingsProvider';\r\nimport { useKexNavigate } from '../Kex/KexRouter/KexRouter';\r\nimport { AttentionIcon, PreviewIcon } from '../Atoms/Icons';\r\nimport { styled } from '../stitches.config';\r\nimport { useTranslationData } from '../Shared/Providers/TranslationProvider';\r\nimport KexLink from '../Kex/KexLink';\r\nimport { useState } from 'react';\r\n\r\ntype PropType = {\r\n order: RecurringOrderViewModel;\r\n};\r\n\r\nfunction RecurringOrderRow({ order }: PropType) {\r\n const { channelId } = useCurrentPage();\r\n const {\r\n languageRoute,\r\n staticPages: { recurringOrderCartPage },\r\n } = useAppSettingsData();\r\n\r\n const {\r\n 'customerInfo/myOrders/noRecurringOrderName': noRecurringOrderNameLabel,\r\n 'customerInfo/myOrders/nextOrderDate': nextOrderDateLabel,\r\n 'customerInfo/myOrders/updateOrder': updateOrderLabel,\r\n 'customerInfo/myOrders/onHold': onHoldLabel,\r\n } = useTranslationData();\r\n\r\n const kexNavigate = useKexNavigate();\r\n const { organizationId } = useUserStateData();\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n const handleGetOrder = async () => {\r\n const url = `/api/${\r\n languageRoute || 'en'\r\n }/recurringorder/GetOrder?organizationId=${organizationId}&recurringOrderId=${\r\n order.id\r\n }`;\r\n\r\n const data = await GetOrder(channelId, url);\r\n\r\n if (data?.order) {\r\n await AddItemsToCart(channelId, languageRoute, data.order.items);\r\n }\r\n\r\n kexNavigate(`${recurringOrderCartPage}?recurringOrderId=${order.id}`);\r\n };\r\n\r\n return (\r\n <>\r\n setIsHovered(true)}\r\n onMouseOut={() => setIsHovered(false)}\r\n >\r\n \r\n
\r\n {order.name ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n {order.name ?? noRecurringOrderNameLabel}\r\n \r\n \r\n {order.onHold ? (\r\n {onHoldLabel}\r\n ) : order.name ? (\r\n <>\r\n {nextOrderDateLabel}\r\n {`- ${getFormattedDate(order.nextOrderDate)}`}\r\n >\r\n ) : (\r\n updateOrderLabel\r\n )}\r\n \r\n \r\n \r\n >\r\n );\r\n}\r\n\r\nconst IconStyle = {\r\n wh: 5,\r\n};\r\n\r\nconst IconRounded = styled('div', {\r\n mr: 4,\r\n wh: 8,\r\n br: 4,\r\n backgroundColor: '$green',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n});\r\n\r\nconst ArrayItem = styled('div', {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n});\r\n\r\nconst ArrayItems = styled('div', {\r\n cursor: 'pointer',\r\n display: 'flex',\r\n alignItems: 'center',\r\n my: 5,\r\n});\r\n\r\nconst Title = styled('span', {\r\n textAlign: 'left',\r\n fs: 8,\r\n fontWeight: '$fw700',\r\n lineHeight: '28px',\r\n variants: {\r\n underline: {\r\n true: {\r\n textDecoration: 'underline',\r\n },\r\n },\r\n },\r\n //letterSpacing: theme.letterSpacing.moreWide,\r\n});\r\n\r\nconst Status = styled('span', {\r\n fontWeight: '$fw700',\r\n});\r\n\r\nconst ArrayOrderItem = styled('span', {\r\n fs: 7,\r\n lineHeight: '20px',\r\n //letterSpacing: theme.letterSpacing.nearWide,\r\n});\r\n\r\nexport default RecurringOrderRow;\r\n","import RecurringOrderViewModel from '../Order/Models/RecurringOrderViewModel.interface';\r\nimport { useAppSettingsData } from '../Shared/Providers/AppSettingsProvider';\r\nimport { useTranslationData } from '../Shared/Providers/TranslationProvider';\r\nimport OrderComponent from './OrderComponent';\r\nimport RecurringOrderRow from './RecurringOrderRow';\r\n\r\ntype PropType = {\r\n orders: RecurringOrderViewModel[];\r\n ordersCount: number;\r\n isLoading: boolean;\r\n};\r\n\r\nfunction RecurringOrders({ orders, ordersCount, isLoading }: PropType) {\r\n const {\r\n staticPages: { recurringOrdersPage },\r\n } = useAppSettingsData();\r\n\r\n const {\r\n 'customerInfo/myOrders/recurringOrder': recurringOrderLabel,\r\n 'customerInfo/myOrders/allRecurringOrders': allRecurringOrdersLabel,\r\n } = useTranslationData();\r\n\r\n return (\r\n \r\n {orders.map((order: RecurringOrderViewModel) => (\r\n \r\n ))}\r\n \r\n );\r\n}\r\n\r\nexport default RecurringOrders;\r\n","import OrderHistory from './OrderHistory';\r\nimport ActiveOrders from './ActiveOrders';\r\nimport RecurringOrders from './RecurringOrders';\r\nimport { styled } from '../stitches.config';\r\nimport Dots from '../Atoms/Loaders/Dots';\r\n\r\ntype PropType = {\r\n orderData: any;\r\n isLoading: boolean;\r\n};\r\n\r\nfunction Orders({ orderData, isLoading }: PropType) {\r\n return (\r\n \r\n {isLoading ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n {orderData?.activeOrders && (\r\n \r\n )}\r\n {orderData?.recurringOrders &&\r\n orderData?.recurringOrders.length > 0 && (\r\n \r\n )}\r\n {orderData?.orderHistory && (\r\n \r\n )}\r\n >\r\n )}\r\n \r\n );\r\n}\r\n\r\nconst OrdersWrapper = styled('div', {\r\n maxWidth: '1440px',\r\n display: 'grid',\r\n gridTemplateColumns: '1fr',\r\n g: 4,\r\n '@mediaMinLarge': {\r\n g: 8,\r\n gridTemplateColumns: 'repeat(3, 1fr)',\r\n mx: 'auto',\r\n },\r\n});\r\n\r\nconst DotsWrapper = styled('div', {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n gridColumnEnd: 'span 3',\r\n pb: 9,\r\n});\r\n\r\nexport default Orders;\r\n","import useCurrentPage from '../../Shared/Hooks/useCurrentPage';\r\nimport { useUserStateData } from '../../Shared/UserContextProvider/UserContextProvider';\r\nimport MyPagesPageModel from '../../MyPagesPage/Models/MyPagesPageModel.interface';\r\nimport { useAppSettingsData } from '../../Shared/Providers/AppSettingsProvider';\r\nimport { useTranslationData } from '../../Shared/Providers/TranslationProvider';\r\nimport { useEffect, useState } from 'react';\r\nimport { useKexNavigate } from '../../Kex/KexRouter/KexRouter';\r\nimport UserState from '../../Shared/Models/UserState.interface';\r\nimport PageModelBase from '../../Shared/Models/PageModelBase.interface';\r\nimport OrderInfoViewModel from '../../Order/Models/OrderInfoViewModel.interface';\r\nimport UserCredentials from '../../LoginPage/Models/UserCredentials.interface';\r\nimport CustomerInformationModel from '../../MyPagesPage/Models/CustomerInformationModel';\r\nimport CustomerInformationProfileEdit from '../../CustomerInformation/CustomerInformationProfileEdit';\r\nimport {\r\n GetMyInformation,\r\n UpdateMyInformation,\r\n} from '../../CustomerInformation/CustomerInformationApi';\r\nimport CustomerInformationProfile from '../../CustomerInformation/CustomerInformationProfile';\r\nimport { ChangePassword } from '../LoginPage/Account';\r\nimport { styled } from '../../stitches.config';\r\nimport { H1, H2 } from '../../Atoms/Typography/Headings/Heading';\r\nimport { GetOrders } from '../../OrderComponent/Order';\r\nimport Orders from '../../OrderComponent/Orders';\r\nimport Divider from '../../Atoms/Divider/Divider';\r\n\r\nfunction MyPages() {\r\n const { fullName } = useUserStateData();\r\n const { pageIntroText } = useCurrentPage();\r\n const { languageRoute, staticPages, requestToken } = useAppSettingsData();\r\n\r\n const {\r\n 'account/welcome': welcome,\r\n 'customerInfo/myOrders/myOrder': myOrderLabel,\r\n } = useTranslationData();\r\n\r\n const [editMode, setEditMode] = useState(false);\r\n const handleToggleEditMode = () => {\r\n setEditMode(!editMode);\r\n window.scrollTo(0, 0);\r\n };\r\n const kexNavigate = useKexNavigate();\r\n\r\n const [user, setUser] = useState(useUserStateData());\r\n const [orderData, setOrderData] = useState(null);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const currentPage = useCurrentPage();\r\n const url = `/api/${\r\n languageRoute || 'en'\r\n }/customer/GetMyInformation?customerId=${user.customerId}`;\r\n const [customerInformation, setCustomerInformation] =\r\n useState();\r\n\r\n const handleUpdateInformation = async (\r\n data: any,\r\n addressUpdate?: boolean\r\n ) => {\r\n let updatedData = data;\r\n\r\n if (!updatedData.user) {\r\n updatedData.user = user;\r\n }\r\n\r\n if (!updatedData.customerInformationData) {\r\n updatedData.customerInformationData = customerInformation;\r\n }\r\n\r\n const url = `/api/${languageRoute || 'en'}/customer/${\r\n addressUpdate ? 'SetMyAddresses' : 'SetMyInformation'\r\n }`;\r\n\r\n const res = await UpdateMyInformation(\r\n currentPage.channelId,\r\n requestToken,\r\n updatedData,\r\n url\r\n );\r\n\r\n setCustomerInformation(res.data.customerInformation);\r\n\r\n if (res.data.user) {\r\n setUser(res.data.user);\r\n }\r\n\r\n return res;\r\n };\r\n\r\n const handleChangePassword = async (\r\n userCredentials: UserCredentials,\r\n setError: any,\r\n setValidationMessage: any\r\n ) => {\r\n const res = await ChangePassword(\r\n userCredentials,\r\n requestToken,\r\n languageRoute,\r\n currentPage.channelId,\r\n setError,\r\n setValidationMessage,\r\n kexNavigate\r\n );\r\n\r\n return res;\r\n };\r\n\r\n const fetchData = async () => {\r\n const customerInformation = await GetMyInformation(\r\n currentPage.channelId,\r\n url\r\n );\r\n\r\n if (customerInformation) {\r\n setCustomerInformation(customerInformation);\r\n }\r\n };\r\n\r\n const fetchOrderData = async () => {\r\n const url = `/api/${languageRoute || 'en'}/order/GetAllOrders?customerId=${\r\n user.customerId\r\n }&pageIndex=1&pageSize=5`;\r\n\r\n const data: OrderInfoViewModel = await GetOrders(\r\n currentPage.channelId,\r\n url,\r\n setIsLoading\r\n );\r\n\r\n if (data) {\r\n setOrderData(data);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (user.id) {\r\n fetchData();\r\n fetchOrderData();\r\n }\r\n }, [currentPage.channelId]);\r\n\r\n if (!user.authenticated) {\r\n kexNavigate(staticPages.loginPage);\r\n }\r\n\r\n return (\r\n \r\n {editMode ? (\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n {fullName && (\r\n \r\n {welcome}, {fullName}!\r\n
\r\n )}\r\n {pageIntroText && {pageIntroText}}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {myOrderLabel}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n >\r\n )}\r\n \r\n );\r\n}\r\n\r\nconst ContentWrapper = styled('div', {\r\n maxW: '$contentMaxWidthSmall',\r\n w: '100%',\r\n mx: 'auto',\r\n});\r\n\r\nconst HeadingSection = styled('div', {\r\n maxW: '100%',\r\n});\r\n\r\nconst StyledDivider = styled(Divider, {\r\n w: 16,\r\n my: 4,\r\n '@mediaMinLarge': {\r\n mb: 8,\r\n },\r\n});\r\n\r\nconst SectionsWrapper = styled('div', {\r\n w: '100%',\r\n backgroundColor: '$backgroundPrimary',\r\n p: 4,\r\n '@mediaMinLarge': {\r\n p: 8,\r\n },\r\n});\r\n\r\nconst TopContent = styled('div', {\r\n maxW: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n position: 'relative',\r\n '@mediaMinLarge': {\r\n mx: 'auto',\r\n },\r\n});\r\n\r\nconst OrdersSection = styled('div', {\r\n wh: '100%',\r\n backgroundColor: '$rootBackgroundColor',\r\n p: 4,\r\n '@mediaMinLarge': {\r\n p: 8,\r\n },\r\n});\r\n\r\nconst InformationSection = styled('div', {\r\n w: '100%',\r\n backgroundColor: '$backgroundPrimary',\r\n p: 4,\r\n '@mediaMinLarge': {\r\n p: 8,\r\n },\r\n});\r\n\r\nconst Intro = styled('p', {\r\n fs: 8,\r\n fontWeight: '$fw300',\r\n lineHeight: '24px',\r\n opacity: 0.9,\r\n mixBlendMode: 'normal',\r\n '@mediaMinMedium': {\r\n fs: 10,\r\n lineHeight: '32px',\r\n },\r\n});\r\n\r\nconst SectionContent = styled('div', {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxW: '100%',\r\n '@mediaMinLarge': {\r\n mx: 'auto',\r\n },\r\n});\r\n\r\nexport default MyPages;\r\n"],"names":["Divider","_ref","type","marginTop","noMargin","css","rest","_objectWithoutProperties","_excluded","_jsx","BaseDivider","_objectSpread","styled","h","w","mt","mb","backgroundColor","variants","max","mx","vertical","my","header","opacity","headerLogo","true","m","FormLabel","fontSize","fontWeight","color","default","error","hasError","children","htmlFor","InputGroup","position","FormInput","fs","ls","px","bw","borderStyle","borderColor","border","outline","round","br","title","_ref$type","onChange","onBlur","onKeyDown","name","validation","placeholder","_ref$disabled","disabled","validationDispatch","useInputValidation","_useState","useState","_useState2","_slicedToArray","setHasError","_useState3","_useState4","errorMessage","setErrorMessage","_useState5","_useState6","hasTouched","setHasTouched","_useState7","_useState8","hasValue","setHasValue","onInputChange","val","doValidation","currentValue","validationError","undefined","active","pattern","test","required","minLength","length","maxLength","onInputBlur","e","currentTarget","value","useEffect","payload","backendValidation","message","_jsxs","Label","onFocus","onTouched","onInput","reducer","state","action","newInputs","inputs","newCount","count","hasOwnProperty","ValidationDispatchContext","React","initialReducerState","InputValidation","onInputsValid","onInputsInvalid","_useReducer","useReducer","_useReducer2","_useReducer2$","dispatch","validCount","key","Provider","Wrapper","Dot","display","lineHeigh","animation","concat","animationFrames","animationDuration","timings","animationIterationCount","animationTimingFunction","animationFillMode","animationDelay","abortController","AbortController","GetMyInformation","_x","_x2","_GetMyInformation","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee","channelId","url","signal","litiumContext","wrap","_context","prev","next","abort","JSON","stringify","channelSystemId","abrupt","Fetcher","data","resolve","stop","UpdateMyInformation","_x3","_x4","_x5","_x6","_UpdateMyInformation","_callee2","requestToken","res","responseJson","_context2","fetch","method","headers","RequestVerificationToken","body","sent","json","status","GetOrders","_GetOrders","setIsLoading","GetOrder","_GetOrder","ApproveOrder","_x7","_x8","_x9","_ApproveOrder","_callee3","languageRoute","orderId","response","_context3","orderStatus","AddOrderLinesToCart","_x10","_x11","_x12","_x13","_AddOrderLinesToCart","_callee4","_yield$res$json","cart","notification","cartUrl","_context4","ok","EventDispatcher","NOTIFY_ACTION","mutate","Add","_Add","organizationId","items","startDate","intervalInDays","setError","setValidationMessage","Update","_x14","_x15","_x16","_x17","_x18","_x19","_x20","_x21","_x22","_x23","_x24","_Update","recurringOrderId","onHold","_x25","_x26","Delete","_x27","_x28","_x29","_x30","_Delete","AddItemsToCart","_x31","_x32","_x33","_AddItemsToCart","_callee5","_context5","SignIn","_SignIn","userCredentials","loginPageUrl","changePasswordUrl","accountUrl","language","statusCode","window","location","href","redirectUrl","SignOut","_SignOut","ChangePassword","_ChangePassword","kexNavigate","updateHeader","updateUserState","ChangeExpiredPassword","_ChangeExpiredPassword","pageId","setSuccess","Root","overflow","ContentWrapper","width","p","SectionsWrapper","TopContent","maxWidth","flexDirection","py","Heading","lineHeight","dividerCSS","Intro","mixBlendMode","subTitle","_Fragment","ErrorMessage","flexGrow","flexShrink","flexBasis","ChangeEmailText","ValidationMessage","alignItems","success","IconStyleError","wh","mr","PasswordArea","StyledOval","StyledCtaButton","LoadingCircle","CtaButton","ButtonContainer","pb","ListItemText","StyledButton","IconStyle","StyledCloseIcon","CloseIcon","StyledEditIcon","EditIcon","Item","ListItem","maxW","ListItemTitle","flexWrap","justifyContent","customerInformationData","user","updateMyInformation","handleChangePassword","useAppSettingsData","_useTranslationData","useTranslationData","contactLabel","firstNameLabel","lastNameLabel","companyLabel","detailsLabel","editLabel","cancelLabel","saveLabel","passwordLabel","emailLabel","phoneLabel","currentPasswordLabel","newPasswordLabel","newPasswordConfirmLabel","emailValidationLabel","invalidPhoneNrLabel","changeEmailText","copyData","parse","userToEdit","setUserToEdit","customerInformationDataToEdit","setCustomerInformationDataToEdit","isLoading","editing","setEditing","_useState9","_useState10","setDisabled","_useState11","_useState12","_useState13","_useState14","validationMessage","_useState15","_useState16","setBtnEnabled","_useState17","_useState18","_useState19","currentPassword","newPassword","newPasswordConfirm","_useState20","password","setPassword","phoneRegExp","RegExp","resetData","cancel","handeSetPassword","setName","handleUpdatePassword","_ref2","userName","email","resetPwdButtonDisabled","handleSubmit","_ref3","customerInformation","handleRenderListItemTitle","editNum","editable","onClick","size","companyName","customerId","ExclamationMarkIcon","Input","firstName","lastName","phone","dividerStyle","DeliveryAddress","Bold","Container","rowGap","AddressList","StyledArrowUpIcon","ArrowIcon","marginRight","marginLeft","transform","StyledArrowDownIcon","flex","ListItemStyle","ml","italic","fontStyle","ListItemSmall","SearchContainer","borderBottom","StyledSearchIcon","SearchIcon","left","InputField","pl","_customerInformationD","_customerInformationD2","_customerInformationD3","_customerInformationD4","_customerInformationD5","_customerInformationD6","_customerInformationD7","_customerInformationD8","expandIcon","primaryAddressLabel","billingAddressLabel","savedAddressesLabel","sameAsDeliveryLabel","expandLabel","closeLabel","sortSearchTitleLabel","searchPlaceholderLabel","careOfLabel","setEditingAddress","query","setQuery","_useState21","_useState22","setNewAddress","onlyAddress","deliveryAddress","street","postalCode","city","invoiceAddress","sameAsDelivery","optionalDeliveryAddresses","filter","address","toLocaleLowerCase","includes","map","index","careOf","Content","TabList","borderRadius","Tab","textAlign","zIndex","cursor","StyledLinkButton","textDecoration","t","l","StyledArrowLeftLinkIcon","pt","handleToggleEditMode","backLinkLabel","accountTabLabel","accountTitleLabel","accountSubTitleLabel","addressTabLabel","addressTitleLabel","addressSubTitleLabel","settingsTitleLabel","settingsSubTitleLabel","activeTab","setActiveTab","CustomerInformationProfileEditContent","CustomerInformationAccount","CustomerInformationAddress","renderEditItem","gap","CustomerInformationComponent","onCheckout","ContentItemLeft","justifySelf","ContentItemRight","HeadingSection","Address","marginBottom","fw","onCheckoutPage","addressFormValue","setAddressFormValue","deliveryAddressLabel","myDetailLabel","customerInfoNumberLabel","editDataLabel","yourInformationLabel","CheckoutSectionTitle","H2","externalCustomerId","fullName","StyledArrowRightLinkIcon","StyledKexLink","KexLink","OrderWrapper","NoOrders","StyledH2","DotsWrapper","OrderArray","headingLabel","totalOrders","showAllLabel","noOrdersLabel","Dots","IconRounded","ArrayItem","ArrayItems","ContentWrapperLink","OrderId","underline","Status","ArrayOrderItem","order","orderDetailsPage","staticPages","isHovered","setIsHovered","onMouseOver","onMouseOut","externalOrderID","noUnderline","DoneIcon","PackageIcon","PreviewIcon","AttentionIcon","renderIcon","getFormattedDate","orderDate","orders","ordersCount","orderHistoryPage","orderHistoryLabel","allOrdersLabel","OrderComponent","OrderRow","activeOrdersPage","activeOrderLabel","allActiveOrdersLabel","Title","_order$name","useCurrentPage","_useAppSettingsData","recurringOrderCartPage","noRecurringOrderNameLabel","nextOrderDateLabel","updateOrderLabel","onHoldLabel","useKexNavigate","useUserStateData","handleGetOrder","id","nextOrderDate","recurringOrdersPage","recurringOrderLabel","allRecurringOrdersLabel","RecurringOrderRow","OrdersWrapper","gridTemplateColumns","g","gridColumnEnd","orderData","activeOrders","ActiveOrders","activeOrdersCount","recurringOrders","RecurringOrders","recurringOrdersCount","orderHistory","OrderHistory","totalOrdersCount","StyledDivider","OrdersSection","InformationSection","SectionContent","pageIntroText","welcome","myOrderLabel","editMode","setEditMode","scrollTo","setUser","setOrderData","currentPage","setCustomerInformation","handleUpdateInformation","addressUpdate","updatedData","fetchData","fetchOrderData","_ref4","authenticated","loginPage","CustomerInformationProfileEdit","H1","divider","Orders","CustomerInformationProfile"],"sourceRoot":""}