@rebilly/framepay-react 2.0.0 → 2.1.0

package/src/lib/constants.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+/**
+ *
+ * Constants file.
+ * Links to the remote library FramePay and other settings.
+ *
+ */
+
+/**
+ * The ReactJS version 14+
+ * used in context.ts
+ */
+export const REACT_VERSION = React.version;
+
+/**
+ * Remote FramePay library CDN link.
+ */
+export const FRAMEPAY_SCRIPT_LINK: string =
+    process.env.FRAMEPAY_SCRIPT_LINK ||
+    'https://framepay.rebilly.com/rebilly.js';
+
+/**
+ * Remote FramePay style CDN link.
+ */
+export const FRAMEPAY_STYLE_LINK: string =
+    process.env.FRAMEPAY_STYLE_LINK ||
+    'https://framepay.rebilly.com/rebilly.css';
+
+/**
+ * Supported FramePay card types
+ */
+export const SUPPORTED_CARD_BRANDS: SupportedCardBrandsObject = {
+    Amex: SupportedCardBrands.Amex,
+    AstroPayCard: SupportedCardBrands.AstroPayCard,
+    Cup: SupportedCardBrands.Cup,
+    DinersClub: SupportedCardBrands.DinersClub,
+    Discover: SupportedCardBrands.Discover,
+    JCB: SupportedCardBrands.JCB,
+    Maestro: SupportedCardBrands.Maestro,
+    MasterCard: SupportedCardBrands.MasterCard,
+    Visa: SupportedCardBrands.Visa
+};

package/src/lib/context.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { REACT_VERSION } from './constants';
+import getRebillyApi from './get-rebilly-api';
+
+const defaultContextValue = {
+    api: getRebillyApi(),
+    error: null,
+    ready: false
+};
+
+// tslint:disable:no-let
+let ProvidedContext;
+if (/^15.*/.test(REACT_VERSION) || /^0.14.*/.test(REACT_VERSION)) {
+    // tslint:disable:no-var-requires
+    const createReactContext = require('create-react-context');
+    ProvidedContext = createReactContext(defaultContextValue);
+} else {
+    ProvidedContext = React.createContext<FramePayContext>(defaultContextValue);
+}
+
+const ContextProvider = ProvidedContext.Provider;
+const ContextConsumer = ProvidedContext.Consumer;
+
+export { ContextProvider, ContextConsumer };

package/src/lib/dom-util.ts

@@ -0,0 +1,35 @@
+import { FRAMEPAY_SCRIPT_LINK, FRAMEPAY_STYLE_LINK } from './constants';
+
+interface ScriptProperties {
+    readonly onReady: () => void;
+    readonly onError: () => void;
+}
+
+export const injectScript = ({ onReady, onError }: ScriptProperties) => {
+    // tslint:disable:no-expression-statement
+    const script = document.createElement('script');
+    const header = document.querySelector('head');
+    script.setAttribute('type', 'text/javascript');
+    script.setAttribute('async', 'true');
+    script.setAttribute('defer', 'true');
+    script.setAttribute('src', FRAMEPAY_SCRIPT_LINK);
+    script.setAttribute('defer', 'true');
+    script.addEventListener('load', () => onReady());
+    script.addEventListener('error', () => onError());
+    if (header) {
+        header.appendChild(script);
+    }
+    // tslint:enable:no-expression-statement
+};
+
+export const injectStyle = () => {
+    // tslint:disable:no-expression-statement
+    const style = document.createElement('link');
+    const header = document.querySelector('head');
+    style.setAttribute('rel', 'stylesheet');
+    style.setAttribute('href', FRAMEPAY_STYLE_LINK);
+    if (header) {
+        header.appendChild(style);
+    }
+    // tslint:enable:no-expression-statement
+};

package/src/lib/framepay-error.ts

@@ -0,0 +1,59 @@
+export const ERROR_CODES = {
+    elementMountError: 'element-mount-error',
+    initializeError: 'initialize-error',
+    remoteScriptError: 'remote-script-error'
+} as ErrorCodes;
+
+export const defaultErrorMessages = {
+    [ERROR_CODES.remoteScriptError]: "Can't load the FramePay remote script",
+    [ERROR_CODES.elementMountError]: "Can't mount the element component",
+    [ERROR_CODES.initializeError]: `
+        FramePay initialize error\r\n
+        See https://github.com/Rebilly/framepay-react/tree/alpha#the-framepay-context-framepayprovider\r\n
+        See https://rebilly.github.io/framepay-docs/reference/rebilly.html#rebilly-initialize`
+} as DefaultErrorMessages;
+
+class ErrorBuilder {
+    make({
+        code,
+        details,
+        trace
+    }: {
+        readonly code: FramePayErrorCode;
+        readonly details: string;
+        readonly trace: any;
+    }): {
+        readonly code: FramePayErrorCode;
+        readonly details: string;
+        readonly message: DefaultErrorMessage;
+        readonly trace: any;
+    } {
+        return {
+            code,
+            details,
+            message: defaultErrorMessages[code],
+            trace: trace || null
+        };
+    }
+}
+
+const handler = new ErrorBuilder();
+
+const FramePayError = ({
+    code,
+    details = '',
+    trace = ''
+}: {
+    readonly code: FramePayErrorCode;
+    readonly details?: string;
+    readonly trace?: any;
+}) =>
+    handler.make({
+        code,
+        details,
+        trace
+    });
+
+FramePayError.codes = ERROR_CODES;
+
+export default FramePayError;

package/src/lib/get-rebilly-api.ts

@@ -0,0 +1,11 @@
+/**
+ * Just simple wrapper of remote FramePay api
+ */
+const remoteApi = (): RebillyApi => {
+    // @ts-ignore
+    return typeof window !== 'undefined' ? window.Rebilly : undefined;
+};
+
+export default function getRebillyApi(): RebillyApi {
+    return remoteApi();
+}