ordering-ui-react-native 0.21.50 → 0.21.51-release

package/themes/original/src/components/ProductForm/ActionButton.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { useSession, useOrder, useLanguage, useConfig } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { TouchableOpacity, View } from 'react-native'
+import { OButton, OText } from '../shared';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+
+export const ActionButton = (props: any) => {
+    const {
+        navigation,
+        isHaveWeight,
+        isSoldOut,
+        maxProductQuantity,
+        productCart,
+        handleSaveProduct,
+        editMode,
+        product,
+        errors,
+        productAddedToCartLength,
+        handleRedirectLogin,
+        guestCheckoutEnabled,
+        orderTypeEnabled,
+        handleUpdateGuest,
+        actionStatus
+    } = props
+    const [, t] = useLanguage()
+    const [{ auth }] = useSession()
+    const [orderState] = useOrder()
+    const theme = useTheme()
+    const [{ configs }] = useConfig()
+    const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+    const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+    const saveErrors =
+        orderState.loading ||
+        maxProductQuantity === 0 ||
+        Object.keys(errors)?.length > 0;
+    const buttonColor = saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))
+
+
+
+    return (
+        <View
+            style={{
+                width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
+            }}>
+            {((productCart &&
+                auth &&
+                (orderState.options?.address_id || isAllowUnaddressOrderType)) || (isSoldOut || maxProductQuantity <= 0)) && (
+                    <OButton
+                        onClick={() => handleSaveProduct()}
+                        imgRightSrc=""
+                        text={`${orderState.loading
+                            ? t('LOADING', 'Loading')
+                            : (isSoldOut || maxProductQuantity <= 0)
+                                ? t('SOLD_OUT', 'Sold out')
+                                : editMode
+                                    ? t('UPDATE', 'Update')
+                                    : t('ADD', 'Add')
+                            }`}
+                        isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))}
+                        textStyle={{
+                            color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
+                            fontSize: orderState.loading || editMode ? 10 : 14
+                        }}
+                        bgColor={buttonColor ? theme.colors.lightGray : theme.colors.primary}
+                        borderColor={!buttonColor ? theme.colors.white : theme.colors.primary}
+                        style={{
+                            opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
+                            borderRadius: 7.6,
+                            height: 44,
+                            shadowOpacity: 0,
+                            borderWidth: 1,
+                            marginTop: isHaveWeight ? 10 : 0
+                        }}
+                    />
+                )}
+            {auth &&
+                !orderState.options?.address_id && !isAllowUnaddressOrderType &&
+                (orderState.loading ? (
+                    <OButton
+                        isDisabled
+                        text={t('LOADING', 'Loading')}
+                        imgRightSrc=""
+                        textStyle={{ fontSize: 10 }}
+                    />
+                ) : (
+                    <OButton onClick={navigation.navigate('AddressList')} />
+                ))}
+            {!auth && (
+                <OButton
+                    isDisabled={isSoldOut || maxProductQuantity <= 0}
+                    onClick={() => handleRedirectLogin()}
+                    text={
+                        isSoldOut || maxProductQuantity <= 0
+                            ? t('SOLD_OUT', 'Sold out')
+                            : t('LOGIN_SIGNUP', 'Login / Sign Up')
+                    }
+                    imgRightSrc=""
+                    textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
+                    style={{
+                        height: 42,
+                        borderColor: theme.colors.primary,
+                        backgroundColor: theme.colors.white,
+                        paddingLeft: 0,
+                        paddingRight: 0
+                    }}
+                />
+            )}
+            {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                    {actionStatus?.loading ? (
+                        <Placeholder Animation={Fade}>
+                            <PlaceholderLine height={20} />
+                        </Placeholder>
+                    ) : (
+                        <OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('AS_GUEST_USER', 'As guest user')}</OText>
+                    )}
+                </TouchableOpacity>
+            )}
+        </View>
+    )
+}

package/themes/original/src/components/ProductForm/ExtraOptions.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { OText } from '../shared';
+
+export const ExtraOptions = (props : any) => {
+    const {
+        options,
+        setSelectedOpt,
+        scrollViewRef,
+        optionLayout,
+        editionsLayoutY,
+        styles,
+        selOpt
+    } = props
+
+    const theme = useTheme()
+
+    return (
+        <>
+            {options.map(({ id, name, respect_to, suboptions }: any) => (
+                <React.Fragment key={`cont_key_${id}`}>
+                    {respect_to == null && suboptions?.length > 0 && (
+                        <TouchableOpacity
+                            key={`eopt_key_${id}`}
+                            onPress={() => {
+                                setSelectedOpt(id)
+                                scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+                                    y: optionLayout[`id:${id}`]?.y + editionsLayoutY - 50,
+                                    animated: true
+                                })
+                            }}
+                            style={[
+                                styles.extraItem,
+                                {
+                                    borderBottomColor:
+                                        selOpt == id ? theme.colors.textNormal : theme.colors.backgroundPage,
+                                },
+                            ]}>
+                            <OText
+                                color={
+                                    selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
+                                }
+                                size={12}
+                                weight={selOpt == id ? '600' : 'normal'}
+                                style={{ maxWidth: 150 }}
+                                numberOfLines={1}>
+                                {name}
+                            </OText>
+                        </TouchableOpacity>
+                    )}
+                </React.Fragment>
+            ))}
+        </>
+    )
+}