app-expo-cli 1.0.5 → 1.0.7

package/template/src/lib/modals/ConfrimationModal.tsx

@@ -0,0 +1,116 @@
+import { Pressable, Text, View } from "react-native";
+
+import IwtButton from "../buttons/IwtButton";
+import { Modal } from "react-native-ui-lib";
+import React from "react";
+import TButton from "../buttons/TButton";
+import tw from "../tailwind";
+
+interface NormalModalProps {
+  visible?: boolean;
+  setVisible?: React.Dispatch<React.SetStateAction<boolean>>;
+  layerContainerStyle?: any;
+  containerStyle?: any;
+  animationType?: "none" | "slide" | "fade";
+  confirmationPress?: () => void;
+  title?: string;
+  subTitle?: string;
+  titleStyle?: any;
+  subTitleStyle?: any;
+  icon?: React.ReactNode;
+  svg?: string;
+  buttonStyle?: any;
+  buttonTextStyle?: any;
+  buttonText?: string;
+  onButtonPress?: () => void;
+}
+
+const NormalModal = ({
+  setVisible,
+  visible,
+  containerStyle,
+  layerContainerStyle,
+  animationType,
+  confirmationPress,
+  buttonStyle,
+  buttonText,
+  buttonTextStyle,
+  icon,
+  onButtonPress,
+  subTitle,
+  subTitleStyle,
+  svg,
+  title,
+  titleStyle,
+}: NormalModalProps) => {
+  return (
+    <Modal
+      transparent
+      // useKeyboardAvoidingView={false}
+      animationType={"fade"}
+      overlayBackgroundColor={"rgba(0, 0, 0, 0.2)"}
+      visible={visible}
+      onBackgroundPress={() => setVisible && setVisible(!visible)}
+    >
+      <View
+        style={[tw` justify-center items-center h-full`, layerContainerStyle]}
+      >
+        <Pressable
+          style={[
+            tw`bg-white w-[90%] p-4 rounded-lg`,
+            containerStyle,
+            tw`tablet:w-[35%]`,
+          ]}
+        >
+          <View>
+            <View style={tw`self-center py-[10%] w-[80%]`}>
+              <Text
+                style={[
+                  tw`text-center text-black500 text-lg font-RobotoMedium`,
+                  titleStyle,
+                ]}
+              >
+                {title}
+              </Text>
+            </View>
+            <View style={tw`flex-row justify-between px-2 pb-2`}>
+              <TButton
+                containerStyle={tw`w-[45%] h-12 p-0 m-0 bg-white border-gray-100 border    items-center`}
+                titleStyle={tw`text-black600 text-sm font-NunitoSansMedium`}
+                title={"Cancel"}
+                onPress={() => setVisible && setVisible(false)}
+              />
+              {svg ? (
+                <IwtButton
+                  containerStyle={[
+                    tw`w-[45%] h-12 p-0 m-0 bg-danger600    items-center`,
+                    buttonStyle,
+                  ]}
+                  titleStyle={[
+                    tw`text-white text-sm font-NunitoSansMedium`,
+                    buttonTextStyle,
+                  ]}
+                  svg={svg}
+                  title={buttonText}
+                  onPress={confirmationPress}
+                />
+              ) : (
+                <TButton
+                  containerStyle={tw`w-[45%] h-12 p-0 m-0 bg-danger600    items-center`}
+                  titleStyle={[
+                    tw`text-white text-sm font-NunitoSansMedium`,
+                    buttonTextStyle,
+                  ]}
+                  title={buttonText}
+                  onPress={confirmationPress}
+                />
+              )}
+            </View>
+          </View>
+        </Pressable>
+      </View>
+    </Modal>
+  );
+};
+
+export default React.memo(NormalModal);

package/template/src/lib/modals/DateModal.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+
+import { Calendar } from "react-native-calendars";
+import NormalModal from "./NormalModal";
+import TButton from "../buttons/TButton";
+import dayjs from "dayjs";
+import tw from "../tailwind";
+
+interface DateModalProps {
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedDate: (dates: string[]) => void;
+  item?: any;
+  range?: boolean;
+}
+
+const formatDate = (date: any) => dayjs(date).format("YYYY-MM-DD");
+
+const DateModal = ({
+  setVisible,
+  visible,
+  item,
+  range,
+  selectedDate,
+}: DateModalProps) => {
+  const [selectedDates, setSelectedDates] = useState<string[]>([]);
+  const bookedDates = new Set(item?.booked || []);
+
+  const handleDateSelect = (day: any) => {
+    const selectedDay = day.dateString;
+
+    if (!range) {
+      // Single date selection
+      setSelectedDates([selectedDay]);
+      selectedDate([selectedDay]);
+      setVisible(false);
+    } else {
+      // Multiple date selection (array)
+      setSelectedDates((prevDates) => {
+        if (prevDates.includes(selectedDay)) {
+          return prevDates.filter((date) => date !== selectedDay); // Deselect if already selected
+        } else if (!bookedDates.has(selectedDay)) {
+          return [...prevDates, selectedDay]; // Add new date if not booked
+        }
+        selectedDate(prevDates);
+        setVisible(false);
+        return prevDates;
+      });
+    }
+  };
+
+  const getMarkedDates = () => {
+    let marked: Record<string, any> = {};
+
+    // Mark booked dates as disabled
+    if (item?.booked) {
+      item.booked.forEach((date: string) => {
+        marked[date] = {
+          disabled: true,
+          disableTouchEvent: true,
+          customStyles: {
+            container: tw`bg-red-500 rounded-full`,
+            text: tw`text-white font-bold`,
+          },
+        };
+      });
+    }
+
+    // Mark selected dates
+    selectedDates.forEach((date) => {
+      marked[date] = {
+        customStyles: {
+          container: tw`bg-sky-600 rounded-full`,
+          text: tw`text-white font-bold`,
+        },
+      };
+    });
+
+    // Highlight today's date
+    const today = formatDate(new Date());
+    if (!marked[today]) {
+      marked[today] = {
+        customStyles: {
+          container: tw`bg-primary rounded-full`,
+          text: {
+            color: "white",
+            fontWeight: "bold",
+          },
+        },
+      };
+    }
+
+    return marked;
+  };
+
+  return (
+    <NormalModal
+      animationType="fade"
+      visible={visible}
+      setVisible={setVisible}
+      layerContainerStyle={tw`justify-center items-center flex-1 px-[4%] `}
+      containerStyle={tw`rounded-2xl bg-white`}
+    >
+      <Calendar
+        theme={theme}
+        markingType="custom"
+        markedDates={getMarkedDates()}
+        onDayPress={handleDateSelect}
+      />
+      {range && (
+        <TButton
+          disabled={selectedDates.length === 0}
+          title="Done"
+          containerStyle={tw`mt-4`}
+          onPress={() => {
+            selectedDate(selectedDates);
+            setVisible(false);
+          }}
+        />
+      )}
+    </NormalModal>
+  );
+};
+
+export default DateModal;
+
+const theme = {
+  stylesheet: {
+    calendar: {
+      header: {
+        dayHeader: {
+          fontWeight: "600",
+          color: "#48BFE3",
+        },
+        monthText: {
+          textAlign: "left",
+          fontWeight: "bold",
+          fontSize: 18,
+          marginLeft: 10,
+        },
+      },
+    },
+  },
+  "stylesheet.day.basic": {
+    today: tw`bg-primary rounded-full`,
+    todayText: tw`text-white`,
+  },
+  "stylesheet.day.single": {
+    base: tw`border border-red-500`,
+    text: tw`text-red-500 font-bold`,
+  },
+};

package/template/src/lib/modals/NormalModal.tsx

@@ -0,0 +1,73 @@
+import { ScrollView, TouchableWithoutFeedback, View } from "react-native";
+
+import React from "react";
+import { Modal } from "react-native-ui-lib";
+import tw from "../tailwind";
+
+interface NormalModalProps {
+  visible?: boolean;
+  setVisible?: React.Dispatch<React.SetStateAction<boolean>>;
+  layerContainerStyle?: any;
+  containerStyle?: any;
+  children?: React.ReactNode;
+  animationType?: "none" | "slide" | "fade";
+  scrollable?: boolean;
+}
+
+const NormalModal = ({
+  setVisible,
+  visible,
+  containerStyle,
+  children,
+  layerContainerStyle,
+  scrollable,
+  animationType,
+}: NormalModalProps) => {
+  return (
+    <Modal
+      transparent
+      useGestureHandlerRootView
+      presentationStyle="overFullScreen"
+      shouldRasterizeIOS
+      enableModalBlur={false}
+      useKeyboardAvoidingView
+      animationType={"fade"}
+      overlayBackgroundColor={"rgba(0, 0, 0, 0.5)"}
+      visible={visible}
+      onBackgroundPress={() => setVisible && setVisible(false)} // Ensure it toggles correctly
+    >
+      <TouchableWithoutFeedback onPress={() => setVisible && setVisible(false)}>
+        <View
+          style={[
+            tw`flex-1  justify-center items-center `,
+            layerContainerStyle,
+          ]}
+        >
+          <TouchableWithoutFeedback>
+            <View
+              style={[
+                tw`bg-secondary bg-opacity-10  w-full p-4 rounded-xl`,
+                containerStyle,
+                tw`tablet:w-[35%]`,
+              ]}
+            >
+              {scrollable ? (
+                <ScrollView
+                  nestedScrollEnabled
+                  keyboardShouldPersistTaps="always"
+                  showsVerticalScrollIndicator={false}
+                >
+                  {children}
+                </ScrollView>
+              ) : (
+                children
+              )}
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+export default React.memo(NormalModal);

package/template/src/lib/modals/SideModal.tsx

@@ -0,0 +1,57 @@
+import React, { useRef } from "react";
+
+import { _HIGHT } from "@/utils/utils";
+import { ScrollView } from "react-native";
+import RBSheet from "react-native-raw-bottom-sheet";
+
+interface BottomSheetProps {
+  children: React.ReactNode;
+  scrollable?: boolean;
+}
+
+interface UseBottomModalResult {
+  open: () => void;
+  close: () => void;
+  BottomModal: React.FC<BottomSheetProps>;
+}
+
+export const useBottomModal = (): UseBottomModalResult => {
+  // Keep the reference stable and ensure it's always available
+  const ref = useRef<RBSheet>(null);
+
+  const open = () => {
+    if (ref.current) {
+      ref.current.open();
+    }
+  };
+
+  const close = () => {
+    if (ref.current) {
+      ref.current.close();
+    }
+  };
+
+  const BottomModal: React.FC<BottomSheetProps> = ({
+    children,
+    scrollable = false,
+  }) => (
+    <RBSheet
+      ref={ref}
+      draggable
+      height={_HIGHT * 0.6}
+      customStyles={{
+        container: {
+          borderTopLeftRadius: 10,
+          borderTopRightRadius: 10,
+        },
+        draggableIcon: {
+          width: 30,
+        },
+      }}
+    >
+      {scrollable ? <ScrollView>{children}</ScrollView> : children}
+    </RBSheet>
+  );
+
+  return { open, close, BottomModal };
+};

package/template/src/lib/modals/Toaster.tsx

@@ -0,0 +1,256 @@
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import {
+  Dimensions,
+  Pressable,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import { Modal } from "react-native-ui-lib";
+import tw from "../tailwind";
+
+// import LottieView from 'lottie-react-native';
+
+// import { FontSize } from '../../../utils/utils';
+
+// Define the ref object type
+export interface PopUpModalRef {
+  open: (data: PopUpModalProps) => void;
+  close: () => void;
+}
+
+// Define the component's props type
+export interface PopUpModalProps {
+  title?: string;
+  titleStyle?: any;
+  icon?: JSX.Element;
+  lottify?: string;
+  containerStyle?: any;
+  iconComponent?: JSX.Element;
+  multipleBTNStyle?: any;
+  multipleButton?: Array<{
+    onPress?: () => void;
+    text?: string;
+    buttonText?: string;
+    buttonTextStyle?: any;
+    buttonStyle?: any;
+  }>;
+  onPress?: () => void;
+  svgIcon?: any;
+  content?: string;
+  contentStyle?: any;
+  buttonStyle?: any;
+  btnDisplay?: boolean;
+  buttonTextStyle?: any;
+  buttonText?: string;
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+  direction?: "down" | "up" | "left" | "right";
+  iconComponentStyle?: any;
+}
+
+const { width, height } = Dimensions.get("window");
+
+const PopUpModal = forwardRef<PopUpModalRef, PopUpModalProps>(
+  ({ direction }, ref) => {
+    const [visible, setVisible] = useState(false);
+    const [modalContent, setModalContent] = useState<PopUpModalProps>();
+
+    useImperativeHandle(ref, () => ({
+      open(data) {
+        setModalContent(data);
+        setVisible(true);
+      },
+      close() {
+        setVisible(false);
+      },
+    }));
+
+    return (
+      <Modal
+        transparent
+        animationType="fade"
+        overlayBackgroundColor="rgba(0, 0, 0, 0.5)" // Semi-transparent background
+        visible={visible}
+        useKeyboardAvoidingView
+        // statusBarTranslucent
+        onDismiss={() => setVisible(false)}
+        onBackgroundPress={() => setVisible(false)} // Close modal on background press
+      >
+        <Pressable
+          onPress={() => {
+            setVisible(false);
+          }}
+          style={tw`flex-1 justify-center items-center`}
+        >
+          <Pressable
+            style={[
+              tw`bg-white p-5 rounded-xl gap-2`,
+              modalContent?.containerStyle,
+            ]}
+          >
+            {modalContent?.icon && <View>{modalContent?.icon}</View>}
+            {/* {modalContent?.lottify && (
+              <View>
+                <LottieView
+                  autoPlay
+                  loop={true}
+                  source={modalContent?.lottify}
+                  style={{
+                    height: height * 0.08,
+                    aspectRatio: 1,
+                  }}
+                />
+              </View>
+            )} */}
+            {modalContent?.iconComponent && (
+              <View
+                style={[
+                  tw`justify-center items-center`,
+                  modalContent.iconComponentStyle,
+                ]}
+              >
+                {modalContent?.iconComponent}
+              </View>
+            )}
+            {modalContent?.svgIcon && (
+              <View style={tw`justify-center items-center`}>
+                {modalContent?.svgIcon}
+              </View>
+            )}
+            {modalContent?.title && (
+              <Text
+                style={[
+                  tw`text-center text-black text-lg`,
+                  modalContent.titleStyle,
+                ]}
+              >
+                {modalContent.title}
+              </Text>
+            )}
+            {modalContent?.content && (
+              <Text
+                style={[
+                  tw`text-center text-black font-normal text-base `,
+                  modalContent.contentStyle,
+                ]}
+              >
+                {modalContent.content}
+              </Text>
+            )}
+            {!modalContent?.multipleButton && !modalContent?.btnDisplay && (
+              <View
+                style={[
+                  tw`bg-cyan-800  justify-center items-center bg-opacity-75  rounded-lg`,
+                  modalContent?.buttonStyle,
+                ]}
+              >
+                <TouchableOpacity
+                  style={tw` w-full h-10 justify-center items-center`}
+                  activeOpacity={0.5}
+                  onPress={modalContent?.onPress}
+                >
+                  <Text
+                    style={[
+                      tw`text-white font-bold`,
+                      modalContent?.buttonTextStyle,
+                    ]}
+                  >
+                    {modalContent?.buttonText || "Okay"}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            )}
+            {modalContent?.multipleButton && (
+              <View style={[tw`flex-row gap-3`, modalContent.multipleBTNStyle]}>
+                {modalContent?.multipleButton.map((item, index) => (
+                  <View
+                    key={index}
+                    style={[
+                      tw` bg-black600 justify-center items-center  rounded-xl`,
+                      item?.buttonStyle,
+                    ]}
+                  >
+                    <TouchableOpacity
+                      style={tw`h-10 w-full justify-center  items-center`}
+                      activeOpacity={0.5}
+                      onPress={item?.onPress}
+                    >
+                      <Text
+                        style={[
+                          tw`text-white font-bold`,
+                          item?.buttonTextStyle,
+                        ]}
+                      >
+                        {item?.buttonText || "Okay"}
+                      </Text>
+                    </TouchableOpacity>
+                  </View>
+                ))}
+              </View>
+            )}
+          </Pressable>
+        </Pressable>
+        {/* </BlurView> */}
+      </Modal>
+    );
+  }
+);
+
+export default PopUpModal;
+
+interface ToastContextType {
+  showToast: (data: PopUpModalProps) => void;
+  closeToast: () => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+/**
+ * Hook to use the toast context.
+ * @throws {Error} if called outside of a ToastProvider
+ * @returns {ToastContextType} the toast context
+ */
+export const useToast = (): ToastContextType => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+
+/**
+ * Context provider for managing toast notifications.
+ * @param children React node representing the children components.
+ */
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const ref = useRef<PopUpModalRef>(null);
+
+  const showToast = (data: PopUpModalProps) => {
+    if (ref.current) {
+      ref.current.open(data);
+    }
+  };
+  const closeToast = () => {
+    if (ref.current) {
+      ref.current.close();
+    }
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast, closeToast }}>
+      {children}
+      <PopUpModal ref={ref} />
+    </ToastContext.Provider>
+  );
+};

package/template/src/lib/payment/PaymentCardForD.tsx

@@ -0,0 +1,47 @@
+import { Text, TextInput, View } from "react-native";
+
+import { Icon } from "@/assets/Icon";
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+const PaymentCardForD = () => {
+  return (
+    <View style={tw`px-5 mt-5 gap-3`}>
+      <Text style={tw`text-white text-xl font-DegularDisplayRegular`}>
+        Card information
+      </Text>
+      <View style={tw``}>
+        <View
+          style={tw`flex-row items-center px-4 border border-t-secondary border-r-secondary border-l-secondary h-14 rounded-t-lg`}
+        >
+          <TextInput
+            placeholder="Card number"
+            placeholderTextColor={"#A9A9A9"}
+            style={tw`flex-1 font-DegularDisplayRegular text-white text-lg `}
+          />
+          <SvgXml xml={Icon?.card} />
+        </View>
+        <View style={tw`flex-1 flex-row  `}>
+          <TextInput
+            placeholder="MM/YY"
+            placeholderTextColor={"#A9A9A9"}
+            style={tw`border w-1/2 rounded-bl-lg border-secondary h-14 px-4 font-DegularDisplayRegular text-white text-lg`}
+          />
+          <View
+            style={tw`flex-row rounded-br-lg items-center border w-1/2 border-secondary h-14 px-4 `}
+          >
+            <TextInput
+              placeholder="CVC"
+              placeholderTextColor={"#A9A9A9"}
+              style={tw`flex-1 font-DegularDisplayRegular text-white text-lg `}
+            />
+            <SvgXml xml={Icon?.cvc} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default PaymentCardForD;