Skip to content

Commit

Permalink
Updating Cart and Footer Ui
Browse files Browse the repository at this point in the history
  • Loading branch information
AnselmMarie committed Sep 29, 2024
1 parent bccd534 commit 41484e8
Show file tree
Hide file tree
Showing 17 changed files with 362 additions and 89 deletions.
1 change: 1 addition & 0 deletions apps/api/src/api/v1/cart/services/cart.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ const updateCartItemService = async (payload: CartApiPayload) => {
image: speciesData?.sprites?.other?.['official-artwork']?.front_default,
isLegendary: speciesData?.is_legendary,
isMythical: speciesData?.is_mythical,
types: speciesData?.types,
};
currentCartData.counter = counter + 1;
currentCartData.total = total + pokemonPrice;
Expand Down
82 changes: 82 additions & 0 deletions libs/features/src/lib/cart/cart.modal/cart.modal.item.view.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { ReactElement } from 'react';

import { useRenderStyles } from '@pokemon-pet-shop/hooks';
import {
UiElementLayout,
UiIcon,
IconTypeEnum,
UiTypography,
UiImage,
mobSrcTypeEnum,
TypographyTypeEnum,
IconColorEnum,
} from '@pokemon-pet-shop/ui';
import { globalStyles } from '@pokemon-pet-shop/ui/styles/global';
import { capitalizeNameUtil, classNamesUtil, pricingFormatUSD } from '@pokemon-pet-shop/utils';

import { usePokemonThemeLogic } from '../../pokemon/hooks/use.pokemon.theme.logic';

import { styles } from './cart.modal.module';
import useCartModalItemLogic from './use.cart.modal.item.logic';

const CartModalItem = ({ el }: any): ReactElement => {
const { onHandleRemoveFromCart, onHandleAddToCart, onHandleRemoveCartItem } =
useCartModalItemLogic();
const { newStyles } = useRenderStyles(styles);
const { getThemeClass } = usePokemonThemeLogic(el?.types);

return (
<UiElementLayout className={newStyles?.cartWrapper}>
<UiElementLayout className={newStyles.cardContentRow}>
<UiElementLayout
className={classNamesUtil(
newStyles.imageWrapper,
newStyles?.[`${getThemeClass}ImageWrapper`]
)}
>
<UiImage
src={el?.image}
className={newStyles.image}
alt={`${el?.name} Image`}
mobSrcType={mobSrcTypeEnum.URI}
/>
</UiElementLayout>
<UiElementLayout className={newStyles?.middleRow}>
<UiTypography className={newStyles.itemName} typographyType={TypographyTypeEnum.H1}>
{capitalizeNameUtil(el?.name)}
</UiTypography>
<UiTypography
typographyType={TypographyTypeEnum.SPAN}
className={classNamesUtil(newStyles.price, globalStyles.fontBold)}
>
{pricingFormatUSD(el?.price)}
</UiTypography>

<UiElementLayout className={styles.quantityWrapper}>
<UiIcon
icon={IconTypeEnum.ICON_MINUS}
classNameIcon={styles.quantityIcon}
onClick={() => onHandleRemoveFromCart(el?.id)}
/>
<UiTypography>{el?.quantity}</UiTypography>
<UiIcon
icon={IconTypeEnum.ICON_PLUS}
classNameIcon={styles.quantityIcon}
onClick={() => onHandleAddToCart(el?.id)}
/>
</UiElementLayout>
</UiElementLayout>

<UiIcon
icon={IconTypeEnum.ICON_TRASH}
color={IconColorEnum.RED}
onClick={() => onHandleRemoveCartItem(el?.id)}
/>
</UiElementLayout>

<UiElementLayout className={newStyles?.sep} />
</UiElementLayout>
);
};

export default CartModalItem;
187 changes: 186 additions & 1 deletion libs/features/src/lib/cart/cart.modal/cart.modal.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,185 @@
gap: var(--theme-spacing-15);
}

.imageWrapper {
border-width: 3px;
border-style: solid;
border-radius: var(--theme-radius-8);
padding: var(--theme-spacing-5);
}

.bugThemeImageWrapper {
border-color: var(--theme-type-bug-800);
background: var(--theme-type-bug-800);
background: linear-gradient(45deg, var(--theme-type-bug-800) 0%, var(--theme-type-bug-400) 100%);
}

.darkThemeImageWrapper {
border-color: var(--theme-type-dark-800);
background: var(--theme-type-dark-800);
background: linear-gradient(
45deg,
var(--theme-type-dark-800) 0%,
var(--theme-type-dark-400) 100%
);
}

.dragonThemeImageWrapper {
border-color: var(--theme-type-dragon-800);
background: var(--theme-type-dragon-800);
background: linear-gradient(
45deg,
var(--theme-type-dragon-800) 0%,
var(--theme-type-dragon-400) 100%
);
}

.electricThemeImageWrapper {
border-color: var(--theme-type-electric-800);
background: var(--theme-type-electric-800);
background: linear-gradient(
45deg,
var(--theme-type-electric-800) 0%,
var(--theme-type-electric-400) 100%
);
}

.fairyThemeImageWrapper {
border-color: var(--theme-type-fairy-800);
background: var(--theme-type-fairy-800);
background: linear-gradient(
45deg,
var(--theme-type-fairy-800) 0%,
var(--theme-type-fairy-400) 100%
);
}

.fightingThemeImageWrapper {
border-color: var(--theme-type-fighting-800);
background: var(--theme-type-fighting-800);
background: linear-gradient(
45deg,
var(--theme-type-fighting-800) 0%,
var(--theme-type-fighting-400) 100%
);
}

.fireThemeImageWrapper {
border-color: var(--theme-type-fire-800);
background: var(--theme-type-fire-800);
background: linear-gradient(
45deg,
var(--theme-type-fire-800) 0%,
var(--theme-type-fire-400) 100%
);
}

.flyingThemeImageWrapper {
border-color: var(--theme-type-flying-800);
background: var(--theme-type-flying-800);
background: linear-gradient(
45deg,
var(--theme-type-flying-800) 0%,
var(--theme-type-flying-400) 100%
);
}

.ghostThemeImageWrapper {
border-color: var(--theme-type-ghost-800);
background: var(--theme-type-ghost-800);
background: linear-gradient(
45deg,
var(--theme-type-ghost-800) 0%,
var(--theme-type-ghost-400) 100%
);
}

.grassThemeImageWrapper {
border-color: var(--theme-type-grass-800);
background: var(--theme-type-grass-800);
background: linear-gradient(
45deg,
var(--theme-type-grass-800) 0%,
var(--theme-type-grass-400) 100%
);
}

.groundThemeImageWrapper {
border-color: var(--theme-type-ground-800);
background: var(--theme-type-ground-800);
background: linear-gradient(
45deg,
var(--theme-type-ground-800) 0%,
var(--theme-type-ground-400) 100%
);
}

.iceThemeImageWrapper {
border-color: var(--theme-type-ice-800);
background: var(--theme-type-ice-800);
background: linear-gradient(45deg, var(--theme-type-ice-800) 0%, var(--theme-type-ice-400) 100%);
}

.normalThemeImageWrapper {
border-color: var(--theme-type-normal-800);
background: var(--theme-type-normal-800);
background: linear-gradient(
45deg,
var(--theme-type-normal-800) 0%,
var(--theme-type-normal-400) 100%
);
}

.poisonThemeImageWrapper {
border-color: var(--theme-type-poison-800);
background: var(--theme-type-poison-800);
background: linear-gradient(
45deg,
var(--theme-type-poison-800) 0%,
var(--theme-type-poison-400) 100%
);
}

.psychicThemeImageWrapper {
border-color: var(--theme-type-psychic-800);
background: var(--theme-type-psychic-800);
background: linear-gradient(
45deg,
var(--theme-type-psychic-800) 0%,
var(--theme-type-psychic-400) 100%
);
}

.rockThemeImageWrapper {
border-color: var(--theme-type-rock-800);
background: var(--theme-type-rock-800);
background: linear-gradient(
45deg,
var(--theme-type-rock-800) 0%,
var(--theme-type-rock-400) 100%
);
}

.steelThemeImageWrapper {
border-color: var(--theme-type-steel-800);
background: var(--theme-type-steel-800);
background: linear-gradient(
45deg,
var(--theme-type-steel-800) 0%,
var(--theme-type-steel-400) 100%
);
}

.waterThemeImageWrapper {
border-color: var(--theme-type-water-800);
background: var(--theme-type-water-800);
background: linear-gradient(
45deg,
var(--theme-type-water-800) 0%,
var(--theme-type-water-400) 100%
);
}

.image {
width: 115px;
height: 115px;
Expand Down Expand Up @@ -57,7 +236,7 @@
margin-bottom: var(--theme-spacing-30);
}

.totalContent {
.totalWrapper {
height: 60px;
background-color: var(--theme-netural-200);
border-radius: 0 0 var(--theme-radius-8) var(--theme-radius-8);
Expand All @@ -67,3 +246,9 @@
align-items: center;
padding: var(--theme-spacing-15);
}

.totalContent,
.totalPrice {
font-size: var(--theme-font-18);
font-weight: bold;
}
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const styles = () =>
marginTop: 25,
marginBottom: 25,
},
totalContent: {
totalWrapper: {
height: 60,
backgroundColor: 'grey',
display: 'flex',
Expand Down
73 changes: 10 additions & 63 deletions libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,30 @@ import { ReactElement } from 'react';

import { useRenderStyles } from '@pokemon-pet-shop/hooks';
import { CartDataContentApi } from '@pokemon-pet-shop/typing';
import {
UiElementLayout,
UiIcon,
IconTypeEnum,
UiTypography,
UiImage,
mobSrcTypeEnum,
TypographyTypeEnum,
} from '@pokemon-pet-shop/ui';
import { globalStyles } from '@pokemon-pet-shop/ui/styles/global';
import { capitalizeNameUtil, classNamesUtil, pricingFormatUSD } from '@pokemon-pet-shop/utils';
import { UiElementLayout, UiTypography } from '@pokemon-pet-shop/ui';
import { pricingFormatUSD } from '@pokemon-pet-shop/utils';

import CartModalScroll from './cart.modal.content.scroll';
import CartModalItem from './cart.modal.item.view';
import { styles } from './cart.modal.module';
import useCartModalLogic from './use.cart.modal.logic';

const CartModal = (): ReactElement => {
const { data, onHandleRemoveFromCart, onHandleAddToCart, onHandleRemoveCartItem } =
useCartModalLogic();
const { data } = useCartModalLogic();
const { newStyles } = useRenderStyles(styles);

return (
<UiElementLayout className={newStyles.modal}>
<CartModalScroll>
{(data?.data || [])?.map((el: CartDataContentApi, i: number) => {
return (
<UiElementLayout key={i} className={newStyles?.cartWrapper}>
<UiElementLayout className={newStyles.cardContentRow}>
<UiImage
src={el?.image}
className={newStyles.image}
alt={`${el?.name} Image`}
mobSrcType={mobSrcTypeEnum.URI}
/>
<UiElementLayout className={newStyles?.middleRow}>
<UiTypography
className={newStyles.itemName}
typographyType={TypographyTypeEnum.H1}
>
{capitalizeNameUtil(el?.name)}
</UiTypography>
<UiTypography
typographyType={TypographyTypeEnum.SPAN}
className={classNamesUtil(newStyles.price, globalStyles.fontBold)}
>
{pricingFormatUSD(el?.price)}
</UiTypography>

<UiElementLayout className={styles.quantityWrapper}>
<UiIcon
icon={IconTypeEnum.ICON_MINUS}
classNameIcon={styles.quantityIcon}
onClick={() => onHandleRemoveFromCart(el?.id)}
/>
<UiTypography>{el?.quantity}</UiTypography>
<UiIcon
icon={IconTypeEnum.ICON_PLUS}
classNameIcon={styles.quantityIcon}
onClick={() => onHandleAddToCart(el?.id)}
/>
</UiElementLayout>
</UiElementLayout>

<UiIcon
icon={IconTypeEnum.ICON_TRASH}
onClick={() => onHandleRemoveCartItem(el?.id)}
/>
</UiElementLayout>

<UiElementLayout className={newStyles?.sep} />
</UiElementLayout>
);
return <CartModalItem key={i} el={el} />;
})}
</CartModalScroll>
<UiElementLayout className={newStyles.totalContent}>
<UiTypography>Total</UiTypography>
<UiTypography>{pricingFormatUSD(data?.total)}</UiTypography>
<UiElementLayout className={newStyles.totalWrapper}>
<UiTypography className={newStyles.totalContent}>Total</UiTypography>
<UiTypography className={newStyles.totalPrice}>
{pricingFormatUSD(data?.total)}
</UiTypography>
</UiElementLayout>
</UiElementLayout>
);
Expand Down
Loading

0 comments on commit 41484e8

Please sign in to comment.