🌸 Marketplace: Shopper adds Product to Cart through Menu (z…

…inc-collective#2072)

- zinc-collective#2153
- zinc-collective#1326


* 🌸 `Marketplace`: Distinguish the `Cart` from the `Menu`
- zinc-collective#2043
- zinc-collective#1326

While we definitely need a `Cart`; treating the `Cart` as the `Menu` is
a clunky ducky way of operating.

* 🧹 `Marketplace`: Drop the overly ambitious `Products#show` work

Getting the `Menu` to a good place is the more important move here; we
can add a `Products#show` endpoint 🔜 rather than :now:

* 🌸 `Marketplace`: Order `Products` in `Cart` by time added

I always forget that if you don't explicitely include an `order`
Postgresql will return things based upon... well, how it feels in the
moment.

This ensures the `Cart` always shows it's `Products` in the order they
were added to the `Cart`; so that they don't randomly swap around when
changing quantity.

* 🌸 `Marketplace`: `Product` on the `Menu` looks consistent with `Products#index`

The `Products#index` is really only available to a `Space` `Member` at
the moment; but it is what `People` adding `Products` to the
`Marketplace` see; so it makes sense that the `Menu` look the same

* 🌸 `Marketplace`: `Menu` has a prettier Add to Cart button

- zinc-collective#2153

The `Add to Cart` button is wide and looks nice!

app/furniture/marketplace/cart_product_component.html.erb

@@ -1,16 +1,7 @@
 <tr id="<%= dom_id %>">
   <td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
-    <%- if product.photo.present? %>
-      <figure class="w-40 text-center relative">
-        <%= image_tag product.photo.variant(resize_to_limit: [150, 150]).processed.url, class: "mx-auto h-40 overflow-hidden object-center rounded-lg"
- %>
-        <figcaption class="mt-2">
-          <%=product.name%>
-        </figcaption>
-      </figure>
-    <%- else %>
+
       <%= product.name %>
-    <%- end %>
 
     <dl class="font-normal lg:hidden">
       <dt class="sr-only"><%= product.class.human_attribute_name(:price) %></dt>

app/furniture/marketplace/cart_product_component.rb

@@ -11,7 +11,7 @@ def initialize(cart_product:, **kwargs)
     end
 
     def dom_id
-      super(product).gsub("product", "cart_product")
+      super(cart_product)
     end
   end
 end

app/furniture/marketplace/carts/_cart.html.erb

@@ -16,8 +16,8 @@
         </tr>
       </thead>
       <tbody class="divide-y divide-gray-200 bg-white">
-        <%- cart.marketplace.products.unarchived.each do |product| %>
-          <%= render Marketplace::CartProductComponent.new(cart_product: cart.cart_products.find_or_initialize_by(product: product)) %>
+        <%- cart.cart_products.order(created_at: :desc).each do |cart_product| %>
+          <%= render Marketplace::CartProductComponent.new(cart_product:) %>
         <%- end %>
       </tbody>
       <%= render "marketplace/carts/footer", cart: cart %>

app/furniture/marketplace/marketplace_component.html.erb

@@ -1,5 +1,9 @@
 <div class="grid grid-cols-1 gap-6">
+
+
   <%= render delivery_area_component %>
 
+  <%= render Marketplace::MenuComponent.new(marketplace:, cart:) %>
+
   <%= render cart %>
 </div>

app/furniture/marketplace/menu/product_component.html.erb

@@ -0,0 +1,32 @@
+<%= render CardComponent.new(dom_id: dom_id(product)) do |card| %>
+  <%- card.with_header(variant: :no_padding) do %>
+    <% if product.photo.present? %>
+      <figure>
+        <%= image_tag hero_image, class: "rounded-t-lg w-full" %>
+        <figcaption class="px-2 pt-4 sm:px-4">
+          <h3><%= name %></h3>
+        </figcaption>
+      </figure>
+    <%- else %>
+      <h3 class="px-4"><%= name %></h3>
+    <% end %>
+  <%- end %>
+
+  <div class="text-sm italic">
+    <%= description %>
+  </div>
+
+  <div class="text-right mt-3">
+    <p><%= price %></p>
+  </div>
+
+  <%- card.with_footer do %>
+    <%- cart_product = cart.cart_products.find_by(product:) %>
+
+    <%- if !cart_product %>
+      <%= button_to("Add to Cart", cart.location(child: :cart_products), method: :post,  params: { cart_product: { product_id: product.id, quantity: 1 } }, class: "w-full --secondary") %>
+    <%- else %>
+      <%= render cart_product.quantity_picker %>
+    <%- end %>
+  <%- end %>
+<%- end %>

app/furniture/marketplace/menu/product_component.rb

@@ -0,0 +1,9 @@
+class Marketplace
+  class Menu::ProductComponent < ProductComponent
+    attr_accessor :cart
+    def initialize(product:, cart:, **kwargs)
+      super(product:, **kwargs)
+      self.cart = cart
+    end
+  end
+end

app/furniture/marketplace/menu_component.html.erb

@@ -0,0 +1,5 @@
+<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
+  <%- marketplace.products.unarchived.each do |product| %>
+    <%= render Marketplace::Menu::ProductComponent.new(product:, cart:)%>
+  <%- end %>
+</div>

app/furniture/marketplace/menu_component.rb

@@ -0,0 +1,11 @@
+class Marketplace
+  class MenuComponent < ApplicationComponent
+    attr_accessor :marketplace, :cart
+
+    def initialize(marketplace:, cart:, **kwargs)
+      super(**kwargs)
+      self.marketplace = marketplace
+      self.cart = cart
+    end
+  end
+end

spec/furniture/marketplace/buying_products_system_spec.rb

@@ -96,7 +96,7 @@ def url_options
   end
 
   def add_product_to_cart(product)
-    within("##{dom_id(product).gsub("product", "cart_product")}") do
+    within("##{dom_id(product)}") do
       click_button("Add to Cart")
     end
   end