✨ Mobile | Add AI Powered ribbon on Earn page (#1086)

* Add ribbon * Update bindings * Adjust layout
SSWConsulting · Oct 15, 2024 · c6d86a4 · c6d86a4
1 parent 592386e
commit c6d86a4
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 97 deletions.
diff --git a/src/MobileUI/Controls/CarouselItem.xaml b/src/MobileUI/Controls/CarouselItem.xaml
@@ -3,6 +3,7 @@
 <Border xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:controls="clr-namespace:SSW.Rewards.Mobile.Controls"
+        xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
         x:Class="SSW.Rewards.Mobile.Controls.CarouselItem"
         x:Name="this"
         StrokeThickness="0"
@@ -12,12 +13,9 @@
             Command="{Binding ButtonClickedCommand, Source={x:Reference this}}"
             CommandParameter="{Binding ItemId, Source={x:Reference this}}" />
     </Border.GestureRecognizers>
-    <Grid HeightRequest="400">
+    <Grid RowDefinitions="*">
         <Image Grid.Row="0"
                Source="{Binding CarouselImage, Source={x:Reference this}}"
-               HorizontalOptions="Center"
-               VerticalOptions="Center"
-               HeightRequest="400"
                Aspect="AspectFill" />
         <Grid Grid.Row="0"
               RowDefinitions="Auto"
@@ -40,5 +38,28 @@
                 </Grid>
             </Border>
         </Grid>
+
+        <Grid Grid.Row="0"
+              IsVisible="{Binding RibbonText, Source={x:Reference this}, Converter={toolkit:IsStringNotNullOrEmptyConverter}}"
+              HorizontalOptions="End"
+              VerticalOptions="Start">
+            <Path x:Name="TrianglePath" StrokeThickness="0"
+                  Fill="{StaticResource SSWRed}">
+                <Path.Data>
+                    <PathGeometry Figures="M 0,0 L 40,0 L 100,60 L 100,100 Z"/>
+                </Path.Data>
+            </Path>
+
+            <Label HorizontalOptions="Center"
+                   VerticalOptions="Center"
+                   Text="{Binding RibbonText, Source={x:Reference this}}"
+                   TextColor="White"
+                   Style="{StaticResource LabelBold}"
+                   FontAutoScalingEnabled="False"
+                   FontSize="12"
+                   Rotation="45"
+                   TranslationX="10"
+                   TranslationY="-10"/>
+        </Grid>
     </Grid>
 </Border>
diff --git a/src/MobileUI/Controls/CarouselItem.xaml.cs b/src/MobileUI/Controls/CarouselItem.xaml.cs
@@ -1,105 +1,33 @@
 using CommunityToolkit.Mvvm.Input;
+using Maui.BindableProperty.Generator.Core;
 
 namespace SSW.Rewards.Mobile.Controls;
 
 public partial class CarouselItem
 {
-    public string CarouselImage
-    {
-        get => (string)GetValue(CarouselImageProperty);
-        set => SetValue(CarouselImageProperty, value);
-    }
-
-    public static readonly BindableProperty CarouselImageProperty =
-        BindableProperty.Create(
-            nameof(CarouselImage),
-            typeof(string),
-            typeof(CarouselItem),
-            string.Empty
-        );
+    [AutoBindable]
+    private readonly string _carouselImage;
 
-    public string Description
-    {
-        get => (string)GetValue(DescriptionProperty);
-        set => SetValue(DescriptionProperty, value);
-    }
-
-    public static readonly BindableProperty DescriptionProperty =
-        BindableProperty.Create(
-            nameof(Description),
-            typeof(string),
-            typeof(CarouselItem),
-            string.Empty
-        );
+    [AutoBindable]
+    private readonly string _description;
 
-    public int Points
-    {
-        get => (int)GetValue(PointsProperty);
-        set => SetValue(PointsProperty, value);
-    }
-
-    public static readonly BindableProperty PointsProperty =
-        BindableProperty.Create(
-            nameof(Points),
-            typeof(int),
-            typeof(CarouselItem),
-            0
-        );
+    [AutoBindable]
+    private readonly int _points;
 
-    public string ButtonText
-    {
-        get => (string)GetValue(ButtonTextProperty);
-        set => SetValue(ButtonTextProperty, value);
-    }
-
-    public static readonly BindableProperty ButtonTextProperty =
-        BindableProperty.Create(
-            nameof(ButtonText),
-            typeof(string),
-            typeof(CarouselItem),
-            string.Empty
-        );
+    [AutoBindable]
+    private readonly string _buttonText;
 
-    public IAsyncRelayCommand ButtonCommand
-    {
-        get => (IAsyncRelayCommand)GetValue(ButtonCommandProperty);
-        set => SetValue(ButtonCommandProperty, value);
-    }
-
-    public static readonly BindableProperty ButtonCommandProperty =
-        BindableProperty.Create(
-            nameof(ButtonCommand),
-            typeof(IAsyncRelayCommand),
-            typeof(CarouselItem)
-        );
+    [AutoBindable]
+    private readonly IAsyncRelayCommand _buttonCommand;
 
-    public int ItemId
-    {
-        get => (int)GetValue(ItemIdProperty);
-        set => SetValue(ItemIdProperty, value);
-    }
-
-    public static readonly BindableProperty ItemIdProperty =
-        BindableProperty.Create(
-            nameof(ItemId),
-            typeof(int),
-            typeof(CarouselItem),
-            -1
-        );
+    [AutoBindable]
+    private readonly int _itemId;
 
-    public bool IsButtonDisabled
-    {
-        get => (bool)GetValue(IsButtonDisabledProperty);
-        set => SetValue(IsButtonDisabledProperty, value);
-    }
-
-    public static readonly BindableProperty IsButtonDisabledProperty =
-        BindableProperty.Create(
-            nameof(IsButtonDisabled),
-            typeof(bool),
-            typeof(CarouselItem),
-            false
-        );
+    [AutoBindable]
+    private readonly bool _isButtonDisabled;
+
+    [AutoBindable]
+    private readonly string _ribbonText;
 
     private object _cachedBindingContext;
 

diff --git a/src/MobileUI/Features/Quiz/QuizPage.xaml b/src/MobileUI/Features/Quiz/QuizPage.xaml
@@ -52,7 +52,8 @@
                                         ButtonText="GO"
                                         ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
                                         ItemId="{Binding Id}"
-                                        IsButtonDisabled="{Binding Passed}"/>
+                                        IsButtonDisabled="{Binding Passed}"
+                                        RibbonText="✨ AI Powered" />
                                 </DataTemplate>
                             </CarouselView.ItemTemplate>
                         </CarouselView>
@@ -63,7 +64,7 @@
                                        IndicatorSize="4.5"
                                        HorizontalOptions="Center"
                                        VerticalOptions="End"
-                                       Margin="0,0,0,25"
+                                       Margin="0,0,0,15"
                                        x:Name="QuizIndicator" />
                     </Grid>
                     <CollectionView

diff --git a/src/MobileUI/Features/Redeem/RedeemPage.xaml b/src/MobileUI/Features/Redeem/RedeemPage.xaml
@@ -117,7 +117,7 @@
                                                IndicatorSize="4.5"
                                                HorizontalOptions="Center"
                                                VerticalOptions="End"
-                                               Margin="0,0,0,25"
+                                               Margin="0,0,0,15"
                                                x:Name="QuizIndicator" />
                             </Grid>