ordering-components-external 13.2.13 → 13.2.14

package/native/src/contexts/OrderingContext/index.js

@@ -1,85 +1,85 @@
-import React, { createContext } from 'react'
-import { ConfigProvider } from '../../../../src/contexts/ConfigContext'
-import { SessionProvider } from '../../../../src/contexts/SessionContext'
-import { WebsocketProvider } from '../../../../src/contexts/WebsocketContext'
-import { OrderProvider } from '../../../../src/contexts/OrderContext'
-import { BusinessProvider } from '../../../../src/contexts/BusinessContext'
-import { LanguageProvider } from '../../../../src/contexts/LanguageContext'
-import { ApiProvider } from '../../../../src/contexts/ApiContext'
-import { EventProvider } from '../../../../src/contexts/EventContext'
-import { UtilsProviders } from '../../../../src/contexts/UtilsContext'
-import { ValidationFieldsProvider } from '../../../../src/contexts/ValidationsFieldsContext'
-import { ToastProvider } from '../../../../src/contexts/ToastContext'
-import { CustomerProvider } from '../../../../src/contexts/CustomerContext'
-import { OptimizationLoadProvider } from '../../../../src/contexts/OptimizationLoadContext'
-import { OrderingThemeProvider } from '../../../../src/contexts/OrderingThemeContext'
-import { NativeStrategy } from '../../NativeStrategy'
-import { SiteProvider } from '../../../../src/contexts/SiteContext'
-
-/**
- * Create OrderingContext
- * Wrapper to use all context to ordering apps
- */
-export const OrderingContext = createContext()
-
-/**
- * Custom provider to languages manager
- * This provider has a reducer for manage languages state
- * @param {props} props
- */
-export const OrderingProvider = ({ Alert, settings, children, isDisableToast, isDisabledDefaultOpts }) => {
-  const nativeStrategy = new NativeStrategy()
-  const restOfSettings = {
-    project: settings.project,
-    appId: settings.app_id,
-    use_root_point: settings.use_root_point,
-    countryCode: settings.countryCode,
-    useOptimizeLoad: settings?.useOptimizeLoad,
-    force_update_lang: settings?.force_update_lang
-  }
-  return (
-    <OrderingContext.Provider>
-      <EventProvider>
-        <ApiProvider settings={Object.assign(settings.api, restOfSettings)}>
-          <OptimizationLoadProvider strategy={nativeStrategy} settings={Object.assign(settings.api, restOfSettings)}>
-            <LanguageProvider strategy={nativeStrategy} settings={Object.assign(settings.api, restOfSettings)}>
-              <ConfigProvider strategy={nativeStrategy}>
-                <OrderingThemeProvider settings={Object.assign(settings.api, restOfSettings)}>
-                  <SiteProvider appId={settings.app_id}>
-                    <UtilsProviders>
-                      <ToastProvider>
-                        <ValidationFieldsProvider appId={settings.app_id}>
-                          <SessionProvider strategy={nativeStrategy}>
-                            <WebsocketProvider strategy={nativeStrategy} settings={Object.assign(settings.socket, restOfSettings)}>
-                              <CustomerProvider strategy={nativeStrategy}>
-                                <OrderProvider
-                                  isDisabledDefaultOpts={isDisabledDefaultOpts}
-                                  strategy={nativeStrategy}
-                                  Alert={Alert}
-                                  isDisableToast={isDisableToast}
-                                  franchiseId={settings?.franchiseSlug ?? settings?.franchiseId}
-                                  businessSlug={settings?.businessSlug}
-                                  userAgent={settings?.userAgent}
-                                >
-                                  <BusinessProvider
-                                    businessId={settings?.businessSlug ?? settings?.businessId}
-                                  >
-                                    {children}
-                                  </BusinessProvider>
-                                </OrderProvider>
-                              </CustomerProvider>
-                            </WebsocketProvider>
-                          </SessionProvider>
-                        </ValidationFieldsProvider>
-                      </ToastProvider>
-                    </UtilsProviders>
-                  </SiteProvider>
-                </OrderingThemeProvider>
-              </ConfigProvider>
-            </LanguageProvider>
-          </OptimizationLoadProvider>
-        </ApiProvider>
-      </EventProvider>
-    </OrderingContext.Provider>
-  )
-}
+import React, { createContext } from 'react'
+import { ConfigProvider } from '../../../../src/contexts/ConfigContext'
+import { SessionProvider } from '../../../../src/contexts/SessionContext'
+import { WebsocketProvider } from '../../../../src/contexts/WebsocketContext'
+import { OrderProvider } from '../../../../src/contexts/OrderContext'
+import { BusinessProvider } from '../../../../src/contexts/BusinessContext'
+import { LanguageProvider } from '../../../../src/contexts/LanguageContext'
+import { ApiProvider } from '../../../../src/contexts/ApiContext'
+import { EventProvider } from '../../../../src/contexts/EventContext'
+import { UtilsProviders } from '../../../../src/contexts/UtilsContext'
+import { ValidationFieldsProvider } from '../../../../src/contexts/ValidationsFieldsContext'
+import { ToastProvider } from '../../../../src/contexts/ToastContext'
+import { CustomerProvider } from '../../../../src/contexts/CustomerContext'
+import { OptimizationLoadProvider } from '../../../../src/contexts/OptimizationLoadContext'
+import { OrderingThemeProvider } from '../../../../src/contexts/OrderingThemeContext'
+import { NativeStrategy } from '../../NativeStrategy'
+import { SiteProvider } from '../../../../src/contexts/SiteContext'
+
+/**
+ * Create OrderingContext
+ * Wrapper to use all context to ordering apps
+ */
+export const OrderingContext = createContext()
+
+/**
+ * Custom provider to languages manager
+ * This provider has a reducer for manage languages state
+ * @param {props} props
+ */
+export const OrderingProvider = ({ Alert, settings, children, isDisableToast, isDisabledDefaultOpts }) => {
+  const nativeStrategy = new NativeStrategy()
+  const restOfSettings = {
+    project: settings.project,
+    appId: settings.app_id,
+    use_root_point: settings.use_root_point,
+    countryCode: settings.countryCode,
+    useOptimizeLoad: settings?.useOptimizeLoad,
+    force_update_lang: settings?.force_update_lang
+  }
+  return (
+    <OrderingContext.Provider>
+      <EventProvider>
+        <ApiProvider settings={Object.assign(settings.api, restOfSettings)}>
+          <OptimizationLoadProvider strategy={nativeStrategy} settings={Object.assign(settings.api, restOfSettings)}>
+            <LanguageProvider strategy={nativeStrategy} settings={Object.assign(settings.api, restOfSettings)}>
+              <ConfigProvider strategy={nativeStrategy}>
+                <OrderingThemeProvider settings={Object.assign(settings.api, restOfSettings)}>
+                  <SiteProvider appId={settings.app_id}>
+                    <UtilsProviders>
+                      <ToastProvider>
+                        <ValidationFieldsProvider appId={settings.app_id}>
+                          <SessionProvider strategy={nativeStrategy}>
+                            <WebsocketProvider strategy={nativeStrategy} settings={Object.assign(settings.socket, restOfSettings)}>
+                              <CustomerProvider strategy={nativeStrategy}>
+                                <OrderProvider
+                                  isDisabledDefaultOpts={isDisabledDefaultOpts}
+                                  strategy={nativeStrategy}
+                                  Alert={Alert}
+                                  isDisableToast={isDisableToast}
+                                  franchiseId={settings?.franchiseSlug ?? settings?.franchiseId}
+                                  businessSlug={settings?.businessSlug}
+                                  userAgent={settings?.userAgent}
+                                >
+                                  <BusinessProvider
+                                    businessId={settings?.businessSlug ?? settings?.businessId}
+                                  >
+                                    {children}
+                                  </BusinessProvider>
+                                </OrderProvider>
+                              </CustomerProvider>
+                            </WebsocketProvider>
+                          </SessionProvider>
+                        </ValidationFieldsProvider>
+                      </ToastProvider>
+                    </UtilsProviders>
+                  </SiteProvider>
+                </OrderingThemeProvider>
+              </ConfigProvider>
+            </LanguageProvider>
+          </OptimizationLoadProvider>
+        </ApiProvider>
+      </EventProvider>
+    </OrderingContext.Provider>
+  )
+}

package/package.json

@@ -1,92 +1,92 @@
-{
-  "name": "ordering-components-external",
-  "version": "13.2.13",
-  "description": "Ordering Internal Dashboard",
-  "main": "./_modules/index.js",
-  "scripts": {
-    "clean": "shx rm -rf _bundles _modules",
-    "build": "yarn run clean && babel ./src --out-dir ./_modules && babel ./native --out-dir ./_modules/native && webpack --config webpack.prod.js",
-    "build-dev": "npx webpack --mode=development",
-    "serve": "npx webpack-dev-server --config webpack.dev.js",
-    "lint": "standard",
-    "test": "cypress open"
-  },
-  "repository": {
-    "url": "git@github.com:Ordering-Inc/ordering-components.git"
-  },
-  "keywords": [
-    "ordering",
-    "ordering-components"
-  ],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.10.4",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-decorators": "^7.10.5",
-    "@babel/plugin-syntax-jsx": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
-    "babel-loader": "^8.1.0",
-    "css-loader": "^3.6.0",
-    "cypress": "^4.11.0",
-    "eslint-plugin-cypress": "^2.11.1",
-    "html-webpack-plugin": "^4.3.0",
-    "husky": "^4.3.8",
-    "mini-css-extract-plugin": "^1.3.4",
-    "react": "^16.13.1",
-    "react-datepicker": "^3.1.3",
-    "react-dom": "^16.13.1",
-    "react-hook-form": "^6.0.8",
-    "react-router-dom": "^5.2.0",
-    "shx": "^0.3.2",
-    "standard": "^14.3.4",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.2.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.10.4",
-    "@react-native-async-storage/async-storage": "^1.13.1",
-    "@segment/analytics-next": "^1.35.1",
-    "@stripe/react-stripe-js": "^1.1.2",
-    "@stripe/stripe-js": "^1.9.0",
-    "dayjs": "^1.9.3",
-    "decimal.js": "^10.4.3",
-    "firebase": "9.15.0",
-    "libphonenumber-js": "^1.9.17",
-    "moment": "^2.29.4",
-    "ordering-api-sdk": "github:Ordering-Releases/ordering-sdk#release",
-    "prop-types": "^15.7.2",
-    "react-google-recaptcha": "latest",
-    "react-google-recaptcha-v3": "^1.10.0",
-    "socket.io-client": "^4.7.2"
-  },
-  "peerDependencies": {
-    "react": ">=16.13.1",
-    "react-dom": ">=16.13.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "./node_modules/standard/eslintrc.json",
-      "plugin:cypress/recommended"
-    ]
-  },
-  "standard": {
-    "globals": [
-      "describe",
-      "before",
-      "after",
-      "beforeEach",
-      "afterEach",
-      "it",
-      "cy",
-      "context",
-      "assert"
-    ]
-  }
-}
+{
+  "name": "ordering-components-external",
+  "version": "13.2.14",
+  "description": "Ordering Internal Dashboard",
+  "main": "./_modules/index.js",
+  "scripts": {
+    "clean": "shx rm -rf _bundles _modules",
+    "build": "yarn run clean && babel ./src --out-dir ./_modules && babel ./native --out-dir ./_modules/native && webpack --config webpack.prod.js",
+    "build-dev": "npx webpack --mode=development",
+    "serve": "npx webpack-dev-server --config webpack.dev.js",
+    "lint": "standard",
+    "test": "cypress open"
+  },
+  "repository": {
+    "url": "git@github.com:Ordering-Inc/ordering-components.git"
+  },
+  "keywords": [
+    "ordering",
+    "ordering-components"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-syntax-jsx": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "cypress": "^4.11.0",
+    "eslint-plugin-cypress": "^2.11.1",
+    "html-webpack-plugin": "^4.3.0",
+    "husky": "^4.3.8",
+    "mini-css-extract-plugin": "^1.3.4",
+    "react": "^16.13.1",
+    "react-datepicker": "^3.1.3",
+    "react-dom": "^16.13.1",
+    "react-hook-form": "^6.0.8",
+    "react-router-dom": "^5.2.0",
+    "shx": "^0.3.2",
+    "standard": "^14.3.4",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^4.2.3",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.10.4",
+    "@react-native-async-storage/async-storage": "^1.13.1",
+    "@segment/analytics-next": "^1.35.1",
+    "@stripe/react-stripe-js": "^1.1.2",
+    "@stripe/stripe-js": "^1.9.0",
+    "dayjs": "^1.9.3",
+    "decimal.js": "^10.4.3",
+    "firebase": "9.15.0",
+    "libphonenumber-js": "^1.9.17",
+    "moment": "^2.29.4",
+    "ordering-api-sdk": "github:Ordering-Releases/ordering-sdk#release",
+    "prop-types": "^15.7.2",
+    "react-google-recaptcha": "latest",
+    "react-google-recaptcha-v3": "^1.10.0",
+    "socket.io-client": "^4.7.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.13.1",
+    "react-dom": ">=16.13.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "./node_modules/standard/eslintrc.json",
+      "plugin:cypress/recommended"
+    ]
+  },
+  "standard": {
+    "globals": [
+      "describe",
+      "before",
+      "after",
+      "beforeEach",
+      "afterEach",
+      "it",
+      "cy",
+      "context",
+      "assert"
+    ]
+  }
+}

package/src/components/AddressDetails/index.js

@@ -1,149 +1,149 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { useOrder } from '../../contexts/OrderContext'
-import { useApi } from '../../contexts/ApiContext'
-import { useConfig } from '../../contexts/ConfigContext'
-
-/**
- * Component to manage address details behavior without UI component
- */
-export const AddressDetails = (props) => {
-  const {
-    apiKey,
-    UIComponent,
-    mapConfigs,
-    isMultiCheckout,
-    openCarts,
-    cart,
-    primaryColor
-  } = props
-  const [orderState] = useOrder()
-  const [{ configs }] = useConfig()
-  const GM_API_KEY = apiKey || configs?.google_maps_api_key?.value
-  const requestsState = {}
-
-  /**
-   * This must be contains an object with business location
-   */
-  const [location, setLocation] = useState(null)
-  const [formatUrl, setFormatUrl] = useState(null)
-  const [logo, setLogo] = useState(null)
-  const [ordering] = useApi()
-  const businessId = props.uuid
-    ? Object.values(orderState.carts).find(_cart => _cart?.uuid === props.uuid)?.business_id ?? {}
-    : props.businessId
-  /**
-   * Method to format google url for business location
-   */
-
-  const formatUrlMethod = (businessLocation) => {
-    const orderLocation = props.orderLocation || orderState?.options?.address?.location
-    let businessesMarkers = ''
-    let firstLetterBusinessName = ''
-    if (isMultiCheckout) {
-      openCarts.forEach(cart => {
-        firstLetterBusinessName = cart?.business?.name?.charAt(0)?.toUpperCase?.() ?? 'S'
-        businessesMarkers += `&markers=label:${firstLetterBusinessName}%7Ccolor:${primaryColor}%7C${cart.business?.location?.lat},${cart.business?.location?.lng}`
-      })
-    } else {
-      firstLetterBusinessName = cart?.business?.name?.charAt(0)?.toUpperCase?.() ?? 'S'
-      businessesMarkers = `&markers=label:${firstLetterBusinessName}%7Ccolor:${primaryColor}%7C${cart.business?.location?.lat ?? businessLocation?.location?.lat},${cart.business?.location?.lng ?? businessLocation?.location?.lng}`
-    }
-    const staticmapUrl = isMultiCheckout
-      ? `https://maps.googleapis.com/maps/api/staticmap?size=${mapConfigs?.mapSize?.width || 500}x${mapConfigs?.mapSize?.height || 190}&scale=2&maptype=roadmap&markers=icon:%7Ccolor:red%7C${orderLocation?.lat},${orderLocation?.lng}${businessesMarkers}&key=${GM_API_KEY}`
-      : `https://maps.googleapis.com/maps/api/staticmap?size=${mapConfigs?.mapSize?.width || 500}x${mapConfigs?.mapSize?.height || 190}&scale=2&maptype=roadmap&markers=color:red%7C${orderLocation?.lat},${orderLocation?.lng}${businessesMarkers}&key=${GM_API_KEY}`
-
-    return staticmapUrl
-  }
-  /**
-   * Method to get business location from API
-   */
-  const getBusiness = async () => {
-    try {
-      const source = {}
-      requestsState.business = source
-      const { content: { result } } = await ordering.businesses(businessId).select(['location', 'logo']).get({ cancelToken: source })
-      setLogo(result.logo)
-      setLocation(result.location)
-    } catch (err) {
-    }
-  }
-
-  useEffect(() => {
-    if (isMultiCheckout) return
-    if (props.location && props.businessLogo && !props.uuid) {
-      setLocation(props.location)
-      setLogo(props.businessLogo)
-    } else {
-      getBusiness()
-    }
-    return () => {
-      if (requestsState.business) {
-        requestsState.business.cancel()
-      }
-    }
-  }, [businessId, isMultiCheckout, props.location])
-
-  useEffect(() => {
-    if (!logo || !location) return
-    setFormatUrl(formatUrlMethod(location))
-  }, [logo, JSON.stringify(location), JSON.stringify(orderState?.options?.address?.address)])
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          googleMapsUrl={
-            isMultiCheckout
-              ? formatUrlMethod()
-              : formatUrl
-          }
-        />
-      )}
-    </>
-  )
-}
-
-AddressDetails.propTypes = {
-  /**
-   * UI Component, this must be containt all graphic elements and use parent props
-   */
-  UIComponent: PropTypes.elementType,
-  /**
-   * location, business location with lat, lng and zoom properties
-   */
-  business: PropTypes.object,
-  /**
-   * business, object with business info, should be contains address and locations property
-   */
-  businessId: PropTypes.number,
-  /**
-   * Components types before Address Details
-   * Array of type components, the parent props will pass to these components
-   */
-  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Components types after Address Details
-   * Array of type components, the parent props will pass to these components
-   */
-  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Elements before Address Details
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  beforeElements: PropTypes.arrayOf(PropTypes.element),
-  /**
-   * Elements after Address Details
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  afterElements: PropTypes.arrayOf(PropTypes.element)
-}
-
-AddressDetails.defaultProps = {
-  beforeComponents: [],
-  afterComponents: [],
-  beforeElements: [],
-  afterElements: [],
-  primaryColor: 'red'
-}
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useOrder } from '../../contexts/OrderContext'
+import { useApi } from '../../contexts/ApiContext'
+import { useConfig } from '../../contexts/ConfigContext'
+
+/**
+ * Component to manage address details behavior without UI component
+ */
+export const AddressDetails = (props) => {
+  const {
+    apiKey,
+    UIComponent,
+    mapConfigs,
+    isMultiCheckout,
+    openCarts,
+    cart,
+    primaryColor
+  } = props
+  const [orderState] = useOrder()
+  const [{ configs }] = useConfig()
+  const GM_API_KEY = apiKey || configs?.google_maps_api_key?.value
+  const requestsState = {}
+
+  /**
+   * This must be contains an object with business location
+   */
+  const [location, setLocation] = useState(null)
+  const [formatUrl, setFormatUrl] = useState(null)
+  const [logo, setLogo] = useState(null)
+  const [ordering] = useApi()
+  const businessId = props.uuid
+    ? Object.values(orderState.carts).find(_cart => _cart?.uuid === props.uuid)?.business_id ?? {}
+    : props.businessId
+  /**
+   * Method to format google url for business location
+   */
+
+  const formatUrlMethod = (businessLocation) => {
+    const orderLocation = props.orderLocation || orderState?.options?.address?.location
+    let businessesMarkers = ''
+    let firstLetterBusinessName = ''
+    if (isMultiCheckout) {
+      openCarts.forEach(cart => {
+        firstLetterBusinessName = cart?.business?.name?.charAt(0)?.toUpperCase?.() ?? 'S'
+        businessesMarkers += `&markers=label:${firstLetterBusinessName}%7Ccolor:${primaryColor}%7C${cart.business?.location?.lat},${cart.business?.location?.lng}`
+      })
+    } else {
+      firstLetterBusinessName = cart?.business?.name?.charAt(0)?.toUpperCase?.() ?? 'S'
+      businessesMarkers = `&markers=label:${firstLetterBusinessName}%7Ccolor:${primaryColor}%7C${cart.business?.location?.lat ?? businessLocation?.location?.lat},${cart.business?.location?.lng ?? businessLocation?.location?.lng}`
+    }
+    const staticmapUrl = isMultiCheckout
+      ? `https://maps.googleapis.com/maps/api/staticmap?size=${mapConfigs?.mapSize?.width || 500}x${mapConfigs?.mapSize?.height || 190}&scale=2&maptype=roadmap&markers=icon:%7Ccolor:red%7C${orderLocation?.lat},${orderLocation?.lng}${businessesMarkers}&key=${GM_API_KEY}`
+      : `https://maps.googleapis.com/maps/api/staticmap?size=${mapConfigs?.mapSize?.width || 500}x${mapConfigs?.mapSize?.height || 190}&scale=2&maptype=roadmap&markers=color:red%7C${orderLocation?.lat},${orderLocation?.lng}${businessesMarkers}&key=${GM_API_KEY}`
+
+    return staticmapUrl
+  }
+  /**
+   * Method to get business location from API
+   */
+  const getBusiness = async () => {
+    try {
+      const source = {}
+      requestsState.business = source
+      const { content: { result } } = await ordering.businesses(businessId).select(['location', 'logo']).get({ cancelToken: source })
+      setLogo(result.logo)
+      setLocation(result.location)
+    } catch (err) {
+    }
+  }
+
+  useEffect(() => {
+    if (isMultiCheckout) return
+    if (props.location && props.businessLogo && !props.uuid) {
+      setLocation(props.location)
+      setLogo(props.businessLogo)
+    } else {
+      getBusiness()
+    }
+    return () => {
+      if (requestsState.business) {
+        requestsState.business.cancel()
+      }
+    }
+  }, [businessId, isMultiCheckout, props.location])
+
+  useEffect(() => {
+    if (!logo || !location) return
+    setFormatUrl(formatUrlMethod(location))
+  }, [logo, JSON.stringify(location), JSON.stringify(orderState?.options?.address?.address)])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          googleMapsUrl={
+            isMultiCheckout
+              ? formatUrlMethod()
+              : formatUrl
+          }
+        />
+      )}
+    </>
+  )
+}
+
+AddressDetails.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType,
+  /**
+   * location, business location with lat, lng and zoom properties
+   */
+  business: PropTypes.object,
+  /**
+   * business, object with business info, should be contains address and locations property
+   */
+  businessId: PropTypes.number,
+  /**
+   * Components types before Address Details
+   * Array of type components, the parent props will pass to these components
+   */
+  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Components types after Address Details
+   * Array of type components, the parent props will pass to these components
+   */
+  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Elements before Address Details
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  beforeElements: PropTypes.arrayOf(PropTypes.element),
+  /**
+   * Elements after Address Details
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  afterElements: PropTypes.arrayOf(PropTypes.element)
+}
+
+AddressDetails.defaultProps = {
+  beforeComponents: [],
+  afterComponents: [],
+  beforeElements: [],
+  afterElements: [],
+  primaryColor: 'red'
+}