Customisation: Toggle product description from the product info panel (…

…#212)
RevenueCat · Oct 15, 2024 · 6f0c45b · 6f0c45b
1 parent d92becc
commit 6f0c45b
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 40 deletions.
diff --git a/src/stories/fixtures.ts b/src/stories/fixtures.ts
@@ -29,7 +29,9 @@ export const subscriptionOption: SubscriptionOption = {
 export const product: Product = {
   identifier: "some_product_123",
   displayName: "Some Product 123",
-  description: "a very nice product",
+  description:
+    "This is a long description of the product which is long. " +
+    "It is long indeed so that it spans multiple lines.",
 
   title: "Some Product 123",
   productType: ProductType.Subscription,
@@ -84,5 +86,4 @@ export const colorfulBrandingAppearance = {
   color_product_info_bg: "#ffffff",
   color_buttons_primary: "#AC7DE3",
   color_accent: "#99BB37",
-  show_product_description: true,
 };
diff --git a/src/stories/state-present-offer.stories.svelte b/src/stories/state-present-offer.stories.svelte
@@ -60,5 +60,15 @@
 <Story name='Sandbox'
        args={{ ...defaultArgs,  sandbox: true, brandingAppearance:{} }} />
 
+
+<Story name='WithProductDescription'
+       args={{ ...defaultArgs,  brandingAppearance:{show_product_description:true}  }} />
+
+<Story name='WithProductDescriptionInverted'
+       args={{ ...defaultArgs,  brandingAppearance:{color_product_info_bg: "#ffffff",show_product_description:true}  }} />
+
+<Story name='WithProductDescriptionNullDescription'
+       args={{ ...defaultArgs, productDetails:{...product, description:null},  brandingAppearance:{color_product_info_bg: "#ffffff",show_product_description:true}  }} />
+
 <Story name='ColorfulRectangle'
        args={{ ...defaultArgs,  brandingAppearance:colorfulBrandingAppearance }} />
diff --git a/src/ui/rcb-ui.svelte b/src/ui/rcb-ui.svelte
@@ -205,6 +205,7 @@
           {#if productDetails && purchaseOptionToUse}
             <StatePresentOffer
               {productDetails}
+              brandingAppearance={brandingInfo?.appearance}
               purchaseOption={purchaseOptionToUse}
             />
           {/if}

diff --git a/src/ui/states/state-present-offer.svelte b/src/ui/states/state-present-offer.svelte
@@ -1,59 +1,67 @@
 <script lang="ts">
-    import ModalSection from "../modal-section.svelte";
-    import { getRenewsLabel, getTrialsLabel } from "../../helpers/price-labels";
-    import {
-        type NonSubscriptionOption,
-        type Product,
-        ProductType,
-        type PurchaseOption,
-        type SubscriptionOption,
-    } from "../../entities/offerings";
+  import ModalSection from "../modal-section.svelte";
+  import { getRenewsLabel, getTrialsLabel } from "../../helpers/price-labels";
+  import {
+    type NonSubscriptionOption,
+    type Product,
+    ProductType,
+    type PurchaseOption,
+    type SubscriptionOption,
+  } from "../../entities/offerings";
+  import { type BrandingAppearance } from "../../networking/responses/branding-response";
 
-    export let productDetails: Product;
-    export let purchaseOption: PurchaseOption;
+  export let productDetails: Product;
+  export let purchaseOption: PurchaseOption;
+  export let brandingAppearance: BrandingAppearance | undefined = undefined;
+  const isSubscription = productDetails.productType === ProductType.Subscription;
+  const subscriptionOption: SubscriptionOption | null | undefined =
+    purchaseOption as SubscriptionOption;
+  const nonSubscriptionOption: NonSubscriptionOption | null | undefined =
+    purchaseOption as NonSubscriptionOption;
+  const subscriptionTrial = subscriptionOption?.trial;
 
-    const isSubscription = productDetails.productType === ProductType.Subscription;
-    const subscriptionOption: SubscriptionOption | null | undefined =
-      purchaseOption as SubscriptionOption;
-    const nonSubscriptionOption: NonSubscriptionOption | null | undefined =
-      purchaseOption as NonSubscriptionOption;
-    const subscriptionTrial = subscriptionOption?.trial;
-
-    const subscriptionBasePrice = subscriptionOption?.base?.price;
-    const nonSubscriptionBasePrice = nonSubscriptionOption?.basePrice;
+  const subscriptionBasePrice = subscriptionOption?.base?.price;
+  const nonSubscriptionBasePrice = nonSubscriptionOption?.basePrice;
 </script>
 
 <ModalSection>
-    <div class="rcb-pricing-info">
-        <span>{productDetails.title}</span>
+  <div class="rcb-pricing-info">
+    <span class="rc-product-title">{productDetails.title}</span>
 
-        {#if isSubscription}
+    {#if isSubscription}
             <span class="rcb-product-price">
                 {#if subscriptionTrial?.periodDuration}
                     {getTrialsLabel(subscriptionTrial.periodDuration)} free trial
                 {/if}
-                {#if !subscriptionTrial?.periodDuration && subscriptionBasePrice }
+              {#if !subscriptionTrial?.periodDuration && subscriptionBasePrice }
                     {subscriptionBasePrice.formattedPrice}
                 {/if}
             </span>
-            {#if (subscriptionTrial && subscriptionBasePrice)}
+      {#if (subscriptionTrial && subscriptionBasePrice)}
                 <span class="rcb-product-price-after-trial">
                     {subscriptionTrial && subscriptionBasePrice && `${
                       subscriptionBasePrice.formattedPrice} after end of trial`}
                 </span>
-            {/if}
-            <ul class="rcb-product-details">
-                {#if productDetails.normalPeriodDuration}
-                    <li>Renews {getRenewsLabel(productDetails.normalPeriodDuration)}</li>
-                {/if}
-                <li>Continues until canceled</li>
-                <li>Cancel anytime</li>
-            </ul>
+      {/if}
+      {#if brandingAppearance?.show_product_description && productDetails.description}
+        <span class="rcb-product-description">{productDetails.description}</span>
+      {/if}
+      <ul class="rcb-product-details">
+        {#if productDetails.normalPeriodDuration}
+          <li>Renews {getRenewsLabel(productDetails.normalPeriodDuration)}</li>
         {/if}
-        {#if !isSubscription}
-            <span class="rcb-product-price">{nonSubscriptionBasePrice?.formattedPrice}</span>
-        {/if}
-    </div>
+        <li>Continues until canceled</li>
+        <li>Cancel anytime</li>
+      </ul>
+    {/if}
+    {#if !isSubscription}
+      <span class="rcb-product-price">{nonSubscriptionBasePrice?.formattedPrice}</span>
+      {#if brandingAppearance?.show_product_description}
+        <span class="rcb-product-description">{productDetails.description}</span>
+      {/if}
+    {/if}
+
+  </div>
 </ModalSection>
 
 <style>
@@ -64,17 +72,27 @@
         font-weight: 500;
     }
 
+    .rcb-product-title {
+        color: var(--rc-color-grey-text-dark);
+    }
+
     .rcb-product-price {
+        color: var(--rc-color-grey-text-dark);
         font-size: 24px;
         margin: 12px 0px;
     }
 
+    .rcb-product-description {
+        color: var(--rc-color-grey-text-dark);
+        margin: 0 0 12px 0;
+    }
+
     .rcb-product-price-after-trial {
         margin-bottom: 12px;
     }
 
     .rcb-product-details {
-        opacity: 0.6;
+        color: var(--rc-color-grey-text-light);
         list-style-type: disc;
         list-style-position: inside;
         margin: 0px;