react-native-unit-components 0.1.0 → 1.0.1

package/README.md

@@ -1,2 +1,157 @@
-# unit-react-native-components
-Unit React Native Components
+# React Native SDK
+
+## Installation
+
+Add the react-native-unit-components dependency to your project:
+
+With npm:
+```bash
+$ npm install --save react-native-unit-components
+```
+
+With yarn:
+```bash
+$ yarn add react-native-unit-components
+```
+
+## Usage
+
+### Initialize Unit SDK
+Call to `UnitSDK.init` in your root component with the requested environment and your source.
+This also helps us to improve the app performance.
+
+The `UNEnvironment` enum should be used.
+```js
+enum UNEnvironment {
+  sandbox,
+  production
+}
+```
+#### Input:
+| Name            | Type                         | Required  | Description                                  |
+| --------------- | ---------------------------- | --------- | -------------------------------------------- |
+| env             | UNEnvironment                | YES       | Unit environment.                            |
+| theme           | string                       | NO        | A URL that specifies the UI configuration.   |
+
+#### Example:
+```js
+import React, { useEffect } from 'react';
+import { UnitSDK, UNEnvironment } from 'react-native-unit-components';
+
+const THEME = 'A URL that specifies the UI configuration';
+
+export default function YourRootComponent() {
+  useEffect(() => {
+    UnitSDK.init(UNEnvironment.production, THEME);
+  }, [])
+}
+```
+
+### Bottom Sheet Component
+
+The `UNBottomSheetComponent` is a View that our SDK controls in order to show menus and forms in your application.
+It is mandatory to have one `UNBottomSheetComponent` when our components are visible.
+
+The `UNBottomSheetComponent` have an absolute position and should be able to take the full width the height of the screen.
+We recommend to place the `UNBottomSheetComponent` in your root component of your application.
+
+#### The structure of your root component might look as follows:
+```js
+import React, { useEffect } from 'react';
+import { UNBottomSheetComponent } from 'react-native-unit-components';
+
+export default function YourRootComponent() {
+  return (
+    <>
+      <YourComponents />
+      <UNBottomSheetComponent />
+    </>
+  );
+}
+```
+
+### Components
+
+#### Card Component
+
+##### UNCardComponent props:
+| Name            | Type                         | Required  | Description                                  |
+| --------------- | ---------------------------- | --------- | -------------------------------------------- |
+| customerToken   | string                       | YES       | A Unit Customer token.                       |
+| cardId          | string                       | YES       | Unit card id.                                |
+| theme           | string                       | No        | A URL that specifies the UI configuration.   |
+| onStatusChanged | (card: UNCardData)  =>  void | No        | Callback for card status changes.            |
+
+##### Example:
+```js
+import React from 'react';
+import { UNCardComponent, UNCardData } from 'react-native-unit-components';
+
+export default function YourComponent() {
+  return (
+    <UNCardComponent
+      cardId={'632197'}
+      customerToken={''}
+      onStatusChanged={(card: UNCardData) => { console.log(card) }}
+    />
+  );
+}
+```
+
+#### Book Payment Component
+
+##### UNBookPaymentComponent props:
+| Name                  | Type                                   | Required  | Description                                    |
+| --------------------- | -------------------------------------- | --------- | ---------------------------------------------- |
+| customerToken         | string                                 | YES       | A Unit Customer token.                         |
+| accountId             | string                                 | YES       | Unit account id. The account from which money is being sent. |
+| counterPartyAccountId | string                                 | YES       | Unit account id. The account which will receive money.       |
+| counterPartyName      | string                                 | YES       | Name of the counterparty. This is the name that will be displayed in the Book Payment UI during the transfer.|
+| isSameCustomer        | boolean                                | NO        | Stating whether both accounts belong to the same customer. Allows fetching additional information about the counterparty account. Default "false" |
+| theme                 | string                                 | No        | A URL that specifies the UI configuration.     |
+| onPaymentCreated      | (bookPayment: BookPaymentType) => void | NO        | Callback for the created bookPayment.          |
+
+
+##### Example:
+```js
+import React from 'react';
+import { UNBookPaymentComponent } from 'react-native-unit-components';
+
+export default function YourComponent() {
+  return (
+    <UNBookPaymentComponent
+      customerToken={''}
+      accountId={'1105561'}
+      counterPartyAccountId={'1105562'}
+      counterPartyName={'Peter Parker"'}
+      isSameCustomer={true}
+      onPaymentCreated={(bookPayment: BookPaymentType) => { console.log(bookPayment) }}
+    />
+  );
+}
+```
+
+#### Activity Component
+
+##### UNActivityComponent props:
+| Name                  | Type                                   | Required  | Description                                    |
+| --------------------- | -------------------------------------- | --------- | ---------------------------------------------- |
+| customerToken         | string                                 | YES       | A Unit Customer token.                         |
+| accountId             | string                                 | No        | Unit account id. The account for which the activity will be shown. If not specified: the activity of the customer (all accounts) will be shown |
+| theme                 | string                                 | No        | A URL that specifies the UI configuration.     |
+
+
+##### Example:
+```js
+import React from 'react';
+import { UNActivityComponent } from 'react-native-unit-components';
+
+export default function YourComponent() {
+  return (
+    <UNActivityComponent
+      customerToken={''}
+      accountId={'1105561'}
+    />
+  );
+}
+```

package/android/src/main/java/com/unitreactnativecomponents/UnitAddToWalletButtonViewManager.kt

@@ -0,0 +1,27 @@
+package com.unitreactnativecomponents
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.unitreactnativecomponents.visapresentation.UNGooglePayView
+
+
+class UnitAddToWalletButtonViewManager : SimpleViewManager<UNGooglePayView>() {
+  override fun getName() = "UnitAddToWalletButtonView"
+
+  override fun createViewInstance(reactContext: ThemedReactContext): UNGooglePayView {
+    val unGooglePayView = UNGooglePayView(reactContext)
+    unGooglePayView.onAddToWalletClicked {
+      val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+      UIManagerHelper.getEventDispatcherForReactTag(reactContext, unGooglePayView.id)
+        ?.dispatchEvent(UnitReactNativeComponentsEvent(surfaceId, unGooglePayView.id))
+    }
+    return unGooglePayView
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    return MapBuilder.of(
+      "onAddToWalletClicked", MapBuilder.of("registrationName","onAddToWalletClicked")
+    )
+  }
+}

package/android/src/main/java/com/unitreactnativecomponents/UnitReactNativeComponentsEvent.kt

@@ -0,0 +1,21 @@
+package com.unitreactnativecomponents
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class UnitReactNativeComponentsEvent (surfaceId: Int, viewTag: Int) : Event<UnitReactNativeComponentsEvent>() {
+  private val kEventName = "onAddToWalletClicked"
+
+  init {
+    super.init(surfaceId, viewTag)
+  }
+
+  override fun getEventData(): WritableMap? {
+    //empty data response
+    return Arguments.createMap();
+  }
+
+  override fun getEventName(): String {
+    return kEventName
+  }
+}

package/android/src/main/java/com/unitreactnativecomponents/UnitReactNativeComponentsPackage.kt

@@ -11,6 +11,7 @@ class UnitReactNativeComponentsPackage : ReactPackage {
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return listOf(UnitReactNativeComponentsViewManager())
+        return listOf(UnitAddToWalletButtonViewManager())
     }
+
 }

package/android/src/main/java/com/unitreactnativecomponents/visapresentation/UNGooglePayView.kt

@@ -0,0 +1,197 @@
+package com.unitreactnativecomponents.visapresentation
+
+import android.content.Context
+import android.content.res.Configuration
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.view.View
+import android.widget.ImageView
+import android.widget.RelativeLayout
+import android.widget.TextView
+import com.unitreactnativecomponents.R
+
+/**
+ * This theme enum outlines the background color of your activity
+ */
+enum class UNGooglePayButtonTheme {
+    Dark,
+    Colorful,
+    Light;
+}
+
+/**
+ * This style enum outlines the desired style for your button(Outlined can be applied only with a 'Dark' or 'Colorful' theme)
+ */
+enum class UNGooglePayButtonStyle {
+    Regular,
+    Outlined;
+}
+
+/**
+ * A class that was created to make Google's branding review implementation easier for Unit customers.
+ */
+
+class UNGooglePayView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : RelativeLayout(context, attrs, defStyleAttr) {
+
+    private var whiteAddToGooglePayButtonNoShadow: RelativeLayout
+    private var blackAddToGooglePayButton: RelativeLayout
+    private var whiteAddToGooglePayButton: RelativeLayout
+    private var viewLayout: RelativeLayout
+    private var onAddToWalletClicked: (() -> Unit)? = null
+    private var shouldSetThemeAccordingToSystemTheme = false
+    private var isDarkMode = false
+
+
+
+    /**
+     * This variable holds the style of the 'Add To GPay button'.
+     * when it is set it will redisplay the button if it is necessary.
+     */
+    private var currentStyle: UNGooglePayButtonStyle = UNGooglePayButtonStyle.Regular
+        set(value) {
+            val hasChanged = field != value
+            field = value
+            if (hasChanged) {
+                display()
+            }
+        }
+
+    /**
+     * This variable holds the theme of the app's background color.
+     * when it is set it will redisplay the button if it is necessary.
+     */
+    private var currentTheme: UNGooglePayButtonTheme = UNGooglePayButtonTheme.Light
+        set(value) {
+            val hasChanged = field != value
+            field = value
+            if (hasChanged) {
+                display()
+            }
+        }
+
+    init {
+        val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
+        inflater.inflate(R.layout.un_view_google_push_provisioning, this)
+
+        whiteAddToGooglePayButtonNoShadow =
+            findViewById(R.id.white_add_to_googlepay_button_no_shadow)
+        blackAddToGooglePayButton = findViewById(R.id.black_add_to_googlepay_button)
+        whiteAddToGooglePayButton = findViewById(R.id.white_add_to_googlepay_button)
+        viewLayout = findViewById(R.id.google_view_push_provisioning_layout)
+
+        blackAddToGooglePayButton.setOnClickListener {
+          onAddToWalletClicked?.invoke()
+        }
+
+        whiteAddToGooglePayButton.setOnClickListener {
+          onAddToWalletClicked?.invoke()
+        }
+
+      showAddToGooglePlayButton(blackAddToGooglePayButton)
+    }
+
+    fun setStyle(style: UNGooglePayButtonStyle) {
+        this.currentStyle = style
+    }
+
+    fun setTheme(theme: UNGooglePayButtonTheme) {
+        setThemeAccordingToSystemTheme(false)
+        this.currentTheme = theme
+    }
+
+    fun onAddToWalletClicked(callback: () -> Unit) {
+        onAddToWalletClicked = callback
+    }
+
+    /**
+     * This method will remove all the views related to this class off the screen.
+     */
+    fun clearGooglePayViews() {
+        viewLayout.visibility = INVISIBLE
+        whiteAddToGooglePayButtonNoShadow.visibility = INVISIBLE
+        blackAddToGooglePayButton.visibility = INVISIBLE
+        whiteAddToGooglePayButton.visibility = INVISIBLE
+    }
+
+    /**
+     * This private method will display the view according to night mode or it's theme and style.
+     */
+    private fun display() {
+        clearGooglePayViews()
+        viewLayout.visibility = VISIBLE
+        if (shouldSetThemeAccordingToSystemTheme) {
+          showAddToGooglePlayButtonByUserUiMode()
+        } else {
+            updateViewsAccordingToThemeAndStyle()
+        }
+    }
+
+    private fun updateViewsAccordingToThemeAndStyle() {
+        when (currentTheme) {
+            UNGooglePayButtonTheme.Light -> {
+                when (currentStyle) {
+                    UNGooglePayButtonStyle.Regular -> {
+                      showAddToGooglePlayButton(blackAddToGooglePayButton)
+                    }
+                    UNGooglePayButtonStyle.Outlined -> {
+                      showAddToGooglePlayButton(whiteAddToGooglePayButtonNoShadow)
+                    }
+                }
+            }
+            UNGooglePayButtonTheme.Dark, UNGooglePayButtonTheme.Colorful -> {
+                when (currentStyle) {
+                    UNGooglePayButtonStyle.Regular -> {
+                      showAddToGooglePlayButton(whiteAddToGooglePayButton)
+                    }
+                    else -> {
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * This method will determine the 'Add to GPay' button theme according to the mobile phone's Night mode if it is set to 'true'.
+     */
+    fun setThemeAccordingToSystemTheme(shouldSetThemeAccordingToSystemTheme: Boolean) {
+        this.shouldSetThemeAccordingToSystemTheme = shouldSetThemeAccordingToSystemTheme
+        updateViewAccordingToSystemIfNeeded()
+    }
+
+    fun updateThemeAccordingToSystem() {
+        updateViewAccordingToSystemIfNeeded()
+    }
+
+    private fun updateViewAccordingToSystemIfNeeded() {
+        if (shouldSetThemeAccordingToSystemTheme) {
+            changeThemeAccordingToSystem()
+        }
+    }
+
+    private fun changeThemeAccordingToSystem() {
+        when (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
+            Configuration.UI_MODE_NIGHT_YES -> {
+                isDarkMode = true
+                currentTheme = UNGooglePayButtonTheme.Dark
+            }
+
+            Configuration.UI_MODE_NIGHT_NO -> {
+                isDarkMode = false
+                currentTheme = UNGooglePayButtonTheme.Light
+            }
+        }
+    }
+
+    private fun showAddToGooglePlayButtonByUserUiMode() {
+        val buttonType = if (isDarkMode) whiteAddToGooglePayButton else blackAddToGooglePayButton
+        showAddToGooglePlayButton(buttonType)
+    }
+
+    private fun showAddToGooglePlayButton(button: RelativeLayout) {
+        button.visibility = VISIBLE
+    }
+}

package/android/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path
+        android:fillColor="#3DDC84"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+</vector>

package/android/src/main/res/drawable/un_add_to_googlepay_button_content.xml

@@ -0,0 +1,54 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="91dp"
+    android:height="17dp"
+    android:viewportWidth="91"
+    android:viewportHeight="17">
+  <path
+      android:pathData="M3.976,2.976L5.768,2.976L9.534,13L7.798,13L6.902,10.438L2.856,10.438L1.946,13L0.21,13L3.976,2.976ZM6.37,8.982L5.306,6L4.914,4.838L4.83,4.838L4.438,6L3.374,8.982L6.37,8.982ZM13.632,13.224C12.988,13.224 12.4047,13.0607 11.882,12.734C11.3593,12.4073 10.9463,11.957 10.643,11.383C10.3397,10.809 10.188,10.158 10.188,9.43C10.188,8.702 10.3397,8.051 10.643,7.477C10.9463,6.903 11.3593,6.4527 11.882,6.126C12.4047,5.7993 12.988,5.636 13.632,5.636C14.136,5.636 14.5887,5.748 14.99,5.972C15.3913,6.196 15.6947,6.4713 15.9,6.798L15.97,6.798L15.9,5.79L15.9,2.976L17.44,2.976L17.44,13L15.97,13L15.97,12.076L15.9,12.076C15.6947,12.3933 15.3913,12.664 14.99,12.888C14.5887,13.112 14.136,13.224 13.632,13.224ZM13.856,11.81C14.2293,11.81 14.577,11.712 14.899,11.516C15.221,11.32 15.48,11.04 15.676,10.676C15.872,10.312 15.97,9.8967 15.97,9.43C15.97,8.9633 15.872,8.5503 15.676,8.191C15.48,7.8317 15.221,7.554 14.899,7.358C14.577,7.162 14.2293,7.064 13.856,7.064C13.4827,7.064 13.1327,7.162 12.806,7.358C12.4793,7.554 12.218,7.8317 12.022,8.191C11.826,8.5503 11.728,8.9633 11.728,9.43C11.728,9.8967 11.826,10.312 12.022,10.676C12.218,11.04 12.4793,11.32 12.806,11.516C13.1327,11.712 13.4827,11.81 13.856,11.81ZM22.364,13.224C21.72,13.224 21.1367,13.0607 20.614,12.734C20.0913,12.4073 19.6783,11.957 19.375,11.383C19.0717,10.809 18.92,10.158 18.92,9.43C18.92,8.702 19.0717,8.051 19.375,7.477C19.6783,6.903 20.0913,6.4527 20.614,6.126C21.1367,5.7993 21.72,5.636 22.364,5.636C22.868,5.636 23.3207,5.748 23.722,5.972C24.1233,6.196 24.4267,6.4713 24.632,6.798L24.702,6.798L24.632,5.79L24.632,2.976L26.172,2.976L26.172,13L24.702,13L24.702,12.076L24.632,12.076C24.4267,12.3933 24.1233,12.664 23.722,12.888C23.3207,13.112 22.868,13.224 22.364,13.224ZM22.588,11.81C22.9613,11.81 23.309,11.712 23.631,11.516C23.953,11.32 24.212,11.04 24.408,10.676C24.604,10.312 24.702,9.8967 24.702,9.43C24.702,8.9633 24.604,8.5503 24.408,8.191C24.212,7.8317 23.953,7.554 23.631,7.358C23.309,7.162 22.9613,7.064 22.588,7.064C22.2147,7.064 21.8647,7.162 21.538,7.358C21.2113,7.554 20.95,7.8317 20.754,8.191C20.558,8.5503 20.46,8.9633 20.46,9.43C20.46,9.8967 20.558,10.312 20.754,10.676C20.95,11.04 21.2113,11.32 21.538,11.516C21.8647,11.712 22.2147,11.81 22.588,11.81ZM34.466,13.112C34.1487,13.112 33.85,13.0607 33.57,12.958C33.29,12.8553 33.0613,12.72 32.884,12.552C32.4827,12.1507 32.282,11.6047 32.282,10.914L32.282,7.218L31.036,7.218L31.036,5.86L32.282,5.86L32.282,3.844L33.822,3.844L33.822,5.86L35.558,5.86L35.558,7.218L33.822,7.218L33.822,10.578C33.822,10.9607 33.8967,11.2313 34.046,11.39C34.186,11.5767 34.4287,11.67 34.774,11.67C34.9327,11.67 35.0727,11.649 35.194,11.607C35.3153,11.565 35.446,11.4973 35.586,11.404L35.586,12.902C35.278,13.042 34.9047,13.112 34.466,13.112ZM40.244,13.224C39.5253,13.224 38.8813,13.0583 38.312,12.727C37.7427,12.3957 37.2993,11.9407 36.982,11.362C36.6647,10.7833 36.506,10.1393 36.506,9.43C36.506,8.7207 36.6647,8.0767 36.982,7.498C37.2993,6.9193 37.7427,6.4643 38.312,6.133C38.8813,5.8017 39.5253,5.636 40.244,5.636C40.9627,5.636 41.6067,5.804 42.176,6.14C42.7453,6.476 43.1887,6.9333 43.506,7.512C43.8233,8.0907 43.982,8.73 43.982,9.43C43.982,10.1393 43.8233,10.7833 43.506,11.362C43.1887,11.9407 42.7453,12.3957 42.176,12.727C41.6067,13.0583 40.9627,13.224 40.244,13.224ZM40.244,11.81C40.636,11.81 41,11.7143 41.336,11.523C41.672,11.3317 41.9403,11.0563 42.141,10.697C42.3417,10.3377 42.442,9.9153 42.442,9.43C42.442,8.9447 42.3417,8.5247 42.141,8.17C41.9403,7.8153 41.672,7.5423 41.336,7.351C41,7.1597 40.636,7.064 40.244,7.064C39.852,7.064 39.488,7.1597 39.152,7.351C38.816,7.5423 38.5477,7.8153 38.347,8.17C38.1463,8.5247 38.046,8.9447 38.046,9.43C38.046,9.9153 38.1463,10.3377 38.347,10.697C38.5477,11.0563 38.816,11.3317 39.152,11.523C39.488,11.7143 39.852,11.81 40.244,11.81Z"
+      android:strokeWidth="1"
+      android:fillColor="#3C4043"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M69.526,2.6348L69.526,6.7179L72.0439,6.7179C72.6438,6.7179 73.1398,6.5163 73.5322,6.1131C73.9348,5.7109 74.1367,5.2312 74.1367,4.6759C74.1367,4.1318 73.9348,3.6577 73.5322,3.2545C73.1398,2.841 72.6438,2.6339 72.0439,2.6339L69.526,2.6339L69.526,2.6348ZM69.526,8.1551L69.526,12.8914L68.0218,12.8914L68.0218,1.1976L72.0112,1.1976C73.0249,1.1976 73.8854,1.5354 74.5945,2.2102C75.3139,2.8849 75.6736,3.7071 75.6736,4.6759C75.6736,5.667 75.3139,6.4948 74.5945,7.1584C73.8965,7.8228 73.0351,8.1542 72.0112,8.1542L69.526,8.1542L69.526,8.1551Z"
+      android:strokeWidth="1"
+      android:fillColor="#5F6368"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M77.1936,10.4416C77.1936,10.8336 77.3599,11.1602 77.6926,11.4215C78.0251,11.6828 78.4147,11.8135 78.8614,11.8135C79.4938,11.8135 80.0572,11.5792 80.5533,11.1117C81.0495,10.6432 81.297,10.0935 81.297,9.4626C80.828,9.0921 80.174,8.9073 79.335,8.9073C78.7241,8.9073 78.2149,9.0547 77.8066,9.3487C77.3982,9.6426 77.1936,10.0058 77.1936,10.4416M79.1397,4.6273C80.2515,4.6273 81.1288,4.9241 81.7726,5.5177C82.4154,6.1112 82.7367,6.925 82.7367,7.9591L82.7367,12.8914L81.298,12.8914L81.298,11.7808L81.2325,11.7808C80.6112,12.6953 79.7825,13.1527 78.7474,13.1527C77.8645,13.1527 77.1255,12.8914 76.5321,12.3688C75.938,11.8462 75.6409,11.1929 75.6409,10.4089C75.6409,9.5811 75.9538,8.9231 76.5807,8.4332C77.2076,7.9432 78.0439,7.6978 79.0903,7.6978C79.9834,7.6978 80.7196,7.8611 81.297,8.1877L81.297,7.8443C81.297,7.3217 81.0896,6.8784 80.6758,6.5135C80.2609,6.1485 79.7769,5.9666 79.221,5.9666C78.3811,5.9666 77.7169,6.3203 77.2264,7.0286L75.9015,6.1952C76.6321,5.1499 77.7112,4.6273 79.1397,4.6273"
+      android:strokeWidth="1"
+      android:fillColor="#5F6368"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M90.993,4.8886l-5.0198,11.5305l-1.5529,0l1.864,-4.0345l-3.3028,-7.496l1.635,0l2.3871,5.7489l0.0327,0l2.3217,-5.7489z"
+      android:strokeWidth="1"
+      android:fillColor="#5F6368"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M63.448,7.1341C63.448,6.6609 63.4078,6.2045 63.3321,5.7678L56.9883,5.7678L56.9883,8.3557L60.6218,8.3557C60.4657,9.1993 59.9939,9.9171 59.2783,10.3977L59.2783,12.0785L61.4468,12.0785C62.7164,10.9082 63.448,9.1789 63.448,7.1341"
+      android:strokeWidth="1"
+      android:fillColor="#4285F4"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M56.9883,13.7006C58.8036,13.7006 60.3321,13.1051 61.4467,12.0785L59.2783,10.3977C58.6747,10.8037 57.8974,11.0407 56.9883,11.0407C55.2337,11.0407 53.7445,9.8592 53.2119,8.2671L50.9781,8.2671L50.9781,9.9983C52.0852,12.1933 54.3602,13.7006 56.9883,13.7006"
+      android:strokeWidth="1"
+      android:fillColor="#34A853"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M53.212,8.267C53.0756,7.8611 53.0008,7.428 53.0008,6.981C53.0008,6.534 53.0756,6.1009 53.212,5.695L53.212,3.9637L50.9781,3.9637C50.5203,4.8709 50.2615,5.8956 50.2615,6.981C50.2615,8.0664 50.5203,9.0912 50.9781,9.9983L53.212,8.267Z"
+      android:strokeWidth="1"
+      android:fillColor="#FABB05"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M56.9883,2.9213C57.9796,2.9213 58.8681,3.2619 59.5688,3.9292L59.5688,3.9302L61.4888,2.0123C60.3228,0.9278 58.8027,0.2615 56.9883,0.2615C54.3602,0.2615 52.0852,1.7687 50.9781,3.9638L53.2119,5.695C53.7445,4.1028 55.2337,2.9213 56.9883,2.9213"
+      android:strokeWidth="1"
+      android:fillColor="#E94235"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>