ordering-ui-react-native 0.12.14 → 0.12.18

package/themes/business/src/components 2/shared/OIconButton.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import styled from 'styled-components/native';
+import { useTheme } from 'styled-components/native';
+
+const Wrapper = styled.TouchableOpacity`
+  height: 40px;
+  border-radius: 20px;
+  flex-direction: row;
+  border: 1px solid white;
+  padding-horizontal: 20px;
+  align-items: center;
+  justify-content: center;
+`;
+const DisabledWrapper = styled.View`
+  height: 40px;
+  border-radius: 20px;
+  flex-direction: row;
+  border: 1px solid white;
+  padding-horizontal: 20px;
+  align-items: center;
+  justify-content: center;
+`;
+const Icon = styled.Image`
+  width: 22px;
+  height: 22px;
+`;
+const Title = styled.Text`
+  font-size: 16px;
+  margin-horizontal: 7px;
+`;
+
+interface Props {
+  icon?: any;
+  title?: string;
+  onClick?: any;
+  height?: number;
+  isOutline?: boolean;
+  disabled?: boolean;
+  color?: string;
+  bgColor?: string;
+  borderColor?: string;
+  textColor?: string;
+  iconColor?: string;
+  style?: ViewStyle;
+  iconStyle?: ImageStyle;
+  textStyle?: TextStyle;
+  disabledColor?: string;
+  iconCover?: boolean;
+  urlIcon?: any;
+  cover?: any;
+}
+
+const OIconButton = (props: Props) => {
+  const theme = useTheme();
+  return (
+    <>
+      {!props.disabled ? (
+        <Wrapper
+          onPress={props.onClick}
+          style={{
+            borderColor: props.borderColor || props.color,
+            backgroundColor: props.isOutline
+              ? 'white'
+              : props.bgColor || props.color,
+            height: props.height || 40,
+            borderRadius: props.height ? props.height * 0.5 : 20,
+            ...props.style,
+          }}>
+          {props.icon ? (
+            <Icon
+              source={props.icon}
+              style={{
+                tintColor: props.iconColor,
+                ...props.iconStyle,
+              }}
+            />
+          ) : null}
+          {props.title ? (
+            <Title
+              style={{
+                color: props.textColor || props.color,
+                ...props.textStyle,
+              }}>
+              {props.title}
+            </Title>
+          ) : null}
+        </Wrapper>
+      ) : (
+        <DisabledWrapper
+          style={{
+            borderColor: theme.colors.backgroundDark,
+            backgroundColor: props.disabledColor
+              ? props.disabledColor
+              : theme.colors.backgroundDark,
+            height: props.height || 40,
+            borderRadius: props.height ? props.height * 0.5 : 20,
+            ...props.style,
+          }}>
+          {props.icon ? (
+            <Icon
+              source={props.urlIcon ? { uri: props.icon } : props.icon}
+              resizeMode={props.cover ? 'cover' : 'contain'}
+              style={{
+                tintColor: props.iconColor,
+                ...props.iconStyle,
+              }}
+            />
+          ) : null}
+          {props.title ? (
+            <Title
+              style={{
+                color: props.textColor || props.color,
+                ...props.textStyle,
+              }}>
+              {props.title}
+            </Title>
+          ) : null}
+        </DisabledWrapper>
+      )}
+    </>
+  );
+};
+
+OIconButton.defaultProps = {};
+
+export default OIconButton;

package/themes/business/src/components 2/shared/OInput.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import {
+  ImageSourcePropType,
+  ImageStyle,
+  ViewStyle,
+  TextInputProps,
+} from 'react-native';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+import styled from 'styled-components/native';
+import OIcon from './OIcon';
+
+const Wrapper = styled.View`
+  background-color: ${(props: any) => props.theme.colors.backgroundLight};
+  border-radius: ${(props: any) => (props.border ? props.border : '25px')};
+  border-width: 1px;
+  padding-horizontal: ${(props: any) =>
+    props.paddingHorizontal ? props.paddingHorizontal : '16px'};
+  height: 50px;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  justify-content: center;
+`;
+
+const Input = styled.TextInput`
+  flex-grow: 1;
+  flex: 1;
+  min-height: 30px;
+  font-size: 15px;
+  font-family: 'Poppins-Regular';
+`;
+
+interface Props extends TextInputProps {
+  bgColor?: string;
+  borderColor?: string;
+  isRequired?: boolean;
+  requiredMsg?: string;
+  isDisabled?: boolean;
+  isSecured?: boolean;
+  style?: ViewStyle;
+  placeholder?: string;
+  placeholderTextColor?: string;
+  icon?: ImageSourcePropType | string;
+  iconRight?: ImageSourcePropType;
+  iconColor?: string;
+  iconRightColor?: string;
+  iconStyle?: ImageStyle;
+  iconRightStyle?: ImageStyle;
+  iconCustomRight?: any;
+  value?: string;
+  onChange?: any;
+  name?: string;
+  type?: string;
+  multiline?: boolean;
+  vertorIcon?: string;
+  vectorIconColor?: string;
+  forwardRef?: any;
+  selectionColor?: string;
+  maxLength?: number;
+  autoCapitalize?: any;
+  autoCompleteType?: any;
+  autoCorrect?: any;
+  returnKeyType?: any;
+  onSubmitEditing?: any;
+  blurOnSubmit?: any;
+  color?: any;
+}
+
+const OInput = (props: Props): React.ReactElement => {
+  return (
+    <Wrapper
+      style={{
+        backgroundColor: props.bgColor,
+        borderColor: props.borderColor,
+        ...props.style,
+      }}>
+      {props.icon ? (
+        <OIcon
+          src={props.icon}
+          color={props.iconColor}
+          width={20}
+          height={20}
+          style={{ marginRight: 10 }}
+        />
+      ) : null}
+      {props.vertorIcon && (
+        <MaterialIcon
+          name={props?.vertorIcon}
+          size={20}
+          color={props?.vectorIconColor}
+          style={{ marginHorizontal: 10 }}
+        />
+      )}
+      <Input
+        name={props.name}
+        secureTextEntry={props.isSecured}
+        onChangeText={(txt: any) =>
+          props.name
+            ? props.onChange({ target: { name: props.name, value: txt } })
+            : props.onChange(txt)
+        }
+        defaultValue={props.value}
+        placeholder={props.placeholder ? props.placeholder : ''}
+        placeholderTextColor={
+          props.placeholderTextColor && props.placeholderTextColor
+        }
+        keyboardType={props.type || 'default'}
+        multiline={props.multiline}
+        scrollEnabled={props.multiline}
+        editable={!props.isDisabled}
+        autoCapitalize={props.autoCapitalize}
+        autoCompleteType={props.autoCompleteType}
+        autoCorrect={props.autoCorrect}
+        returnKeyType={props.returnKeyType}
+        onSubmitEditing={props.onSubmitEditing}
+        blurOnSubmit={props.blurOnSubmit}
+        ref={props.forwardRef}
+        selectionColor={props.selectionColor}
+        color={props.color}
+        maxLength={props.maxLength || 1000}
+      />
+
+      {props.iconRight && (
+        <OIcon
+          src={props.iconRight}
+          color={props.iconRightColor}
+          width={20}
+          height={20}
+          style={{ ...props.iconRightStyle }}
+        />
+      )}
+
+      {props.iconCustomRight}
+    </Wrapper>
+  );
+};
+
+OInput.defaultProps = {
+  iconColor: '#959595',
+  bgColor: 'white',
+  borderColor: 'white',
+};
+
+export default OInput;

package/themes/business/src/components 2/shared/OLink.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Alert, Linking, Pressable, TextStyle } from 'react-native';
+import { useLanguage } from 'ordering-components/native';
+import OText from './OText';
+import OButton from './OButton';
+
+interface Props {
+  url: string | undefined;
+  shorcut: string;
+  color?: string;
+  PressStyle?: TextStyle;
+  TextStyle?: TextStyle;
+  type?: string;
+  hasButton?: boolean;
+}
+
+const OLink = (props: Props): React.ReactElement => {
+  const { url, shorcut, color, PressStyle, TextStyle, type, hasButton } = props;
+  const [, t] = useLanguage();
+
+  const handleAlert = () =>
+    Alert.alert(
+      t('ERROR_OPENING_THE_LINK', 'Error opening the link'),
+      t('LINK_UNSUPPORTED', 'Link could not be opened or is not supported'),
+      [
+        {
+          text: t('OK', 'Ok'),
+        },
+      ],
+    );
+
+  const handleOpenUrl = async (breakFunction = false) => {
+    if(breakFunction) {
+      return
+    }
+    if (!url) {
+      handleAlert();
+      return;
+    }
+
+    try {
+      const supported = await Linking.canOpenURL(url);
+
+      if (supported) {
+        await Linking.openURL(url);
+      } else {
+        handleAlert();
+      }
+    } catch (err) {
+      handleAlert();
+    }
+  };
+
+  return (
+    <Pressable style={PressStyle} onPress={() => handleOpenUrl(hasButton)}>
+      {hasButton ? (
+        <OButton
+          onClick={() => handleOpenUrl()}
+          text={shorcut} imgRightSrc=''
+          textStyle={{color: 'white'}}
+          style={{width: '100%', alignSelf: 'center', borderRadius: 10}}
+        />
+      ) : (
+      <OText
+        style={TextStyle}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        color={color}>
+        {shorcut}
+      </OText>
+      )}
+    </Pressable>
+  );
+};
+
+export default OLink;

package/themes/business/src/components 2/shared/OModal.tsx

@@ -0,0 +1,275 @@
+import * as React from 'react';
+import { Modal, StyleSheet, SafeAreaView, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import OIcon from './OIcon';
+import OText from './OText';
+import OIconButton from './OIconButton';
+import { useTheme } from 'styled-components/native';
+import { useUtils } from 'ordering-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface Props {
+  open?: boolean;
+  title?: string;
+  children?: any;
+  onAccept?: any;
+  onCancel?: any;
+  onClose?: any;
+  style?: any;
+  acceptText?: string;
+  cancelText?: string;
+  isTransparent?: boolean;
+  hideCloseDefault?: boolean;
+  entireModal?: boolean;
+  customClose?: boolean;
+  titleSectionStyle?: any;
+  isNotDecoration?: boolean;
+  styleCloseButton?: any;
+  order?: any;
+}
+
+const OModal = (props: Props): React.ReactElement => {
+  const {
+    open,
+    title,
+    children,
+    onAccept,
+    onCancel,
+    onClose,
+    acceptText,
+    cancelText,
+    isTransparent,
+    hideCloseDefault,
+    entireModal,
+    customClose,
+    titleSectionStyle,
+    isNotDecoration,
+    style,
+    styleCloseButton,
+    order,
+  } = props;
+
+  const theme = useTheme();
+  const [{ optimizeImage }] = useUtils();
+  const { top } = useSafeAreaInsets();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    centeredView: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      width: '100%',
+    },
+    titleSection: {
+      marginTop: top,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 30,
+      paddingTop: 30,
+      paddingBottom: 25,
+      borderBottomWidth: 2,
+      borderBottomColor: '#e6e6e6',
+    },
+    titleGroups: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      minHeight: 33,
+    },
+    titleIcons: {
+      height: 33,
+      width: 33,
+      borderRadius: 7.6,
+      resizeMode: 'stretch',
+    },
+    shadow: {
+      height: 34,
+      width: 34,
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      marginLeft: 15,
+      backgroundColor: theme.colors.clear,
+      paddingHorizontal: 3,
+      borderRadius: 7.6,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 3,
+    },
+    cancelBtn: {
+      marginRight: 5,
+      zIndex: 10000,
+      maxWidth: 40,
+      height: 25,
+      justifyContent: 'flex-end',
+      alignItems: 'flex-start',
+    },
+    modalText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      color: theme.colors.textGray,
+      zIndex: 10,
+    },
+    wrapperIcon: {
+      overflow: 'hidden',
+      borderRadius: 50,
+      backgroundColor: '#CCCCCC80',
+      width: 35,
+      margin: 15,
+    },
+    modalView: {
+      margin: 20,
+      backgroundColor: 'white',
+      borderRadius: 20,
+      padding: 35,
+      alignItems: 'center',
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 4,
+      elevation: 5,
+    },
+    button: {
+      borderRadius: 20,
+      padding: 10,
+      elevation: 2,
+    },
+    buttonOpen: {
+      backgroundColor: '#F194FF',
+    },
+    buttonClose: {
+      backgroundColor: '#2196F3',
+    },
+    textStyle: {
+      color: 'white',
+      fontWeight: '600',
+      textAlign: 'center',
+    },
+  });
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Modal
+        animationType="slide"
+        transparent={isTransparent}
+        visible={open}
+        onRequestClose={() => {
+          onClose();
+        }}
+        style={{
+          height: '100%',
+          flex: 1,
+          position: 'absolute',
+          ...style,
+          zIndex: 9999,
+        }}>
+        {!entireModal ? (
+          <View style={styles.centeredView}>
+            <View
+              style={
+                titleSectionStyle ? titleSectionStyle : styles.titleSection
+              }>
+              <View style={styles.wrapperIcon}>
+                <Icon
+                  name="x"
+                  size={35}
+                  style={
+                    isNotDecoration && (styleCloseButton || styles.cancelBtn)
+                  }
+                  onPress={onClose}
+                />
+              </View>
+
+              <OText size={20} style={styles.modalText} adjustsFontSizeToFit>
+                {title}
+              </OText>
+            </View>
+
+            {children}
+          </View>
+        ) : (
+          <>
+            {!customClose && (
+              <View style={styles.titleSection}>
+                <View style={styles.titleGroups}>
+                  <OIconButton
+                    icon={theme.images.general.arrow_left}
+                    iconStyle={{ width: 20, height: 20 }}
+                    borderColor={theme.colors.clear}
+                    style={styleCloseButton || styles.cancelBtn}
+                    onClick={onClose}
+                  />
+
+                  <OText
+                    size={16}
+                    style={styles.modalText}
+                    adjustsFontSizeToFit>
+                    {title}
+                  </OText>
+                </View>
+
+                <View style={styles.titleGroups}>
+                  <View style={styles.shadow}>
+                    {order?.business?.logo ? (
+                      <OIcon
+                        url={optimizeImage(
+                          order?.business?.logo,
+                          'h_300,c_limit',
+                        )}
+                        style={styles.titleIcons}
+                      />
+                    ) : (
+                      <OIcon
+                        src={theme.images.dummies.businessLogo}
+                        style={styles.titleIcons}
+                      />
+                    )}
+                  </View>
+
+                  <View style={styles.shadow}>
+                    <OIcon
+                      url={optimizeImage(
+                        order?.customer?.photo ||
+                          theme?.images?.dummies?.customerPhoto,
+                        'h_300,c_limit',
+                      )}
+                      style={styles.titleIcons}
+                    />
+                  </View>
+
+                  {order?.driver && (
+                    <View style={styles.shadow}>
+                      <OIcon
+                        url={
+                          optimizeImage(
+                            order?.driver?.photo,
+                            'h_300,c_limit',
+                          ) || theme?.images?.dummies?.driverPhoto
+                        }
+                        style={styles.titleIcons}
+                      />
+                    </View>
+                  )}
+                </View>
+              </View>
+            )}
+            {children}
+          </>
+        )}
+      </Modal>
+    </SafeAreaView>
+  );
+};
+
+export default OModal;

package/themes/business/src/components 2/shared/OSegment.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import styled from 'styled-components/native';
+import { normalize } from '../../providers/Responsive';
+import { useTheme } from 'styled-components/native';
+
+const Wrapper = styled.View`
+  background-color: white;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const SegItem = styled.View`
+  background-color: grey;
+  padding: 8px 8px;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 18px;
+`;
+const ItemIcon = styled.Image`
+  resize-mode: contain;
+  margin-right: 5px;
+  width: 14px;
+  height: 14px;
+`;
+const ItemLabel = styled.Text`
+  font-family: 'Poppins-Regular';
+`;
+
+// Props for component
+
+interface ItemProps {
+  text?: string;
+  image?: any;
+}
+interface Props {
+  items: Array<ItemProps>;
+  background?: string;
+  labelStyle?: string;
+  selectedIdx?: number;
+  onSelectItem?: any;
+}
+
+const OSegment = (props: Props) => {
+  var [curIndex, onSelected] = React.useState(props.selectedIdx);
+  const onSelectItem = (idx: number) => {
+    onSelected(idx);
+    props.onSelectItem(idx);
+  };
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      {props.items.map((item, index) => (
+        <TouchableOpacity
+          key={`SegmentItem_${index}`}
+          onPress={() => onSelectItem(index)}>
+          <SegItem
+            style={{
+              backgroundColor:
+                index == curIndex ? theme.colors.primary : 'white',
+            }}>
+            <ItemIcon
+              source={item.image}
+              style={{
+                tintColor: index == curIndex ? 'white' : '#ADADAD',
+              }}></ItemIcon>
+            <ItemLabel
+              style={{
+                fontSize: normalize(8.8),
+                color: index == curIndex ? 'white' : '#ADADAD',
+              }}>
+              {props.labelStyle == 'uppercase'
+                ? item.text?.toUpperCase()
+                : item.text}
+            </ItemLabel>
+          </SegItem>
+        </TouchableOpacity>
+      ))}
+    </Wrapper>
+  );
+};
+
+OSegment.defaultProps = {
+  labelStyle: 'uppercase',
+};
+
+export default OSegment;