From d228b149e1863fae306962b53b98df0e4ddc1761 Mon Sep 17 00:00:00 2001 From: vinayak-trivedi Date: Mon, 30 Dec 2024 23:29:37 +0530 Subject: [PATCH 01/50] changes to show website option --- .../dashboard/routes/dashboard/settings/inbox/ChannelList.vue | 2 +- .../routes/dashboard/settings/inbox/channel-factory.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue index 7ed171242df80..7191d19b9eb2c 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue @@ -51,7 +51,7 @@ export default { channelList() { // const { apiChannelName, apiChannelThumbnail } = this.globalConfig; return [ - // { key: 'website', name: 'Website' }, + { key: 'website', name: 'Website' }, { key: 'facebook', name: 'Messenger' }, // { key: 'twitter', name: 'Twitter' }, // { key: 'whatsapp', name: 'WhatsApp' }, diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js index cd3eab42138b8..de6a5d6555edf 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js @@ -1,5 +1,5 @@ import Facebook from './channels/Facebook'; -// import Website from './channels/Website'; +import Website from './channels/Website'; // import Twitter from './channels/Twitter'; // import Api from './channels/Api'; import Email from './channels/Email'; @@ -10,7 +10,7 @@ import Email from './channels/Email'; const channelViewList = { facebook: Facebook, - // website: Website, + website: Website, // twitter: Twitter, // api: Api, email: Email, From 571b4406167e055c9cd7e9df6eca461a6839315d Mon Sep 17 00:00:00 2001 From: vinayak-trivedi Date: Tue, 31 Dec 2024 00:23:15 +0530 Subject: [PATCH 02/50] track order initial component --- .../dashboard/assets/images/delivery_icon.svg | 4 ++ .../widget-preview/components/Widget.vue | 4 +- .../widget-preview/components/WidgetHead.vue | 56 +++++++++++++++++-- .../shared/assets/stylesheets/colors.scss | 2 + .../shared/assets/stylesheets/spacing.scss | 1 + 5 files changed, 59 insertions(+), 8 deletions(-) create mode 100644 app/javascript/dashboard/assets/images/delivery_icon.svg diff --git a/app/javascript/dashboard/assets/images/delivery_icon.svg b/app/javascript/dashboard/assets/images/delivery_icon.svg new file mode 100644 index 0000000000000..10fd22e5ad88b --- /dev/null +++ b/app/javascript/dashboard/assets/images/delivery_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue index a083cc522a0f1..d5f47526b1ea4 100644 --- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue +++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue @@ -212,8 +212,8 @@ export default { box-shadow: var(--shadow-widget-builder); border-radius: var(--border-radius-large); background-color: #f4f6fb; - width: calc(var(--space-large) * 10); - height: calc(var(--space-mega) * 5); + width: calc(var(--space-large) * 10.5); + height: calc(var(--space-mega) * 6); .branding { padding-top: var(--space-one); diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue index 775e3e0ea0d61..3b26842d20e69 100644 --- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue +++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue @@ -1,10 +1,10 @@ From 2204c7436e0ca4dc128827e2702f5292310abdb5 Mon Sep 17 00:00:00 2001 From: vinayak-trivedi Date: Thu, 2 Jan 2025 20:28:11 +0530 Subject: [PATCH 28/50] product carousel logic completed --- .../shared/components/ProductCarousel.vue | 67 ++++++++++++++++++- .../widget/components/AgentMessage.vue | 2 + .../widget/components/AgentMessageBubble.vue | 2 + .../widget/components/ConversationWrap.vue | 17 +++-- 4 files changed, 78 insertions(+), 10 deletions(-) diff --git a/app/javascript/shared/components/ProductCarousel.vue b/app/javascript/shared/components/ProductCarousel.vue index 7ec89b443d060..e2df6475dce18 100644 --- a/app/javascript/shared/components/ProductCarousel.vue +++ b/app/javascript/shared/components/ProductCarousel.vue @@ -11,7 +11,7 @@

{{ item.title }}

₹{{ item.price }}

- - +
+ + {{ getQuantity(item.id) }} + +
+ +
@@ -60,6 +66,22 @@ export default { this.currentSlide++; } }, + isProductInSelectedProducts(product) { + return this.selectedProducts.some(selectedProduct => selectedProduct.id === product.id); + }, + increaseQuantity(productId) { + const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId); + this.updateSelectedProducts(productId, product.quantity + 1); + }, + decreaseQuantity(productId) { + const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId); + this.updateSelectedProducts(productId, product.quantity - 1); + }, + getQuantity(productId) { + const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId); + console.log(product, 'product'); + return product ? +product.quantity : 0; + }, prevSlide() { if (this.currentSlide > 0) { this.currentSlide--; @@ -135,6 +157,45 @@ h1 { margin-bottom: 15px; } +.quantity-container { + display: flex; + width: 70%; + align-items: center; +} + +.quantity-button { + background: #f0f0f0; + width: 28px; + height: 28px; + border-radius: 4px; + display: grid; + place-items: center; + width: 33%; +} + +.quantity-text { + font-size: 12px; + font-weight: 500; + color: #fff; + width: 34%; + background: #1F93FF; + height: 28px; + display: flex; + align-items: center; + justify-content: center; +} + +.clear-button { + background: red; + width: 20%; + height: 28px; + border-radius: 4px; + color: #fff; + font-size: 14px; + font-weight: 600; + +} + .card-buttons { display: flex; justify-content: space-between; @@ -153,7 +214,7 @@ h1 { .buy-now-button { background: #1f93ff; - width: 73px; + width: 85px; height: 28px; border-radius: 4px; color: #fff; diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue index 8c5f0fcb9684d..dc79cbe4f31c0 100755 --- a/app/javascript/widget/components/AgentMessage.vue +++ b/app/javascript/widget/components/AgentMessage.vue @@ -27,6 +27,8 @@ :message-id="message.id" :message-type="messageType" :message="message.content" + :selected-products="selectedProducts" + :update-selected-products="updateSelectedProducts" />
-
+
- +
From dfbeece71715babb1fa196ddff96f2da42af0a80 Mon Sep 17 00:00:00 2001 From: vinayak-trivedi Date: Thu, 2 Jan 2025 23:26:09 +0530 Subject: [PATCH 31/50] completed cart functionality --- .../shared/components/ProductCarousel.vue | 21 ++++++---- .../widget/components/ConversationWrap.vue | 42 +++++++++++++++---- 2 files changed, 46 insertions(+), 17 deletions(-) diff --git a/app/javascript/shared/components/ProductCarousel.vue b/app/javascript/shared/components/ProductCarousel.vue index d610520c7dbae..72321cc42183f 100644 --- a/app/javascript/shared/components/ProductCarousel.vue +++ b/app/javascript/shared/components/ProductCarousel.vue @@ -6,12 +6,12 @@ :style="{ transform: `translateX(-${currentSlide * 100}%)` }" >
-
+
item.title

{{ item.title }}

₹{{ item.price }}

-
- + {{ getQuantity(item.id) }} - +
-
@@ -68,16 +68,19 @@ export default { this.currentSlide++; } }, + onProductClick(item) { + window.open(`https://${item.shopUrl}/products/${item.productHandle}`, '_blank'); + }, isProductInSelectedProducts(product) { return this.selectedProducts.some(selectedProduct => selectedProduct.id === product.id); }, - increaseQuantity(productId) { + increaseQuantity(productId, event) { const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId); - this.updateSelectedProducts(productId, product.quantity + 1); + this.updateSelectedProducts(productId, product.quantity + 1, product.currency, product.price, product.shopUrl, event); }, - decreaseQuantity(productId) { + decreaseQuantity(productId, event) { const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId); - this.updateSelectedProducts(productId, product.quantity - 1); + this.updateSelectedProducts(productId, product.quantity - 1, product.currency, product.price, product.shopUrl, event); }, getQuantity(productId) { const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId); diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue index 2979151dc6fc8..ad079a8233686 100755 --- a/app/javascript/widget/components/ConversationWrap.vue +++ b/app/javascript/widget/components/ConversationWrap.vue @@ -21,6 +21,7 @@
- + @@ -57,6 +57,10 @@ export default { type: Function, default: () => {}, }, + openCheckoutPage: { + type: Function, + default: () => {}, + }, items: { type: Array, default: () => [], @@ -78,6 +82,17 @@ export default { const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId); this.updateSelectedProducts(productId, product.quantity + 1, product.currency, product.price, product.shopUrl, event); }, + onBuyNow(item, event) { + event.stopPropagation(); + const selectedProduct = [{ + id: item.id, + quantity: 1, + currency: item.currency, + price: item.price, + shopUrl: item.shopUrl, + }] + this.openCheckoutPage(selectedProduct); + }, decreaseQuantity(productId, event) { const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId); this.updateSelectedProducts(productId, product.quantity - 1, product.currency, product.price, product.shopUrl, event); @@ -95,9 +110,6 @@ export default { onAddToCart(item) { alert(`Added ${item.title} to cart.`); }, - onBuyNow(item) { - alert(`Buying ${item.title} now.`); - }, }, }; diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue index dc79cbe4f31c0..7407f11c8a33e 100755 --- a/app/javascript/widget/components/AgentMessage.vue +++ b/app/javascript/widget/components/AgentMessage.vue @@ -29,6 +29,7 @@ :message="message.content" :selected-products="selectedProducts" :update-selected-products="updateSelectedProducts" + :open-checkout-page="openCheckoutPage" />
{}, }, + openCheckoutPage: { + type: Function, + default: () => {}, + }, }, data() { return { diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue index dbb61d4fbca05..0b2c6301c0a05 100755 --- a/app/javascript/widget/components/AgentMessageBubble.vue +++ b/app/javascript/widget/components/AgentMessageBubble.vue @@ -30,6 +30,7 @@ :items="messageContentAttributes.items" :selected-products="selectedProducts" :update-selected-products="updateSelectedProducts" + :open-checkout-page="openCheckoutPage" /> {}, }, + openCheckoutPage: { + type: Function, + default: () => {}, + }, }, computed: { isTemplate() { diff --git a/app/javascript/widget/components/ChatMessage.vue b/app/javascript/widget/components/ChatMessage.vue index 462d0baa81a33..a4dd8bfd8f3e0 100755 --- a/app/javascript/widget/components/ChatMessage.vue +++ b/app/javascript/widget/components/ChatMessage.vue @@ -12,6 +12,7 @@ :reply-to="replyTo" :selected-products="selectedProducts" :update-selected-products="updateSelectedProducts" + :open-checkout-page="openCheckoutPage" /> @@ -39,6 +40,10 @@ export default { type: Function, default: () => {}, }, + openCheckoutPage: { + type: Function, + default: () => {}, + }, }, computed: { ...mapGetters({ diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue index ad079a8233686..436d493ca2ddd 100755 --- a/app/javascript/widget/components/ConversationWrap.vue +++ b/app/javascript/widget/components/ConversationWrap.vue @@ -16,6 +16,7 @@ :message="message" :selectedProducts="selectedProducts" :updateSelectedProducts="updateSelectedProducts" + :openCheckoutPage="openCheckoutPage" />
From 43c5f662fe5d4a589f4450fa42979cddf85e6a40 Mon Sep 17 00:00:00 2001 From: vinayak-trivedi Date: Thu, 2 Jan 2025 23:50:51 +0530 Subject: [PATCH 33/50] fix styling of agent and user message --- app/javascript/widget/components/AgentMessageBubble.vue | 1 + app/javascript/widget/components/UserMessageBubble.vue | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue index 0b2c6301c0a05..9ce7d9720aa15 100755 --- a/app/javascript/widget/components/AgentMessageBubble.vue +++ b/app/javascript/widget/components/AgentMessageBubble.vue @@ -6,6 +6,7 @@ " class="chat-bubble agent" :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')" + style="border-radius: 4px; border: 1px solid #F0F0F0" >
From 50c3523f2a658646e64b507f99e98ac858469a86 Mon Sep 17 00:00:00 2001 From: vinayak-trivedi Date: Fri, 3 Jan 2025 00:08:09 +0530 Subject: [PATCH 34/50] New phone number component --- .../widget/components/OrderDetailsCard.vue | 8 +- .../widget/components/PhoneInput.vue | 268 ++++++++++++++++++ 2 files changed, 272 insertions(+), 4 deletions(-) create mode 100644 app/javascript/widget/components/PhoneInput.vue diff --git a/app/javascript/widget/components/OrderDetailsCard.vue b/app/javascript/widget/components/OrderDetailsCard.vue index fed13908a6395..d43a3bbd0b129 100644 --- a/app/javascript/widget/components/OrderDetailsCard.vue +++ b/app/javascript/widget/components/OrderDetailsCard.vue @@ -4,18 +4,18 @@
From fe7fbffa8fced70b8f48ed6d2589b9d3d888ae56 Mon Sep 17 00:00:00 2001 From: vinayak-trivedi Date: Fri, 3 Jan 2025 00:17:57 +0530 Subject: [PATCH 35/50] fix issue with z-index --- app/javascript/widget/views/Home.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue index 0023f8b943a0b..1e3fc084ac34f 100755 --- a/app/javascript/widget/views/Home.vue +++ b/app/javascript/widget/views/Home.vue @@ -1,13 +1,13 @@