Cart modal for mobile is working

libs/features/src/lib/cart/cart.modal/cart.modal.content.scroll.native.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren, ReactElement, useRef } from 'react';
+
+import { ScrollView } from 'react-native';
+
+import { styles } from './cart.modal.module';
+
+const CartModalScroll = ({ children }: PropsWithChildren): ReactElement => {
+  const scrollViewRef = useRef<null | ScrollView>(null);
+  return (
+    <ScrollView
+      ref={(ref) => {
+        scrollViewRef.current = ref;
+      }}
+      contentInsetAdjustmentBehavior="automatic"
+      style={styles.cartContent}
+    >
+      {children}
+    </ScrollView>
+  );
+};
+
+export default CartModalScroll;

libs/features/src/lib/cart/cart.modal/cart.modal.content.scroll.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren, ReactElement } from 'react';
+
+import { UiElementLayout } from '@pokemon-pet-shop/ui';
+
+import { styles } from './cart.modal.module';
+
+const CartModalScroll = ({ children }: PropsWithChildren): ReactElement => {
+  return <UiElementLayout className={styles.cartContent}>{children}</UiElementLayout>;
+};
+
+export default CartModalScroll;

libs/features/src/lib/cart/cart.modal/cart.modal.module.native.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  modal: {
+    backgroundColor: 'white',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  cartContent: {
+    padding: 15,
+    height: '86%',
+    flexGrow: 1,
+  },
+  middleRow: {
+    flex: 1,
+  },
+  cardContentRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 15,
+  },
+  image: {
+    width: 115,
+    height: 115,
+  },
+  sep: {
+    backgroundColor: '#666',
+    width: '100%',
+    height: 1,
+    marginTop: 25,
+    marginBottom: 25,
+  },
+  totalContent: {
+    height: 60,
+    backgroundColor: 'grey',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 15,
+  },
+});

libs/features/src/lib/cart/cart.modal/cart.modal.module.ts

@@ -0,0 +1,3 @@
+import styles from './cart.modal.module.css';
+
+export { styles };

libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx

@@ -12,7 +12,8 @@ import {
 } from '@pokemon-pet-shop/ui';
 import { pricingFormatUSD } from '@pokemon-pet-shop/utils';
 
-import styles from './cart.modal.module.css';
+import CartModalScroll from './cart.modal.content.scroll';
+import { styles } from './cart.modal.module';
 import useCartModalLogic from './use.cart.modal.logic';
 
 const CartModal = (): ReactElement => {
@@ -21,7 +22,7 @@ const CartModal = (): ReactElement => {
 
   return (
     <UiElementLayout className={styles.modal}>
-      <UiElementLayout className={styles.cartContent}>
+      <CartModalScroll>
         {(data?.data || [])?.map((el: CartDataContentApi, i: number) => {
           return (
             <UiElementLayout key={i} className={styles?.cartWrapper}>
@@ -65,7 +66,7 @@ const CartModal = (): ReactElement => {
             </UiElementLayout>
           );
         })}
-      </UiElementLayout>
+      </CartModalScroll>
       <UiElementLayout className={styles.totalContent}>
         <UiTypography>Total</UiTypography>
         <UiTypography>{pricingFormatUSD(data?.total)}</UiTypography>

libs/features/src/lib/navigation/header/header.tsx

@@ -27,7 +27,7 @@ const Header = () => {
 
   const openModal = useModalStore((state) => state.openModal);
 
-  const handleOpenDetailModalClick = () => {
+  const handleCartModalClick = () => {
     openModal({
       content: <UiCartModal />,
       options: {
@@ -81,9 +81,9 @@ const Header = () => {
           <UiSwitchTheme className={styles.switchTheme} />
         </UiHideInMobile>
 
-        <UiElementLayout onClick={handleOpenDetailModalClick}>
+        <UiElementLayout>
           <UiTypography>{data?.counter}</UiTypography>
-          <UiIcon classNameIcon={styles.iconCart} />
+          <UiIcon classNameIcon={styles.iconCart} onClick={handleCartModalClick} />
         </UiElementLayout>
       </UiContainer>
     </UiElementLayout>

libs/ui/src/lib-base/ui/element.layout/element.layout.interface.ts

@@ -5,5 +5,5 @@ import { ElementLayoutTypeEnum } from './element.layout.enum';
 export interface ElementLayoutProps {
   layoutType?: ElementLayoutTypeEnum;
   className?: any;
-  onClick?: GenericNonReturnType;
+  onClick?: GenericNonReturnType | null;
 }

libs/ui/src/lib-base/ui/element.layout/element.layout.view.native.tsx

@@ -1,13 +1,21 @@
 import { PropsWithChildren, ReactElement } from 'react';
 
-import { View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 
 import { ElementLayoutProps } from './element.layout.interface';
 
 const ElementLayout = ({
   className = '',
   children = null,
+  onClick = null,
 }: PropsWithChildren<ElementLayoutProps>): ReactElement => {
+  if (onClick !== null) {
+    return (
+      <TouchableHighlight style={className} onPress={onClick}>
+        {children}
+      </TouchableHighlight>
+    );
+  }
   return <View style={className}>{children}</View>;
 };
 

libs/ui/src/lib-base/ui/modal/modal.element.view.native.tsx

@@ -4,14 +4,10 @@ import { Modal, SafeAreaView } from 'react-native';
 
 import { ModalElementProps } from './modal.interface';
 
-const ModalElement = ({
-  className,
-  isOpen,
-  children,
-}: PropsWithChildren<ModalElementProps>): ReactElement => {
+const ModalElement = ({ isOpen, children }: PropsWithChildren<ModalElementProps>): ReactElement => {
   return (
     <Modal animationType="slide" visible={isOpen}>
-      <SafeAreaView style={className}>{children}</SafeAreaView>
+      <SafeAreaView>{children}</SafeAreaView>
     </Modal>
   );
 };

libs/ui/src/lib-base/ui/modal/modal.module.native.ts

@@ -17,10 +17,15 @@ export const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   relativeDropdownHeadline: {
-    flex: 1,
+    display: 'flex',
+    position: 'relative',
+    flexDirection: 'row',
+    width: '100%',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: 15,
+    paddingRight: 15,
+    paddingLeft: 15,
+    paddingBottom: 15,
   },
   absoluteDropdownHeadline: {
     flex: 1,