@kiosinc/commons-rn 0.1.7 → 0.1.8

package/src/selectBusiness/CreateBusinessBottomSheet.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef, useState } from 'react';
+import {
+  Text,
+  Button,
+  KeyboardAvoidingView,
+  TextInput,
+  View,
+  BottomSheet,
+} from '../components';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { getPercentageFromHeight } from '../utils';
+import { useTranslation } from 'react-i18next';
+import { useCreateBusiness } from './useCreateBusiness';
+
+type CreateBusinessBottomSheetProps = {
+  close: () => void;
+};
+
+export const CreateBusinessBottomSheet = forwardRef(
+  ({ close }: CreateBusinessBottomSheetProps, ref) => {
+    const [name, setName] = useState('');
+    const { mutate: createNewMenuGroup, isLoading } = useCreateBusiness({
+      onSuccess: () => {
+        close();
+      },
+    });
+    const { t } = useTranslation();
+
+    const onRename = () => {
+      createNewMenuGroup({
+        name,
+      });
+    };
+
+    return (
+      <BottomSheet
+        pressBehavior="close"
+        snapPoints={[getPercentageFromHeight(220)]}
+        ref={ref as any}
+      >
+        <View px="16" bg="background" flex={1}>
+          <Text pt="16" variant="titleLarge">
+            {t('home.createBusiness')}
+          </Text>
+          <KeyboardAvoidingView>
+            <TextInput
+              render={(props) => {
+                return <BottomSheetTextInput {...props} />;
+              }}
+              mt="16"
+              mode="outlined"
+              onChangeText={setName}
+              value={name}
+              label={t('home.businessName')}
+            />
+            <View mt="16" flexDirection="row" justifyContent="flex-end">
+              <Button mode="text" onPress={close}>
+                {t('cancel')}
+              </Button>
+              <Button loading={isLoading} mode="text" onPress={onRename}>
+                {t('create')}
+              </Button>
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </BottomSheet>
+    );
+  }
+);

package/src/selectBusiness/SelectBusiness.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Card, FAB, Header, ParentView, Text, View } from '../components';
+import { FlashList } from '@shopify/flash-list';
+import { useTranslation } from 'react-i18next';
+import { ActivityIndicator } from 'react-native-paper';
+import { useMMKVString } from 'react-native-mmkv';
+import { type NavigationProp, useNavigation } from '@react-navigation/native';
+import { useQueryClient } from '@tanstack/react-query';
+import { CreateBusinessBottomSheet } from './CreateBusinessBottomSheet';
+import { useBusinesses } from './useBusinesses';
+import { MMKV_KEYS } from '../constants';
+import { useSingleSnapBottomSheetRef } from './useSingleSnapBottomSheetRef';
+
+const BusinessCard = ({
+  business,
+  onSelect,
+}: {
+  business: { id: string; name: string };
+  onSelect: () => void;
+}) => {
+  return (
+    <Card bg="onSecondary" p="16" mx="2" mb="12" mt="2" onPress={onSelect}>
+      <Text variant="bodyMedium">{business.name}</Text>
+    </Card>
+  );
+};
+
+export const SelectBusiness = () => {
+  const { t } = useTranslation();
+  const [_, setBusinessId] = useMMKVString(MMKV_KEYS.BUSINESS_ID);
+
+  const { data: businesses, isFetching } = useBusinesses();
+
+  const navigation = useNavigation<NavigationProp<RootStackType>>();
+  const queryClient = useQueryClient();
+  const createBusinessBottomSheet = useSingleSnapBottomSheetRef();
+
+  return (
+    <ParentView flex={1} backgroundColor="background">
+      <Header title={t('home.selectBusiness')} />
+      <View px="16" flex={1}>
+        {isFetching && (
+          <View flex={1} alignItems="center" justifyContent="center">
+            <ActivityIndicator />
+          </View>
+        )}
+        {!isFetching && (
+          <FlashList
+            showsVerticalScrollIndicator={false}
+            data={businesses}
+            renderItem={({ item }) => (
+              <BusinessCard
+                onSelect={() => {
+                  if (navigation.canGoBack()) {
+                    navigation.goBack();
+                  }
+                  queryClient.clear();
+                  setBusinessId(item.id);
+                }}
+                business={item}
+              />
+            )}
+            estimatedItemSize={200}
+          />
+        )}
+        <View position="absolute" bottom={16} right={16}>
+          {navigation.canGoBack() && (
+            <FAB
+              variant="secondary"
+              icon="plus"
+              onPress={createBusinessBottomSheet.expand}
+            />
+          )}
+        </View>
+      </View>
+      <CreateBusinessBottomSheet
+        ref={createBusinessBottomSheet.ref}
+        close={createBusinessBottomSheet.close}
+      />
+    </ParentView>
+  );
+};

package/src/selectBusiness/index.ts

@@ -0,0 +1,2 @@
+export { SelectBusiness } from './SelectBusiness';
+export { useBusinesses } from './useBusinesses';

package/src/selectBusiness/queryKeys.ts

@@ -0,0 +1,5 @@
+export const queryKeys = {
+  BUSINESSES: 'BUSINESSES',
+};
+
+export const DEFAULT_STALE_TIME = 60 * (60 * 1000); // 60 mins

package/src/selectBusiness/useBusinesses.ts

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+import { DEFAULT_STALE_TIME, queryKeys } from './queryKeys';
+import axios from 'axios';
+
+export const getBusinessData = () => {
+  return axios.get('/user/businessData');
+};
+
+export const useBusinesses = () =>
+  useQuery([queryKeys.BUSINESSES], getBusinessData, {
+    staleTime: DEFAULT_STALE_TIME,
+    select: (response) => {
+      const businesses = response?.data?.businesses as Array<{
+        id: string;
+        name: string;
+      }>;
+
+      businesses.sort((b1, b2) => {
+        const b1Name = b1.name.toUpperCase();
+        const b2Name = b2.name.toUpperCase();
+
+        if (b1Name < b2Name) {
+          return -1;
+        }
+        if (b1Name > b2Name) {
+          return 1;
+        }
+        return 0;
+      });
+
+      return businesses;
+    },
+  });

package/src/selectBusiness/useCreateBusiness.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from './queryKeys';
+import { signUpAPI } from '../auth/api/authentication';
+
+export const useCreateBusiness = ({ onSuccess }: { onSuccess: () => void }) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async (params: any) => {
+      await signUpAPI(params);
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([queryKeys.BUSINESSES]);
+        onSuccess();
+      },
+    }
+  );
+};

package/src/selectBusiness/useMultiSnapBottomSheetRef.ts

@@ -0,0 +1,46 @@
+import { useRef, useState } from 'react';
+
+type SnapPoints = Record<string, any>;
+type ValidInitialSnap<T extends SnapPoints> = keyof T;
+
+export type TMultiSnapBottomSheetRef<T extends string> = {
+  ref: React.MutableRefObject<any>;
+  selectedSnap: T;
+  snapPoints: {
+    [K in T]: string[];
+  };
+  expand: (snap: T) => void;
+  close: () => any;
+  selectedSnapPoint: any;
+  isVisible: boolean;
+};
+
+export const useMultiSnapBottomSheetRef = <T extends SnapPoints>({
+  initialSnap,
+  snapPoints,
+}: {
+  initialSnap: ValidInitialSnap<T>;
+  snapPoints: T;
+}) => {
+  const ref = useRef<any>(null);
+  const [selectedSnap, setSelectedSnap] = useState(initialSnap);
+  const [isVisible, setIsVisible] = useState(false);
+  const expand = (snap: keyof typeof snapPoints) => {
+    setSelectedSnap(snap);
+    setIsVisible(true);
+    ref.current?.expand();
+  };
+  const close = () => {
+    ref.current?.close();
+    setIsVisible(false);
+  };
+  return {
+    isVisible,
+    ref,
+    selectedSnap,
+    snapPoints,
+    expand,
+    close,
+    selectedSnapPoint: snapPoints[selectedSnap] ?? snapPoints[0],
+  };
+};

package/src/selectBusiness/useSingleSnapBottomSheetRef.ts

@@ -0,0 +1,23 @@
+import { useRef, useState } from 'react';
+
+export type TSingleSnapBottomSheetRef = {
+  ref: React.MutableRefObject<any>;
+  expand: () => void;
+  close: () => any;
+  isVisible: boolean;
+};
+
+export const useSingleSnapBottomSheetRef = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const ref = useRef<any>(null);
+  const expand = () => {
+    ref.current?.expand();
+    setIsVisible(true);
+  };
+  const close = () => {
+    setIsVisible(false);
+    ref.current?.close();
+  };
+  return { isVisible, ref, expand, close };
+};

package/src/types/@gorhom/bottom-sheet.ts

@@ -0,0 +1 @@
+declare module '@gorhom/bottom-sheet';

package/src/utils/index.ts

@@ -0,0 +1,11 @@
+import { Dimensions } from 'react-native';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
+
+export const getPercentageFromHeight = (height: number): string => {
+  const totalHeight =
+    Dimensions.get('window').height -
+    (initialWindowMetrics?.insets?.top ?? 0) -
+    (initialWindowMetrics?.insets?.bottom ?? 0);
+
+  return Math.ceil((height / totalHeight) * 100) + '%';
+};