@kiosinc/commons-rn 0.1.100 → 0.1.102

package/src/components/ModalHeader.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Text } from '../components';
+import { Appbar, Menu, useTheme } from 'react-native-paper';
+import { IconButton } from '../components';
+import { View } from '../components';
+import { type GestureResponderEvent, type ViewProps } from 'react-native';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+import { MenuItemProps } from 'react-native-paper';
+import { Keyboard } from 'react-native';
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps &
+  ViewProps & {
+    handleClose?: () => void;
+    handleBack?: () => void;
+    title?: string;
+    customRightOptions?: React.ReactNode;
+    menuOptions?: Array<MenuItemProps>;
+  };
+
+export const ModalHeader: React.FC<Props> = ({
+  handleBack,
+  handleClose,
+  title,
+  menuOptions,
+  customRightOptions = null,
+  ...rest
+}) => {
+  const props = useRestyle(restyleFunctions, rest);
+  const [visible, setVisible] = React.useState(false);
+  const theme = useTheme();
+
+  const openMenu = () => {
+    Keyboard.dismiss();
+    setVisible(true);
+  };
+
+  const closeMenu = () => setVisible(false);
+
+  return (
+    <View height={60} flexDirection="row" {...(props as ViewProps)}>
+      {handleBack ? (
+        <IconButton icon="arrow-left" onPress={handleBack} />
+      ) : (
+        <View px={'8'} />
+      )}
+      <View flexDirection="row" flex={1}>
+        <Text
+          flex={1}
+          pt={'12'}
+          variant="titleMedium"
+          color="onSurface"
+          flexShrink={1}
+        >
+          {title}
+        </Text>
+      </View>
+      {menuOptions && (
+        <Menu
+          style={{
+            backgroundColor: theme.colors.background,
+          }}
+          contentStyle={{
+            backgroundColor: theme.colors.background,
+          }}
+          visible={visible}
+          onDismiss={closeMenu}
+          anchor={<Appbar.Action icon="dots-vertical" onPress={openMenu} />}
+        >
+          {menuOptions.map((menuOption, index) => {
+            const onPress = (e: GestureResponderEvent) => {
+              closeMenu();
+              menuOption?.onPress?.(e);
+            };
+            return (
+              <Menu.Item
+                key={String(index)}
+                style={{
+                  backgroundColor: theme.colors.background,
+                }}
+                {...menuOption}
+                onPress={onPress}
+              />
+            );
+          })}
+        </Menu>
+      )}
+      {customRightOptions}
+      {!menuOptions && !customRightOptions && <View width={40} />}
+      {Boolean(handleClose) && (
+        <IconButton icon="close" onPress={handleClose} />
+      )}
+    </View>
+  );
+};

package/src/components/RippleCard.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Ripple, { RippleProps } from 'react-native-material-ripple';
+
+export const RippleCard = ({ children, ...rest }: RippleProps) => {
+  return (
+    // @ts-ignore
+    <Ripple
+      {...rest}
+      rippleSize={244}
+      rippleContainerBorderRadius={8}
+      rippleOpacity={0.2}
+    >
+      {children}
+    </Ripple>
+  );
+};

package/src/components/Searchbar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Searchbar as S, type SearchbarProps } from 'react-native-paper';
 import {
   useRestyle,
@@ -19,6 +19,8 @@ import {
   type BackgroundColorShorthandProps,
 } from '@shopify/restyle';
 import { type ThemeType } from '../theme';
+import { View, IconButton } from '../components';
+import { StyleSheet } from 'react-native';
 
 type RestyleProps = SpacingProps<ThemeType> &
   SpacingShorthandProps<ThemeType> &
@@ -42,6 +44,33 @@ type Props = RestyleProps & SearchbarProps;
 
 export const Searchbar = ({ ...rest }: Props) => {
   const props = useRestyle(restyleFunctions as any, rest);
+  const ref = useRef<any>();
+  const icon = () => (
+    <View backgroundColor="inverseOnSurface">
+      <IconButton
+        icon="magnify"
+        backgroundColor={'inverseOnSurface'}
+        onPress={() => {
+          ref.current?.focus();
+        }}
+      />
+    </View>
+  );
 
-  return <S {...props} right={null as any} />;
+  return (
+    <S
+      inputStyle={styles.inputStyle}
+      px="16"
+      ref={ref}
+      icon={icon}
+      {...props}
+      right={null as any}
+    />
+  );
 };
+
+const styles = StyleSheet.create({
+  inputStyle: {
+    paddingRight: 16,
+  },
+});

package/src/components/index.ts

@@ -30,3 +30,6 @@ export { FirebaseMedia } from './FirebaseMedia';
 export { PhoneInput, type PCountry } from './PhoneInput';
 export { DelayedRender } from './DelayedRender';
 export { OfflineStrip } from './OfflineStrip';
+export { ModalHeader } from './ModalHeader';
+export { Modal } from './Modal';
+export { RippleCard } from './RippleCard';

package/src/helpers/getVectorIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import IconFromMaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import IconFromMaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import IconFromMaterialIconsGlyphMap from 'react-native-vector-icons/glyphmaps/MaterialIcons.json';
+import IconFromMaterialCommunityIconsGlyphMap from 'react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json';
+
+const IconMapping = {
+  material: {
+    Icon: IconFromMaterialIcons,
+    names: IconFromMaterialIconsGlyphMap,
+  },
+  materialCommunity: {
+    Icon: IconFromMaterialCommunityIcons,
+    names: IconFromMaterialCommunityIconsGlyphMap,
+  },
+};
+
+type IconMappingType = typeof IconMapping;
+
+export const getVectorIcon =
+  ({
+    type,
+    name,
+  }:
+    | {
+        type: 'material';
+        name: keyof IconMappingType['material']['names'];
+      }
+    | {
+        type: 'materialCommunity';
+        name: keyof IconMappingType['materialCommunity']['names'];
+      }) =>
+  ({
+    size = 24,
+    color = 'onBackground',
+  }: {
+    size?: number;
+    color?: string;
+  }) => {
+    const { Icon } = IconMapping[type as keyof typeof IconMapping];
+
+    // @ts-ignore
+    return <Icon name={name as string} size={size} color={color} />;
+  };

package/src/screens/SavedCards/CardRow.tsx

@@ -5,6 +5,7 @@ import { RadioButton, useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import { getCardName } from '../../utils/checkout';
 import { CustomerCardPayment } from '@kiosinc/commons-types';
+import { getVectorIcon } from '../../helpers/getVectorIcon';
 
 export const CardRow = ({
   card,
@@ -48,6 +49,10 @@ export const CardRow = ({
     }
   };
 
+  const PaymentIcon = getVectorIcon({
+    name: 'payment',
+    type: 'material',
+  });
   const cardName = isApplePay ? 'Apple Pay' : getCardName(card!);
 
   return (
@@ -89,14 +94,16 @@ export const CardRow = ({
           justifyContent="space-between"
         >
           <View flexDirection="row" alignItems="center">
-            {isApplePay && (
+            {isApplePay ? (
               <ApplePayIcon
                 height={24}
                 width={24}
                 color={theme.colors.onBackground}
               />
+            ) : (
+              <PaymentIcon color={theme.colors.onSurface} />
             )}
-            <Text ps={isApplePay ? '8' : '0'} variant="bodyMedium">
+            <Text ps={'8'} variant="bodyMedium">
               {cardName}
             </Text>
           </View>

package/src/screens/SelectBusiness/SelectBusiness.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Card,
   FAB,
   Header,
   LineLoader,
@@ -10,18 +9,23 @@ import {
   Text,
   View,
   LinkButton,
+  RippleCard,
 } from '../../components';
 import { FlashList } from '@shopify/flash-list';
 import { useTranslation } from 'react-i18next';
-import { ActivityIndicator, useTheme } from 'react-native-paper';
+import {
+  ActivityIndicator,
+  Avatar,
+  Checkbox,
+  useTheme,
+} 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, useLogout } from '../../hooks';
 import { MMKV_KEYS } from '../../constants';
-import { useSingleSnapBottomSheetRef } from '../../utils';
-import Tick from '../../assets/icons/tick.svg';
+import { getAvatarLetter, useSingleSnapBottomSheetRef } from '../../utils';
 
 const BusinessCard = ({
   business,
@@ -34,27 +38,38 @@ const BusinessCard = ({
 }) => {
   const theme = useTheme();
   return (
-    <Card
-      bg="onSecondary"
-      p="16"
-      height={80}
-      mx="2"
-      mb="12"
-      mt="2"
-      onPress={onSelect}
-    >
-      <View
-        height="100%"
-        flexDirection="row"
-        justifyContent={'space-between'}
-        alignItems={'center'}
-      >
-        <Text variant="bodyMedium">{business.name}</Text>
-        {isSelectedBusiness && (
-          <Tick height={20} width={20} fill={theme.colors.onBackground} />
-        )}
-      </View>
-    </Card>
+    <View mb="12" mt="2">
+      <RippleCard onPress={onSelect}>
+        <View p="16" height={56}>
+          <View height="100%" flexDirection="row" alignItems={'center'}>
+            <Avatar.Text
+              labelStyle={{
+                color: theme.colors.inverseSurface,
+                ...theme.fonts.titleSmall,
+              }}
+              style={{
+                backgroundColor: theme.colors.inverseOnSurface,
+              }}
+              size={40}
+              label={getAvatarLetter(business.name)}
+            />
+            <View
+              alignItems={'center'}
+              flexDirection="row"
+              justifyContent={'space-between'}
+              flex={1}
+              height={40}
+              pl="16"
+            >
+              <Text variant="bodyLarge">{business.name}</Text>
+              {isSelectedBusiness && (
+                <Checkbox.IOS onPress={onSelect} status={'checked'} />
+              )}
+            </View>
+          </View>
+        </View>
+      </RippleCard>
+    </View>
   );
 };
 
@@ -130,6 +145,7 @@ export const SelectBusiness = () => {
       <View px="16" flex={1}>
         <LineLoader isLoading={isFetching} />
         <Searchbar
+          autoCorrect={false}
           mb="12"
           bg="inverseOnSurface"
           value={searchText}
@@ -138,6 +154,7 @@ export const SelectBusiness = () => {
         />
         {!isFetching && (
           <FlashList
+            keyboardShouldPersistTaps={'always'}
             refreshControl={
               <RefreshControl refreshing={isRefetching} onRefresh={refetch} />
             }

package/src/utils/analytics.ts

@@ -1,4 +1,4 @@
-import { Mixpanel } from 'mixpanel-react-native';
+import { Mixpanel, MixpanelProperties } from 'mixpanel-react-native';
 import { Platform } from 'react-native';
 import Config from 'react-native-config';
 import auth from '@react-native-firebase/auth';
@@ -62,6 +62,10 @@ export const Analytics = {
     }
 
     return {
+      registerSuperProperties: (properties: MixpanelProperties) =>
+        mixpanel.registerSuperProperties(properties),
+      unregisterSuperProperty: (propertyName: string) =>
+        mixpanel.unregisterSuperProperty(propertyName),
       track: createTrackFunction<CommonEventTypes | T>(),
       identify,
       profile: {

package/src/utils/index.ts

@@ -29,3 +29,8 @@ export {
   type TSingleSnapBottomSheetRef,
   useSingleSnapBottomSheetRef,
 } from './useSingleSnapBottomSheetRef';
+export { type TMultiSnapModal, useMultiSnapModal } from './useMultiSnapModal';
+
+export const getAvatarLetter = (string: any) => {
+  return string?.charAt(0)?.toUpperCase() ?? '';
+};

package/src/utils/useMultiSnapModal.ts

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+export type TMultiSnapModal<T extends string> = {
+  selectedSnap?: T;
+  expand: (snap: T) => void;
+  close: () => any;
+  isVisible: boolean;
+};
+
+export const useMultiSnapModal = <T extends string>({
+  initialSnap,
+}: {
+  initialSnap?: T;
+} = {}) => {
+  const [selectedSnap, setSelectedSnap] = useState(initialSnap);
+  const [isVisible, setIsVisible] = useState(false);
+  const expand = (snap: T) => {
+    setSelectedSnap(snap);
+    setIsVisible(true);
+  };
+  const close = () => {
+    setIsVisible(false);
+  };
+  return {
+    isVisible,
+    selectedSnap,
+    expand,
+    close,
+  };
+};

package/lib/commonjs/assets/icons/tick.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.00016 16.1698L4.83016 11.9998L3.41016 13.4098L9.00016 18.9998L21.0002 6.99984L19.5902 5.58984L9.00016 16.1698Z"/>
-</svg>

package/lib/module/assets/icons/tick.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.00016 16.1698L4.83016 11.9998L3.41016 13.4098L9.00016 18.9998L21.0002 6.99984L19.5902 5.58984L9.00016 16.1698Z"/>
-</svg>

package/src/assets/icons/tick.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.00016 16.1698L4.83016 11.9998L3.41016 13.4098L9.00016 18.9998L21.0002 6.99984L19.5902 5.58984L9.00016 16.1698Z"/>
-</svg>