ordering-ui-react-native 0.12.14 → 0.12.18

package/themes/business/src/components 2/ProductItemAccordion/index.tsx

@@ -0,0 +1,301 @@
+import React, { useEffect, useState } from 'react';
+import { View, Animated } from 'react-native';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useUtils, useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import {
+  Accordion,
+  AccordionSection,
+  // ProductInfo,
+  // ProductQuantity,
+  ContentInfo,
+  // ProductImage,
+  AccordionContent,
+  ProductOptionsList,
+  ProductOption,
+  ProductSubOption,
+  ProductComment,
+} from './styles';
+import { OText, OAlert } from '../shared';
+import { ProductItemAccordionParams } from '../../types';
+
+export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
+  const {
+    isClickableEvent,
+    isCartPending,
+    isCartProduct,
+    product,
+    getProductMax,
+    onDeleteProduct,
+    onEditProduct,
+  } = props;
+
+  const [, t] = useLanguage();
+  const theme = useTheme();
+  const [{ parsePrice }] = useUtils();
+
+  const [isActive, setActiveState] = useState(false);
+
+  const productInfo = () => {
+    if (isCartProduct) {
+      const ingredients = JSON.parse(
+        JSON.stringify(Object.values(product.ingredients ?? {})),
+      );
+      let options = JSON.parse(
+        JSON.stringify(Object.values(product.options ?? {})),
+      );
+
+      options = options.map((option: any) => {
+        option.suboptions = Object.values(option.suboptions ?? {});
+        return option;
+      });
+      console.log(productInfo, ingredients, options)
+      return {
+        ...productInfo,
+        ingredients,
+        options,
+      };
+    }
+
+    return product;
+  };
+
+  const parseOptions = typeof productInfo().options === 'string' ? JSON.parse(productInfo().options) : productInfo().options
+
+  const getProductPrice = (product: any) => {
+    let subOptionPrice = 0;
+    if (product?.options?.length > 0 && product?.options?.suboptions?.length > 0) {
+      for (const option of product?.options) {
+        for (const suboption of option?.suboptions) {
+          subOptionPrice += suboption.quantity * suboption.price;
+        }
+      }
+    }
+
+    const price = product.quantity * (product.price + subOptionPrice);
+    return parseFloat(price.toFixed(2));
+  };
+
+  const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
+    if (name !== 'No') {
+      const pos = position ? `(${position})` : '';
+      return `${quantity} x ${name} ${pos} +${price}`
+    } else {
+      return 'No';
+    }
+  };
+
+  /*useEffect(() => {
+    toggleAccordion()
+  }, [isActive])*/
+
+  const productOptions =
+    getProductMax &&
+    [...Array(getProductMax(product) + 1)].map((_: any, opt: number) => {
+      return {
+        label: opt === 0 ? t('REMOVE', 'Remove') : opt.toString(),
+        value: opt.toString(),
+      };
+    });
+
+  useEffect(() => {
+    if (
+      productInfo?.()?.ingredients?.length > 0 ||
+      productInfo?.()?.options?.length > 0 ||
+      product.comment !== ''
+    ) {
+      setActiveState(true);
+    }
+  }, []);
+
+  return (
+    <AccordionSection>
+      <Accordion
+        isValid={product?.valid ?? true}
+        onPress={() =>
+          (!product?.valid_menu && isCartProduct) || isClickableEvent ? {} : setActiveState(!isActive)
+        }
+        activeOpacity={1}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+          <ContentInfo>
+            <View style={{ flexDirection: 'row' }}>
+              <OText color={theme.colors.quantityProduct} space>
+                {product?.quantity}
+              </OText>
+
+              <View style={{ width: 200 }}>
+                <OText
+                  numberOfLines={2}
+                  ellipsizeMode="tail"
+                  size={12}
+                  color={theme.colors.textGray}
+                  style={{ marginLeft: 5 }}>
+                  {product?.name}
+                </OText>
+              </View>
+            </View>
+
+            <View
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+                alignItems: 'flex-end',
+              }}>
+              <View style={{ flexDirection: 'row' }}>
+                <OText size={12} color={theme.colors.textGray}>
+                  {parsePrice(getProductPrice(product))}
+                </OText>
+
+                {(
+                  productInfo?.()?.ingredients?.length > 0 ||
+                  productInfo?.()?.options?.length > 0 ||
+                  product.comment
+                ) && !isClickableEvent && (
+                    <MaterialCommunityIcon name="chevron-down" size={12} />
+                  )}
+              </View>
+
+              <View
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
+                }}>
+                {onEditProduct &&
+                  isCartProduct &&
+                  !isCartPending &&
+                  product?.valid_menu && (
+                    <MaterialCommunityIcon
+                      name="pencil-outline"
+                      size={26}
+                      color={theme.colors.green}
+                      onPress={() => onEditProduct(product)}
+                    />
+                  )}
+
+                {onDeleteProduct && isCartProduct && !isCartPending && (
+                  <OAlert
+                    title={t('DELETE_PRODUCT', 'Delete Product')}
+                    message={t(
+                      'QUESTION_DELETE_PRODUCT',
+                      'Are you sure that you want to delete the product?',
+                    )}
+                    onAccept={() => onDeleteProduct(product)}>
+                    <MaterialCommunityIcon
+                      name="trash-can-outline"
+                      size={26}
+                      color={theme.ecolors.red}
+                    />
+                  </OAlert>
+                )}
+              </View>
+            </View>
+          </ContentInfo>
+        </View>
+
+        {((isCartProduct &&
+          !isCartPending &&
+          product?.valid_menu &&
+          !product?.valid_quantity) ||
+          (!product?.valid_menu && isCartProduct && !isCartPending)) && (
+            <OText
+              size={24}
+              color={theme.colors.red}
+              style={{ textAlign: 'center', marginTop: 10 }}>
+              {t('NOT_AVAILABLE', 'Not available')}
+            </OText>
+          )}
+      </Accordion>
+
+      <View style={{ display: isActive ? 'flex' : 'none' }}>
+        <Animated.View>
+          <AccordionContent>
+            {productInfo?.()?.ingredients?.length > 0 &&
+              productInfo?.()?.ingredients?.some(
+                (ingredient: any) => !ingredient.selected,
+              ) && (
+                <ProductOptionsList>
+                  <OText
+                    size={12}
+                    weight="500"
+                    color={theme.colors.unselectText}>
+                    {t('INGREDIENTS', 'Ingredients')}:
+                  </OText>
+
+                  {productInfo?.()?.ingredients?.map(
+                    (ingredient: any) =>
+                      !ingredient.selected && (
+                        <OText
+                          size={12}
+                          key={ingredient.id}
+                          style={{ marginLeft: 10 }}
+                          color={theme.colors.unselectText}>
+                          {t('NO', 'No')} {ingredient.name}
+                        </OText>
+                      ),
+                  )}
+                </ProductOptionsList>
+              )}
+
+            {parseOptions?.length > 0 && (
+              <ProductOptionsList>
+                {parseOptions?.map((option: any, i: number) => (
+                  <ProductOption key={option.id + i}>
+                    <OText
+                      size={12}
+                      weight="500"
+                      color={theme.colors.unselectText}>
+                      {t(option?.name.toUpperCase(), option?.name)}
+                    </OText>
+
+                    {option.suboptions.map((suboption: any) => (
+                      <ProductSubOption key={suboption.id}>
+                        <OText
+                          size={12}
+                          mLeft={10}
+                          color={theme.colors.unselectText}>
+                          {getFormattedSubOptionName({
+                            quantity: suboption.quantity,
+                            name: suboption.name,
+                            position:
+                              suboption.position !== 'whole'
+                                ? t(
+                                  suboption.position.toUpperCase(),
+                                  suboption.position,
+                                )
+                                : '',
+                            price: parsePrice(suboption.price),
+                          })}
+                        </OText>
+                      </ProductSubOption>
+                    ))}
+                  </ProductOption>
+                ))}
+              </ProductOptionsList>
+            )}
+
+            {product.comment && (
+              <ProductComment>
+                <OText
+                  size={12}
+                  weight={600}
+                  space
+                  color={theme.colors.unselectText}>
+                  {t('COMMENT', 'Comment')}
+                </OText>
+                <OText size={12} mLeft={10} color={theme.colors.unselectText}>
+                  {product.comment}
+                </OText>
+              </ProductComment>
+            )}
+          </AccordionContent>
+        </Animated.View>
+      </View>
+    </AccordionSection>
+  );
+};

package/themes/business/src/components 2/ProductItemAccordion/styles.tsx

@@ -0,0 +1,61 @@
+import styled, { css } from 'styled-components/native';
+
+export const AccordionSection = styled.View`
+  background: #fff;
+  padding-vertical: 10px;
+  border-bottom-width: 1px;
+  border-bottom-color: #d9d9d9;
+`;
+
+export const Accordion = styled.TouchableOpacity`
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  ${(props: any) =>
+    !props.isValid &&
+    css`
+      background-color: rgba(0, 0, 0, 0.1);
+    `}
+`;
+
+export const ProductInfo = styled.View`
+  width: 15%;
+`;
+
+export const ProductQuantity = styled.View``;
+
+export const ContentInfo = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow: hidden;
+  width: 100%;
+`;
+
+export const ProductImage = styled.View`
+  margin-right: 5px;
+`;
+
+export const AccordionContent = styled.View``;
+
+export const ProductOptionsList = styled.View`
+  margin-top: 10px;
+  margin-left: 18px;
+`;
+
+export const ProductOption = styled.View`
+  flex-direction: column;
+  flex-wrap: wrap;
+`;
+
+export const ProductSubOption = styled.View`
+  flex-direction: row;
+  margin-left: 3px;
+`;
+
+export const ProductComment = styled.View`
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin-left: 18px;
+`;

package/themes/business/src/components 2/SearchBar/index.tsx

@@ -0,0 +1,112 @@
+import React, { useRef } from 'react';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { OInput, OButton, OIconButton } from '../shared';
+
+export const SearchBar = (props: any) => {
+  const {
+    searchValue,
+    placeholder,
+    onSearch,
+    onCancel,
+    lazyLoad,
+    isCancelButtonShow,
+    isCancelXButtonShow,
+    noBorderShow,
+    borderStyle,
+  } = props;
+
+  const [, t] = useLanguage();
+  const theme = useTheme();
+  const inputRef = useRef<any>();
+
+  const handleClear = () => {
+    onSearch('');
+  };
+
+  const handleActiveInput = () => {
+    inputRef.current.focus();
+  };
+
+  let timeout: null | any = null;
+  const onChangeSearch = (e: any) => {
+    if (!lazyLoad) {
+      onSearch(e);
+    } else {
+      clearTimeout(timeout);
+      timeout = setTimeout(function () {
+        onSearch(e);
+      }, 750);
+    }
+  };
+
+  const styles = StyleSheet.create({
+    container: {
+      width: 225,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 7.6,
+      backgroundColor: theme.colors.inputDisabled,
+    },
+    borderStyle: {
+      borderColor: theme.colors.primary,
+      borderWidth: 1,
+      borderRadius: 10,
+    },
+    inputStyle: {
+      borderRadius: 7.6,
+      backgroundColor: theme.colors.transparent,
+      borderColor: theme.colors.transparent,
+      borderWidth: 0,
+    },
+    buttonStyle: {
+      maxHeight: 20,
+    },
+  });
+
+  return (
+    <View style={[styles.container]}>
+      <OInput
+        forwardRef={inputRef}
+        value={searchValue}
+        onChange={onChangeSearch}
+        style={styles.inputStyle}
+        placeholder={placeholder}
+        placeholderTextColor={theme.colors.arrowColor}
+        selectionColor={theme.colors.primary}
+        color={theme.colors.textGray}
+        returnKeyType="done"
+        blurOnSubmit
+      />
+
+      {isCancelButtonShow && (
+        <OButton
+          imgRightSrc=""
+          text={t('CANCEL', 'Cancel')}
+          bgColor={theme.colors.clear}
+          borderColor={theme.colors.lightGray}
+          style={styles.buttonStyle}
+          onClick={onCancel || handleClear}
+        />
+      )}
+
+      {isCancelXButtonShow && (
+        <TouchableOpacity onPress={onCancel || handleClear}>
+          <Icon name="x-circle" size={22} color={theme.colors.unselectText} />
+        </TouchableOpacity>
+      )}
+
+      <OIconButton
+        icon={theme.images.general.search}
+        borderColor={theme.colors.clear}
+        iconStyle={{ width: 25, height: 25 }}
+        style={{ maxWidth: 40 }}
+        onClick={() => {
+          handleActiveInput();
+        }}
+      />
+    </View>
+  );
+};