Release v0.4.25

RELEASE.md

@@ -1,16 +1,19 @@
-> v0.4.24 ~ "Extensions can add columns, actions and buttons to storefront tables and panels"
+> v0.4.25 ~ "Verified reviews, order chat with the driver, richer public promotions and faster store listings"
 
 ---
 ## Highlights
 
-- **Resource view registries.** Extensions can add the following through `storefront:<resource>:table:<slot>` and `storefront:<resource>:details:<slot>`:
-  - columns, row actions, bulk actions and toolbar buttons on the orders, customers, promotions, campaigns, segments and network tables;
-  - buttons and menu items on the order and customer panels.
-- **Orders use the standard table layout.**
+- **Verified-purchase reviews.** Reviews can be tied to a delivered order and are marked verified. A new eligibility endpoint tells the app whether a customer can review a store, and customers can delete their own reviews. Reviewer email and phone are no longer exposed publicly; public reviews show a short name such as "Ada B.".
+- **Chat with the driver.** Customers can chat with the driver delivering their order: get the chat, page through messages, send text and photos, and mark messages read. New messages are broadcast on the chat's `chat.{id}` channel.
+- **Public promotions.** Public promotion payloads now include the owning store, the shareable code, availability and the next start time.
+- **Product options.** Public product payloads now include each add-on category's `is_required` and `max_selectable`.
+- **Faster store listings.** Network and Console store listings are quicker.
+- **Private review photos.** Review photos upload without a public ACL, so private buckets work.
 
 ---
 ## Upgrading
-Needs fleetbase/ember-core v0.3.25 and fleetbase/ember-ui v0.4.5.
+- Run migrations. This release adds an index on `reviews.subject_uuid` and an `order_uuid` column on `reviews`.
+- Order chat needs storefront socket authentication and fleetbase/core-api v1.6.69 or later.
 
 ---
 ## Need help?

addon/components/modals/assign-driver.hbs

@@ -16,6 +16,7 @@
                 <InputGroup class="mt-4" @name={{t "storefront.component.modals.assign-driver.message-driver"}}>
                     <ModelSelect
                         @modelName="driver"
+                        @selectedItemComponent={{component "select-option/driver" compact=true}}
                         @selectedModel={{@options.order.driver_assigned}}
                         @placeholder={{t "storefront.component.modals.assign-driver.placeholder-driver"}}
                         @triggerClass="form-select form-input w-full"
@@ -24,7 +25,7 @@
                         @onChange={{fn (mut @options.order.driver_assigned)}}
                         as |model|
                     >
-                        {{model.name}}
+                        <SelectOption::Driver @option={{model}} />
                     </ModelSelect>
                 </InputGroup>
             </div>

addon/components/modals/create-food-truck.hbs

@@ -3,6 +3,7 @@
         <InputGroup @name="Assign Food Truck Vehicle">
             <ModelSelect
                 @modelName="vehicle"
+                @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                 @selectedModel={{@options.foodTruck.vehicle}}
                 @placeholder="Assign Food Truck Vehicle"
                 @triggerClass="form-select form-input"
@@ -11,15 +12,7 @@
                 @onChange={{fn (mut @options.foodTruck.vehicle)}}
                 as |model|
             >
-                <div class="flex flex-row">
-                    <div class="mr-2">
-                        <Image src={{model.photo_url}} class="w-10 h-10 rounded-md shadow-sm" />
-                    </div>
-                    <div class="flex flex-col flex-1">
-                        <div class="font-semibold">{{model.display_name}}</div>
-                        <div>{{model.plate_number}}</div>
-                    </div>
-                </div>
+                <SelectOption::Vehicle @option={{model}} />
             </ModelSelect>
         </InputGroup>
         <InputGroup @name="Service Area">

addon/components/modals/create-network-category.hbs

@@ -12,7 +12,7 @@
                 @onChange={{@options.setParentCategory}}
                 as |model|
             >
-                {{model.name}}
+                <SelectOption::Category @option={{model}} />
             </ModelSelect>
         </InputGroup>
         <InputGroup

addon/components/modals/import-products.hbs

@@ -106,7 +106,7 @@
                             @onChange={{fn (mut @options.selectedCategory)}}
                             as |model|
                         >
-                            {{model.name}}
+                            <SelectOption::Category @option={{model}} />
                         </ModelSelect>
                     </InputGroup>
                 </div>

addon/components/modals/incoming-order.hbs

@@ -34,16 +34,7 @@
                                 <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-order.assigned"}}</h5>
                                 <div class="flex flex-col space-y-4">
                                     {{#if @options.order.driver_assigned.id}}
-                                        <div class="flex items-center">
-                                            <Image src={{@options.order.driver_assigned.photoUrl}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{@options.order.driver_assigned.name}} />
-                                            <div>
-                                                <h5 class="font-semibold dark:text-white text-xs">{{n-a @options.order.driver_assigned.displayName}}</h5>
-                                                <div class="font-semibold dark:text-gray-100 text-xs">{{n-a
-                                                        @options.order.driver_assigned.phone
-                                                        (t "storefront.component.modals.incoming-order.no-phone")
-                                                    }}</div>
-                                            </div>
-                                        </div>
+                                        <Driver::Pill @driver={{@options.order.driver_assigned}} />
                                     {{else}}
                                         <div>
                                             <h5 class="text-red-500 text-sm">{{t "storefront.component.modals.incoming-order.not-assigned"}}</h5>
@@ -72,16 +63,9 @@
                         <div class="bg-gray-100 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-md px-4 py-2 space-y-2 h-full">
                             <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.customer"}}</h5>
                             <div class="">
-                                <div class="flex flex-row">
-                                    <div>
-                                        <Image src={{avatar-url @options.order.customer.photo_url}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{@options.order.customer.name}} />
-                                    </div>
-                                    <div>
-                                        <div class="text-xs font-bold dark:text-gray-100">{{@options.order.customer.name}}</div>
-                                        <div class="text-xs dark:text-gray-100">{{@options.order.customer.email}}</div>
-                                        <div class="text-xs dark:text-gray-100">{{@options.order.customer.phone}}</div>
-                                    </div>
-                                </div>
+                                <Customer::Pill @customer={{@options.order.customer}} @static={{not @options.order.customer.id}} />
+                                <div class="text-xs dark:text-gray-100 mt-1">{{n-a @options.order.customer.email}}</div>
+                                <div class="text-xs dark:text-gray-100">{{n-a @options.order.customer.phone}}</div>
                                 {{#unless @options.order.meta.is_pickup}}
                                     <div class="mt-2">
                                         <h5 class="dark:text-gray-100 font-semibold text-xs truncate">{{t "storefront.component.modals.incoming-order.address"}}</h5>

addon/components/modals/order-ready-assign-driver.hbs

@@ -29,6 +29,7 @@
                     <InputGroup class="mt-4" @name={{t "storefront.component.modals.order-ready-assign-driver.select-driver"}}>
                         <ModelSelect
                             @modelName="driver"
+                            @selectedItemComponent={{component "select-option/driver" compact=true}}
                             @selectedModel={{@options.driver}}
                             @placeholder={{t "storefront.component.modals.order-ready-assign-driver.select-driver-to-assign"}}
                             @triggerClass="form-select form-input"
@@ -37,7 +38,7 @@
                             @onChange={{fn (mut @options.driver)}}
                             as |model|
                         >
-                            {{model.name}}
+                            <SelectOption::Driver @option={{model}} />
                         </ModelSelect>
                     </InputGroup>
                 {{/unless}}

addon/components/storefront/order/details/commerce-summary.hbs

@@ -56,6 +56,17 @@
             {{#unless @resource.meta.is_pickup}}
                 <div><span>Delivery fee</span><strong>{{format-currency @resource.meta.delivery_fee @resource.meta.currency}}</strong></div>
             {{/unless}}
+            {{#each this.promotions as |promotion|}}
+                <div class="text-green-600 dark:text-green-400">
+                    <span>
+                        <FaIcon @icon={{if promotion.isFreeDelivery "truck-fast" "tag"}} @size="xs" class="mr-1" />{{promotion.name}}{{#if promotion.code}} · <code>{{promotion.code}}</code>{{/if}}
+                    </span>
+                    <strong>-{{format-currency promotion.amount @resource.meta.currency}}</strong>
+                </div>
+            {{/each}}
+            {{#if this.unattributedDiscount}}
+                <div class="text-green-600 dark:text-green-400"><span>Discount</span><strong>-{{format-currency this.unattributedDiscount @resource.meta.currency}}</strong></div>
+            {{/if}}
             {{#if @resource.meta.tip}}
                 <div><span>Tip</span><strong>{{get-tip-amount @resource.meta.tip @resource.meta.subtotal @resource.meta.currency}}</strong></div>
             {{/if}}

addon/components/storefront/order/details/commerce-summary.js

@@ -1,3 +1,25 @@
 import Component from '@glimmer/component';
 
-export default class StorefrontOrderDetailsCommerceSummaryComponent extends Component {}
+export default class StorefrontOrderDetailsCommerceSummaryComponent extends Component {
+    /** Each promotion applied at checkout, with what it took off the order (items and delivery). */
+    get promotions() {
+        const promotions = this.args.resource?.meta?.promotions;
+        if (!Array.isArray(promotions)) {
+            return [];
+        }
+
+        return promotions.map((promotion) => ({
+            name: promotion.name || promotion.code || 'Promotion',
+            code: promotion.code,
+            isFreeDelivery: promotion.type === 'free_delivery',
+            amount: (Number(promotion.amount) || 0) + (Number(promotion.delivery_amount) || 0),
+        }));
+    }
+
+    /** The order's discount when no promotion breakdown was recorded. */
+    get unattributedDiscount() {
+        const discount = Number(this.args.resource?.meta?.discount) || 0;
+
+        return this.promotions.length === 0 && discount > 0 ? discount : 0;
+    }
+}

addon/components/storefront/order/details/customer.hbs

@@ -1,17 +1,9 @@
 <ContentPanel @title="Customer" @open={{true}} @isLoading={{@isLoading}} @wrapperClass="bordered-top" ...attributes>
     <div class="storefront-order-customer">
-        <div class="storefront-order-person">
-            <Image
-                src={{avatar-url @resource.customer.photo_url}}
-                @fallbackSrc={{config "defaultValues.contactImage"}}
-                class="storefront-order-person__avatar"
-                alt={{@resource.customer.name}}
-            />
-            <div class="min-w-0">
-                <div class="storefront-order-person__name">{{n-a @resource.customer.name "No customer"}}</div>
-                <div class="storefront-order-person__meta">{{n-a @resource.customer.email "No email"}}</div>
-                <div class="storefront-order-person__meta">{{n-a @resource.customer.phone "No phone"}}</div>
-            </div>
+        <Customer::Pill @customer={{@resource.customer}} @titleFallback="No customer" @static={{not @resource.customer.id}} data-test-order-customer-pill />
+        <div class="storefront-order-facts mt-2">
+            <div><span>Email</span><strong>{{n-a @resource.customer.email "No email"}}</strong></div>
+            <div><span>Phone</span><strong>{{n-a @resource.customer.phone "No phone"}}</strong></div>
         </div>
 
         {{#unless @resource.meta.is_pickup}}

addon/components/storefront/order/details/detail.hbs

@@ -3,27 +3,13 @@
         <div class="field-info-container">
             <div class="field-name">Customer</div>
             <div class="field-value">
-                <div class="storefront-order-person storefront-order-person--compact">
-                    <Image src={{avatar-url @resource.customer.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} class="storefront-order-person__avatar" alt={{@resource.customer.name}} />
-                    <div class="min-w-0">
-                        <div class="storefront-order-person__name {{unless @resource.customer "text-gray-300"}}">{{n-a @resource.customer.name "No customer"}}</div>
-                        <div class="storefront-order-person__meta">{{n-a (or @resource.customer.phone @resource.customer.email) "No contact details"}}</div>
-                    </div>
-                </div>
+                <Customer::Pill @customer={{@resource.customer}} @titleFallback="No customer" @static={{not @resource.customer.id}} data-test-order-customer-pill />
             </div>
         </div>
         <div class="field-info-container">
             <div class="field-name">Driver</div>
             <div class="field-value">
-                <div class="storefront-order-person storefront-order-person--compact">
-                    <Image src={{avatar-url @resource.driver_assigned.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} class="storefront-order-person__avatar" alt={{@resource.driver_assigned.name}} />
-                    <div class="min-w-0">
-                        <div class="storefront-order-person__name {{unless @resource.driver_assigned "text-gray-300"}}">
-                            {{n-a (or @resource.driver_assigned.displayName @resource.driver_assigned.name) "No driver assigned"}}
-                        </div>
-                        <div class="storefront-order-person__meta">{{n-a @resource.driver_assigned.phone "No phone"}}</div>
-                    </div>
-                </div>
+                <Driver::Pill @driver={{@resource.driver_assigned}} @titleFallback="No driver assigned" @static={{not @resource.driver_assigned.id}} data-test-order-driver-pill />
             </div>
         </div>
     </div>

addon/components/storefront/order/details/fulfillment.hbs

@@ -3,18 +3,7 @@
         <div class="storefront-order-card-grid">
             <div class="storefront-order-detail-card">
                 <div class="storefront-order-detail-card__label">Driver</div>
-                <div class="storefront-order-person storefront-order-person--compact">
-                    <Image
-                        src={{avatar-url @resource.driver_assigned.photo_url}}
-                        @fallbackSrc={{config "defaultValues.driverImage"}}
-                        class="storefront-order-person__avatar"
-                        alt={{@resource.driver_assigned.name}}
-                    />
-                    <div class="min-w-0">
-                        <div class="storefront-order-person__name">{{n-a (or @resource.driver_assigned.displayName @resource.driver_assigned.name) "No driver assigned"}}</div>
-                        <div class="storefront-order-person__meta">{{n-a @resource.driver_assigned.phone "No phone"}}</div>
-                    </div>
-                </div>
+                <Driver::Pill @driver={{@resource.driver_assigned}} @titleFallback="No driver assigned" @static={{not @resource.driver_assigned.id}} data-test-order-driver-pill />
             </div>
             <div class="storefront-order-detail-card">
                 <div class="storefront-order-detail-card__label">Schedule</div>

addon/components/widget/customers.hbs

@@ -15,10 +15,8 @@
             {{#each this.customers as |customer|}}
                 <article class="storefront-customer-card storefront-animate-card">
                     <div class="flex items-center gap-3">
-                        <Image src={{avatar-url customer.photo_url}} class="storefront-customer-avatar" alt={{customer.name}} />
                         <div class="min-w-0 flex-1">
-                            <a href="javascript:;" {{on "click" (fn this.viewCustomer customer)}} class="storefront-customer-name">{{n-a customer.name}}</a>
-                            <div class="storefront-table-muted">{{customer.public_id}}</div>
+                            <Customer::Pill @customer={{customer}} @subtitle={{customer.public_id}} @onClick={{fn this.viewCustomer customer}} />
                         </div>
                         <div class="storefront-customer-order-count">{{n-a customer.orders 0}}</div>
                     </div>
@@ -32,7 +30,7 @@
             {{/each}}
         </div>
     {{else}}
-        <div class="storefront-customers-table-wrap {{if (not this.customer) 'empty-state'}}">
+        <div class="storefront-customers-table-wrap {{unless this.customer 'empty-state'}}">
             <table class="storefront-customers-table">
                 <thead>
                     <tr>
@@ -48,10 +46,7 @@
                         <tr class="storefront-animate-row">
                             <td><a href="javascript:;" {{on "click" (fn this.viewCustomer customer)}} class="storefront-customer-id">{{customer.public_id}}</a></td>
                             <td>
-                                <div class="storefront-customer-cell">
-                                    <Image src={{avatar-url customer.photo_url}} class="storefront-customer-avatar" alt={{customer.name}} />
-                                    <span class="storefront-table-text">{{n-a customer.name}}</span>
-                                </div>
+                                <Customer::Pill @customer={{customer}} @onClick={{fn this.viewCustomer customer}} />
                             </td>
                             <td><span class="storefront-table-text">{{n-a customer.phone}}</span></td>
                             <td><span class="storefront-table-text">{{n-a customer.email}}</span></td>