ordering-ui-react-native 0.23.96 → 0.23.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.23.96",
+  "version": "0.23.97",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/original/index.tsx

@@ -35,9 +35,7 @@ import { MessageListing } from './src/components/MessageListing';
 import { Messages } from './src/components/Messages';
 import { MyOrders } from './src/components/MyOrders';
 import { Help } from './src/components/Help';
-import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
-import { HelpGuide } from './src/components/HelpGuide';
-import { HelpOrder } from './src/components/HelpOrder';
+import { HelpOptions } from './src/components/HelpOptions';
 import { NetworkError } from './src/components/NetworkError';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
@@ -113,49 +111,49 @@ import { orderTypeList, getTraduction, verifyDecimals, getOrderStatus, getOrderS
 import Alert from './src/providers/AlertProvider'
 
 import {
-	LoginParams,
-	ProfileParams,
-	AddressListParams,
-	AddressFormParams,
-	SignupParams,
-	PhoneInputParams,
-	LanguageSelectorParams,
-	BusinessesListingParams,
-	HighestRatedBusinessesParams,
-	BusinessTypeFilterParams,
-	BusinessControllerParams,
-	BusinessProductsListingParams,
-	BusinessBasicInformationParams,
-	BusinessProductsCategoriesParams,
-	BusinessProductsListParams,
-	SingleProductCardParams,
-	BusinessInformationParams,
-	BusinessReviewsParams,
-	SearchBarParams,
-	NotFoundSourceParams,
-	OrdersOptionParams,
-	ActiveOrdersParams,
-	PreviousOrdersParams,
-	OrderDetailsParams,
-	ReviewDriverParams
+  LoginParams,
+  ProfileParams,
+  AddressListParams,
+  AddressFormParams,
+  SignupParams,
+  PhoneInputParams,
+  LanguageSelectorParams,
+  BusinessesListingParams,
+  HighestRatedBusinessesParams,
+  BusinessTypeFilterParams,
+  BusinessControllerParams,
+  BusinessProductsListingParams,
+  BusinessBasicInformationParams,
+  BusinessProductsCategoriesParams,
+  BusinessProductsListParams,
+  SingleProductCardParams,
+  BusinessInformationParams,
+  BusinessReviewsParams,
+  SearchBarParams,
+  NotFoundSourceParams,
+  OrdersOptionParams,
+  ActiveOrdersParams,
+  PreviousOrdersParams,
+  OrderDetailsParams,
+  ReviewDriverParams
 } from './src/types';
 
 import { Toast } from './src/components/shared/OToast';
 import {
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-	OModal,
-	OBottomPopup,
-	HeaderTitle
+  OText,
+  OButton,
+  OInput,
+  ODropDown,
+  OIcon,
+  OIconText,
+  OIconButton,
+  OTextarea,
+  OToggle,
+  OKeyButton,
+  OAlert,
+  OModal,
+  OBottomPopup,
+  HeaderTitle
 } from './src/components/shared';
 
 import { Container } from './src/layouts/Container';
@@ -163,198 +161,196 @@ import { SafeAreaContainer } from './src/layouts/SafeAreaContainer';
 import { FloatingBottomContainer } from './src/layouts/FloatingBottomContainer';
 
 import {
-	_retrieveStoreData,
-	_setStoreData,
-	_removeStoreData,
-	_clearStoreData
+  _retrieveStoreData,
+  _setStoreData,
+  _removeStoreData,
+  _clearStoreData
 } from './src/providers/StoreUtil';
 
 export {
-	AddressForm,
-	AddressDetails,
-	AnalyticsSegment,
-	Home as HomeView,
-	SignupForm,
-	LoginForm,
-	ActiveOrders,
-	AddressList,
-	AppleLogin,
-	BusinessesListing,
-	BusinessProductsListing,
-	CartContent,
-	BusinessCart,
-	Checkout,
-	Favorite,
-	FavoriteList,
+  AddressForm,
+  AddressDetails,
+  AnalyticsSegment,
+  Home as HomeView,
+  SignupForm,
+  LoginForm,
+  ActiveOrders,
+  AddressList,
+  AppleLogin,
+  BusinessesListing,
+  BusinessProductsListing,
+  CartContent,
+  BusinessCart,
+  Checkout,
+  Favorite,
+  FavoriteList,
   GPSButton,
-	ForgotPasswordForm,
-	MomentOption,
-	OrdersOption,
-	OrderDetails,
-	OrderProgress,
-	BusinessPreorder,
-	NotificationsList,
-	UserProfileForm,
-	ReviewOrder,
-	ReviewProducts,
-	ReviewDriver,
-	BusinessMenuList,
-	UserProfile,
-	MessageListing,
-	Messages,
-	Help,
-	HelpAccountAndPayment,
-	HelpGuide,
-	HelpOrder,
-	MultiCheckout,
-	MultiOrdersDetails,
-	NetworkError,
-	NotFoundSource,
-	OrderTypeSelector,
-	Wallets,
-	PaymentOptionWallet,
-	ProductForm,
-	UpsellingProducts,
-	UserVerification,
-	BusinessListingSearch,
-	BusinessBasicInformation,
-	BusinessProductsCategories,
-	BusinessProductsList,
-	FloatingButton,
-	SearchBar,
-	LastOrders,
-	BusinessTypeFilter,
-	BusinessController,
-	BusinessFeaturedController,
-	HighestRatedBusinesses,
-	PaymentOptions,
-	DriverTips,
-	UserDetails,
-	OrderSummary,
-	OrderItAgain,
-	CartStoresListing,
-	PaymentOptionsWebView,
-	GoogleMap,
-	SingleProductCard,
-	SingleOrderCard,
-	UpsellingRedirect,
-	ProductItemAccordion,
-	ScheduleAccordion,
-	BusinessItemAccordion,
-	CouponControl,
-	TaxInformation,
-	PlaceSpot,
-	ProfessionalFilter,
-	ServiceForm,
-	ProfessionalProfile,
-	MomentSelector,
-	Cart,
-	LanguageSelector,
-	PhoneInputNumber,
-	FacebookLogin,
-	VerifyPhone,
-	GoogleLogin,
-	PreviousOrders,
-	PaymentOptionCash,
-	StripeElementsForm,
-	StripeCardsList,
-	ProductIngredient,
-	ProductOption,
-	ProductOptionSubOption,
+  ForgotPasswordForm,
+  MomentOption,
+  OrdersOption,
+  OrderDetails,
+  OrderProgress,
+  BusinessPreorder,
+  NotificationsList,
+  UserProfileForm,
+  ReviewOrder,
+  ReviewProducts,
+  ReviewDriver,
+  BusinessMenuList,
+  UserProfile,
+  MessageListing,
+  Messages,
+  Help,
+  HelpOptions,
+  MultiCheckout,
+  MultiOrdersDetails,
+  NetworkError,
+  NotFoundSource,
+  OrderTypeSelector,
+  Wallets,
+  PaymentOptionWallet,
+  ProductForm,
+  UpsellingProducts,
+  UserVerification,
+  BusinessListingSearch,
+  BusinessBasicInformation,
+  BusinessProductsCategories,
+  BusinessProductsList,
+  FloatingButton,
+  SearchBar,
+  LastOrders,
+  BusinessTypeFilter,
+  BusinessController,
+  BusinessFeaturedController,
+  HighestRatedBusinesses,
+  PaymentOptions,
+  DriverTips,
+  UserDetails,
+  OrderSummary,
+  OrderItAgain,
+  CartStoresListing,
+  PaymentOptionsWebView,
+  GoogleMap,
+  SingleProductCard,
+  SingleOrderCard,
+  UpsellingRedirect,
+  ProductItemAccordion,
+  ScheduleAccordion,
+  BusinessItemAccordion,
+  CouponControl,
+  TaxInformation,
+  PlaceSpot,
+  ProfessionalFilter,
+  ServiceForm,
+  ProfessionalProfile,
+  MomentSelector,
+  Cart,
+  LanguageSelector,
+  PhoneInputNumber,
+  FacebookLogin,
+  VerifyPhone,
+  GoogleLogin,
+  PreviousOrders,
+  PaymentOptionCash,
+  StripeElementsForm,
+  StripeCardsList,
+  ProductIngredient,
+  ProductOption,
+  ProductOptionSubOption,
   SendGiftCard,
-	Sessions,
-	SingleProductReview,
-	LogoutButton,
-	UserFormDetailsUI,
-	WalletTransactionItem,
-	Promotions,
-	PageBanner,
-	MyOrders,
-	MultiCart,
-	WebsocketStatus,
-	ORDER_TYPES,
-	USER_TYPE,
+  Sessions,
+  SingleProductReview,
+  LogoutButton,
+  UserFormDetailsUI,
+  WalletTransactionItem,
+  Promotions,
+  PageBanner,
+  MyOrders,
+  MultiCart,
+  WebsocketStatus,
+  ORDER_TYPES,
+  USER_TYPE,
 
-	OSBill,
-	OSTable,
-	OSCoupon,
-	OSTotal,
-	OSRow,
+  OSBill,
+  OSTable,
+  OSCoupon,
+  OSTotal,
+  OSRow,
 
-	FormInput,
-	FormSide,
-	ButtonsWrapper,
-	LoginWith,
-	OTab,
-	OTabs,
+  FormInput,
+  FormSide,
+  ButtonsWrapper,
+  LoginWith,
+  OTab,
+  OTabs,
 
-	OSItem,
-	OSItemContent,
-	OSItemActions,
+  OSItem,
+  OSItemContent,
+  OSItemActions,
 
-	Alert,
+  Alert,
 
-	//Types
-	LoginParams,
-	ProfileParams,
-	AddressListParams,
-	AddressFormParams,
-	SignupParams,
-	PhoneInputParams,
-	LanguageSelectorParams,
-	BusinessesListingParams,
-	HighestRatedBusinessesParams,
-	BusinessTypeFilterParams,
-	BusinessControllerParams,
-	BusinessProductsListingParams,
-	BusinessBasicInformationParams,
-	BusinessProductsCategoriesParams,
-	BusinessProductsListParams,
-	SingleProductCardParams,
-	BusinessInformationParams,
-	BusinessReviewsParams,
-	SearchBarParams,
-	NotFoundSourceParams,
-	OrdersOptionParams,
-	ActiveOrdersParams,
-	PreviousOrdersParams,
-	OrderDetailsParams,
-	ReviewDriverParams,
+  //Types
+  LoginParams,
+  ProfileParams,
+  AddressListParams,
+  AddressFormParams,
+  SignupParams,
+  PhoneInputParams,
+  LanguageSelectorParams,
+  BusinessesListingParams,
+  HighestRatedBusinessesParams,
+  BusinessTypeFilterParams,
+  BusinessControllerParams,
+  BusinessProductsListingParams,
+  BusinessBasicInformationParams,
+  BusinessProductsCategoriesParams,
+  BusinessProductsListParams,
+  SingleProductCardParams,
+  BusinessInformationParams,
+  BusinessReviewsParams,
+  SearchBarParams,
+  NotFoundSourceParams,
+  OrdersOptionParams,
+  ActiveOrdersParams,
+  PreviousOrdersParams,
+  OrderDetailsParams,
+  ReviewDriverParams,
 
-	// OComponents
-	Toast,
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-	OModal,
-	OBottomPopup,
-	HeaderTitle,
+  // OComponents
+  Toast,
+  OText,
+  OButton,
+  OInput,
+  ODropDown,
+  OIcon,
+  OIconText,
+  OIconButton,
+  OTextarea,
+  OToggle,
+  OKeyButton,
+  OAlert,
+  OModal,
+  OBottomPopup,
+  HeaderTitle,
 
-	// layout
-	Container,
-	SafeAreaContainer,
-	FloatingBottomContainer,
-	NavBar,
+  // layout
+  Container,
+  SafeAreaContainer,
+  FloatingBottomContainer,
+  NavBar,
 
-	// utils
-	_retrieveStoreData,
-	_setStoreData,
-	_removeStoreData,
-	_clearStoreData,
-	orderTypeList,
+  // utils
+  _retrieveStoreData,
+  _setStoreData,
+  _removeStoreData,
+  _clearStoreData,
+  orderTypeList,
   getTraduction,
   verifyDecimals,
   getOrderStatus,
   getOrderStatuPickUp,
 
-	// Date Picker
-	DatePickerUI
+  // Date Picker
+  DatePickerUI
 }

package/themes/original/src/components/Help/functions.tsx

@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { useApi } from 'ordering-components/native'
+
+/**
+ * Component to manage login behavior without UI component
+ */
+export const CmsContent = (props: any) => {
+  const { UIComponent } = props
+
+  /**
+   * Array to save the body of the page
+   */
+  const [ordering] = useApi()
+  const [cmsState, setCmsState] = useState({ items: [], pages: [], loading: true, error: null })
+
+  /**
+   * Method used to get the page by slug
+   */
+  const getPages = async () => {
+    setCmsState({ ...cmsState, loading: true })
+    try {
+      const propsToFetch = ['name', 'enabled']
+      let pages: any = []
+      const { content: { error, result } } = await ordering.pages().select(propsToFetch).get()
+      if (!error) {
+        const promises = result.map((item: any) => getPage(item.id));
+        pages = await Promise.all(promises)
+      }
+      setCmsState({
+        ...cmsState,
+        loading: false,
+        error: error ? typeof result === 'string' ? result : result[0] : null,
+        items: error ? [] : result.filter((i: any) => i.enabled).map((item: any) => ({ id: item.id, name: item.name })),
+        pages
+      })
+    } catch (err: any) {
+      setCmsState({
+        ...cmsState,
+        loading: false,
+        error: err?.message ?? err
+      })
+    }
+  }
+
+  const getPage = async (id: number) => {
+    try {
+      const { content: { error, result } } = await ordering.pages(id).get()
+      return error ? null : { id, body: result?.body }
+    } catch {
+      return null
+    }
+  }
+
+  useEffect(() => {
+    getPages()
+  }, [])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          cmsState={cmsState}
+        />
+      )}
+    </>
+  )
+}
+
+CmsContent.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType
+}

package/themes/original/src/components/Help/index.tsx

@@ -1,27 +1,48 @@
 import React, { useState } from 'react'
-import { useTheme } from 'styled-components/native';
-import { Platform, RefreshControl } from 'react-native'
-import { HelpParams } from '../../types'
+import { Platform, RefreshControl, View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native'
+
+import { HelpParams } from '../../types'
+import { CmsContent } from './functions'
+import { HelpSubItem, LastOrdersContainer } from './styles'
+import { Container } from '../../layouts/Container'
+
+import { OText, OIcon } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
-import { OText } from '../shared'
 import { LastOrders } from '../LastOrders'
-import { Container } from '../../layouts/Container'
 
-import {
-  HelpSubItem,
-  LastOrdersContainer
-} from './styles'
+const HelpUI = (props: HelpParams) => {
+  const { cmsState, navigation } = props
+
+  const { items, loading, error, pages } = cmsState
 
-export const Help = (props: HelpParams) => {
-  const {
-    navigation
-  } = props
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [refreshing] = useState(false);
+
+  const [refreshing] = useState(false)
   const [refresh, setRefresh] = useState(false)
 
+  const HelpItem = ({ item }: any) => {
+    const currentItem = pages.find((p: any) => p.id === item.id)
+    return (
+      <HelpSubItem
+        activeOpacity={0.7}
+        onPress={() => onRedirect('HelpOptions', { item: currentItem })}
+      >
+        <OText size={14} style={{ width: '90%' }}>
+          {item.name}
+        </OText>
+        <OIcon
+          width={15}
+          src={theme.images.general.chevron_right}
+        />
+      </HelpSubItem>
+    )
+  }
+
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
@@ -49,22 +70,36 @@ export const Help = (props: HelpParams) => {
         showCall={false}
         btnStyle={{ paddingLeft: 0 }}
       />
-      <HelpSubItem
-        onPress={() => onRedirect('HelpOrder')}
+      <OText
+        size={20}
+        weight={'bold'}
+        style={{ marginBottom: 20 }}
       >
-        <OText size={14}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
-      </HelpSubItem>
-      <HelpSubItem
-        onPress={() => onRedirect('HelpAccountAndPayment')}
-      >
-        <OText size={14}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
-      </HelpSubItem>
-      <HelpSubItem
-        onPress={() => onRedirect('HelpGuide')}
-      >
-        <OText size={14}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
-      </HelpSubItem>
-
+        {t('ALL_THE_THEMES', 'All the themes')}
+      </OText>
+      {!loading && !error && items.map((item: any) => (
+        <HelpItem
+          key={item.id}
+          item={item}
+        />
+      ))}
+      {loading && (
+        <Placeholder Animation={Fade}>
+          <View style={{ flexDirection: 'column' }}>
+            {[...Array(5)].map((_, i) => (
+              <HelpSubItem key={i}>
+                <PlaceholderLine key={i} height={30} width={90} noMargin />
+              </HelpSubItem>
+            ))}
+          </View>
+        </Placeholder>
+      )}
+      {!loading && !!error && (
+        <NotFoundSource
+          simple
+          content={error}
+        />
+      )}
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
         <LastOrders {...props} onRedirect={onRedirect} refresh={refresh} setRefresh={setRefresh} />
@@ -72,3 +107,13 @@ export const Help = (props: HelpParams) => {
     </Container>
   )
 }
+
+export const Help = (props: HelpParams) => {
+  const helpProps = {
+    ...props,
+    UIComponent: HelpUI
+  }
+  return (
+    <CmsContent {...helpProps} />
+  )
+}