Merge pull request #9236 from AgriculturaFamiliar/add-map-whatsapp-link

Show whatsapp link on contact modal on map

app/assets/javascripts/templates/partials/contact.html.haml

@@ -1,8 +1,12 @@
 %div.contact-container
-  %div.modal-centered{"ng-if" => "::enterprise.email_address || enterprise.website || enterprise.phone"}
+  %div.modal-centered{"ng-if" => "::enterprise.email_address || enterprise.website || enterprise.phone || enterprise.whatsapp_phone"}
     %p.modal-header {{'contact' | t}}
     %p{"ng-if" => "::enterprise.phone", "ng-bind" => "::enterprise.phone"}
 
+    %p{"ng-if" => "::enterprise.whatsapp_phone"}
+      %img{ src: image_path("/map_icons/social-logos/whatsapp.svg") }
+      %a{"ng-href" => "{{::enterprise.whatsapp_url}}", target: "_blank", "ng-bind" => "::enterprise.whatsapp_phone"}
+
     %p{"ng-if" => "::enterprise.email_address"}
       %a{"ng-href" => "{{::enterprise.email_address | stripUrl}}", target: "_blank", mailto: true}
         %span.obfuscatedEmail.email{"ng-bind" => "::enterprise.email_address | stripUrl"}

app/models/enterprise.rb

@@ -312,6 +312,10 @@ class Enterprise < ApplicationRecord
     correct_instagram_url self[:instagram]
   end
 
+  def whatsapp_url
+    correct_whatsapp_url self[:whatsapp_phone]
+  end
+
   def inventory_variants
     if prefers_product_selection_from_inventory_only?
       Spree::Variant.visible_for(self)
@@ -448,6 +452,10 @@ class Enterprise < ApplicationRecord
     url&.sub(%r{(https?://)?}, '')
   end
 
+  def correct_whatsapp_url(phone_number)
+    phone_number && "https://wa.me/" + phone_number.tr('+ ', '')
+  end
+
   def correct_instagram_url(url)
     url && strip_url(url).sub(%r{www.instagram.com/}, '').delete("@")
   end

app/serializers/api/cached_enterprise_serializer.rb

@@ -14,9 +14,9 @@ module Api
 
     attributes :name, :id, :description, :latitude, :longitude,
                :long_description, :website, :instagram, :linkedin, :twitter,
-               :facebook, :is_primary_producer, :is_distributor, :phone, :visible,
-               :email_address, :hash, :logo, :promo_image, :path, :pickup, :delivery,
-               :icon, :icon_font, :producer_icon_font, :category
+               :facebook, :is_primary_producer, :is_distributor, :phone, :whatsapp_phone,
+               :whatsapp_url, :visible, :email_address, :hash, :logo, :promo_image, :path, :pickup,
+               :delivery, :icon, :icon_font, :producer_icon_font, :category
 
     attributes :taxons, :supplied_taxons
 

app/serializers/api/enterprise_shopfront_serializer.rb

@@ -7,9 +7,9 @@ module Api
 
     attributes :name, :id, :description, :latitude, :longitude, :long_description, :website,
                :instagram, :linkedin, :twitter, :facebook, :is_primary_producer, :is_distributor,
-               :phone, :visible, :email_address, :hash, :logo, :promo_image, :path, :category,
-               :active, :producers, :orders_close_at, :hubs, :taxons, :supplied_taxons, :pickup,
-               :delivery, :preferred_product_low_stock_display
+               :phone, :whatsapp_phone, :whatsapp_url, :visible, :email_address, :hash, :logo,
+               :promo_image, :path, :category, :active, :producers, :orders_close_at, :hubs,
+               :taxons, :supplied_taxons, :pickup, :delivery, :preferred_product_low_stock_display
 
     has_one :address, serializer: Api::AddressSerializer
     has_many :supplied_properties, serializer: Api::PropertySerializer

app/services/permitted_attributes/enterprise.rb

@@ -25,10 +25,10 @@ module PermittedAttributes
     def self.basic_permitted_attributes
       [
         :id, :name, :visible, :permalink, :owner_id, :contact_name, :email_address, :phone,
-        :is_primary_producer, :sells, :website, :facebook, :instagram, :linkedin, :twitter,
-        :description, :long_description, :logo, :promo_image, :terms_and_conditions,
-        :allow_guest_orders, :allow_order_changes, :require_login, :enable_subscriptions,
-        :abn, :acn, :charges_sales_tax, :display_invoice_logo, :invoice_text,
+        :whatsapp_phone, :is_primary_producer, :sells, :website, :facebook, :instagram, :linkedin,
+        :twitter, :description, :long_description, :logo, :promo_image, :terms_and_conditions,
+        :allow_guest_orders, :allow_order_changes, :require_login, :enable_subscriptions, :abn,
+        :acn, :charges_sales_tax, :display_invoice_logo, :invoice_text,
         :preferred_product_selection_from_inventory_only, :preferred_shopfront_message,
         :preferred_shopfront_closed_message, :preferred_shopfront_taxon_order,
         :preferred_shopfront_producer_order, :preferred_shopfront_order_cycle_order,

app/views/admin/enterprises/form/_contact.html.haml

@@ -15,6 +15,13 @@
     = f.label :phone, t('.phone')
   .omega.eight.columns
     = f.text_field :phone, { placeholder: t('.phone_placeholder') }
+.row
+  .alpha.three.columns
+    = f.label :whatsapp_phone, t('.whatsapp_phone')
+    %div{'ofn-with-tip' => t('.whatsapp_phone_tip')}
+      %a= t('admin.whats_this')
+  .omega.eight.columns
+    = f.text_field :whatsapp_phone, { placeholder: t('.whatsapp_phone_placeholder') }
 .row
   .alpha.three.columns
     = f.label :website, t('.website')

app/views/producers/_fat.html.haml

@@ -38,6 +38,11 @@
         = t :producers_contact_phone
         %span{"ng-bind" => "::producer.phone"}
 
+      %p.word-wrap{"ng-if" => "::producer.whatsapp_phone"}
+        %a{"ng-href" => "{{::producer.whatsapp_url}}", target: "_blank"}
+          %img{ src: image_pack_path("social-logos/whatsapp.svg") }
+          %span{"ng-bind" => "::producer.whatsapp_phone"}
+
       %p.word-wrap{"ng-if" => "::producer.email_address"}
         %a{"ng-href" => "{{::producer.email_address | stripUrl}}", target: "_blank", mailto: true}
           %span.obfuscatedEmail.email{"ng-bind" => "::producer.email_address | stripUrl"}

app/views/registration/steps/_contact.html.haml

@@ -24,6 +24,10 @@
             .small-12.columns.field
               %label{ for: 'enterprise_phone' }= t(".phone_field")+":"
               %input.chunky.small-12.columns{ id: 'enterprise_phone', name: 'phone', placeholder: "{{'registration.steps.contact.phone_field_placeholder' | t}}", ng: { model: 'enterprise.phone' } }
+          .row
+            .small-12.columns.field
+              %label{ "for" => 'enterprise_whatsapp_phone', 'data-toggle' => "tooltip", 'title' => "{{'registration.steps.contact.whatsapp_phone_tooltip' | t}}" }= t(".whatsapp_phone_field")+":"
+              %input.chunky.small-12.columns{ id: 'enterprise_whatsapp_phone', name: 'whatsapp_phone', placeholder: "{{'registration.steps.contact.whatsapp_phone_field_placeholder' | t}}", ng: { model: 'enterprise.whatsapp_phone' } }
         .small-12.medium-12.large-5.hide-for-small-only
 
       .row.buttons

app/views/shopping_shared/tabs/_contact.html.haml

@@ -18,7 +18,7 @@
               = current_distributor.address.zipcode
 
       .small-12.large-4.columns
-        - if current_distributor.website || current_distributor.email_address || current_distributor.phone
+        - if current_distributor.website || current_distributor.email_address || current_distributor.phone || current_distributor.whatsapp_phone
           %div.center
             .header
               = t :shopping_contact_web
@@ -26,6 +26,11 @@
               - if current_distributor.phone.present?
                 = current_distributor.phone
                 %br
+              - if current_distributor.whatsapp_phone.present?
+                %a{href: current_distributor.whatsapp_url, target: "_blank" }
+                  %img{ src: image_pack_path("social-logos/whatsapp.svg") }
+                  = current_distributor.whatsapp_phone
+                  %br
               - if current_distributor.website.present?
                 %a{href: "http://#{current_distributor.website}", target: "_blank" }
                   = current_distributor.website

app/webpacker/images/social-logos/whatsapp.svg

@@ -0,0 +1,2 @@
+<!--https://icon-sets.iconify.design/fa/whatsapp/-->
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="0.96em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1536 1600"><path fill="currentColor" d="M985 878q13 0 97.5 44t89.5 53q2 5 2 15q0 33-17 76q-16 39-71 65.5T984 1158q-57 0-190-62q-98-45-170-118T476 793q-72-107-71-194v-8q3-91 74-158q24-22 52-22q6 0 18 1.5t19 1.5q19 0 26.5 6.5T610 448q8 20 33 88t25 75q0 21-34.5 57.5T599 715q0 7 5 15q34 73 102 137q56 53 151 101q12 7 22 7q15 0 54-48.5t52-48.5zm-203 530q127 0 243.5-50t200.5-134t134-200.5t50-243.5t-50-243.5T1226 336t-200.5-134T782 152t-243.5 50T338 336T204 536.5T154 780q0 203 120 368l-79 233l242-77q158 104 345 104zm0-1382q153 0 292.5 60T1315 247t161 240.5t60 292.5t-60 292.5t-161 240.5t-240.5 161t-292.5 60q-195 0-365-94L0 1574l136-405Q28 991 28 780q0-153 60-292.5T249 247T489.5 86T782 26z"/></svg>

config/locales/en.yml

@@ -888,6 +888,9 @@ en:
           email_address_tip: "This email address will be displayed in your public profile"
           phone: Phone
           phone_placeholder: eg. 98 7654 3210
+          whatsapp_phone: WhatsApp phone number
+          whatsapp_phone_placeholder: eg. +61 4 9876 5432
+          whatsapp_phone_tip: "This number will be displayed in your public profile to be opened as a WhatsApp link."
           website: Website
           website_placeholder: eg. www.truffles.com
         enterprise_fees:
@@ -2339,7 +2342,10 @@ See the %{link} to find out more about %{sitename}'s features and to start using
         contact_field_placeholder: "Contact Name"
         contact_field_required: "You need to enter a primary contact."
         phone_field: "Phone number"
+        whatsapp_phone_field: "WhatsApp phone number"
+        whatsapp_phone_tooltip: "This number will be displayed in your public profile to be opened as a WhatsApp link."
         phone_field_placeholder: "eg. (03) 1234 5678"
+        whatsapp_phone_field_placeholder: "eg. +61 4 1234 5678"
       type:
         title: "Type"
         headline: "Last step to add %{enterprise}!"

db/migrate/20220603140943_add_whatsapp_phone_to_enterprises.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddWhatsappPhoneToEnterprises < ActiveRecord::Migration[6.1]
+  def change
+    add_column :enterprises, :whatsapp_phone, :string, limit: 255
+  end
+end

db/schema.rb

@@ -241,6 +241,7 @@ ActiveRecord::Schema.define(version: 2022_06_21_230907) do
     t.integer "business_address_id"
     t.boolean "show_customer_names_to_suppliers", default: false, null: false
     t.string "visible", limit: 255, default: "public", null: false
+    t.string "whatsapp_phone", limit: 255
     t.index ["address_id"], name: "index_enterprises_on_address_id"
     t.index ["is_primary_producer", "sells"], name: "index_enterprises_on_is_primary_producer_and_sells"
     t.index ["name"], name: "index_enterprises_on_name", unique: true

public/map_icons/social-logos/whatsapp.svg

@@ -0,0 +1,2 @@
+<!--https://icon-sets.iconify.design/fa/whatsapp/-->
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="0.96em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1536 1600"><path fill="currentColor" d="M985 878q13 0 97.5 44t89.5 53q2 5 2 15q0 33-17 76q-16 39-71 65.5T984 1158q-57 0-190-62q-98-45-170-118T476 793q-72-107-71-194v-8q3-91 74-158q24-22 52-22q6 0 18 1.5t19 1.5q19 0 26.5 6.5T610 448q8 20 33 88t25 75q0 21-34.5 57.5T599 715q0 7 5 15q34 73 102 137q56 53 151 101q12 7 22 7q15 0 54-48.5t52-48.5zm-203 530q127 0 243.5-50t200.5-134t134-200.5t50-243.5t-50-243.5T1226 336t-200.5-134T782 152t-243.5 50T338 336T204 536.5T154 780q0 203 120 368l-79 233l242-77q158 104 345 104zm0-1382q153 0 292.5 60T1315 247t161 240.5t60 292.5t-60 292.5t-161 240.5t-240.5 161t-292.5 60q-195 0-365-94L0 1574l136-405Q28 991 28 780q0-153 60-292.5T249 247T489.5 86T782 26z"/></svg>