import * as R from 'ramda'; import { useFormikContext } from 'formik'; import { css } from '@emotion/css'; import { InvoicePaymentPagePreview, InvoicePaymentPagePreviewProps, } from '@/containers/PaymentPortal/InvoicePaymentPagePreview'; import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider'; import { InvoiceCustomizeFormValues } from './types'; import { Box } from '@/components'; const withInvoicePaymentPreviewPageProps =

( Component: React.ComponentType

, ) => { return (props: Omit) => { const { values } = useFormikContext(); const { brandingState } = useElementCustomizeContext(); const mergedBrandingState = { ...brandingState, ...values, }; const mergedProps: InvoicePaymentPagePreviewProps = { companyLogoUri: mergedBrandingState?.companyLogoUri, primaryColor: mergedBrandingState?.primaryColor, }; return ( ); }; }; export const InvoiceCustomizePaymentPreview = R.compose( withInvoicePaymentPreviewPageProps, )(InvoicePaymentPagePreview);