fix(thmeable-browser): fix the name of the plugin (#663)

* Fixed bugs with selection of environment and added missing prepareToRender function

* Updated PayPal usage example

CHANGELOG.md

@@ -1,3 +1,24 @@
+<a name="2.1.9"></a>
+## [2.1.9](https://github.com/driftyco/ionic-native/compare/v2.1.8...v2.1.9) (2016-10-09)
+
+
+### Bug Fixes
+
+* **paypal:** add optional details param to paypalpayment ([7200845](https://github.com/driftyco/ionic-native/commit/7200845))
+* **paypal:** problems with selection of PayPal environment ([#662](https://github.com/driftyco/ionic-native/issues/662)) ([3dd6a92](https://github.com/driftyco/ionic-native/commit/3dd6a92))
+
+
+
+<a name="2.1.8"></a>
+## [2.1.8](https://github.com/driftyco/ionic-native/compare/v2.1.7...v2.1.8) (2016-10-08)
+
+
+### Bug Fixes
+
+* **googlemaps:** fixes GoogleMapsLatLng class ([11653ce](https://github.com/driftyco/ionic-native/commit/11653ce))
+
+
+
 <a name="2.1.7"></a>
 ## [2.1.7](https://github.com/driftyco/ionic-native/compare/v2.1.6...v2.1.7) (2016-10-07)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-native",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "description": "Native plugin wrappers for Cordova and Ionic with TypeScript, ES6+, Promise and Observable support",
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",

src/index.ts

@@ -100,7 +100,7 @@ import { ThreeDeeTouch } from './plugins/3dtouch';
 import { Toast } from './plugins/toast';
 import { TouchID } from './plugins/touchid';
 import { TextToSpeech } from './plugins/text-to-speech';
-import { ThemableBrowser } from './plugins/themable-browser';
+import { ThemeableBrowser } from './plugins/themeable-browser';
 import { TwitterConnect } from './plugins/twitter-connect';
 import { Vibration } from './plugins/vibration';
 import { VideoEditor } from './plugins/video-editor';
@@ -204,7 +204,7 @@ export * from './plugins/statusbar';
 export * from './plugins/stepcounter';
 export * from './plugins/streaming-media';
 export * from './plugins/text-to-speech';
-export * from './plugins/themable-browser';
+export * from './plugins/themeable-browser';
 export * from './plugins/toast';
 export * from './plugins/touchid';
 export * from './plugins/twitter-connect';
@@ -314,7 +314,7 @@ window['IonicNative'] = {
   TouchID,
   Transfer,
   TextToSpeech,
-  ThemableBrowser,
+  ThemeableBrowser,
   TwitterConnect,
   VideoEditor,
   VideoPlayer,

src/plugins/calendar.ts

@@ -53,7 +53,7 @@ export class Calendar {
    * - You're using Android < 6, or
    * - You've already granted permission
    *
-   * If this returns false, you should call `requestReadWritePermissions` function
+   * If this returns false, you should call the `requestReadWritePermission` function
    * @returns {Promise<boolean>}
    */
   @Cordova()

src/plugins/googlemaps.ts

@@ -1,11 +1,6 @@
-import {Cordova, CordovaInstance, Plugin, InstanceProperty} from './plugin';
+import { Cordova, CordovaInstance, Plugin, InstanceProperty, getPlugin, pluginWarn } from './plugin';
 import { Observable } from 'rxjs/Observable';
 
-
-/**
- * @private
- * Created by Ibrahim on 3/29/2016.
- */
 declare var plugin: any;
 
 /**
@@ -88,12 +83,13 @@ export const GoogleMapsAnimation = {
  *   });
  * ```
  */
-@Plugin({
+let pluginMap = {
   pluginRef: 'plugin.google.maps.Map',
   plugin: 'cordova-plugin-googlemaps',
   repo: 'https://github.com/mapsplugin/cordova-plugin-googlemaps',
   install: 'ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"'
-})
+};
+@Plugin(pluginMap)
 export class GoogleMap {
   _objectInstance: any;
 
@@ -106,8 +102,14 @@ export class GoogleMap {
   static isAvailable(): Promise<boolean> { return; }
 
   constructor(element: string|HTMLElement, options?: any) {
-    if (typeof element === 'string') element = document.getElementById(<string>element);
-    this._objectInstance = plugin.google.maps.Map.getMap(element, options);
+    if (!!getPlugin('plugin.google.maps.Map')) {
+      if (typeof element === 'string') {
+        element = document.getElementById(<string>element);
+      }
+      this._objectInstance = plugin.google.maps.Map.getMap(element, options);
+    } else {
+      pluginWarn(pluginMap);
+    }
   }
 
   /**
@@ -116,6 +118,12 @@ export class GoogleMap {
    * @return {Observable<any>}
    */
   on(event: any): Observable<any> {
+    if (!this._objectInstance) {
+      return new Observable((observer) => {
+        observer.error({ error: 'plugin_not_installed' });
+      });
+    }
+
     return new Observable(
       (observer) => {
         this._objectInstance.on(event, observer.next.bind(observer));
@@ -130,6 +138,9 @@ export class GoogleMap {
    * @return {Promise<any>}
    */
   one(event: any): Promise<any> {
+    if (!this._objectInstance) {
+      return Promise.reject({ error: 'plugin_not_installed' });
+    }
     return new Promise<any>(
       resolve => this._objectInstance.one(event, resolve)
     );
@@ -207,7 +218,10 @@ export class GoogleMap {
   @CordovaInstance({ sync: true })
   setAllGesturesEnabled(enabled: boolean): void { }
 
-  addMarker(options: GoogleMapsMarkerOptions): Promise<GoogleMapsMarker> {
+  addMarker(options: GoogleMapsMarkerOptions): Promise<GoogleMapsMarker | any> {
+    if (!this._objectInstance) {
+      return Promise.reject({ error: 'plugin_not_installed' });
+    }
     return new Promise<GoogleMapsMarker>(
       (resolve, reject) => {
         this._objectInstance.addMarker(options, (marker: any) => {
@@ -221,7 +235,10 @@ export class GoogleMap {
     );
   }
 
-  addCircle(options: GoogleMapsCircleOptions): Promise<GoogleMapsCircle> {
+  addCircle(options: GoogleMapsCircleOptions): Promise<GoogleMapsCircle | any> {
+    if (!this._objectInstance) {
+      return Promise.reject({ error: 'plugin_not_installed' });
+    }
     return new Promise<GoogleMapsCircle>(
       (resolve, reject) => {
         this._objectInstance.addCircle(options, (circle: any) => {
@@ -235,7 +252,10 @@ export class GoogleMap {
     );
   }
 
-  addPolygon(options: GoogleMapsPolygonOptions): Promise<GoogleMapsPolygon> {
+  addPolygon(options: GoogleMapsPolygonOptions): Promise<GoogleMapsPolygon | any> {
+    if (!this._objectInstance) {
+      return Promise.reject({ error: 'plugin_not_installed' });
+    }
     return new Promise<GoogleMapsPolygon>(
       (resolve, reject) => {
         this._objectInstance.addPolygon(options, (polygon: any) => {
@@ -249,7 +269,10 @@ export class GoogleMap {
     );
   }
 
-  addPolyline(options: GoogleMapsPolylineOptions): Promise<GoogleMapsPolyline> {
+  addPolyline(options: GoogleMapsPolylineOptions): Promise<GoogleMapsPolyline | any> {
+    if (!this._objectInstance) {
+      return Promise.reject({ error: 'plugin_not_installed' });
+    }
     return new Promise<GoogleMapsPolyline>(
       (resolve, reject) => {
         this._objectInstance.addPolyline(options, (polyline: any) => {
@@ -263,7 +286,10 @@ export class GoogleMap {
     );
   }
 
-  addTileOverlay(options: GoogleMapsTileOverlayOptions): Promise<GoogleMapsTileOverlay> {
+  addTileOverlay(options: GoogleMapsTileOverlayOptions): Promise<GoogleMapsTileOverlay | any> {
+    if (!this._objectInstance) {
+      return Promise.reject({ error: 'plugin_not_installed' });
+    }
     return new Promise<GoogleMapsTileOverlay>(
       (resolve, reject) => {
         this._objectInstance.addTileOverlay(options, (tileOverlay: any) => {
@@ -277,7 +303,10 @@ export class GoogleMap {
     );
   }
 
-  addGroundOverlay(options: GoogleMapsGroundOverlayOptions): Promise<GoogleMapsGroundOverlay> {
+  addGroundOverlay(options: GoogleMapsGroundOverlayOptions): Promise<GoogleMapsGroundOverlay | any> {
+    if (!this._objectInstance) {
+      return Promise.reject({ error: 'plugin_not_installed' });
+    }
     return new Promise<GoogleMapsGroundOverlay>(
       (resolve, reject) => {
         this._objectInstance.addGroundOverlay(options, (groundOverlay: any) => {
@@ -291,7 +320,10 @@ export class GoogleMap {
     );
   }
 
-  addKmlOverlay(options: GoogleMapsKmlOverlayOptions): Promise<GoogleMapsKmlOverlay> {
+  addKmlOverlay(options: GoogleMapsKmlOverlayOptions): Promise<GoogleMapsKmlOverlay | any> {
+    if (!this._objectInstance) {
+      return Promise.reject({ error: 'plugin_not_installed' });
+    }
     return new Promise<GoogleMapsKmlOverlay>(
       (resolve, reject) => {
         this._objectInstance.addKmlOverlay(options, (kmlOverlay: any) => {
@@ -879,21 +911,22 @@ export class GoogleMapsLatLngBounds {
  * @private
  */
 export class GoogleMapsLatLng {
-  private _objectInstance: any;
 
-  @InstanceProperty get lat(): number { return; }
-  @InstanceProperty get lng(): number { return; }
+  lat: number;
+  lng: number;
 
   constructor(lat: number, lng: number) {
-    this._objectInstance = new plugin.google.maps.LatLng(lat, lng);
+    this.lat = lat;
+    this.lng = lng;
   }
 
   equals(other: GoogleMapsLatLng): boolean {
     return this.lat === other.lat && this.lng === other.lng;
   }
 
-  @CordovaInstance({ sync: true })
-  toString(): string { return; }
+  toString(): string {
+    return this.lat + ',' + this.lng;
+  }
 
   toUrlValue(precision?: number): string {
     precision = precision || 6;
@@ -941,9 +974,10 @@ export class Geocoder {
    * @param {GeocoderRequest} request Request object with either an address or a position
    * @returns {Promise<GeocoderResult[]>}
    */
-  static geocode(request: GeocoderRequest): Promise<GeocoderResult[]> {
+  static geocode(request: GeocoderRequest): Promise<GeocoderResult[] | any> {
     return new Promise<GeocoderResult[]>((resolve, reject) => {
       if (!plugin || !plugin.google || !plugin.google.maps || !plugin.google.maps.Geocoder) {
+        pluginWarn(pluginMap);
         reject({ error: 'plugin_not_installed' });
       } else {
         plugin.google.maps.Geocoder.geocode(request, resolve);

src/plugins/pay-pal.ts

@@ -6,15 +6,47 @@ import { Plugin, Cordova } from './plugin';
  *
  * @usage
  * ```
- * import {PayPal} from 'ionic-native';
+ * import {PayPal, PayPalPayment, PayPalConfiguration} from "ionic-native";
  *
  * PayPal.init({
- *      "PayPalEnvironmentProduction": "YOUR_PRODUCTION_CLIENT_ID",
-       "PayPalEnvironmentSandbox": "YOUR_SANDBOX_CLIENT_ID"
-       })
- *   .then(onSuccess)
- *   .catch(onError);
+ *   "PayPalEnvironmentProduction": "YOUR_PRODUCTION_CLIENT_ID",
+ *   "PayPalEnvironmentSandbox": "YOUR_SANDBOX_CLIENT_ID"
+ * }).then(() => {
+ *   // Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, PayPalEnvironmentProduction
+ *   PayPal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({
+ *     // Only needed if you get an "Internal Service Error" after PayPal login!
+ *     //payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal
+ *   })).then(() => {
+ *     let payment = new PayPalPayment('3.33', 'USD', 'Description', 'sale');
+ *     PayPal.renderSinglePaymentUI(payment).then(() => {
+ *       // Successfully paid
  *
+ *       // Example sandbox response
+ *       //
+ *       // {
+ *       //   "client": {
+ *       //     "environment": "sandbox",
+ *       //     "product_name": "PayPal iOS SDK",
+ *       //     "paypal_sdk_version": "2.16.0",
+ *       //     "platform": "iOS"
+ *       //   },
+ *       //   "response_type": "payment",
+ *       //   "response": {
+ *       //     "id": "PAY-1AB23456CD789012EF34GHIJ",
+ *       //     "state": "approved",
+ *       //     "create_time": "2016-10-03T13:33:33Z",
+ *       //     "intent": "sale"
+ *       //   }
+ *       // }
+ *     }, () => {
+ *       // Error or render dialog closed without being successful
+ *     });
+ *   }, () => {
+ *     // Error in configuration
+ *   });
+ * }, () => {
+ *   // Error in initialization, maybe PayPal isn't supported or something else
+ * });
  * ```
  * @interfaces
  * PayPalEnvironment
@@ -31,23 +63,33 @@ import { Plugin, Cordova } from './plugin';
   repo: 'https://github.com/paypal/PayPal-Cordova-Plugin'
 })
 export class PayPal {
+  /**
+   * Retrieve the version of the PayPal iOS SDK library. Useful when contacting support.
+   */
+  @Cordova()
+  static version(): Promise<string> {return; }
+
   /**
    * You must preconnect to PayPal to prepare the device for processing payments.
    * This improves the user experience, by making the presentation of the
    * UI faster. The preconnect is valid for a limited time, so
    * the recommended time to preconnect is on page load.
    *
-   * @param {String} environment available options are "PayPalEnvironmentNoNetwork", "PayPalEnvironmentProduction" and "PayPalEnvironmentSandbox"
-   * @param {PayPalConfiguration} configuration For Future Payments merchantName, merchantPrivacyPolicyURL and merchantUserAgreementURL must be set be set
+   * @param {PayPalEnvironment} clientIdsForEnvironments: set of client ids for environments
    */
   @Cordova()
-  static init(environment: PayPalEnvironment, configuration?: PayPalConfiguration): Promise<any> {return; }
+  static init(clientIdsForEnvironments: PayPalEnvironment): Promise<any> {return; }
 
   /**
-   * Retreive the version of PayPal iOS SDK Library.
-   */
+   * You must preconnect to PayPal to prepare the device for processing payments.
+   * This improves the user experience, by making the presentation of the UI faster.
+   * The preconnect is valid for a limited time, so the recommended time to preconnect is on page load.
+   *
+   * @param {String} environment: available options are "PayPalEnvironmentNoNetwork", "PayPalEnvironmentProduction" and "PayPalEnvironmentSandbox"
+   * @param {PayPalConfiguration} configuration: PayPalConfiguration object, for Future Payments merchantName, merchantPrivacyPolicyURL and merchantUserAgreementURL must be set be set
+   **/
   @Cordova()
-  static version(): Promise<string> {return; }
+  static prepareToRender(environment: string, configuration: PayPalConfiguration): Promise<any> {return; }
 
   /**
    * Start PayPal UI to collect payment from the user.
@@ -85,7 +127,6 @@ export class PayPal {
    **/
   @Cordova()
   static renderProfileSharingUI(scopes: string[]): Promise<any> {return; }
-
 }
 
 export interface PayPalEnvironment {
@@ -97,19 +138,12 @@ export interface PayPalEnvironment {
  * @private
  */
 export class PayPalPayment {
-  /**
-   * Convenience constructor.
-   * Returns a PayPalPayment with the specified amount, currency code, and short description.
-   * @param {String} amount: The amount of the payment.
-   * @param {String} currency: The ISO 4217 currency for the payment.
-   * @param {String} shortDescription: A short description of the payment.
-   * @param {String} intent: "Sale" for an immediate payment.
-   */
-  constructor(amount: string, currency: string, shortDescription: string, intent: string) {
+  constructor(amount: string, currency: string, shortDescription: string, intent: string, details?: PayPalPaymentDetails) {
     this.amount = amount;
     this.currency = currency;
     this.shortDescription = shortDescription;
     this.intent = intent;
+    this.details = details;
   }
 
   /**
@@ -157,6 +191,11 @@ export class PayPalPayment {
    * Optional customer shipping address, if your app wishes to provide this to the SDK.
    */
   shippingAddress: string;
+
+  /**
+   * Optional PayPalPaymentDetails object
+   */
+  details: PayPalPaymentDetails;
 }
 
 /**

src/plugins/plugin.ts

@@ -41,6 +41,11 @@ export const cordovaWarn = function(pluginName: string, method: string) {
   }
 };
 function setIndex(args: any[], opts: any = {}, resolve?: Function, reject?: Function): any {
+  // ignore resolve and reject in case sync
+  if (opts.sync) {
+    return args;
+  }
+
   // If the plugin method expects myMethod(success, err, options)
   if (opts.callbackOrder === 'reverse') {
     // Get those arguments in the order [resolve, reject, ...restOfArgs]
@@ -77,10 +82,8 @@ function setIndex(args: any[], opts: any = {}, resolve?: Function, reject?: Func
   } else {
     // Otherwise, let's tack them on to the end of the argument list
     // which is 90% of cases
-    if (!opts.sync) {
-      args.push(resolve);
-      args.push(reject);
-    }
+    args.push(resolve);
+    args.push(reject);
   }
   return args;
 }

src/plugins/themeable-browser.ts

@@ -1,22 +1,79 @@
 import { Plugin, CordovaInstance } from './plugin';
 import { Observable } from 'rxjs/Observable';
 import { InAppBrowserEvent } from './inappbrowser';
+
 declare var cordova: any;
+
+export interface ThemeableBrowserButton {
+  wwwImage?: string;
+  image?: string;
+  wwwImagePressed?: string;
+  imagePressed?: string;
+  wwwImageDensity?: number;
+  align?: string;
+  event?: string;
+}
+
+export interface ThemeableBrowserOptions {
+  statusbar?: { color: string; };
+  toolbar?: {
+    height?: number;
+    color?: string;
+  };
+  title?: { color: string; };
+  backButton?: ThemeableBrowserButton;
+  forwardButton?: ThemeableBrowserButton;
+  closeButton?: ThemeableBrowserButton;
+  customButtons?: ThemeableBrowserButton[];
+  menu?: {
+    image?: string;
+    imagePressed?: string;
+    title?: string;
+    cancel?: string;
+    align?: string;
+    items?: {
+      event: string;
+      label: string;
+    }[];
+  };
+  backButtonCanClose?: boolean;
+
+  // inAppBrowser options
+  location?: string;
+  hidden?: string;
+  clearcache?: string;
+  clearsessioncache?: string;
+  zoom?: string;
+  hardwareback?: string;
+  mediaPlaybackRequiresUserAction?: string;
+  shouldPauseOnSuspsend?: string;
+  closebuttoncaption?: string;
+  disallowoverscroll?: string;
+  enableViewportScale?: string;
+  allowInlineMediaPlayback?: string;
+  keyboardDisplayRequiresUserAction?: string;
+  suppressesIncrementalRendering?: string;
+  presentationstyle?: string;
+  transitionstyle?: string;
+  toolbarposition?: string;
+  fullscreen?: string;
+}
+
 /**
- * @name ThemableBrowser
+ * @name ThemeableBrowser
  * @description
  * In-app browser that allows styling.
  *
  * @usage
  * ```
- * import { ThemableBrowser } from 'ionic-native';
+ * import { ThemeableBrowser } from 'ionic-native';
  *
  * // can add options from the original InAppBrowser in a JavaScript object form (not string)
- * // This options object also takes additional parameters introduced by the ThemableBrowser plugin
- * // This example only shows the additional parameters for ThemableBrowser
+ * // This options object also takes additional parameters introduced by the ThemeableBrowser plugin
+ * // This example only shows the additional parameters for ThemeableBrowser
  * // Note that that `image` and `imagePressed` values refer to resources that are stored in your app
  * let options = {
- *  statusbar: {
+ *      statusbar: {
  *          color: '#ffffffff'
  *      },
  *      toolbar: {
@@ -83,11 +140,16 @@ declare var cordova: any;
   pluginRef: 'cordova.ThemeableBrowser',
   repo: 'https://github.com/initialxy/cordova-plugin-themeablebrowser'
 })
-export class ThemableBrowser {
+export class ThemeableBrowser {
   private _objectInstance: any;
 
   constructor(url: string, target: string, styleOptions: ThemeableBrowserOptions) {
-    this._objectInstance = cordova.ThemableBrowser.open(arguments);
+    try {
+      this._objectInstance = cordova.ThemeableBrowser.open(url, target, styleOptions);
+    } catch (e) {
+      window.open(url);
+      console.warn('Native: ThemeableBrowser is not installed or you are running on a browser. Falling back to window.open, all instance methods will NOT work.');
+    }
   }
 
   /**
@@ -125,7 +187,7 @@ export class ThemableBrowser {
 
   /**
    * A method that allows you to listen to events happening in the browser.
-   * Available events are: `ThemableBrowserError`, `ThemableBrowserWarning`, `critical`, `loadfail`, `unexpected`, `undefined`
+   * Available events are: `ThemeableBrowserError`, `ThemeableBrowserWarning`, `critical`, `loadfail`, `unexpected`, `undefined`
    * @param event Event name
    * @returns {Observable<any>} Returns back an observable that will listen to the event on subscribe, and will stop listening to the event on unsubscribe.
    */
@@ -138,57 +200,3 @@ export class ThemableBrowser {
 
 }
 
-export interface ThemeableBrowserOptions {
-  statusbar?: { color: string; };
-  toobar?: {
-    height?: number;
-    color?: string;
-  };
-  title?: { color: string; };
-  backButton?: ThemableBrowserButton;
-  forwardButton?: ThemableBrowserButton;
-  closeButton?: ThemableBrowserButton;
-  customButtons?: ThemableBrowserButton[];
-  menu?: {
-    image?: string;
-    imagePressed?: string;
-    title?: string;
-    cancel?: string;
-    align?: string;
-    items?: {
-      event: string;
-      label: string;
-    }[];
-  };
-  backButtonCanClose?: boolean;
-
-  // inAppBrowser options
-  location?: string;
-  hidden?: string;
-  clearcache?: string;
-  clearsessioncache?: string;
-  zoom?: string;
-  hardwareback?: string;
-  mediaPlaybackRequiresUserAction?: string;
-  shouldPauseOnSuspsend?: string;
-  closebuttoncaption?: string;
-  disallowoverscroll?: string;
-  enableViewportScale?: string;
-  allowInlineMediaPlayback?: string;
-  keyboardDisplayRequiresUserAction?: string;
-  suppressesIncrementalRendering?: string;
-  presentationstyle?: string;
-  transitionstyle?: string;
-  toolbarposition?: string;
-  fullscreen?: string;
-}
-
-export interface ThemableBrowserButton {
-  wwwImage?: string;
-  image?: string;
-  wwwImagePressed?: string;
-  imagePressed?: string;
-  wwwImageDensity?: number;
-  align?: string;
-  event?: string;
-}