@flittpayments/js-sdk 2.0.11-alpha.0 → 2.0.12

package/dist/esm/checkout.js

@@ -91,6 +91,10 @@ const isArray = (o) => {
   return getType(o) === 'array'
 };
 
+const isBoolean = (o) => {
+  return typeof o === 'boolean'
+};
+
 const isElement = (o) => {
   return o && o.nodeType === 1
 };
@@ -464,6 +468,11 @@ const loadExternalApi = (url, path) => {
   return promise
 };
 
+const transitionDelay = (el) => {
+  let { transitionDelay, transitionDuration } = getComputedStyle(el);
+  return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000
+};
+
 var Utils = /*#__PURE__*/Object.freeze({
   __proto__: null,
   PromiseWithResolvers: PromiseWithResolvers,
@@ -485,6 +494,7 @@ var Utils = /*#__PURE__*/Object.freeze({
   hasProp: hasProp,
   isArguments: isArguments,
   isArray: isArray,
+  isBoolean: isBoolean,
   isDate: isDate,
   isElement: isElement,
   isError: isError,
@@ -505,6 +515,7 @@ var Utils = /*#__PURE__*/Object.freeze({
   removeElement: removeElement,
   stringFormat: stringFormat,
   toArray: toArray,
+  transitionDelay: transitionDelay,
   uuid: uuid
 });
 
@@ -629,6 +640,7 @@ const ButtonFrameCss = {
   overflow: 'hidden !important',
   height: '100% !important',
   outline: 'none !important',
+  'color-scheme': 'light',
   'z-index': '1 !important',
 };
 
@@ -855,6 +867,14 @@ function Deferred() {
     isProgress() {
       return status === PROGRESS
     },
+    clear() {
+      if (this.isPending()) {
+        resolveCallbacks.length = 0;
+        rejectCallbacks.length = 0;
+        notifyCallbacks.length = 0;
+      }
+      return this
+    },
     resolveWith(context, args) {
       if (this.isPending()) {
         status = RESOLVED;
@@ -1808,6 +1828,9 @@ const PaymentRequestApi = Module.extend({
   setMerchant(merchant) {
     this.merchant = merchant;
   },
+  getProviderNames() {
+    return this.supported.provider.filter((name) => !!~this.payload.allowed.indexOf(name))
+  },
   setBeforeCallback(beforeCallback) {
     if (isFunction(beforeCallback)) {
       this.params.before = beforeCallback;
@@ -1857,39 +1880,34 @@ const PaymentRequestApi = Module.extend({
   update(data) {
     if (this.isPending()) return
     this.setPending(true);
-    const context = this;
-    const defer = Deferred();
     this.params.data = data;
+    this.defer = Deferred();
     this.request(
       'api.checkout.pay',
       'methods',
       this.params.data,
-      function (model) {
-        context.setPending(false);
-        context.setPayload(model.serialize());
-        defer.resolve(model);
-      },
-      function (model) {
-        context.setPending(false);
-        context.trigger('error', model);
-        defer.reject(model);
-      }
+      this.proxy(function (_cx, model) {
+        this.setPending(false);
+        this.setPayload(model.serialize());
+        this.defer.resolve(model);
+      }),
+      this.proxy(function (_cx, model) {
+        this.setPending(false);
+        this.setPayload(model.serialize());
+        this.trigger('error', model.serialize());
+        this.defer.reject(model);
+      })
     );
-    return defer
+    return this.defer
   },
   isPending() {
     return this.pendingState === true
   },
   setPending(state) {
-    this.pendingState = state;
-    clearTimeout(this.pendingTimeoutEvent);
-    this.pendingTimeoutEvent = setTimeout(
-      function (context) {
-        context.trigger('pending', state);
-      },
-      50,
-      this
-    );
+    if (this.pendingState !== state) {
+      this.pendingState = state;
+      this.trigger('pending', state);
+    }
   },
   before() {
     if (this.isPending()) return
@@ -1993,9 +2011,12 @@ const PaymentElement = Module.extend({
   },
   init(params) {
     this.state = {
-      isSupported: false,
-      isAllowed: false,
-      isMounted: false,
+      type: 'hide',
+      transition: false,
+      pending: false,
+      mounted: false,
+      supported: false,
+      allowed: false,
     };
     this.params = {};
     this.utils.extend(this.params, this.defaults);
@@ -2005,7 +2026,7 @@ const PaymentElement = Module.extend({
   timeout(callback, timeout) {
     this.timeoutMap = this.timeoutMap || {};
     clearTimeout(this.timeoutMap[timeout]);
-    this.timeoutMap[callback] = setTimeout(callback, timeout);
+    this.timeoutMap[callback] = setTimeout(this.proxy(callback), timeout);
     return this
   },
   getElementUrl() {
@@ -2054,11 +2075,11 @@ const PaymentElement = Module.extend({
   },
   onEvent(cx, ev) {
     ev.preventDefault();
-    if (this.pending) return false
+    if (this.state.pending) return false
     this.send('event', { type: ev.type });
   },
   onClick() {
-    if (this.pending) return false
+    if (this.state.pending) return false
     this.request.before().done(this.proxy('onClickDone')).fail(this.proxy('onClickFail'));
   },
   onClickDone() {
@@ -2066,19 +2087,19 @@ const PaymentElement = Module.extend({
   },
   onClickFail() {},
   onSupported(cx, supported) {
-    this.state.isSupported = supported.provider.includes(this.params.method);
+    this.state.supported = supported.provider.includes(this.params.method);
     this.render();
   },
   onPayload(cx, payload) {
-    this.state.isAllowed = payload.allowed.includes(this.params.method);
+    this.state.allowed = payload.allowed.includes(this.params.method);
     this.render();
   },
   onPending(cx, state) {
-    this.pending = state;
+    this.state.pending = state;
     this.addCss(this.element, {
       transition: 'height 0.2s ease-out, opacity 0.4s ease-out',
-      pointerEvents: this.pending ? 'none' : '',
-      opacity: this.pending ? '0.5' : '1',
+      pointerEvents: this.state.pending ? 'none' : '',
+      opacity: this.state.pending ? '0.5' : '1',
     });
   },
   initEvents() {
@@ -2091,10 +2112,10 @@ const PaymentElement = Module.extend({
   setPaymentRequest(request) {
     if (!(request instanceof PaymentRequestApi))
       throw Error('request is not instance of PaymentRequestApi')
-    this.request = request;
     const onSupported = this.proxy('onSupported');
     const onPayload = this.proxy('onPayload');
     const onPending = this.proxy('onPending');
+    this.request = request;
     this.request.off('supported', onSupported).on('supported', onSupported);
     this.request.off('payload', onPayload).on('payload', onPayload);
     this.request.off('pending', onPending).on('pending', onPending);
@@ -2107,51 +2128,94 @@ const PaymentElement = Module.extend({
     return this
   },
   render() {
-    if (this.state.isSupported === false) return this
-    if (this.state.isAllowed === false) return this
+    if (this.state.supported === false) return this.hide()
+    if (this.state.allowed === false) return this.hide()
     this.mount();
     this.show();
   },
+  notMounted() {
+    return this.state.mounted === false
+  },
+  isMounted() {
+    return this.state.mounted === true
+  },
   unmount() {
     if (this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
+      this.state.mounted = false;
     }
     return this
   },
   mount() {
-    if (document.body.contains(this.element) === false) {
+    if (!document.body.contains(this.element)) {
       this.appendTo(this.params.appendTo);
+      this.state.mounted = true;
     }
     return this
   },
+  transitionValue(value) {
+    return value
+  },
+  getTimeoutValue() {
+    return toArray(arguments).map(transitionDelay).sort().pop()
+  },
+  getState(state, transition) {
+    return this.state.type === (state ? 'show' : 'hide') && this.state.transition === transition
+  },
+  triggerState() {
+    this.request.trigger(this.state.type, {
+      transition: this.state.transition,
+      method: this.params.method,
+    });
+  },
   show() {
-    this.timeout(() => {
-      this.addCss(this.iframe, {
-        transition: 'opacity 0.6s 0.4s ease-out',
-        opacity: this.utils.cssUnit(1),
-      });
-      this.addCss(this.element, {
-        transition: 'height 0.2s ease-out',
-        height: this.utils.cssUnit(this.params.height, 'px'),
-      });
-      this.trigger('show', {});
-    }, 25);
+    if (this.notMounted()) return
+    this.timeout('showCallback', 25);
     return this
   },
   hide() {
-    this.timeout(() => {
-      this.addCss(this.iframe, {
-        transition: 'opacity 0.4s ease-out',
-        opacity: this.utils.cssUnit(0),
-      });
-      this.addCss(this.element, {
-        transition: 'height 0.2s 0.4s ease-out',
-        height: this.utils.cssUnit(0, 'px'),
-      });
-      this.trigger('hide', {});
-    }, 25);
+    if (this.notMounted()) return
+    this.timeout('hideCallback', 25);
     return this
   },
+  showCallback() {
+    this.addCss(this.element, {
+      transition: this.transitionValue('height 0.2s ease-out'),
+      height: this.utils.cssUnit(this.params.height, 'px'),
+      'will-change': 'height',
+    });
+    this.addCss(this.iframe, {
+      transition: this.transitionValue('opacity 0.225s 0.225s ease-out'),
+      opacity: this.utils.cssUnit(1),
+      'will-change': 'opacity',
+    });
+    this.afterCallback('show');
+  },
+  hideCallback() {
+    this.addCss(this.element, {
+      transition: this.transitionValue('height 0.225s 0.225s ease-out'),
+      height: this.utils.cssUnit(0, 'px'),
+      'will-change': 'height',
+    });
+    this.addCss(this.iframe, {
+      transition: this.transitionValue('opacity 0.225s ease-out'),
+      opacity: this.utils.cssUnit(0),
+      'will-change': 'opacity',
+    });
+    this.afterCallback('hide');
+  },
+  afterCallback(state) {
+    if (this.state.type === state) return
+    if (this.state.transition) return
+    this.state.transition = true;
+    this.state.type = state;
+    this.triggerState();
+    this.timeout('afterTransition', this.getTimeoutValue(this.iframe, this.element));
+  },
+  afterTransition() {
+    this.state.transition = false;
+    this.triggerState();
+  },
 });
 
 const PaymentButton = Module.extend({
@@ -2220,16 +2284,21 @@ const PaymentButton = Module.extend({
     });
     this.request.setApi(this.api);
     this.request.setMerchant(this.params.data.merchant_id);
+    this.request.on('pending', this.proxy('onPending'));
     this.request.on('details', this.proxy('onDetails'));
     this.request.on('error', this.proxy('onError'));
+    this.request.on('show', this.proxy('onShow'));
+    this.request.on('hide', this.proxy('onHide'));
   },
   initElements() {
+    const self = this;
     const style = this.params.style;
     const data = this.params.data;
     const origin = this.params.origin;
     const appendTo = this.params.element;
     const endpoint = this.params.endpoint.element;
     const request = this.request;
+    this.buttons = [];
     this.container = this.utils.querySelector(this.params.element);
     this.addCss(this.container, {
       display: 'flex',
@@ -2248,13 +2317,14 @@ const PaymentButton = Module.extend({
         height: style.height,
       });
       element.setPaymentRequest(request);
+      self.buttons.push(element);
     });
     request.getSupportedMethods();
   },
   update(data) {
     return this.request.update(this.utils.extend(this.params.data, data || {}))
   },
-  onDetails(cx, data) {
+  onDetails(_cx, data) {
     this.api.scope(() => {
       this.request.after(this.params.data).done((extendParams) => {
         this.api
@@ -2268,12 +2338,40 @@ const PaymentButton = Module.extend({
       });
     });
   },
-  onSuccess(cx, data) {
+  onSuccess(_cx, data) {
     this.trigger('success', data);
   },
-  onError(cx, data) {
+  onError(_cx, data) {
     this.trigger('error', data);
   },
+  toggleEventType(state, transition) {
+    return state ? (transition ? 'show' : 'shown') : transition ? 'hide' : 'hidden'
+  },
+  toggleEventNamespace(state, data) {
+    const name = [];
+    name.push(this.toggleEventType(state, data.transition));
+    name.push(data.method);
+    return name.join(':')
+  },
+  triggerEventComplete(state, data) {
+    const transition = data.transition;
+    const name = this.toggleEventType(state, transition);
+    const check = this.buttons
+      .filter((i) => i.isMounted())
+      .every((i) => i.getState(state, transition));
+    if (check) this.trigger(name, {});
+  },
+  onShow(_cx, data) {
+    this.trigger(this.toggleEventNamespace(true, data), {});
+    this.triggerEventComplete(true, data);
+  },
+  onHide(_cx, data) {
+    this.trigger(this.toggleEventNamespace(false, data), {});
+    this.triggerEventComplete(false, data);
+  },
+  onPending(_cx, state) {
+    this.trigger('pending', state);
+  },
 });
 
 const parseConfig = (config) => {