From 89b19fb7748cac7733a51ea8a990d8aacdcb065f Mon Sep 17 00:00:00 2001
From: "prabhatkumar.oc082" <prabhatkumar.oc082@webkul.in>
Date: Thu, 2 May 2024 15:33:31 +0530
Subject: [PATCH 1/3] added tabs on lead view

---
 .../src/Database/Seeders/LeadSourceSeeder.php |  5 +++
 .../Activity/ActivityController.php           |  8 ++--
 .../Admin/src/Resources/assets/js/app.js      |  5 ++-
 .../Admin/src/Resources/assets/sass/app.scss  |  7 ++++
 .../Admin/src/Resources/lang/en/app.php       |  4 ++
 .../leads/view/activity-action.blade.php      | 41 +++++++++++++++++++
 .../views/leads/view/activity-list.blade.php  | 19 +++++++--
 7 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/packages/Webkul/Admin/src/Database/Seeders/LeadSourceSeeder.php b/packages/Webkul/Admin/src/Database/Seeders/LeadSourceSeeder.php
index 7bf1bb2b4..522f8abab 100644
--- a/packages/Webkul/Admin/src/Database/Seeders/LeadSourceSeeder.php
+++ b/packages/Webkul/Admin/src/Database/Seeders/LeadSourceSeeder.php
@@ -41,6 +41,11 @@ public function run()
                 'name'       => 'Direct',
                 'created_at' => $now,
                 'updated_at' => $now,
+            ], [
+                'id'         => 6,
+                'name'       => 'WhatsApp',
+                'created_at' => $now,
+                'updated_at' => $now,
             ]
         ]);
     }
diff --git a/packages/Webkul/Admin/src/Http/Controllers/Activity/ActivityController.php b/packages/Webkul/Admin/src/Http/Controllers/Activity/ActivityController.php
index f68d5e8b3..95e5dd216 100755
--- a/packages/Webkul/Admin/src/Http/Controllers/Activity/ActivityController.php
+++ b/packages/Webkul/Admin/src/Http/Controllers/Activity/ActivityController.php
@@ -142,15 +142,15 @@ public function store()
     {
         $this->validate(request(), [
             'type'          => 'required',
-            'comment'       => 'required_if:type,note',
-            'schedule_from' => 'required_unless:type,note',
-            'schedule_to'   => 'required_unless:type,note',
+            'comment'       => 'required_if:type,note,whatsapp',
+            'schedule_from' => 'required_unless:type,note,whatsapp',
+            'schedule_to'   => 'required_unless:type,note,whatsapp',
         ]);
 
         Event::dispatch('activity.create.before');
 
         $activity = $this->activityRepository->create(array_merge(request()->all(), [
-            'is_done' => request('type') == 'note' ? 1 : 0,
+            'is_done' => request('type') == 'note' ||  request('type') == 'whatsapp' ? 1 : 0,
             'user_id' => auth()->guard('user')->user()->id,
         ]));
 
diff --git a/packages/Webkul/Admin/src/Resources/assets/js/app.js b/packages/Webkul/Admin/src/Resources/assets/js/app.js
index b7ac78fa3..a98a7b625 100644
--- a/packages/Webkul/Admin/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Admin/src/Resources/assets/js/app.js
@@ -22,8 +22,9 @@ import './bootstrap';
  import hi_IN from 'vee-validate/dist/locale/hi';
  import zh_CN from 'vee-validate/dist/locale/zh_CN';
 
- import 'vue-cal/dist/i18n/ar.js';
- import 'vue-cal/dist/i18n/tr.js';
+ import 'vue-cal/dist/i18n/en.es.js';
+ import 'vue-cal/dist/i18n/ar.es.js';
+ import 'vue-cal/dist/i18n/tr.es.js';
  
 
 window.moment = require('moment');
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/app.scss b/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
index c7b7320b7..f3c995ee5 100644
--- a/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
@@ -1290,6 +1290,13 @@ body {
                     top: 8px;
                 }
 
+                &.whatsapp {
+                    background-image: url("../images/note-icon.svg");
+                    width: 16px;
+                    height: 20px;
+                    top: 8px;
+                }
+
                 &.call {
                     background-image: url("../images/call-icon.svg");
                     top: 9px;
diff --git a/packages/Webkul/Admin/src/Resources/lang/en/app.php b/packages/Webkul/Admin/src/Resources/lang/en/app.php
index 1920a4a4f..16f5a192a 100644
--- a/packages/Webkul/Admin/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/en/app.php
@@ -170,6 +170,8 @@
             'lunch'                    => 'Lunch',
             'file'                     => 'File',
             'quote'                    => 'Quote',
+            'whatsapp'                 => 'WhatsApp',
+            'whatsapp-comment'         => 'Message',
             'create-quote'             => 'Create Quote',
             'type'                     => 'Type',
             'description'              => 'Description',
@@ -221,6 +223,7 @@
             'meeting-scheduled'        => 'Meeting scheduled at :from - :to',
             'lunch-scheduled'          => 'Lunch scheduled at :from - :to',
             'file-added'               => 'File added',
+            'whatsapp-added'           => 'WhasApp message added',
             'quote-destroy-success'    => 'Quote removed successfully.',
             'tag-create-success'       => 'Tag added successfully.',
             'tag-destroy-success'      => 'Tag removed successfully.',
@@ -337,6 +340,7 @@
             'back'                 => 'Back',
             'type'                 => 'Type',
             'note'                 => 'Note',
+            'whatsapp'             => 'Whatsapp message',
             'call'                 => 'Call',
             'meeting'              => 'Meeting',
             'lunch'                => 'Lunch',
diff --git a/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php b/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
index 9728f9592..0129ef833 100644
--- a/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
@@ -408,6 +408,47 @@ class="control"
             @endif
 
             {!! view_render_event('admin.leads.view.informations.activity_actions.quote.after', ['lead' => $lead]) !!}
+
+            {!! view_render_event('admin.leads.view.informations.activity_actions.whatsapp.before', ['lead' => $lead]) !!}
+
+            <tab name="{{ __('admin::app.leads.whatsapp') }}">
+                <form
+                    action="{{ route('admin.activities.store') }}"
+                    method="post"
+                    data-vv-scope="whatsapp-form"
+                    @submit.prevent="onSubmit($event, 'whatsapp-form')"
+                >
+
+                    <input type="hidden" name="type" value="whatsapp">
+
+                    <input type="hidden" name="lead_id" value="{{ $lead->id }}">
+
+                    @csrf()
+
+                    <div class="form-group" :class="[errors.has('whatsapp-form.comment') ? 'has-error' : '']">
+                        <label for="comment" class="required">{{ __('admin::app.leads.whatsapp-comment') }}</label>
+
+                        <textarea
+                            name="comment"
+                            class="control"
+                            id="whatsapp-comment"
+                            v-validate="'required'"
+                            data-vv-as="&quot;{{ __('admin::app.leads.whatsapp-comment') }}&quot;"
+                        >{{ old('comment') }}</textarea>
+
+                        <span class="control-error" v-if="errors.has('whatsapp-form.comment')">
+                            @{{ errors.first('whatsapp-form.comment') }}
+                        </span>
+                    </div>
+
+                    <button type="submit" class="btn btn-md btn-primary">
+                        {{ __('admin::app.leads.send') }}
+                    </button>
+
+                </form>
+            </tab>
+
+            {!! view_render_event('admin.leads.view.informations.activity_actions.whatsapp.after', ['lead' => $lead]) !!}
         </tabs>
     </script>
 
diff --git a/packages/Webkul/Admin/src/Resources/views/leads/view/activity-list.blade.php b/packages/Webkul/Admin/src/Resources/views/leads/view/activity-list.blade.php
index c00412094..890017975 100644
--- a/packages/Webkul/Admin/src/Resources/views/leads/view/activity-list.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/leads/view/activity-list.blade.php
@@ -16,7 +16,7 @@
 
                     <div class="timeline-bar"></div>
 
-                    <div class="section-tag" v-if="type != 'note' && type != 'file' && type != 'email'">
+                    <div class="section-tag" v-if="type != 'note' && type != 'file' && type != 'email' && type != 'whatsapp'">
                         <span v-if="subType == 'planned'">{{ __('admin::app.leads.planned') }}</span>
 
                         <span v-else>{{ __('admin::app.leads.done') }}</span>
@@ -58,6 +58,11 @@ class="activity-item"
                                     {{ __('admin::app.leads.file-added') }}
                                 </span>
 
+                                <span v-else-if="activity.type == 'whatsapp'">
+                                    <h4>{{ __('admin::app.leads.whatsapp-added') }}</h4>
+                                    @{{ activity.comment }}
+                                </span>
+
                                 <span class="icon ellipsis-icon dropdown-toggle"></span>
 
                                 <div class="dropdown-list">
@@ -93,7 +98,7 @@ class="activity-item"
                                 </a>
                             </div>
 
-                            <div class="comment" v-if="activity.comment" v-html="activity.comment">
+                            <div class="comment" v-if="activity.comment && activity.type=='note'" v-html="activity.comment">
                             </div>
 
                             <div class="info">
@@ -279,7 +284,7 @@ class="activity-item"
                 return {
                     activities: @json(app('\Webkul\Lead\Repositories\LeadRepository')->getAllActivities($lead->id)),
 
-                    types: ['all', 'note', 'call', 'meeting', 'lunch', 'file', 'email'],
+                    types: ['all', 'note', 'call', 'meeting', 'lunch', 'file', 'email', 'whatsapp'],
 
                     typeLabels: {
                         'all': "{{ __('admin::app.leads.all') }}",
@@ -295,6 +300,8 @@ class="activity-item"
                         'file': "{{ __('admin::app.leads.files') }}",
 
                         'email': "{{ __('admin::app.leads.emails') }}",
+
+                        'whatsapp': "{{ __('admin::app.leads.whatsapp') }}",
                     },
 
                     quotes: @json($lead->quotes()->with(['person', 'user'])->get())
@@ -328,7 +335,11 @@ class="activity-item"
 
                 file: function() {
                     return this.activities.filter(activity => activity.type == 'file');
-                }
+                },
+
+                whatsapp: function() {
+                    return this.activities.filter(activity => activity.type == 'whatsapp');
+                },
             },
 
             methods: {

From f2a0dce613934c8132c5ee202487940b55c343b9 Mon Sep 17 00:00:00 2001
From: "prabhatkumar.oc082" <prabhatkumar.oc082@webkul.in>
Date: Wed, 29 May 2024 18:30:49 +0530
Subject: [PATCH 2/3] added configuration and text/image/document design

---
 composer.json                                 |   3 +-
 config/app.php                                |   1 +
 .../Admin/src/Resources/lang/en/app.php       |   9 +-
 .../leads/view/activity-action.blade.php      | 131 +++++++++++++++++-
 packages/Webkul/WhatsApp/composer.json        |  16 +++
 .../WhatsApp/src/Config/core_config.php       |  26 ++++
 .../src/Providers/WhatsAppServiceProvider.php |  30 ++++
 .../WhatsApp/src/Resources/lang/en/app.php    |  11 ++
 8 files changed, 224 insertions(+), 3 deletions(-)
 create mode 100644 packages/Webkul/WhatsApp/composer.json
 create mode 100644 packages/Webkul/WhatsApp/src/Config/core_config.php
 create mode 100644 packages/Webkul/WhatsApp/src/Providers/WhatsAppServiceProvider.php
 create mode 100644 packages/Webkul/WhatsApp/src/Resources/lang/en/app.php

diff --git a/composer.json b/composer.json
index 7787ccc8e..f910c8e6a 100644
--- a/composer.json
+++ b/composer.json
@@ -67,7 +67,8 @@
             "Webkul\\UI\\": "packages/Webkul/UI/src",
             "Webkul\\User\\": "packages/Webkul/User/src",
             "Webkul\\WebForm\\": "packages/Webkul/WebForm/src",
-            "Webkul\\Workflow\\": "packages/Webkul/Workflow/src"
+            "Webkul\\Workflow\\": "packages/Webkul/Workflow/src",
+            "Webkul\\WhatsApp\\": "packages/Webkul/WhatsApp/src"
         }
     },
     "autoload-dev": {
diff --git a/config/app.php b/config/app.php
index c18581246..7ce0db060 100644
--- a/config/app.php
+++ b/config/app.php
@@ -238,6 +238,7 @@
         Webkul\User\Providers\UserServiceProvider::class,
         Webkul\WebForm\Providers\WebFormServiceProvider::class,
         Webkul\Workflow\Providers\WorkflowServiceProvider::class,
+        Webkul\WhatsApp\Providers\WhatsAppServiceProvider::class,
     ],
 
     /*
diff --git a/packages/Webkul/Admin/src/Resources/lang/en/app.php b/packages/Webkul/Admin/src/Resources/lang/en/app.php
index 16f5a192a..489590007 100644
--- a/packages/Webkul/Admin/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/en/app.php
@@ -169,6 +169,9 @@
             'meeting'                  => 'Meeting',
             'lunch'                    => 'Lunch',
             'file'                     => 'File',
+            'whatsapp-type-text'       => 'Text',
+            'whatsapp-type-image'      => 'Image', 
+            'whatsapp-type-document'   => 'Document',
             'quote'                    => 'Quote',
             'whatsapp'                 => 'WhatsApp',
             'whatsapp-comment'         => 'Message',
@@ -223,11 +226,15 @@
             'meeting-scheduled'        => 'Meeting scheduled at :from - :to',
             'lunch-scheduled'          => 'Lunch scheduled at :from - :to',
             'file-added'               => 'File added',
-            'whatsapp-added'           => 'WhasApp message added',
+            'whatsapp-added'           => 'WhatsApp message added',
             'quote-destroy-success'    => 'Quote removed successfully.',
             'tag-create-success'       => 'Tag added successfully.',
             'tag-destroy-success'      => 'Tag removed successfully.',
             'edit'                     => 'Edit',
+            'whatsapp-image-info'      => 'Upload images',
+            'whatsapp-image-format'    => 'in PNG or JPG Format',
+            'whatsapp-image-error'     => 'Only images (.jpeg, .jpg, .png, ..) are allowed.',
+            'whatsapp-caption'         => 'Caption'
         ],
 
         'quotes' => [
diff --git a/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php b/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
index 0129ef833..ff9e2b8c5 100644
--- a/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
@@ -425,7 +425,32 @@ class="control"
 
                     @csrf()
 
-                    <div class="form-group" :class="[errors.has('whatsapp-form.comment') ? 'has-error' : '']">
+                    <div class="form-group" :class="[errors.has('whatsapp-form.type') ? 'has-error' : '']">
+                        <label for="type" class="required">{{ __('admin::app.leads.type') }}</label>
+
+                        <select
+                            name="type"
+                            class="control"
+                            v-model="type"
+                            v-validate="'required'"
+                            data-vv-as="&quot;{{ __('admin::app.leads.type') }}&quot;"
+                        >
+                            <option value="" disabled selected>{{ __('admin::app.leads.select-type') }}</option>
+                            <option value="text">{{ __('admin::app.leads.whatsapp-type-text') }}</option>
+                            <option value="image">{{ __('admin::app.leads.whatsapp-type-image') }}</option>
+                            <option value="document">{{ __('admin::app.leads.whatsapp-type-document') }}</option>
+                        </select>
+
+                        <span class="control-error" v-if="errors.has('whatsapp-form.type')">
+                            @{{ errors.first('whatsapp-form.type') }}
+                        </span>
+                    </div>
+
+                    <div 
+                        class="form-group" 
+                        v-if="type == 'text'" 
+                        :class="[errors.has('whatsapp-form.comment') ? 'has-error' : '']"
+                    >
                         <label for="comment" class="required">{{ __('admin::app.leads.whatsapp-comment') }}</label>
 
                         <textarea
@@ -441,6 +466,49 @@ class="control"
                         </span>
                     </div>
 
+                    <upload-profile-image v-if="type == 'image'"></upload-profile-image>
+
+                    <div 
+                        class="form-group" 
+                        v-if="type == 'document'" 
+                        :class="[errors.has('whatsapp-form.file') ? 'has-error' : '']"
+                    >
+                        <label for="file" class="required">{{ __('admin::app.leads.file') }}</label>
+
+                        <input
+                            type="file"
+                            name="file"
+                            class="control"
+                            id="file"
+                            v-validate="'required'"
+                            data-vv-as="&quot;{{ __('admin::app.leads.file') }}&quot;"
+                        >
+
+                        <span class="control-error" v-if="errors.has('whatsapp-form.file')">
+                            @{{ errors.first('whatsapp-form.file') }}
+                        </span>
+                    </div>
+
+                    <div 
+                        class="form-group" 
+                        v-if="type == 'image' || type=='document'" 
+                        :class="[errors.has('whatsapp-form.caption') ? 'has-error' : '']"
+                    >
+                        <label for="caption">{{ __('admin::app.leads.whatsapp-caption') }}</label>
+
+                        <input
+                            type="text"
+                            name="caption"
+                            class="control"
+                            id="caption"
+                            data-vv-as="&quot;{{ __('admin::app.leads.whatsapp-caption') }}&quot;"
+                        />
+
+                        <span class="control-error" v-if="errors.has('whatsapp-form.caption')">
+                            @{{ errors.first('whatsapp-form.caption') }}
+                        </span>
+                    </div>
+
                     <button type="submit" class="btn btn-md btn-primary">
                         {{ __('admin::app.leads.send') }}
                     </button>
@@ -602,4 +670,65 @@ class="control"
         });
     </script>
 
+    <script type="text/x-template" id="upload-profile-image-template">
+        <div class="form-group">
+            <div class="image-upload-brick">
+                <input
+                    type="file"
+                    name="image"
+                    id="upload-profile"
+                    ref="imageInput"
+                    v-validate="'ext:jpeg,jpg,png'"
+                    accept="image/*"
+                    @change="addImageView($event)"
+                >
+
+                <i class="icon upload-icon"></i>
+
+                <img class="preview" :src="imageData" v-if="imageData.length > 0">
+            </div>
+
+            <div class="image-info-brick">
+                <span class="field-info">
+                {{ __('admin::app.leads.whatsapp-image-info') }} <br>
+                {{ __('admin::app.leads.whatsapp-image-format') }}
+                </span>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        Vue.component('upload-profile-image', {
+            template: '#upload-profile-image-template',
+
+            data: function() {
+                return {
+                    imageData: "",
+                }
+            },
+
+            methods: {
+                addImageView () {
+                    var imageInput = this.$refs.imageInput;
+
+                    if (imageInput.files && imageInput.files[0]) {
+                        if (imageInput.files[0].type.includes('image/')) {
+                            var reader = new FileReader();
+
+                            reader.onload = (e) => {
+                                this.imageData = e.target.result;
+                            }
+
+                            reader.readAsDataURL(imageInput.files[0]);
+                        } else {
+                            imageInput.value = '';
+
+                            alert('{{ __('admin::app.user.account.image_upload_message') }}');
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+
 @endpush
diff --git a/packages/Webkul/WhatsApp/composer.json b/packages/Webkul/WhatsApp/composer.json
new file mode 100644
index 000000000..52e357e2f
--- /dev/null
+++ b/packages/Webkul/WhatsApp/composer.json
@@ -0,0 +1,16 @@
+{
+    "name": "krayin/laravel-whatsapp",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Prabhat Kumar",
+            "email": "prabhatkumar.oc082@webkul.in"
+        }
+    ],
+    "autoload": {
+        "psr-4": {
+            "Webkul\\WhatsApp\\": "src/"
+        }
+    },
+    "minimum-stability": "dev"
+}
\ No newline at end of file
diff --git a/packages/Webkul/WhatsApp/src/Config/core_config.php b/packages/Webkul/WhatsApp/src/Config/core_config.php
new file mode 100644
index 000000000..b1efe6bdb
--- /dev/null
+++ b/packages/Webkul/WhatsApp/src/Config/core_config.php
@@ -0,0 +1,26 @@
+<?php
+
+return [
+    [
+        'key' => 'general.whatsapp',
+        'name' => 'whatsapp::app.configuration.whatsapp.title',
+        'sort' => 2,
+        'fields' => [
+            [
+                'name' => 'status',
+                'title' => 'whatsapp::app.configuration.whatsapp.status',
+                'type' => 'boolean'
+            ],
+            [
+                'name' => 'phone_no_id',
+                'title' => 'whatsapp::app.configuration.whatsapp.phone-number-id',
+                'type' => 'text',
+            ],
+            [
+                'name' => 'access_token',
+                'title' => 'whatsapp::app.configuration.whatsapp.access-token',
+                'type' => 'textarea',
+            ],
+        ],
+    ],
+];
diff --git a/packages/Webkul/WhatsApp/src/Providers/WhatsAppServiceProvider.php b/packages/Webkul/WhatsApp/src/Providers/WhatsAppServiceProvider.php
new file mode 100644
index 000000000..fe711cf03
--- /dev/null
+++ b/packages/Webkul/WhatsApp/src/Providers/WhatsAppServiceProvider.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Webkul\WhatsApp\Providers;
+
+use Illuminate\Support\ServiceProvider;
+
+class WhatsAppServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->loadTranslationsFrom(__DIR__ . '/../Resources/lang', 'whatsapp');
+    }
+
+    /**
+    * Register services.
+    *
+    * @return void
+    */
+    public function register()
+    {
+        $this->mergeConfigFrom(
+            dirname(__DIR__) . '/Config/core_config.php', 'core_config'
+        );
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/WhatsApp/src/Resources/lang/en/app.php b/packages/Webkul/WhatsApp/src/Resources/lang/en/app.php
new file mode 100644
index 000000000..3b17a7ea2
--- /dev/null
+++ b/packages/Webkul/WhatsApp/src/Resources/lang/en/app.php
@@ -0,0 +1,11 @@
+<?php
+return [
+    'configuration' => [
+        'whatsapp' => [
+            'title' => 'WhatsApp',
+            'status' => 'Status',
+            'phone-number-id' => 'Phone number ID',
+            'access-token' => 'Access Token',
+        ],
+    ],
+];

From fb591990996fe37a9b1f7f1b12ee7654e76ffe23 Mon Sep 17 00:00:00 2001
From: "prabhatkumar.oc082" <prabhatkumar.oc082@webkul.in>
Date: Thu, 30 May 2024 18:14:27 +0530
Subject: [PATCH 3/3] worked on images

---
 .../Admin/src/Resources/assets/sass/app.scss  | 37 ++++++++
 .../Admin/src/Resources/lang/en/app.php       |  6 +-
 .../leads/view/activity-action.blade.php      | 95 +++++++++++++------
 3 files changed, 105 insertions(+), 33 deletions(-)

diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/app.scss b/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
index f3c995ee5..b900c9fa0 100644
--- a/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
@@ -2524,3 +2524,40 @@ body {
         font-size: $font-size-md;
     }
 }
+
+.image-container {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+
+    .image-preview-brick {
+        display: flex;
+        flex-direction: column;
+        width: 100px;
+
+        .image-preview {
+            height: 100px;
+            width: 100px;
+            border: 1px solid #c1c2c3;
+            position: relative;
+
+            img {
+                width: 100px;
+                height: 100px;
+                object-fit: contain;
+                cursor: pointer;
+            }
+
+            .image-preview-delete {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                cursor: pointer;
+            }
+        }
+
+        textarea {
+            height: auto;
+        }
+    }
+}
diff --git a/packages/Webkul/Admin/src/Resources/lang/en/app.php b/packages/Webkul/Admin/src/Resources/lang/en/app.php
index 489590007..d6fad3176 100644
--- a/packages/Webkul/Admin/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/en/app.php
@@ -231,9 +231,9 @@
             'tag-create-success'       => 'Tag added successfully.',
             'tag-destroy-success'      => 'Tag removed successfully.',
             'edit'                     => 'Edit',
-            'whatsapp-image-info'      => 'Upload images',
-            'whatsapp-image-format'    => 'in PNG or JPG Format',
-            'whatsapp-image-error'     => 'Only images (.jpeg, .jpg, .png, ..) are allowed.',
+            'whatsapp-image-info'      => 'Upload image(s)',
+            'whatsapp-image-format'    => 'in PNG, JPG or WebP Format',
+            'whatsapp-image-error'     => 'Only images (.jpeg, .jpg, .png, .webp, ..) are allowed.',
             'whatsapp-caption'         => 'Caption'
         ],
 
diff --git a/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php b/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
index ff9e2b8c5..165f97243 100644
--- a/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/leads/view/activity-action.blade.php
@@ -554,6 +554,8 @@ class="control"
 
                         'persons': []
                     },
+
+                    type: '',
                 }
             },
 
@@ -672,27 +674,45 @@ class="control"
 
     <script type="text/x-template" id="upload-profile-image-template">
         <div class="form-group">
-            <div class="image-upload-brick">
-                <input
-                    type="file"
-                    name="image"
-                    id="upload-profile"
-                    ref="imageInput"
-                    v-validate="'ext:jpeg,jpg,png'"
-                    accept="image/*"
-                    @change="addImageView($event)"
-                >
+            <div class="image-container">
+                <div class="image-preview-brick" v-for="(image, index) in imageData">
+                    <div class="image-preview">
+                        <img v-if="imageData.length > 0" :src="image" @click="openImage(index)" />
 
-                <i class="icon upload-icon"></i>
+                        <i class="image-preview-delete icon trash-icon" @click="deleteImage(index)"></i>
+                    </div>
 
-                <img class="preview" :src="imageData" v-if="imageData.length > 0">
-            </div>
+                    <div class="form-group">
+                        <input
+                            name="caption"
+                            class="control"
+                        />
+                    </div>
+                </div>
 
-            <div class="image-info-brick">
-                <span class="field-info">
-                {{ __('admin::app.leads.whatsapp-image-info') }} <br>
-                {{ __('admin::app.leads.whatsapp-image-format') }}
-                </span>
+                <div>
+                    <div class="image-upload-brick">
+                        <input
+                            type="file"
+                            name="image"
+                            id="upload-profile"
+                            ref="imageInput"
+                            v-validate="'ext:jpeg,jpg,png,webp'"
+                            accept="image/*"
+                            multiple
+                            @change="addImageView($event)"
+                        >
+        
+                        <i class="icon upload-icon"></i>                        
+                    </div>
+        
+                    <div class="image-info-brick">
+                        <span class="field-info">
+                        {{ __('admin::app.leads.whatsapp-image-info') }} <br>
+                        {{ __('admin::app.leads.whatsapp-image-format') }}
+                        </span>
+                    </div>
+                </div>
             </div>
         </div>
     </script>
@@ -703,7 +723,7 @@ class="control"
 
             data: function() {
                 return {
-                    imageData: "",
+                    imageData: [],
                 }
             },
 
@@ -711,21 +731,36 @@ class="control"
                 addImageView () {
                     var imageInput = this.$refs.imageInput;
 
-                    if (imageInput.files && imageInput.files[0]) {
-                        if (imageInput.files[0].type.includes('image/')) {
-                            var reader = new FileReader();
+                    if (imageInput.files) {
+                        imageInput.files.forEach((file) => {
+                            if (file.type.includes('image/')) {
+                                var reader = new FileReader();
 
-                            reader.onload = (e) => {
-                                this.imageData = e.target.result;
-                            }
+                                reader.onload = (e) => {
+                                    console.log(e.target.result);
+                                    this.imageData.push(e.target.result);
+                                }
 
-                            reader.readAsDataURL(imageInput.files[0]);
-                        } else {
-                            imageInput.value = '';
+                                reader.readAsDataURL(file);
+                            } else {
+                                imageInput.value = '';
 
-                            alert('{{ __('admin::app.user.account.image_upload_message') }}');
-                        }
+                                alert('{{ __('admin::app.user.account.image_upload_message') }}');
+                            }
+                        });
                     }
+
+                    console.log(this.imageData);
+                }, 
+
+                openImage (index) {
+                    const win = window.open();
+                    win.document.write(`<img src="${this.imageData[index]}">`);
+                    win.document.close();
+                },
+
+                deleteImage (index) {
+                    this.imageData.splice(index, 1);
                 }
             }
         });