Update checkout to use store theming settings and also store default location for it's address

Author: Claude

Directory.Packages.props

@@ -10,7 +10,7 @@
     <GlobalPackageReference Include="Umbraco.GitVersioning.Extensions" Version="0.2.0" />
   </ItemGroup>
   <ItemGroup>
-    <PackageVersion Include="Umbraco.Commerce.Cms.Startup" Version="[16.0.0, 16.999.999)" />
+    <PackageVersion Include="Umbraco.Commerce.Cms.Startup" Version="[16.1.0--preview.10, 16.999.999)" />
     <PackageVersion Include="Umbraco.Cms.Core" Version="[16.0.0, 16.999.999)" />
     <PackageVersion Include="Umbraco.Cms.Web.Website" Version="[16.0.0, 16.999.999)" />
   </ItemGroup>

src/Umbraco.Commerce.Checkout/Pipeline/Tasks/CreateUmbracoCommerceCheckoutDataTypesTask.cs

@@ -1,6 +1,5 @@
 using System;
 using System.Collections.Generic;
-using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
 using Microsoft.Extensions.Logging;
@@ -36,66 +35,6 @@ public CreateUmbracoCommerceCheckoutDataTypesTask(
 
         public override async Task<PipelineResult<InstallPipelineContext>> ExecuteAsync(PipelineArgs<InstallPipelineContext> args, CancellationToken cancellationToken)
         {
-            // Theme Color Picker
-            if (_propertyEditors.TryGet(Constants.PropertyEditors.Aliases.ColorPicker, out IDataEditor? colorPickerDataEditor))
-            {
-                IDataType? currentColorPicker = await _dataTypeService.GetAsync(UmbracoCommerceCheckoutConstants.DataTypes.Guids.ThemeColorPickerGuid);
-                if (currentColorPicker == null)
-                {
-                    DataType dataType = CreateDataType(colorPickerDataEditor, x =>
-                    {
-                        x.Key = UmbracoCommerceCheckoutConstants.DataTypes.Guids.ThemeColorPickerGuid;
-                        x.Name = "[Umbraco Commerce Checkout] Theme Color Picker";
-                        x.EditorUiAlias = "Umb.PropertyEditorUi.ColorPicker";
-                        x.DatabaseType = ValueStorageType.Nvarchar;
-                        x.ConfigurationData = colorPickerDataEditor
-                            .GetConfigurationEditor()
-                            .FromConfigurationObject(
-                                new ColorPickerConfiguration
-                                {
-                                    Items = UmbracoCommerceCheckoutConstants.ColorMap.Select((kvp, idx) => new ColorPickerConfiguration.ColorPickerItem
-                                    {
-                                        Label = kvp.Value,
-                                        Value = kvp.Key,
-                                    }).ToList(),
-                                    UseLabel = false,
-                                },
-                                _configurationEditorJsonSerializer);
-                    });
-
-                    Attempt<IDataType, DataTypeOperationStatus> createAttempt = await _dataTypeService.CreateAsync(dataType, Constants.Security.SuperUserKey);
-                    if (!createAttempt.Success)
-                    {
-                        _logger.LogError(createAttempt.Exception, "Create theme color picker attempt status {AttemptStatus}.", createAttempt.Status);
-                        return Fail(createAttempt.Exception);
-                    }
-                }
-                else
-                {
-                    currentColorPicker.EditorUiAlias = "Umb.PropertyEditorUi.ColorPicker"; // this field is added in cms v14
-                    currentColorPicker.ConfigurationData = colorPickerDataEditor
-                            .GetConfigurationEditor()
-                            .FromConfigurationObject(
-                                new ColorPickerConfiguration
-                                {
-                                    Items = UmbracoCommerceCheckoutConstants.ColorMap.Select((kvp, idx) => new ColorPickerConfiguration.ColorPickerItem
-                                    {
-                                        Label = kvp.Value,
-                                        Value = kvp.Key,
-                                    }).ToList(),
-                                    UseLabel = false,
-                                },
-                                _configurationEditorJsonSerializer);
-
-                    Attempt<IDataType, DataTypeOperationStatus> updateAttempt = await _dataTypeService.UpdateAsync(currentColorPicker, Constants.Security.SuperUserKey);
-                    if (!updateAttempt.Success)
-                    {
-                        _logger.LogError(updateAttempt.Exception, "Update theme color picker attempt status {AttemptStatus}.", updateAttempt.Status);
-                        return Fail(updateAttempt.Exception);
-                    }
-                }
-            }
-
             // Step Picker
             List<string> stepPickerItems = [
                 "Information",

src/Umbraco.Commerce.Checkout/Pipeline/Tasks/CreateUmbracoCommerceCheckoutDocumentTypesTask.cs

@@ -40,11 +40,8 @@ public override async Task<PipelineResult<InstallPipelineContext>> ExecuteAsync(
 
             // Setup lazy data types
             var textstringDataType = new Lazy<Task<IDataType?>>(() => _dataTypeService.GetAsync(Constants.DataTypes.Guids.TextstringGuid));
-            var textareaDataType = new Lazy<Task<IDataType?>>(() => _dataTypeService.GetAsync(Constants.DataTypes.Guids.TextareaGuid));
             var booleanDataType = new Lazy<Task<IDataType?>>(() => _dataTypeService.GetAsync(Constants.DataTypes.Guids.CheckboxGuid));
             var contentPickerDataType = new Lazy<Task<IDataType?>>(() => _dataTypeService.GetAsync(Constants.DataTypes.Guids.ContentPickerGuid));
-            var imagePickerDataType = new Lazy<Task<IDataType?>>(() => _dataTypeService.GetAsync(Constants.DataTypes.Guids.MediaPicker3SingleImageGuid));
-            var themeColorPickerDataType = new Lazy<Task<IDataType?>>(() => _dataTypeService.GetAsync(UmbracoCommerceCheckoutConstants.DataTypes.Guids.ThemeColorPickerGuid));
             var stepPickerDataType = new Lazy<Task<IDataType?>>(() => _dataTypeService.GetAsync(UmbracoCommerceCheckoutConstants.DataTypes.Guids.StepPickerGuid));
 
             // Checkout content type folder
@@ -151,32 +148,11 @@ public override async Task<PipelineResult<InstallPipelineContext>> ExecuteAsync(
 
             // Move to the dedicated folder
             _logger.LogInformation("Moving checkout step document types to the correct folder.");
-            _contentTypeService.MoveAsync(checkoutStepPageContentType.Key, checkoutContentTypeFolder!.Key);
+            await _contentTypeService.MoveAsync(checkoutStepPageContentType.Key, checkoutContentTypeFolder!.Key);
 
             // Checkout Page
             PropertyType[] checkoutPageProps =
             [
-                CreatePropertyType(await imagePickerDataType.Value, x =>
-                {
-                    x.Alias = "uccStoreLogo";
-                    x.Name = "Store Logo";
-                    x.Description = "A logo image for the store to appear at the top of the checkout screens and order emails.";
-                    x.SortOrder = 10;
-                }),
-                CreatePropertyType(await textstringDataType.Value, x =>
-                {
-                    x.Alias = "uccStoreAddress";
-                    x.Name = "Store Address";
-                    x.Description = "The address of the web store to appear in the footer of order emails.";
-                    x.SortOrder = 20;
-                }),
-                CreatePropertyType(await themeColorPickerDataType.Value, x =>
-                {
-                    x.Alias = "uccThemeColor";
-                    x.Name = "Theme Color";
-                    x.Description = "The theme color to use for colored elements of the checkout pages.";
-                    x.SortOrder = 30;
-                }),
                 CreatePropertyType(await booleanDataType.Value, x =>
                 {
                     x.Alias = "uccCollectShippingInfo";

src/Umbraco.Commerce.Checkout/UmbracoCommerceCheckoutConstants.cs

@@ -39,7 +39,9 @@ public static class DataTypes
         {
             public static class Guids
             {
+                [Obsolete("No longer used. Will be removed in v18.")]
                 public const string ThemeColorPicker = "46322397-3b7b-4d53-a5db-a1b17553d397";
+                [Obsolete("No longer used. Will be removed in v18.")]
                 public static readonly Guid ThemeColorPickerGuid = new Guid(ThemeColorPicker);
 
                 public const string StepPicker = "654a2147-2559-4b3f-93ee-a6925f45c173";

src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout/Partials/UmbracoCommerceCheckoutPrevNext.cshtml

@@ -3,17 +3,15 @@
     var backPage = Model.GetCheckoutBackPage();
     var prevStep = Model.GetPreviousStepPage();
     var nextStep = Model.GetNextStepPage();
-
-    string themeColor = Model.GetThemeColor();
 }
 <div class="flex flex-col-reverse items-center justify-between mt-8 md:flex-row">
     @if (prevStep != null)
     {
-        <div><a href="@(prevStep.Url())" class="inline-flex text-@(themeColor) hover:text-gray-900 hover:underline"><svg viewBox="0 0 20 20" class="inline-block w-5 h-5 fill-current"><use href="#ico-chevron-left" /></svg> @string.Format(Umbraco.GetDictionaryValueOrDefault("UmbracoCommerceCheckout.Navigation.ReturnTo", "Return to {0}"), prevStep.Name)</a></div>
+        <div><a href="@(prevStep.Url())" class="ucc-text-color inline-flex hover:text-gray-900 hover:underline"><svg viewBox="0 0 20 20" class="inline-block w-5 h-5 fill-current"><use href="#ico-chevron-left" /></svg> @string.Format(Umbraco.GetDictionaryValueOrDefault("UmbracoCommerceCheckout.Navigation.ReturnTo", "Return to {0}"), prevStep.Name)</a></div>
     }
     else if (backPage != null)
     {
-        <div><a href="@(backPage.Url())" class="inline-flex text-@(themeColor) hover:text-gray-900 hover:underline"><svg viewBox="0 0 20 20" class="inline-block w-5 h-5 fill-current"><use href="#ico-chevron-left" /></svg> @string.Format(Umbraco.GetDictionaryValueOrDefault("UmbracoCommerceCheckout.Navigation.ReturnTo", "Return to {0}"), backPage.Name)</a></div>
+        <div><a href="@(backPage.Url())" class="ucc-text-color inline-flex hover:text-gray-900 hover:underline"><svg viewBox="0 0 20 20" class="inline-block w-5 h-5 fill-current"><use href="#ico-chevron-left" /></svg> @string.Format(Umbraco.GetDictionaryValueOrDefault("UmbracoCommerceCheckout.Navigation.ReturnTo", "Return to {0}"), backPage.Name)</a></div>
     }
     else
     {
@@ -23,7 +21,7 @@
     {
         <div class="mb-4 w-full md:mb-0 md:w-auto">
             <button id="continue"
-                    class="bg-@(themeColor) text-white px-4 py-4 w-full rounded hover:bg-gray-900 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-300 disabled:hover:bg-gray-100 disabled:hover:text-gray-300"
+                    class="ucc-bg-color text-white px-4 py-4 w-full rounded hover:bg-gray-900 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-300 disabled:hover:bg-gray-100 disabled:hover:text-gray-300"
                     type="submit"
                     disabled>
                 @string.Format(Umbraco.GetDictionaryValueOrDefault("UmbracoCommerceCheckout.Navigation.ContinueTo", "Continue to {0}"), nextStep.Name)

src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout/Templates/Email/UmbracoCommerceCheckoutGiftCardEmail.cshtml

@@ -14,20 +14,35 @@
     }
 
     var uccStoreLogoUrl = checkoutPage.Value<IPublishedContent>("uccStoreLogo")?.Url();
+    if (string.IsNullOrWhiteSpace(uccStoreLogoUrl))
+    {
+        uccStoreLogoUrl = store.LogoImageUrl;
+    }
+
     var uccStoreTsAndCsUrl = checkoutPage.Value<IPublishedContent>("uccTermsAndConditionsPage")?.Url();
     var uccStorePrivacyPolicyUrl = checkoutPage.Value<IPublishedContent>("uccPrivacyPolicyPage")?.Url();
+
     var uccStoreAddress = checkoutPage.Value<string>("uccStoreAddress");
-    var uccThemeColor = checkoutPage.Value<string>("uccThemeColor", defaultValue: "000000");
+    if (string.IsNullOrWhiteSpace(uccStoreAddress) && store.DefaultLocationId.HasValue)
+    {
+        // If the store address is not set, we can try to get it from the default location
+        var location = await UmbracoCommerceApi.GetLocationAsync(store.DefaultLocationId.Value);
+        if (location != null)
+        {
+            uccStoreAddress = $"{location.AddressLine1}, {location.City}, {location.ZipCode}";
+        }
+    }
+
+    var uccThemeColor = checkoutPage.Value<string>("uccThemeColor", defaultValue: store.ThemeColor ?? "#000000");
 }
-<style type="text/css">
+<style>
     #ucc, #ucc td, #ucc p {
         font-family: sans-serif;
         font-size: 14px;
         line-height: 18px;
         color: #5f6a70;
     }
-
-        #ucc td {
+    #ucc td {
         vertical-align: top;
     }
 </style>
@@ -52,17 +67,17 @@
 
                                 <hr style="border: 0; height: 1px; background: #ebebe9; margin: 20px 0;" />
 
-                                <h2 style="margin: 0 0 20px; font-size: 20px; line-height: 28px; color: #@(uccThemeColor);">Here is your Gift Card for @(store.Name)</h2>
+                                <h2 style="margin: 0 0 20px; font-size: 20px; line-height: 28px; color: @(uccThemeColor);">Here is your Gift Card for @(store.Name)</h2>
 
-                                <table style="background-color: #@(uccThemeColor); border-radius: 10px; width: 400px; margin: 0 auto 20px;">
+                                <table style="background-color: @(uccThemeColor); border-radius: 10px; width: 400px; margin: 0 auto 20px;">
                                     <tr>
                                         <td style="padding: 40px 20px;">
                                             <table style="width: 100%;">
                                                 <tr>
                                                     <td style="color:white; font-size: 60px; line-height: 60px; padding-bottom: 15px;text-align: center;">@(await Model.OriginalAmount.FormattedAsync())</td>
                                                 </tr>
                                                 <tr>
-                                                    <td style="background-color:white; font-size: 20px; line-height: 20px; color: #@(uccThemeColor); text-align: center; padding: 5px 10px;">@(Model.Code)</td>
+                                                    <td style="background-color:white; font-size: 20px; line-height: 20px; color: @(uccThemeColor); text-align: center; padding: 5px 10px;">@(Model.Code)</td>
                                                 </tr>
                                             </table>
                                         </td>
@@ -77,7 +92,7 @@
 
                             <hr style="border: 0; height: 1px; background: #ebebe9; margin: 20px 0;" />
                             <p style="text-align: center;">
-                                <a href="@(BaseUrl + uccStoreTsAndCsUrl)" target="_blank" style="color: #@(uccThemeColor);">Terms of Service</a> | <a href="@(BaseUrl + uccStorePrivacyPolicyUrl)" target="_blank" style="color: #@(uccThemeColor);">Privacy Policy</a>
+                                <a href="@(BaseUrl + uccStoreTsAndCsUrl)" target="_blank" style="color: @(uccThemeColor);">Terms of Service</a> | <a href="@(BaseUrl + uccStorePrivacyPolicyUrl)" target="_blank" style="color: @(uccThemeColor);">Privacy Policy</a>
                             </p>
                             <p style="text-align: center; margin-bottom: 0;">@(store.Name), @(uccStoreAddress)</p>
 

src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout/Templates/Email/UmbracoCommerceCheckoutOrderConfirmationEmail.cshtml

@@ -32,10 +32,26 @@
     }
 
     var uccStoreLogoUrl = checkoutPage.Value<IPublishedContent>("uccStoreLogo")?.Url();
+    if (string.IsNullOrWhiteSpace(uccStoreLogoUrl))
+    {
+        uccStoreLogoUrl = store.LogoImageUrl;
+    }
+
     var uccStoreTsAndCsUrl = checkoutPage.Value<IPublishedContent>("uccTermsAndConditionsPage")?.Url();
     var uccStorePrivacyPolicyUrl = checkoutPage.Value<IPublishedContent>("uccPrivacyPolicyPage")?.Url();
+
     var uccStoreAddress = checkoutPage.Value<string>("uccStoreAddress");
-    var uccThemeColor = checkoutPage.Value<string>("uccThemeColor", defaultValue: "000000");
+    if (string.IsNullOrWhiteSpace(uccStoreAddress) && store.DefaultLocationId.HasValue)
+    {
+        // If the store address is not set, we can try to get it from the default location
+        var location = await UmbracoCommerceApi.GetLocationAsync(store.DefaultLocationId.Value);
+        if (location != null)
+        {
+            uccStoreAddress = $"{location.AddressLine1}, {location.City}, {location.ZipCode}";
+        }
+    }
+
+    var uccThemeColor = checkoutPage.Value<string>("uccThemeColor", defaultValue: store.ThemeColor ?? "#000000");
 }
 <style type="text/css">
     #ucc, #ucc td, #ucc p {
@@ -69,9 +85,9 @@
                                 }
 
                                 <hr style="border: 0; height: 1px; background: #ebebe9; margin: 20px 0;" />
-                                <h2 style="margin: 0 0 20px; font-size: 20px; line-height: 28px; color: #@(uccThemeColor);">Order Confirmation - #@(Model.OrderNumber)</h2>
+                                <h2 style="margin: 0 0 20px; font-size: 20px; line-height: 28px; color: @(uccThemeColor);">Order Confirmation - #@(Model.OrderNumber)</h2>
                                 <p>
-                                    Thank you for your order with <a href="@(BaseUrl)" target="_blank" style="color: #@(uccThemeColor);">@(store.Name)</a>, your order details can be found below.
+                                    Thank you for your order with <a href="@(BaseUrl)" target="_blank" style="color: @(uccThemeColor);">@(store.Name)</a>, your order details can be found below.
                                 </p>
                             </div>
 
@@ -324,10 +340,10 @@
                                 }
                                 <tr>
                                     <td style="vertical-align: top; padding-top: 20px;">
-                                        <strong style="color: #@(uccThemeColor);">Order Total</strong>
+                                        <strong style="color: @(uccThemeColor);">Order Total</strong>
                                     </td>
                                     <td style="vertical-align: top; padding-top: 20px; text-align: right; white-space: nowrap;">
-                                        <strong style="color: #@(uccThemeColor);">
+                                        <strong style="color: @(uccThemeColor);">
                                             @await Model.TotalPrice.Value.FormattedAsync()
                                         </strong>
                                     </td>
@@ -337,7 +353,7 @@
                             <p style="text-align: center;">
                                 @DateTime.Now.ToShortDateString()
                                 <br />
-                                <a href="@(BaseUrl + uccStoreTsAndCsUrl)" target="_blank" style="color: #@(uccThemeColor);">Terms of Service</a> | <a href="@(BaseUrl + uccStorePrivacyPolicyUrl)" target="_blank" style="color: #@(uccThemeColor);">Privacy Policy</a>
+                                <a href="@(BaseUrl + uccStoreTsAndCsUrl)" target="_blank" style="color: @(uccThemeColor);">Terms of Service</a> | <a href="@(BaseUrl + uccStorePrivacyPolicyUrl)" target="_blank" style="color: @(uccThemeColor);">Privacy Policy</a>
                             </p>
                             <p style="text-align: center; margin-bottom: 0;">@(store.Name), @(uccStoreAddress)</p>