Fix issues with correct props and fix broken stories

white-label-loyalty · Aug 20, 2024 · 79cd2d8 · 79cd2d8
1 parent 4600e48
commit 79cd2d8
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 64 deletions.
diff --git a/lib/components/atoms/TileContainer/index.tsx b/lib/components/atoms/TileContainer/index.tsx
@@ -1,12 +1,23 @@
 import {
   BadgeTile,
+  BannerTile,
   ContentTile,
   PointsTile,
   RewardCategoryTile,
   RewardTile,
   TierTile,
 } from "@/components/organisms";
-import { Tile, TileType } from "@/types/tile";
+import {
+  BadgeTileConfig,
+  BannerTileConfig,
+  ContentTileConfig,
+  PointsTileConfig,
+  RewardCategoryTileConfig,
+  RewardTileConfig,
+  TierTileConfig,
+  Tile,
+  TileType,
+} from "@/types/tile";
 import React from "react";
 import { StyleSheet, View } from "react-native";
 
@@ -17,20 +28,37 @@ type TileContainerProps = {
 const TileContainer: React.FC<TileContainerProps> = ({ tiles }) => {
   const renderTile = (tile: Tile) => {
     switch (tile.type) {
-      case TileType.Tier:
-        return <TierTile tile={tile} />;
-      case TileType.Points:
-        return <PointsTile tile={tile} />;
-      case TileType.Content:
-        return <ContentTile tile={tile} />;
-      case TileType.Reward:
-        return <RewardTile tile={tile} />;
-      case TileType.Badge:
-        return <BadgeTile tile={tile} />;
-      case TileType.RewardCategory:
-        return <RewardCategoryTile tile={tile} />;
+      case TileType.Banner: {
+        const config = tile.configuration as BannerTileConfig;
+        return <BannerTile configuration={config} />;
+      }
+      case TileType.Points: {
+        const config = tile.configuration as PointsTileConfig;
+        return <PointsTile configuration={config} />;
+      }
+      case TileType.Content: {
+        const config = tile.configuration as ContentTileConfig;
+        return <ContentTile configuration={config} />;
+      }
+      case TileType.Reward: {
+        const config = tile.configuration as RewardTileConfig;
+        return <RewardTile configuration={config} />;
+      }
+      case TileType.Badge: {
+        const config = tile.configuration as BadgeTileConfig;
+        return <BadgeTile configuration={config} />;
+      }
+      case TileType.RewardCategory: {
+        const config = tile.configuration as RewardCategoryTileConfig;
+        // @ts-ignore we know this is wrong for the time being.
+        return <RewardCategoryTile configuration={config} />;
+      }
+      case TileType.Tier: {
+        const config = tile.configuration as TierTileConfig;
+        return <TierTile configuration={config} />;
+      }
       default:
-        return null;
+        throw new Error(`Unsupported tile type: ${tile.type}`);
     }
   };
 

diff --git a/lib/components/molecules/Carousel/index.tsx b/lib/components/molecules/Carousel/index.tsx
@@ -94,7 +94,7 @@ const Carousel: React.FC<CarouselProps> = ({ section }) => {
             snapToAlignment="start"
           >
             {bannerTiles.map((tile: Tile, index: number) => {
-              const bannerConfig = tile.configuration as BannerTileConfig;
+              const configuration = tile.configuration as BannerTileConfig;
               return (
                 <View
                   key={index}
@@ -104,7 +104,7 @@ const Carousel: React.FC<CarouselProps> = ({ section }) => {
                     },
                   ]}
                 >
-                  <BannerTile bannerConfig={bannerConfig} />
+                  <BannerTile configuration={configuration} />
                 </View>
               );
             })}

diff --git a/lib/components/organisms/BadgeTile/index.tsx b/lib/components/organisms/BadgeTile/index.tsx
@@ -1,16 +1,13 @@
-import React from 'react';
-import { View } from 'react-native';
+import { BadgeTileConfig } from "@/types/tile";
+import React from "react";
+import { View } from "react-native";
 
 type BadgeTileProps = {
-  // Define your props here
-}
+  configuration: BadgeTileConfig;
+};
 
-const BadgeTile: React.FC<BadgeTileProps> = () => {
-  return (
-    <View>
-      {/* Your component code here */}
-    </View>
-  );
+const BadgeTile: React.FC<BadgeTileProps> = ({ configuration }) => {
+  return <View>{/* Your component code here */}</View>;
 };
 
 export default BadgeTile;
diff --git a/lib/components/organisms/BannerTile/BannerTile.stories.tsx b/lib/components/organisms/BannerTile/BannerTile.stories.tsx
@@ -12,7 +12,7 @@ const Template: StoryFn<typeof BannerTile> = (args) => <BannerTile {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  bannerConfig: {
+  configuration: {
     imageUrl:
       "https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_1280.jpg",
     title: "Summer Sale",

diff --git a/lib/components/organisms/BannerTile/index.tsx b/lib/components/organisms/BannerTile/index.tsx
@@ -5,11 +5,12 @@ import React from "react";
 import { Image, Linking, StyleSheet, View } from "react-native";
 
 type BannerTileProps = {
-  bannerConfig: BannerTileConfig;
+  configuration: BannerTileConfig;
 };
 
-const BannerTile: React.FC<BannerTileProps> = ({ bannerConfig }) => {
+const BannerTile: React.FC<BannerTileProps> = ({ configuration }) => {
   const { theme } = useTheme();
+  const { imageUrl, title, description, ctaText, ctaLink } = configuration;
 
   const handleLinkPress = async (url: string) => {
     if (!url) return;
@@ -26,32 +27,32 @@ const BannerTile: React.FC<BannerTileProps> = ({ bannerConfig }) => {
         },
       ]}
     >
-      {bannerConfig.imageUrl && (
+      {imageUrl && (
         <View style={styles.imageContainer}>
           <Image
-            source={{ uri: bannerConfig.imageUrl }}
+            source={{ uri: imageUrl }}
             style={styles.image}
             resizeMode="cover"
             onError={(error) => console.error("Image loading error:", error)}
           />
         </View>
       )}
       <View style={styles.slideContent}>
-        {bannerConfig.title && (
+        {title && (
           <Text variant="title" style={styles.title} isSurface={true}>
-            {bannerConfig.title}
+            {title}
           </Text>
         )}
-        {bannerConfig.description && (
+        {description && (
           <Text variant="body" style={styles.description} isSurface={true}>
-            {bannerConfig.description}
+            {description}
           </Text>
         )}
-        {bannerConfig.ctaText && (
+        {ctaText && (
           <Button
-            title={bannerConfig.ctaText}
+            title={ctaText}
             variant="accent"
-            onPress={() => handleLinkPress(bannerConfig.ctaLink as string)}
+            onPress={() => handleLinkPress(ctaLink as string)}
           />
         )}
       </View>

diff --git a/lib/components/organisms/ContentTile/index.tsx b/lib/components/organisms/ContentTile/index.tsx
@@ -1,11 +1,12 @@
+import { ContentTileConfig } from "@/types/tile";
 import React from "react";
 import { View } from "react-native";
 
 type ContentTileProps = {
-  // Define your props here
+  configuration: ContentTileConfig;
 };
 
-const ContentTile: React.FC<ContentTileProps> = () => {
+const ContentTile: React.FC<ContentTileProps> = ({ configuration }) => {
   return <View>{/* Your component code here */}</View>;
 };
 

diff --git a/lib/components/organisms/PointsTile/index.tsx b/lib/components/organisms/PointsTile/index.tsx
@@ -1,16 +1,13 @@
-import React from 'react';
-import { View } from 'react-native';
+import { PointsTileConfig } from "@/types/tile";
+import React from "react";
+import { View } from "react-native";
 
 type PointsTileProps = {
-  // Define your props here
-}
+  configuration: PointsTileConfig;
+};
 
-const PointsTile: React.FC<PointsTileProps> = () => {
-  return (
-    <View>
-      {/* Your component code here */}
-    </View>
-  );
+const PointsTile: React.FC<PointsTileProps> = ({ configuration }) => {
+  return <View>{/* Your component code here */}</View>;
 };
 
 export default PointsTile;
diff --git a/lib/components/organisms/RewardCategoryTile/RewardCategoryTile.stories.tsx b/lib/components/organisms/RewardCategoryTile/RewardCategoryTile.stories.tsx
@@ -13,7 +13,7 @@ const Template: StoryFn<typeof RewardCategoryTile> = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  rewardData: {
+  configuration: {
     allowDecorationOverlay: true,
     id: "9cb2cc08-e033-4200-86a7-95a03ba09462",
     createdAt: "2018-06-08T08:57:47.198Z",
@@ -29,7 +29,7 @@ Default.args = {
 
 export const LongCategoryName = Template.bind({});
 LongCategoryName.args = {
-  rewardData: {
+  configuration: {
     allowDecorationOverlay: true,
     id: "9cb2cc08-e033-4200-86a7-95a03ba09462",
     createdAt: "2018-06-08T08:57:47.198Z",
@@ -45,7 +45,7 @@ LongCategoryName.args = {
 
 export const NoDecorationOverlay = Template.bind({});
 NoDecorationOverlay.args = {
-  rewardData: {
+  configuration: {
     allowDecorationOverlay: false,
     id: "9cb2cc08-e033-4200-86a7-95a03ba09462",
     createdAt: "2018-06-08T08:57:47.198Z",

diff --git a/lib/components/organisms/RewardCategoryTile/index.tsx b/lib/components/organisms/RewardCategoryTile/index.tsx
@@ -11,7 +11,7 @@ import {
 } from "react-native";
 
 type RewardCategoryTileProps = {
-  rewardData: {
+  configuration: {
     allowDecorationOverlay: boolean;
     id: string;
     createdAt: string;
@@ -25,10 +25,10 @@ type RewardCategoryTileProps = {
 };
 
 const RewardCategoryTile: React.FC<RewardCategoryTileProps> = ({
-  rewardData,
+  configuration,
 }) => {
   const { theme } = useTheme();
-  const { allowDecorationOverlay } = rewardData;
+  const { allowDecorationOverlay, name, pictureUrl } = configuration;
 
   // TODO: Add logic to fetch the reward data from the API at the moment just using fake data to style components
 
@@ -49,12 +49,12 @@ const RewardCategoryTile: React.FC<RewardCategoryTileProps> = ({
             ellipsizeMode="tail"
             numberOfLines={1}
           >
-            {rewardData.name}
+            {name}
           </Text>
         </View>
       )}
       <Image
-        source={{ uri: rewardData.pictureUrl }}
+        source={{ uri: pictureUrl }}
         style={styles.image}
         resizeMode="cover"
         onError={(error) => console.error("Image loading error:", error)}

diff --git a/lib/components/organisms/RewardTile/index.tsx b/lib/components/organisms/RewardTile/index.tsx
@@ -1,11 +1,12 @@
+import { RewardTileConfig } from "@/types/tile";
 import React from "react";
 import { View } from "react-native";
 
 type RewardTileProps = {
-  // Define your props here
+  configuration: RewardTileConfig;
 };
 
-const RewardTile: React.FC<RewardTileProps> = () => {
+const RewardTile: React.FC<RewardTileProps> = ({ configuration }) => {
   return <View>{/* Your component code here */}</View>;
 };
 

diff --git a/lib/components/organisms/TierTile/index.tsx b/lib/components/organisms/TierTile/index.tsx
@@ -1,18 +1,20 @@
 import { Text } from "@/components/atoms";
 import { ProgressIndicator } from "@/components/molecules";
 import { useTheme } from "@/context/ThemeContext";
-import { Tile } from "@/types/tile";
+import { TierTileConfig } from "@/types/tile";
 import { useResponsiveScale } from "@/utils/responsiveScaling";
 import { sizes } from "@/utils/styling";
 import React from "react";
 import { View } from "react-native";
+type TierTileProps = {
+  configuration: TierTileConfig;
+};
 
-const TierTile = (tile: Tile) => {
+const TierTile: React.FC<TierTileProps> = ({ configuration }) => {
   const { ms } = useResponsiveScale();
 
-  if (!tile) return null;
+  if (!configuration) return null;
   const { theme } = useTheme();
-  const { tileHeight, configuration } = tile;
 
   const tierData = {
     name: "Gold",