Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[wip] Live chat #156

Open
wants to merge 50 commits into
base: bitespeed-develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
d228b14
changes to show website option
vinayak-trivedi Dec 30, 2024
571b440
track order initial component
vinayak-trivedi Dec 30, 2024
193accf
margin fix
vinayak-trivedi Dec 30, 2024
628bb42
body ui changes
vinayak-trivedi Dec 30, 2024
ad47a8d
faq section adding logic completed
vinayak-trivedi Dec 30, 2024
6f234a7
faq section added
vinayak-trivedi Dec 30, 2024
7ba1678
body changes
vinayak-trivedi Dec 30, 2024
9d13150
delete icon added
vinayak-trivedi Dec 31, 2024
4562c0f
body changes
vinayak-trivedi Dec 31, 2024
1d3150b
track order section changes added
vinayak-trivedi Dec 31, 2024
44ba30c
first screen completed
vinayak-trivedi Dec 31, 2024
0550b17
home fixes
vinayak-trivedi Dec 31, 2024
f43ce17
changes for chat header tab
vinayak-trivedi Dec 31, 2024
100f275
chat header fix
vinayak-trivedi Dec 31, 2024
a0c7b3f
added rating component
vinayak-trivedi Dec 31, 2024
aacb9d6
input UI fixes
vinayak-trivedi Dec 31, 2024
5b9d259
added quick reply buttons
vinayak-trivedi Jan 1, 2025
9f32c35
product carouesel changes
vinayak-trivedi Jan 1, 2025
ec16d83
order details component
vinayak-trivedi Jan 1, 2025
83231b5
defeault country code logic
vinayak-trivedi Jan 2, 2025
4c2f8aa
added buttons in carousel component
vinayak-trivedi Jan 2, 2025
c4b8075
small ui changes in carousel
vinayak-trivedi Jan 2, 2025
1c5bdd5
fallback image added.
vinayak-trivedi Jan 2, 2025
fd2d388
fix overflow issue
vinayak-trivedi Jan 2, 2025
150d4e6
cart button component
vinayak-trivedi Jan 2, 2025
20bebd0
cart button component
vinayak-trivedi Jan 2, 2025
e31ab68
logic completed for rendering the live chat components
vinayak-trivedi Jan 2, 2025
2204c74
product carousel logic completed
vinayak-trivedi Jan 2, 2025
b1ad8f2
product carousel
vinayak-trivedi Jan 2, 2025
f4f0e29
cross icon in product carousel
vinayak-trivedi Jan 2, 2025
dfbeece
completed cart functionality
vinayak-trivedi Jan 2, 2025
d0c9ee2
buy now click logic
vinayak-trivedi Jan 2, 2025
43c5f66
fix styling of agent and user message
vinayak-trivedi Jan 2, 2025
50c3523
New phone number component
vinayak-trivedi Jan 2, 2025
fe7fbff
fix issue with z-index
vinayak-trivedi Jan 2, 2025
7be17e4
home UI comleted
vinayak-trivedi Jan 2, 2025
a7e34bb
message fixes
vinayak-trivedi Jan 2, 2025
56d12b8
delete icon instead of cross icon
vinayak-trivedi Jan 2, 2025
e9170fc
conversation wrap
vinayak-trivedi Jan 2, 2025
d288c21
brand changes
vinayak-trivedi Jan 3, 2025
9fa5fe1
fix lint issues
vinayak-trivedi Jan 3, 2025
e8d263f
message type backend
vinayak-trivedi Jan 6, 2025
242e59e
removed hardcode values for message
vinayak-trivedi Jan 20, 2025
51d452a
remove hardcoded values
vinayak-trivedi Jan 20, 2025
1673e1d
added support for handling track order details
vinayak-trivedi Jan 20, 2025
8170c7f
handled tags
vinayak-trivedi Jan 20, 2025
88039f2
messages changes for faq and input
vinayak-trivedi Jan 20, 2025
6ade8b1
track order message fix
vinayak-trivedi Jan 20, 2025
bca9b61
faq changes
vinayak-trivedi Jan 21, 2025
994bf4f
removed state for faq
vinayak-trivedi Jan 22, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
message fixes
  • Loading branch information
vinayak-trivedi committed Jan 2, 2025
commit a7e34bb316aa0e0cf021b86909e6446ff353ee63
140 changes: 102 additions & 38 deletions app/javascript/shared/components/ProductCarousel.vue
Original file line number Diff line number Diff line change
@@ -1,31 +1,77 @@
<template>
<div class="carousel-container">
<h1>Products for you</h1>
<h1>{{ message }}</h1>
<div
class="carousel"
:style="{ transform: `translateX(-${currentSlide * 100}%)` }"
>
<div v-for="(item, index) in items" :key="index" class="carousel-item">
<div @click="onProductClick(item)" class="card">
<img :src="item.image || '~dashboard/assets/product-image-fallback.svg'" alt="item.title" class="card-image" />
<div class="card" @click="onProductClick(item)">
<img
:src="item.image || '~dashboard/assets/product-image-fallback.svg'"
alt="item.title"
class="card-image"
/>
<h3 class="card-title">{{ item.title }}</h3>
<p class="card-price">₹{{ item.price }}</p>
<div class="card-buttons">
<button @click="updateSelectedProducts(item.id, 1, item.currency, item.price, item.shopUrl, $event)" v-if="!isProductInSelectedProducts(item)" class="add-to-cart-button">
<button
v-if="!isProductInSelectedProducts(item)"
class="add-to-cart-button"
@click="
updateSelectedProducts(
item.id,
1,
item.currency,
item.price,
item.shopUrl,
$event
)
"
>
<img
width="17"
height="17"
src="~dashboard/assets/add-to-cart.svg"
alt="Add to Cart"
/>
</button>
<div class="quantity-container" v-else>
<button class="quantity-button" @click="decreaseQuantity(item.id, $event)">-</button>
<div v-else class="quantity-container">
<button
class="quantity-button"
@click="decreaseQuantity(item.id, $event)"
>
-
</button>
<span class="quantity-text">{{ getQuantity(item.id) }}</span>
<button class="quantity-button" @click="increaseQuantity(item.id, $event)">+</button>
<button
class="quantity-button"
@click="increaseQuantity(item.id, $event)"
>
+
</button>
</div>
<button @click="onBuyNow(item, $event)" v-if="!isProductInSelectedProducts(item)" class="buy-now-button">Buy now</button>
<button @click="updateSelectedProducts(item.id, 0, item.currency, item.price, item.shopUrl, $event)" v-else class="clear-button">
<button
v-if="!isProductInSelectedProducts(item)"
class="buy-now-button"
@click="onBuyNow(item, $event)"
>
Buy now
</button>
<button
v-else
class="clear-button"
@click="
updateSelectedProducts(
item.id,
0,
item.currency,
item.price,
item.shopUrl,
$event
)
"
>
<img src="~dashboard/assets/cross.svg" alt="Clear" />
</button>
</div>
@@ -49,6 +95,10 @@ export default {
FluentIcon,
},
props: {
message: {
type: Object,
default: () => {},
},
selectedProducts: {
type: Array,
default: () => [],
@@ -67,46 +117,62 @@ export default {
},
},
methods: {
nextSlide() {
if (this.currentSlide < this.items.length - this.slidesToShow) {
this.currentSlide++;
}
},
onProductClick(item) {
window.open(`https://${item.shopUrl}/products/${item.productHandle}`, '_blank');
window.open(
`https://${item.shopUrl}/products/${item.productHandle}`,
'_blank'
);
},
isProductInSelectedProducts(product) {
return this.selectedProducts.some(selectedProduct => selectedProduct.id === product.id);
return this.selectedProducts.some(
selectedProduct => selectedProduct.id === product.id
);
},
increaseQuantity(productId, event) {
const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId);
this.updateSelectedProducts(productId, product.quantity + 1, product.currency, product.price, product.shopUrl, event);
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,
}]
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);
const product = this.selectedProducts.find(
selectedProduct => selectedProduct.id === productId
);
this.updateSelectedProducts(
productId,
product.quantity - 1,
product.currency,
product.price,
product.shopUrl,
event
);
},
getQuantity(productId) {
const product = this.selectedProducts.find(selectedProduct => selectedProduct.id === productId);
console.log(product, 'product');
const product = this.selectedProducts.find(
selectedProduct => selectedProduct.id === productId
);
return product ? +product.quantity : 0;
},
prevSlide() {
if (this.currentSlide > 0) {
this.currentSlide--;
}
},
onAddToCart(item) {
alert(`Added ${item.title} to cart.`);
},
@@ -119,7 +185,7 @@ h1 {
font-size: 13px;
font-weight: 500;
line-height: 11px;
color: #8C8C8C;
color: #8c8c8c;
margin-bottom: 10px;
}
.carousel-container {
@@ -195,7 +261,7 @@ h1 {
font-weight: 500;
color: #fff;
width: 34%;
background: #1F93FF;
background: #1f93ff;
height: 28px;
display: flex;
align-items: center;
@@ -210,7 +276,6 @@ h1 {
color: #fff;
font-size: 14px;
font-weight: 600;

}

.card-buttons {
@@ -239,7 +304,6 @@ h1 {
font-weight: 500;
}


.more-variants {
display: flex;
width: 150px;
26 changes: 20 additions & 6 deletions app/javascript/widget/components/AgentMessageBubble.vue
Original file line number Diff line number Diff line change
@@ -2,11 +2,17 @@
<div class="chat-bubble-wrap">
<div
v-if="
!isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT && !isProductCarousel
!isCards &&
!isOptions &&
!isForm &&
!isArticle &&
!isCards &&
!isCSAT &&
!isProductCarousel
"
class="chat-bubble agent"
:class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
style="border-radius: 4px; border: 1px solid #F0F0F0"
style="border-radius: 4px; border: 1px solid #f0f0f0"
>
<div
v-dompurify-html="formatMessage(message, false)"
@@ -32,6 +38,7 @@
:selected-products="selectedProducts"
:update-selected-products="updateSelectedProducts"
:open-checkout-page="openCheckoutPage"
:message="message"
/>
<tags
v-if="shouldShowQuickReply"
@@ -132,21 +139,28 @@ export default {
return this.messageType === 3;
},
shouldShowQuickReply() {
if (this.contentType === 'quick_reply' && !this.messageContentAttributes.selected_reply) {
if (
this.contentType === 'quick_reply' &&
!this.messageContentAttributes.selected_reply
) {
return true;
}
return false;
},
isProductCarousel() {
console.log(this.contentType, 'messageContentAttributes');

if (this.contentType === 'product_carousel') {
return true;
}
return false;
},
shouldShowOrderDetailsCard() {
return this.contentType === 'order_input' && !(this.messageContentAttributes.user_phone_number || this.messageContentAttributes.user_order_id);
return (
this.contentType === 'order_input' &&
!(
this.messageContentAttributes.user_phone_number ||
this.messageContentAttributes.user_order_id
)
);
},
isTemplateEmail() {
return this.contentType === 'input_email';
Loading