{\r\n !isSelected && dispatch(setSelectedPaymentSubProvider(provider));\r\n }}>\r\n \r\n
\r\n}\r\n\r\n/**\r\n * @param {PaymentMethodGroup} group\r\n * @param {boolean} openByDefault\r\n * @returns {JSX.Element}\r\n * @constructor\r\n */\r\nconst PaymentProviderGroup = function ({ group, openByDefault = false }) {\r\n if (!group || !group.providers.length) {\r\n return {provider.name}
\r\n \r\n 
\r\n
\r\n \r\n {translate('checkout.paytrail.group.noproviders')}
\r\n }\r\n\r\n // Enable logic even for desktop, but styling will only be available for mobile.\r\n const [isOpen, setIsOpen] = useState(openByDefault);\r\n const [showingLess, setShowingLess] = useState(true);\r\n const enableShowMoreFeature = group.providers.length > 4;\r\n const showMoreTextPartialKey = showingLess ? 'showmore' : 'showless';\r\n\r\n const extraClasses =\r\n (isOpen ? ' is-open' : '') +\r\n (showingLess ? ' is-showing-less' : '');\r\n\r\n const toggleShowMore = useCallback(e => {\r\n if (!enableShowMoreFeature) return;\r\n e.stopPropagation();\r\n setShowingLess(!showingLess);\r\n }, [showingLess])\r\n\r\n return setIsOpen(!isOpen)}>\r\n
\r\n\r\n {group.name}
\r\n \r\n\r\n {group.providers.map((provider, index) =>\r\n \r\n \r\n )}\r\n\r\n {enableShowMoreFeature &&\r\n \r\n {translate(`muha.checkout.paytrail.group.${showMoreTextPartialKey}`)}\r\n \r\n }\r\n
\r\n \r\n}\r\n\r\nconst PaytrailPaymentProviders = function () {\r\n const dispatch = useDispatch();\r\n const { payload: checkoutPayload, isSubmitting } = useSelector(state => state.checkout);\r\n\r\n const paymentSubProviders = checkoutPayload.paymentSubProviders;\r\n useEffect(() => {\r\n const firstProvider = findFirstPaymentProvider(paymentSubProviders);\r\n if (firstProvider) {\r\n dispatch(setSelectedPaymentSubProvider(firstProvider));\r\n }\r\n }, [paymentSubProviders]);\r\n\r\n /**\r\n * @type {PaymentMethodGroup[]}\r\n */\r\n if (!paymentSubProviders || !paymentSubProviders.length) {\r\n return {translate('muha.checkout.paytrail.noproviders')}
\r\n }\r\n\r\n return \r\n {paymentSubProviders.map((group, index) =>\r\n \r\n \r\n )}\r\n\r\n {isSubmitting &&
\r\n}\r\n\r\nconst LoadingOverlay = function() {\r\n return \r\n}\r\n\r\nexport default PaytrailPaymentProviders;\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect, useDispatch } from 'react-redux';\r\n\r\nimport Cart from '../Components/Cart';\r\nimport CheckoutPrivateCustomerInfo from '../Components/Checkout.PrivateCustomerInfo';\r\nimport CheckoutBusinessCustomerInfo from '../Components/Checkout.BusinessCustomerInfo';\r\nimport CheckoutDeliveryMethods from '../Components/Checkout.DeliveryMethods';\r\nimport CheckoutPaymentMethods from '../Components/Checkout.PaymentMethods';\r\nimport PaymentWidget from '../Components/Payments/PaymentWidget';\r\n\r\nimport constants from '../constants';\r\n\r\nimport {\r\n acceptTermsOfCondition,\r\n setBusinessCustomer,\r\n setCampaignCode,\r\n setDelivery,\r\n setPayment,\r\n setOrderNote,\r\n submit,\r\n verify,\r\n setCustomerDetails,\r\n setAlternativeAddress,\r\n setSignUp,\r\n setSelectedCompanyAddress,\r\n submitError,\r\n reloadPayment,\r\n submitCampaignCode,\r\n submitRequest,\r\n submitDone,\r\n} from '../Actions/Checkout.action';\r\nimport { update as updateOrderRowQuantity } from '../Actions/Cart.action';\r\n\r\nimport { translate } from '../Services/translation';\r\nimport { string, object, boolean, mixed } from 'yup';\r\nimport PaytrailPaymentProviders from \"../Muurikka/Components/PaytrailPaymentProviders\";\r\n\r\nconst privateCustomerAdditionalDetailsSchema = object().shape({\r\n acceptTermsOfCondition: boolean().required(translate(`validation.checkrequired`)).oneOf([true], translate(`validation.checkrequired`)),\r\n selectedDeliveryMethod: string().required(translate(`validation.required`)),\r\n});\r\n\r\nconst privateCustomerAddressSchema = object().shape({\r\n email: string().required(translate(`validation.required`)).email(translate(`validation.email`)),\r\n phoneNumber: string().required(translate(`validation.required`)),\r\n country: mixed().required(translate(`validation.required`)).notOneOf([''], translate('validation.required')),\r\n city: string().required(translate(`validation.required`)),\r\n zipCode: string().required(translate(`validation.required`)),\r\n address: string().required(translate(`validation.required`)),\r\n lastName: string().required(translate(`validation.required`)),\r\n firstName: string().required(translate(`validation.required`)),\r\n});\r\n\r\nconst privateCustomerAlternativeAddressSchema = object().shape({\r\n phoneNumber: string().required(translate(`validation.required`)),\r\n country: mixed().required(translate(`validation.required`)).notOneOf([''], translate('validation.required')),\r\n city: string().required(translate(`validation.required`)),\r\n zipCode: string().required(translate(`validation.required`)),\r\n address: string().required(translate(`validation.required`)),\r\n lastName: string().required(translate(`validation.required`)),\r\n firstName: string().required(translate(`validation.required`)),\r\n});\r\n\r\nconst businessCustomerDetailsSchema = object().shape({\r\n acceptTermsOfCondition: boolean().required(translate(`validation.checkrequired`)).oneOf([true], translate(`validation.checkrequired`)),\r\n selectedDeliveryMethod: string().required(translate(`validation.required`)),\r\n email: string().required(translate(`validation.required`)).email(translate(`validation.email`)),\r\n phoneNumber: string().required(translate(`validation.required`)),\r\n lastName: string().required(translate(`validation.required`)),\r\n firstName: string().required(translate(`validation.required`)),\r\n selectedCompanyAddressId: string().required(translate(`validation.required`)),\r\n});\r\n\r\nclass CheckoutContainer extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n cartChanged: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (!this.props || !this.props.checkout) {\r\n return;\r\n }\r\n\r\n // set selected value for payment method on load.\r\n const { selectedPaymentMethod, deliveryMethods, selectedDeliveryMethod } = this.props.checkout.payload;\r\n selectedPaymentMethod && this.props.setPayment(selectedPaymentMethod);\r\n\r\n if (!selectedDeliveryMethod || deliveryMethods.length > 0 && !deliveryMethods.find(d => d.id === selectedDeliveryMethod)) {\r\n this.props.setDelivery(deliveryMethods[0].id);\r\n }\r\n\r\n // fill default select value to the state\r\n const { customerDetails, alternativeAddress } = this.props.checkout.payload;\r\n (!customerDetails || !customerDetails.country) && constants.countries && constants.countries[0] && this.props.onCustomerDetailsChange('customerDetails', 'country', constants.countries[0].value);\r\n (!alternativeAddress || !alternativeAddress.country) && constants.countries && constants.countries[0] && this.props.onCustomerDetailsChange('alternativeAddress', 'country', constants.countries[0].value);\r\n }\r\n\r\n placeOrder() {\r\n const { payload } = this.props.checkout,\r\n { isBusinessCustomer, selectedCompanyAddressId, acceptTermsOfCondition,\r\n selectedPaymentMethod, selectedDeliveryMethod } = this.props.checkout.payload;\r\n\r\n const notCustomerDetailFields = ['selectedCompanyAddressId', 'selectedPaymentMethod', 'selectedDeliveryMethod', 'acceptTermsOfCondition'];\r\n const onError = (error, addressPath = 'customerDetails') => {\r\n error.path = notCustomerDetailFields.indexOf(error.path) >= 0 ? error.path : `${addressPath}-${error.path}`;\r\n this.props.submitError(error)\r\n };\r\n this.props.submitRequest();\r\n if (isBusinessCustomer) {\r\n businessCustomerDetailsSchema.validate({\r\n ...payload.customerDetails,\r\n selectedCompanyAddressId,\r\n selectedPaymentMethod,\r\n selectedDeliveryMethod,\r\n acceptTermsOfCondition\r\n })\r\n .then(() => {\r\n this.props.submit();\r\n })\r\n .catch(onError);\r\n } else {\r\n const checkAltAddress = payload.alternativeAddress.showAlternativeAddress;\r\n\r\n privateCustomerAddressSchema.validate({\r\n ...payload.customerDetails\r\n })\r\n .then(() => {\r\n if (checkAltAddress) {\r\n privateCustomerAlternativeAddressSchema.validate({\r\n ...payload.alternativeAddress\r\n })\r\n .then(() => {\r\n privateCustomerAdditionalDetailsSchema.validate({\r\n selectedPaymentMethod,\r\n selectedDeliveryMethod,\r\n acceptTermsOfCondition\r\n })\r\n .then(() => {\r\n this.props.submit();\r\n })\r\n .catch(onError);\r\n })\r\n .catch((error) => { onError(error, 'alternativeAddress') })\r\n } else {\r\n privateCustomerAdditionalDetailsSchema.validate({\r\n selectedPaymentMethod,\r\n selectedDeliveryMethod,\r\n acceptTermsOfCondition\r\n })\r\n .then(() => {\r\n this.props.submit();\r\n })\r\n .catch(onError);\r\n }\r\n })\r\n .catch(onError);\r\n }\r\n }\r\n\r\n render() {\r\n const { cart } = this.props;\r\n if (!cart || !cart.orderRows || cart.orderRows.length < 1) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n const url = new URL(window.location.href);\r\n const params = new URLSearchParams(url.search);\r\n const successQuery = params.get('success');\r\n const paymentFailed = successQuery === 'false';\r\n\r\n const { checkout } = this.props,\r\n { payload, isSubmitting, errors = {} } = checkout,\r\n { orderNote, paymentWidget, paymentMethods, authenticated, isBusinessCustomer, checkoutMode, selectedPaymentSubProvider, selectedPaymentMethod } = payload;\r\n\r\n let validCheckout = true;\r\n const isPaytrail = selectedPaymentMethod.toLowerCase().includes('paytrail');\r\n if (isPaytrail) {\r\n validCheckout = selectedPaymentSubProvider && selectedPaymentSubProvider.length > 0;\r\n }\r\n\r\n let extraStyling = !validCheckout ? { opacity: 0.5, pointerEvents: 'none' } : null;\r\n\r\n return (\r\n \r\n
\r\n {translate(`checkout.cart.empty`)}
\r\n\r\n {paymentFailed && \r\n \r\n\r\n {!paymentWidget && \r\n
\r\n );\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.checkout.result && this.props.checkout.result.redirectUrl) {\r\n window.location = this.props.checkout.result.redirectUrl;\r\n return;\r\n }\r\n\r\n const { checkout } = this.props;\r\n if (!checkout.isSubmitting || !checkout.errors) {\r\n return;\r\n }\r\n\r\n const errorKeys = Object.keys(checkout.errors);\r\n if (!errorKeys || errorKeys.length < 1) {\r\n return;\r\n }\r\n\r\n const errorNode = document.querySelector(`[data-error-for=\"${errorKeys[0]}\"]`);\r\n if (!errorNode) {\r\n return;\r\n }\r\n\r\n const inputNode = errorNode.parentElement.querySelector('input');\r\n if (inputNode) {\r\n setTimeout(() => inputNode.focus(), 1000);\r\n inputNode.scrollIntoView({ behavior: 'smooth' });\r\n } else {\r\n errorNode.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n }\r\n\r\n renderCartSection() {\r\n const { checkout } = this.props,\r\n { errors = {} } = checkout;\r\n return (\r\n {translate('payment.error')}
\r\n }\r\n\r\n {(!paymentWidget || paymentWidget.isChangeable) && this.renderCartSection()}\r\n {this.renderDeliveryMethodsSection()}\r\n {paymentMethods && paymentMethods.length > 1 && (!paymentWidget || paymentWidget.isChangeable) && this.renderPaymentMethodsSection()}\r\n {!paymentWidget && this.renderCustomerDetailsSection()}\r\n {!paymentWidget && this.renderPaytrailProvidersSection()}\r\n \r\n
\r\n }\r\n\r\n \r\n
\r\n\r\n {translate('checkout.order.title')}
\r\n\r\n this.props.acceptTermsOfCondition(event.target.checked)}/>\r\n \r\n {errors.acceptTermsOfCondition &&\r\n {errors.acceptTermsOfCondition[0]}\r\n }\r\n
\r\n\r\n \r\n {!authenticated && (isBusinessCustomer || checkoutMode === constants.checkoutMode.companyCustomers) ?\r\n \r\n : \r\n }\r\n
\r\n \r\n {errors && errors.general &&\r\n
\r\n {errors.general[0]}
\r\n }\r\n {translate('checkout.title')}
\r\n\r\n {errors && errors.cart &&
\r\n {errors.cart[0]}
}\r\n\r\n
\r\n\r\n {translate('muha.checkout.paytrail.paymentproviders')}
\r\n\r\n
\r\n \r\n
\r\n {!isBusinessCustomer && checkoutMode !== constants.checkoutMode.companyCustomers && privateCustomerInfoComponent}\r\n {(isBusinessCustomer || checkoutMode === constants.checkoutMode.companyCustomers) && businessCustomerInfoComponent}\r\n {translate('checkout.customerinfo.title')}
\r\n {isBusinessCustomer && checkoutMode === constants.checkoutMode.both && this.props.setBusinessCustomer(false)} className=\"checkout__link\">{translate('checkout.customerinfo.privatecustomer')}}\r\n\r\n
\r\n {authenticated && businessCustomerInfoComponent}\r\n {translate('checkout.customerinfo.title')}
\r\n\r\n
\r\n {privateCustomerInfoComponent}\r\n {translate('checkout.customerinfo.title')}
\r\n\r\n
\r\n