ordering-ui-react-native 0.12.18 → 0.12.19

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

@@ -1,127 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,275 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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;