How to use belter - 10 common examples

function start(url : string) : ZalgoPromise {
  const params = parseQuery(url.split('?')[1]);
  
  const body = document.body;
  if (!body) {
    throw new Error(`No document body available to render to`);
  }

  return new ZalgoPromise((resolve, reject) => {
    contingencyResolveFunction = resolve;

    // $FlowFixMe
    contingency.Component({
      action:              params.action,
      xcomponent:          '1',
      flow:                params.flow,
      cart_id:             params.cart_id,
      onContingencyResult: (err, result) => {

/* @flow */

import { ZalgoPromise } from 'zalgo-promise/src';
import { once, bridge } from 'post-robot/src';
import { isIEIntranet, memoize } from 'belter/src';

import { FUNDING } from '../constants';
import { URLS, DOMAINS } from '../config';

type FrameMetaData = {
    iframeEligible : boolean,
    iframeEligibleReason : string,
    rememberedFunding : Array<$Values>
};

export let openMetaFrame = memoize(() : ZalgoPromise => {
    return ZalgoPromise.try(() => {

        if (isIEIntranet()) {
            return {
                iframeEligible:       false,
                iframeEligibleReason: 'ie_intranet',
                rememberedFunding:    []
            };
        }

        let metaFrameUrl : string = URLS.META;
        let metaFrameDomain : string = DOMAINS.META;

        return ZalgoPromise.try(() => {
            if (!bridge) {
                throw new Error(`Opening meta window without bridge support is not currently supported`);

function buildXApproveActions({ intent, orderID, paymentID, payerID, restart, subscriptionID, facilitatorAccessToken, buyerAccessToken, partnerAttributionID, forceRestAPI } : ActionOptions) : XOnApproveActionsType {

    // Subscription GET Actions
    const getSubscriptionApi = memoize(() => getSubscription(subscriptionID, { buyerAccessToken }));
    const activateSubscriptionApi = memoize(() => activateSubscription(subscriptionID, { buyerAccessToken }));

    const redirect = (url) => {
        if (!url) {
            throw new Error(`Expected redirect url`);
        }

        if (url.indexOf('://') === -1) {
            getLogger().warn('redir_url_non_scheme', { url }).flush();
            throw new Error(`Invalid redirect url: ${ url } - must be fully qualified url`);
        } else if (!url.match(/^https?:\/\//)) {
            getLogger().warn('redir_url_non_http', { url }).flush();
        }

        return redir(url, window.top);
    };

function buildXApproveActions({ intent, orderID, paymentID, payerID, restart, subscriptionID, facilitatorAccessToken, buyerAccessToken, partnerAttributionID, forceRestAPI } : ActionOptions) : XOnApproveActionsType {

    // Subscription GET Actions
    const getSubscriptionApi = memoize(() => getSubscription(subscriptionID, { buyerAccessToken }));
    const activateSubscriptionApi = memoize(() => activateSubscription(subscriptionID, { buyerAccessToken }));

    const redirect = (url) => {
        if (!url) {
            throw new Error(`Expected redirect url`);
        }

        if (url.indexOf('://') === -1) {
            getLogger().warn('redir_url_non_scheme', { url }).flush();
            throw new Error(`Invalid redirect url: ${ url } - must be fully qualified url`);
        } else if (!url.match(/^https?:\/\//)) {
            getLogger().warn('redir_url_non_http', { url }).flush();
        }

        return redir(url, window.top);
    };

export function getCardFieldsComponent() : ZoidComponent {
    return inlineMemoize(getCardFieldsComponent, () => {
        // $FlowFixMe
        return create({
            tag:  'card-fields',
            name: 'ppcard',

            url: getCardUrl,

            dimensions: {
                height: '300px',
                width:  '100%'
            },

            attributes: {
                iframe: {
                    allowpaymentrequest: 'allowpaymentrequest',
                    scrolling:           'no'

// $FlowFixMe
                targetWindow = options.window.contentWindow;
            }
        } else {
            targetWindow = options.window;
        }

        if (!targetWindow) {
            throw new Error('Expected options.window to be a window object, iframe, or iframe element id.');
        }

        var win = targetWindow;

        domain = options.domain || WILDCARD;

        var hash = options.name + '_' + uniqueID();

        if (isWindowClosed(win)) {
            throw new Error('Target window is closed');
        }

        var hasResult = false;

        var reqPromises = requestPromises.getOrSet(win, function () {
            return [];
        });

        var requestPromise = ZalgoPromise['try'](function () {

            if (isAncestor(window, win)) {
                return awaitWindowHello(win, options.timeout || CONFIG.CHILD_WINDOW_TIMEOUT);
            }

frame.classList.add(CLASS.VISIBLE);

        setTimeout(() => {
            destroyElement(prerenderFrame);
        }, 1000);
    });

    // $FlowFixMe
    const { style } = props;
    const { label, layout, height: buttonHeight } = style;

    let minimumSize = MINIMUM_SIZE[layout];
    const maximumSize = MAXIMUM_SIZE[layout];
    
    if (buttonHeight) {
        const possibleSizes = values(BUTTON_SIZE).filter(possibleSize => {
            return BUTTON_SIZE_STYLE[possibleSize] && buttonHeight &&
                BUTTON_SIZE_STYLE[possibleSize].minHeight <= buttonHeight && BUTTON_SIZE_STYLE[possibleSize].maxHeight >= buttonHeight;
        });

        possibleSizes.sort((sizeA : $Values, sizeB : $Values) : number => {
            return BUTTON_SIZE_STYLE[sizeA].defaultWidth - BUTTON_SIZE_STYLE[sizeB].defaultWidth;
        });

        minimumSize = possibleSizes[0];
    }

    const setupAutoResize = (el) => {
        event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
            if (typeof newWidth === 'number') {
                el.style.width = toCSS(newWidth);
            }

$ReadOnlyArray<{ fundingSource : $Values, paymentMethodID : string, vendor? : $Values, label : string }>  {
    
    const vaultedFunding = [];

    for (const fundingSource of values(FUNDING)) {
        const fundingConfig = fundingEligibility[fundingSource];

        if (fundingConfig && fundingConfig.eligible && fundingConfig.vaultedInstruments) {
            // $FlowFixMe
            for (const { id, label: { description } } of fundingConfig.vaultedInstruments) {
                vaultedFunding.push({ fundingSource, label: description, paymentMethodID: id });
            }
        }

        if (fundingConfig && fundingConfig.vendors) {
            for (const vendor of values(CARD)) {
                // $FlowFixMe
                const vendorConfig = fundingConfig.vendors[vendor];

                if (vendorConfig && vendorConfig.vaultedInstruments) {
                    for (const { id, label: { description } } of vendorConfig.vaultedInstruments) {
                        vaultedFunding.push({ fundingSource, vendor, label: description, paymentMethodID: id });
                    }
                }
            }
        }

    }
    
    return vaultedFunding;
}

export function determineVaultedFunding({ fundingEligibility } : {| fundingEligibility : FundingEligibilityType |}) :
    $ReadOnlyArray<{ fundingSource : $Values, paymentMethodID : string, vendor? : $Values, label : string }>  {
    
    const vaultedFunding = [];

    for (const fundingSource of values(FUNDING)) {
        const fundingConfig = fundingEligibility[fundingSource];

        if (fundingConfig && fundingConfig.eligible && fundingConfig.vaultedInstruments) {
            // $FlowFixMe
            for (const { id, label: { description } } of fundingConfig.vaultedInstruments) {
                vaultedFunding.push({ fundingSource, label: description, paymentMethodID: id });
            }
        }

        if (fundingConfig && fundingConfig.vendors) {
            for (const vendor of values(CARD)) {
                // $FlowFixMe
                const vendorConfig = fundingConfig.vendors[vendor];

                if (vendorConfig && vendorConfig.vaultedInstruments) {
                    for (const { id, label: { description } } of vendorConfig.vaultedInstruments) {

if (height < minHeight || height > maxHeight) {
            throw new Error(`Expected style.height to be between ${ minHeight }px and ${ maxHeight }px - got ${ height }px`);
        }
    }

    if (layout === BUTTON_LAYOUT.VERTICAL) {
        if (tagline) {
            throw new Error(`style.tagline is not allowed for ${ BUTTON_LAYOUT.VERTICAL } layout`);
        }
    }

    return { label, layout, color, shape, tagline, height, period };
}

const COUNTRIES = values(COUNTRY);
const FUNDING_SOURCES = values(FUNDING);
const ENVS = values(ENV);
const PLATFORMS = values(PLATFORM);

export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonProps {

    if (!props) {
        throw new Error(`Expected props`);
    }

    let {
        clientID,
        // $FlowFixMe
        style = {},
        remembered = [],
        locale = DEFAULT_PROPS.LOCALE,