/* @flow */
/** @jsx jsxDom */
/* eslint max-lines: 0 */
import { base64encode, supportsPopups, isIos, noop } from 'belter/src';
import { ZalgoPromise } from 'zalgo-promise/src';
import { fundingLogos } from '../../resources';
import { BUTTON_LOGO_COLOR, CHECKOUT_OVERLAY_COLOR } from '../../constants';
import { containerContent } from './containerContent';
import { getContainerStyle } from './containerStyle';
import { getSandboxStyle } from './sandboxStyle';
const LOGO_COLOR = {
[ CHECKOUT_OVERLAY_COLOR.BLACK ]: BUTTON_LOGO_COLOR.WHITE,
[ CHECKOUT_OVERLAY_COLOR.WHITE ]: BUTTON_LOGO_COLOR.BLACK
};
export {
getContainerStyle,
getSandboxStyle
};
export type ContainerTemplateOptions = {
id : string,
props : Object,
CLASS : Object,
ANIMATION : Object,
CONTEXT : Object,
EVENT : Object,
dimensions : {
width : number,
height : number
},
actions : Object,
tag : string,
context : string,
outlet : HTMLElement,
on : Function,
jsxDom : Function
};
export function containerTemplate({ id, props, CLASS, ANIMATION, CONTEXT, EVENT, on, tag, context, actions, outlet, jsxDom } : ContainerTemplateOptions) : HTMLElement {
const [ lang, country ] = props.locale.split('_');
const content = containerContent[country][lang];
function close(event) {
event.preventDefault();
event.stopPropagation();
actions.close();
}
function focus(event) {
event.preventDefault();
event.stopPropagation();
if (isIos() && supportsPopups()) {
// eslint-disable-next-line no-alert
window.alert('Please switch tabs to reactivate the PayPal window');
} else {
ZalgoPromise.try(actions.focus).catch(noop);
}
}
const style = props.style || {};
const overlayColor = style.overlayColor || CHECKOUT_OVERLAY_COLOR.BLACK;
const logoColor = LOGO_COLOR[overlayColor];
const ppLogo = (typeof fundingLogos.pp === 'function')
? fundingLogos.pp({ logoColor })
: fundingLogos.pp[logoColor];
const paypalLogo = (typeof fundingLogos.paypal === 'function')
? fundingLogos.paypal({ logoColor })
: fundingLogos.paypal[logoColor];
const el = (
);
const container = (
{ el }
);
on(EVENT.CLOSE, () => {
el.className += ` ${ tag }-loading`;
});
return (
);
}