spree_admin 5.0.0.rc1

data/app/assets/stylesheets/spree/admin/shared/_forms.scss

@@ -0,0 +1,184 @@
+.custom-checkbox .custom-control-label::before {
+  border-radius: 0.25rem !important;
+  border-color: $gray-200;
+}
+
+label {
+  font-weight: 500;
+  font-size: 100%;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.form-actions {
+  @extend .d-flex;
+  @extend .align-items-center;
+
+  .or {
+    @extend .px-3;
+  }
+}
+
+.form-text {
+  font-size: $font-size-sm;
+  margin-top: 0;
+}
+
+.form-control, .text-input, .trix-container, .ts-control, trix-toolbar .trix-dialog .trix-input, .custom-select, .input-group-text, .custom-file-label {
+  &:disabled, &[readonly] {
+    @extend .shadow-none;
+    @extend .text-muted;
+    background-color: $gray-50 !important;
+    border: 1px solid $gray-100 !important;
+    cursor: not-allowed;
+  }
+}
+
+.form-group {
+  .field_with_errors {
+    input {
+      @extend .is-invalid;
+    }
+  }
+  .formError {
+    @extend .invalid-feedback;
+    display: block;
+  }
+}
+
+input[type="file"] {
+  width: fit-content;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.custom-select, .ts-control {
+  background-color: $input-bg;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-size: 1.5em 1.5em !important;
+  background-position: right 0.5rem center !important;
+  background-repeat: no-repeat !important;
+  border-radius: $input-border-radius;
+  padding-right: 2.5rem;
+}
+.custom-select, .form-control, .ts-control {
+  &:hover:not(:focus):not(:active):not(.active):not(:focus-visible):not(:focus-within) {
+    border: 1px solid $gray-200;
+  }
+}
+
+.ts-control>input {
+  min-width: auto !important;
+}
+.ts-dropdown {
+  @extend .p-1;
+
+  .option {
+    @extend .p-2;
+    @extend .rounded-sm;
+  }
+
+  .ts-dropdown-content {
+    @extend .p-0;
+  }
+}
+.ts-wrapper.single .ts-control:after {
+  content: none;
+}
+.ts-wrapper.disabled {
+  @extend .disabled;
+  cursor: not-allowed !important;
+
+  &:hover:not(:focus) {
+    border: 0 none !important;
+  }
+}
+.ts-wrapper.disabled .ts-control {
+  @extend .disabled;
+  cursor: not-allowed !important;
+
+  &:hover:not(:focus) {
+    border: 1px solid transparent !important;
+  }
+}
+
+.ts-wrapper.plugin-remove_button .item .remove {
+  padding: 3px 6px;
+}
+
+// address form fixes
+#szipcode, #sstate, #scity, #bzipcode, #bstate, #bcity {
+  @extend .col-lg-4;
+  @extend .mb-0;
+}
+.has-float-label.mb-4 {
+  @extend .mb-3;
+}
+#scity, #bcity, #sstate, #bstate {
+  padding-right: 0;
+}
+
+
+.form-control-plaintext {
+  padding: $input-btn-padding-y $input-btn-padding-x;
+
+  &:focus {
+    @extend .shadow-none;
+    @extend .border-0;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+}
+
+.custom-control {
+  a {
+    color: $body-color;
+  }
+}
+
+.custom-control-label {
+  font-weight: $font-weight-base;
+}
+
+.form-control .ti-search {
+  opacity: 0.5;
+}
+
+
+.form-control-bare {
+  @extend .border-left-0;
+  @extend .border-right-0;
+  @extend .border-top-0;
+  @extend .rounded-0;
+  @extend .shadow-none;
+  @extend .border-bottom;
+  @extend .px-0;
+
+  &:hover, &:active, &:focus {
+    @extend .border-black;
+  }
+}
+
+.form-check-input {
+  margin-top: 0.2rem;
+}
+
+.custom-radio:hover {
+  color: unset;
+  text-decoration: unset;
+}
+
+
+turbo-frame.blur-busy[busy] {
+  opacity: 0.5;
+  transition: opacity 0.3s;
+  pointer-events: none;
+
+  * {
+    pointer-events: none;
+  }
+}

data/app/assets/stylesheets/spree/admin/views/_dashboard.scss

@@ -0,0 +1,34 @@
+.analytics-card-tab {
+  @extend .rounded;
+  @extend .cursor-pointer;
+  @extend .p-2;
+  @extend .h-100;
+
+  transition: background-color 0.2s ease-in-out;
+
+  &.active, &:hover {
+    background-color: $gray-25;
+  }
+}
+
+.store-preview-link {
+  transition: background-color 0.2s ease-in-out;
+
+  .store-preview-actions {
+    display: none;
+
+    .btn-outline-primary {
+      background-color: $white;
+
+      &:hover {
+        background-color: $primary;
+      }
+    }
+  }
+
+  &:hover {
+    .store-preview-actions {
+      display: flex;
+    }
+  }
+}

data/app/assets/stylesheets/spree/admin/views/_page_builder.scss

@@ -0,0 +1,237 @@
+#page-builder {
+  background-color: $gray-100;
+
+  #content {
+    margin-left: 0;
+  }
+
+  #main-part {
+    padding-bottom: 0;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    .embed-responsive {
+      min-height: 100vh;
+    }
+  }
+
+  .nav-pills {
+    border: 1px solid $gray-100;
+    border-radius: $border-radius;
+    background-color: $gray-50;
+    padding: 0.1rem;
+
+    .nav-link {
+      background-color: transparent;
+      padding: 0.25rem 0.5rem;
+      border-radius: $border-radius-sm;
+      border: 1px solid transparent;
+
+      &.active {
+        background-color: $white;
+        border: 1px solid $gray-100;
+      }
+    }
+  }
+}
+#page-builder-sidebar, #page-builder-header {
+  background-color: $body-bg;
+}
+
+#page-builder-header {
+  z-index: 1031;
+  border-bottom: 1px solid $gray-150;
+
+  nav {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.5rem;
+  }
+}
+#page-builder-sidebar {
+  width: 345px;
+  top: 43px;
+  left: 0px;
+  background-color: $body-bg;
+  border-right: 1px solid $gray-150;
+
+  .sidebar-header {
+    height: 48px;
+    padding: 0.5rem 1rem;
+    background-color: $gray-25;
+    border-bottom: 1px solid $gray-50;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    gap: 0.5rem;
+    position: sticky;
+    top: 0;
+    z-index: 1031;
+  }
+
+  .sidebar-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 345px;
+    padding: 0.5rem 1rem;
+    background-color: $gray-25;
+    border-top: 1px solid $gray-50;
+    z-index: 1031;
+  }
+}
+#page-builder-preview {
+  border-radius: $border-radius;
+  border: 1px solid $gray-300;
+  margin-top: 60px;
+}
+
+
+.sidebar-section-title,
+.sidebar-block-title {
+  &:hover,
+  &:focus {
+    color: theme-color('black') !important;
+    background-color: $gray-100 !important;
+    a {
+      text-decoration: none !important;
+    }
+    .btn-light {
+      visibility: visible;
+    }
+  }
+  .btn-light {
+    visibility: hidden;
+    background: transparent !important;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $gray-200 !important;
+    }
+  }
+}
+
+.sidebar-page-block {
+  margin-left: 25px;
+}
+
+.edit-block {
+  .trix-button--icon-heading-1,
+  .trix-button--icon-quote,
+  .trix-button--icon-decrease-nesting-level,
+  .trix-button--icon-increase-nesting-level,
+  .trix-button--icon-strike,
+  .trix-button-group--history-tools {
+    display: none !important;
+  }
+}
+
+.mobileLiveView {
+  #page-builder-preview {
+    width: 100%;
+    height: 100vh;
+    inset: 0 50%;
+    transform: translate(-50%, 0);
+    max-width: 375px;
+    min-width: 375px;
+    overflow: auto;
+  }
+}
+
+main#content {
+  padding-top: 0 !important;
+}
+
+.editor-add-section {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 999999;
+  opacity: 0;
+  padding: 0.6rem 1.3rem;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  #page-builder-preview {
+    border: 0px none !important;
+  }
+
+  .page-builder {
+    .sidebar {
+      opacity: 0;
+      pointer-events: none;
+      .right-sidebar,
+      .bottom-bar {
+        width: calc(100vw) !important;
+      }
+    }
+  }
+
+  .mobile_sidebar_open.page-builder .sidebar,
+  .editor-add-section {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .mobile_sidebar_open .editor-add-section {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+@media (min-width: 768px) {
+  #main-part {
+    margin-left: 339px;
+  }
+
+  .mobileLiveView {
+    #page-builder-preview {
+      width: 392px; // 375px + 17px scrollbar
+      max-width: 429px; // 412px + 17px scrollbar
+      height: calc(100vh - 100px);
+      max-height: 800px;
+    }
+  }
+}
+
+.page-builder .radio-buttons-header input ~ p {
+  font-size: 0.75rem;
+  border-radius: 0.22rem;
+  padding: 0.22rem 0.5rem;
+}
+
+.page-builder .radio-buttons-header {
+  justify-content: space-around;
+}
+
+.page-builder .radio-buttons-header input:checked ~ p {
+  color: theme-color('black') !important;
+  background-color: theme-color('active') !important;
+  border: 1px solid theme-color('primary') !important;
+}
+
+.checkered-background {
+  background-image: linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.1) 25%,
+      transparent 25%,
+      transparent 75%,
+      rgba(0, 0, 0, 0.1) 75%,
+      rgba(0, 0, 0, 0.1)
+    ),
+    linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.1) 25%,
+      transparent 25%,
+      transparent 75%,
+      rgba(0, 0, 0, 0.1) 75%,
+      rgba(0, 0, 0, 0.1)
+    );
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 10px;
+}

data/app/controllers/concerns/spree/admin/analytics_concern.rb

@@ -0,0 +1,51 @@
+module Spree
+  module Admin
+    module AnalyticsConcern
+      extend ActiveSupport::Concern
+
+      included do
+        helper_method :analytics_time_range, :same_day?
+      end
+
+      def set_analytics_defaults
+        params[:analytics_currency] ||= current_currency
+
+        params[:date_from] = if params[:date_from].present?
+                              params[:date_from].to_date&.in_time_zone(current_timezone)
+                            else
+                              1.month.ago.end_of_day.to_date.in_time_zone(current_timezone)
+                            end
+
+        params[:date_to] = if params[:date_to].present?
+                            params[:date_to].to_date&.in_time_zone(current_timezone)
+                          else
+                            Time.zone.now.beginning_of_day.to_date.in_time_zone(current_timezone)
+                          end
+      end
+
+      def analytics_time_range
+        @analytics_time_range ||= (params[:date_from].to_time.beginning_of_day)..(params[:date_to].to_time.end_of_day)
+      end
+
+      def previous_analytics_time_range
+        duration = analytics_time_range.last - analytics_time_range.first
+
+        @previous_analytics_time_range ||= analytics_time_range.first.ago(duration)..analytics_time_range.last.ago(duration).end_of_day
+      end
+
+      def same_day?
+        analytics_time_range.first.to_date == analytics_time_range.last.to_date
+      end
+
+      def calc_growth_rate(current_amount, previous_amount)
+        if previous_amount.zero? && current_amount.positive?
+          100
+        elsif current_amount.zero? && previous_amount.zero?
+          0
+        else
+          ((current_amount.to_f / previous_amount) * 100) - 100
+        end
+      end
+    end
+  end
+end

data/app/controllers/concerns/spree/admin/bulk_operations_concern.rb

@@ -0,0 +1,38 @@
+module Spree
+  module Admin
+    module BulkOperationsConcern
+      extend ActiveSupport::Concern
+
+      def bulk_add_tags
+        Spree::Tags::BulkAdd.call(tag_names: params[:tags], records: bulk_collection)
+
+        handle_bulk_operation_response
+      end
+
+      def bulk_remove_tags
+        Spree::Tags::BulkRemove.call(tag_names: params[:tags], records: bulk_collection)
+
+        handle_bulk_operation_response
+      end
+
+      private
+
+      def handle_bulk_operation_response
+        respond_to do |format|
+          format.turbo_stream do
+            flash.now[:success] = flash_message_for(bulk_collection, :successfully_updated)
+            render partial: 'spree/admin/shared/close_bulk_modal'
+          end
+          format.html do
+            flash[:success] = flash_message_for(bulk_collection, :successfully_updated)
+            redirect_to request.referer
+          end
+        end
+      end
+
+      def bulk_collection
+        @bulk_collection ||= model_class.accessible_by(current_ability, :update).where(id: params[:ids])
+      end
+    end
+  end
+end

data/app/controllers/concerns/spree/admin/order_concern.rb

@@ -0,0 +1,24 @@
+module Spree
+  module Admin
+    module OrderConcern
+      extend ActiveSupport::Concern
+
+      included do
+        rescue_from ActiveRecord::RecordNotFound, with: :resource_not_found
+      end
+
+      protected
+
+      def load_order
+        @order = current_store.orders.find_by!(number: params[:order_id])
+        authorize! action, @order
+        @order
+      end
+
+      def resource_not_found
+        flash[:error] = flash_message_for(model_class.new, :not_found)
+        redirect_to spree.admin_orders_path
+      end
+    end
+  end
+end

data/app/controllers/concerns/spree/admin/page_builder_concern.rb

@@ -0,0 +1,44 @@
+module Spree
+  module Admin
+    module PageBuilderConcern
+      extend ActiveSupport::Concern
+
+      included do
+        before_action :set_variables
+      end
+
+      def set_variables
+        @theme_preview = current_store.theme_previews.find(session[:theme_preview_id]) if session[:theme_preview_id].present?
+        @theme = @theme_preview.parent if @theme_preview
+        if session[:page_preview_id].present?
+          @page_preview = @theme.page_previews.find_by(id: session[:page_preview_id]) ||
+                            current_store.page_previews.find(session[:page_preview_id])
+        end
+        @page = @page_preview.parent if @page_preview
+      end
+
+      def create_turbo_stream_enabled?
+        true
+      end
+
+      def update_turbo_stream_enabled?
+        true
+      end
+
+      def default_url_options
+        {
+          theme_preview_id: session[:theme_preview_id],
+          page_preview_id: session[:page_preview_id],
+        }
+      end
+
+      def location_after_save
+        collection_url
+      end
+
+      def collection_url
+        spree.edit_admin_theme_path(@theme, page_id: @page.id)
+      end
+    end
+  end
+end

data/app/controllers/spree/admin/action_text/video_embeds_controller.rb

@@ -0,0 +1,44 @@
+module Spree
+  module Admin
+    module ActionText
+      class VideoEmbedsController < BaseController
+        rescue_from ::OEmbed::Error, with: :video_embed_not_found
+
+        def create
+          oembed_response = oembed_cached_response(params[:url])
+
+          video_embed = ::ActionText::VideoEmbed.new(url: params[:url])
+          video_embed.raw_html = oembed_response.html
+          video_embed.thumbnail_url = oembed_response.thumbnail_url
+
+          if video_embed.save
+            content = render_to_string(
+              partial: 'action_text/video_embeds/thumbnail',
+              locals: { video_embed: video_embed },
+              formats: [:html]
+            )
+
+            render json: { sgid: video_embed.attachable_sgid, content: content }, status: :created
+          else
+            render json: { error: video_embed.errors.full_messages.to_sentence }, status: :unprocessable_entity
+          end
+        end
+
+        def destroy
+          ::ActionText::VideoEmbed.from_attachable_sgid(params[:id]).destroy
+        end
+
+        private
+
+        def video_embed_not_found
+          render json: { error: I18n.t('action_text.video_embed.not_found') }, status: :not_found
+        end
+
+        def oembed_cached_response(url)
+          raw_response = Rails.cache.fetch(['oembed', url]) { ::OEmbed::Providers.get(url).fields.to_json }
+          OEmbed::Response.create_for(raw_response, OEmbed::Providers::Youtube, url, 'json')
+        end
+      end
+    end
+  end
+end