Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit ae85b911 by Ravindra Kanojiya
Options

gift card api call

1 parent e8a09a03
Expand all
Inline Side-by-side
Showing 15 changed files with 226 additions and 48 deletions
components/detail/DetailGallery.js
...@@ -2,8 +2,14 @@ import React, { useEffect, useState } from "react"; ...@@ -2,8 +2,14 @@ import React, { useEffect, useState } from "react";
import ImageGallery from "react-image-gallery"; import ImageGallery from "react-image-gallery";
import Image from "next/image"; import Image from "next/image";
import { cleanImage } from "../../services/imageHandling"; import { cleanImage } from "../../services/imageHandling";
import { useSelector } from "react-redux";
import WishlistComponent from "./WIshlistComponent";
import { Modal } from "react-bootstrap";
import ShareWidget from "./ShareWidget";
const DetailGallery = ({ activityById }) => { const DetailGallery = ({ activityById }) => {
const { endUser } = useSelector(state => state.endUser);
const [showshareWidget, setshowshareWidget] = useState(false);
console.log("activityById here", activityById); console.log("activityById here", activityById);
// const images = [ // const images = [
...@@ -53,14 +59,18 @@ const DetailGallery = ({ activityById }) => { ...@@ -53,14 +59,18 @@ const DetailGallery = ({ activityById }) => {
<div className="top-row"> <div className="top-row">
<div className="most-booked">Most Booked</div> <div className="most-booked">Most Booked</div>
<div className="wishlist-share"> <div className="wishlist-share">
<a href="#" className="add-to-wishlist"> {endUser && <WishlistComponent activityId={activityById.data.id} userId={endUser.id} />}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist-01.svg" />
</span>
</a>
<a href="#" className="add-to-forwardt"> <a href="#" className="add-to-forwardt">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" /> <Image
onClick={() => {
setshowshareWidget(true);
}}
layout="fill"
alt=""
className="image img-fluid"
src="/images/icons/forward.svg"
/>
</span> </span>
</a> </a>
</div> </div>
...@@ -79,6 +89,17 @@ const DetailGallery = ({ activityById }) => { ...@@ -79,6 +89,17 @@ const DetailGallery = ({ activityById }) => {
</div> </div>
</div> </div>
)} )}
<Modal
show={showshareWidget}
onHide={() => {
setshowshareWidget(false);
}}
>
<Modal.Header closeButton>Share on social media</Modal.Header>
<Modal.Body>
<ShareWidget />
</Modal.Body>
</Modal>
</> </>
); );
}; };
......
components/detail/ShareWidget.js
...@@ -25,25 +25,25 @@ const ShareWidget = () => { ...@@ -25,25 +25,25 @@ const ShareWidget = () => {
}, []); }, []);
return ( return (
<div className=" d-flex "> <div className=" d-flex align-items-center justify-content-between">
<div className="Demo__container"> <div className="share-social-container">
<div className="Demo__some-network"> <div className="share-social-some-network">
<FacebookShareButton url={shareUrl} className="Demo__some-network__share-button"> <FacebookShareButton url={shareUrl} className="share-social-some-network-share-button">
<FacebookIcon size={32} round /> <FacebookIcon size={32} round />
</FacebookShareButton> </FacebookShareButton>
</div> </div>
<div className="Demo__some-network"> <div className="share-social-some-network">
<WhatsappShareButton url={shareUrl} title={title} separator=":: " className="Demo__some-network__share-button"> <WhatsappShareButton url={shareUrl} title={title} separator=":: " className="share-social-some-network-share-button">
<WhatsappIcon size={32} round /> <WhatsappIcon size={32} round />
</WhatsappShareButton> </WhatsappShareButton>
</div> </div>
<div className="Demo__some-network"> <div className="share-social-some-network">
<LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button"> <LinkedinShareButton url={shareUrl} className="share-social-some-network-share-button">
<LinkedinIcon size={32} round /> <LinkedinIcon size={32} round />
</LinkedinShareButton> </LinkedinShareButton>
</div> </div>
<div className="Demo__some-network"> <div className="share-social-some-network">
<TwitterShareButton url={shareUrl} title={title} className="Demo__some-network__share-button"> <TwitterShareButton url={shareUrl} title={title} className="share-social-some-network-share-button">
<XIcon size={32} round /> <XIcon size={32} round />
</TwitterShareButton> </TwitterShareButton>
</div> </div>
......
components/listing/LetDiscover.js
...@@ -139,7 +139,7 @@ const LetDiscover = ({ categories }) => { ...@@ -139,7 +139,7 @@ const LetDiscover = ({ categories }) => {
}} }}
> >
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes.image.data.attributes)} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
</span> </span>
<div className="title">{data.attributes.name}</div> <div className="title">{data.attributes.name}</div>
</a> </a>
......
components/user/MyGiftCard.js
import Image from "next/image"; import Image from "next/image";
import React, { Fragment } from "react"; import React, { Fragment } from "react";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { renderImage } from "../../services/imageHandling"; import { cleanImage, renderImage } from "../../services/imageHandling";
import { useSelector } from "react-redux";
const MyGiftCard = () => { const MyGiftCard = () => {
const { giftCard } = useSelector(state => state.giftCard);
console.log("giftCard >>>>>", giftCard)
const giftCardData = [ const giftCardData = [
{ {
id: "0", id: "0",
...@@ -35,12 +38,12 @@ const MyGiftCard = () => { ...@@ -35,12 +38,12 @@ const MyGiftCard = () => {
<div className="col-12 col-lg-12 form-container content-wraaper"> <div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Gift Card</h2> <h2>My Gift Card</h2>
<div className="row"> <div className="row">
{giftCardData?.length && giftCardData.map((data, index) => ( {giftCard?.length && giftCard.map((data, index) => (
<div className="col-12 col-lg-4" key={`1${index}`}> <div className="col-12 col-lg-4" key={`1${index}`}>
<div className="card-booking"> <div className="card-booking">
<div className="card-booking-img bgGrey"> <div className="card-booking-img bgGrey">
<span className="image-container"> <span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image" /> <Image src={cleanImage(data.attributes.image.data.attributes)} layout="fill" className="image" />
</span> </span>
</div> </div>
<div className="card-booking-content details-wrapper"> <div className="card-booking-content details-wrapper">
...@@ -48,16 +51,16 @@ const MyGiftCard = () => { ...@@ -48,16 +51,16 @@ const MyGiftCard = () => {
<div className="d-flex align-items-start justify-content-between"> <div className="d-flex align-items-start justify-content-between">
<div className="details-div"> <div className="details-div">
<p>Sender’s Email Id</p> <p>Sender’s Email Id</p>
<p>{data.sender_email}</p> <p>{data.attributes.senderEmail}</p>
</div> </div>
<div className="details-div"> <div className="details-div">
<p>Receiver’s Email Id</p> <p>Receiver’s Email Id</p>
<p>{data.receiver_email}</p> <p>{data.attributes.receiverEmail}</p>
</div> </div>
</div> </div>
<div className="details-div"> <div className="details-div">
<p>Gift Amount</p> <p>Gift Amount</p>
<p>{data.gift_amount}</p> <p>{data.attributes.amount}</p>
</div> </div>
</div> </div>
</div> </div>
......
pages/user/giftcard/index.js
import React from "react"; import React from "react";
import Layout from "../../../components/layout/Layout"; import Layout from "../../../components/layout/Layout";
import MyGiftCard from "../../../components/user/MyGiftCard"; import MyGiftCard from "../../../components/user/MyGiftCard";
import { getGiftCard } from "../../../redux/actions/giftCardAction";
import { wrapper } from "../../../redux/store";
export default function UserGiftCardPage () { export default function UserGiftCardPage () {
...@@ -9,4 +11,16 @@ export default function UserGiftCardPage () { ...@@ -9,4 +11,16 @@ export default function UserGiftCardPage () {
<MyGiftCard /> <MyGiftCard />
</Layout> </Layout>
); );
};
\ No newline at end of file \ No newline at end of file
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
try {
await store.dispatch(getGiftCard())
return {
props: {},
};
} catch (error) {
}
});
\ No newline at end of file \ No newline at end of file
public/images/icons/wishlist-01.svg
<svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg"> <?xml version="1.0" encoding="UTF-8"?>
<path d="M12.5015 2.47197C15.3399 -0.0758325 19.7262 0.00875068 22.4601 2.74848C25.1942 5.4882 25.2881 9.85304 22.7453 12.6999L12.5002 22.961L2.25532 12.6999C-0.287408 9.85304 -0.19236 5.4813 2.54047 2.74848C5.27639 0.012557 9.65493 -0.0796145 12.5015 2.47197ZM20.7496 4.45554C18.9382 2.64043 16.0137 2.5668 14.1159 4.27039L12.5026 5.71842L10.8885 4.27152C8.98526 2.56555 6.06602 2.6406 4.2493 4.45731C2.4492 6.25742 2.35883 9.14049 4.01774 11.0447L12.5002 19.5406L20.9829 11.0447C22.6425 9.13976 22.5524 6.26218 20.7496 4.45554Z" fill="#424242"/> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 29 29">
</svg> <defs>
<style>
.cls-1 {
clip-path: url(#clippath);
}
.cls-2 {
fill: none;
}
.cls-2, .cls-3 {
stroke-width: 0px;
}
.cls-3 {
fill: #000;
}
</style>
<clipPath id="clippath">
<rect class="cls-2" y="2.5" width="29" height="24.4"/>
</clipPath>
</defs>
<g class="cls-1">
<path class="cls-3" d="M29,10.2c0-.5-.1-1.1-.3-1.6-.8-2.8-2.5-4.8-5.4-5.6-3.1-.9-5.8-.2-8.1,2.1-.3.3-.5.6-.8.8-.3-.3-.5-.6-.7-.8-1.2-1.3-2.7-2.1-4.5-2.4-2.8-.3-5.2.5-7.1,2.5C.3,7.2-.3,9.7.1,12.3c.3,1.7,1.1,3.1,2.1,4.5,1.4,1.8,3.1,3.2,4.8,4.7,2.1,1.7,4.1,3.4,6.2,5,.8.6,1.6.7,2.4,0,2.7-2.2,5.4-4.4,8-6.6,1.3-1.1,2.6-2.4,3.5-3.8.9-1.4,1.6-2.8,1.7-4.5,0,0,0-.1,0-.2v-1.2ZM14.5,25.3c0,0-.1,0-.2-.1-2.3-1.9-4.6-3.7-6.9-5.6-1.6-1.3-3.1-2.7-4.3-4.4-1.1-1.6-1.7-3.3-1.4-5.3.3-2.1,1.2-3.8,3.2-4.9,1.8-1,3.7-1.1,5.7-.3,1.1.5,2,1.4,2.7,2.3.1.1.2.3.3.4.5.6,1.3.6,1.8,0,.4-.5.8-1.1,1.3-1.5,1.5-1.5,3.4-2.1,5.6-1.7,2.3.5,3.9,1.9,4.6,4,.9,2.4.5,4.7-1,6.9-.9,1.3-2.1,2.5-3.3,3.6-2.1,1.7-4.2,3.5-6.2,5.2-.6.5-1.2,1-1.8,1.5Z"/>
</g>
</svg>
\ No newline at end of file \ No newline at end of file
public/images/vendor/call (copy).svg 0 → 100644
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.5" cy="15.5" r="15.5" fill="#0070BD"/>
</svg>
public/images/vendor/call.svg
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.5" cy="15.5" r="15.5" fill="#0070BD"/> <circle cx="15.5" cy="15.5" r="15.5" fill="#0070BD"/>
<path d="M22.75 18.315V20.9671C22.75 21.3608 22.4456 21.6875 22.0529 21.7153C21.7248 21.7384 21.4572 21.75 21.25 21.75C14.6226 21.75 9.25 16.3774 9.25 9.75C9.25 9.54278 9.26159 9.27515 9.28476 8.94713C9.31253 8.55441 9.6392 8.25 10.0329 8.25H12.6851C12.8776 8.25 13.0388 8.39582 13.0581 8.58735C13.0755 8.7593 13.0916 8.89735 13.1066 9.00151C13.2583 10.061 13.5681 11.0695 14.0115 12.0023C14.0827 12.152 14.0363 12.3312 13.9014 12.4275L12.2827 13.5838C13.2681 15.8858 15.1142 17.7319 17.4162 18.7174L18.5703 17.1014C18.6679 16.9649 18.8492 16.918 19.0007 16.9899C19.9334 17.4329 20.9418 17.7425 22.0012 17.8938C22.1047 17.9087 22.2419 17.9246 22.4126 17.9419C22.6042 17.9612 22.75 18.1225 22.75 18.315Z" fill="white"/>
</svg> </svg>
redux/actions/giftCardAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { GET_GIFTCARD_FAIL, GET_GIFTCARD_REQUEST, GET_GIFTCARD_SUCCESS } from "../constants/giftCardConstants";
export const getGiftCard = () => async dispatch => {
try {
dispatch({
type: GET_GIFTCARD_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["image"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards?${queryString}`, config);
console.log("response > ", response.data);
dispatch({
type: GET_GIFTCARD_SUCCESS,
payload: response.data
});
console.log("gift card here");
return response.data;
} catch (error) {
dispatch({
type: GET_GIFTCARD_FAIL,
payload: error.response.data
});
}
};
redux/constants/giftCardConstants.js 0 → 100644
export const GET_GIFTCARD_REQUEST = "GET_GIFTCARD_REQUEST"
export const GET_GIFTCARD_SUCCESS = "GET_GIFTCARD_SUCCESS"
export const GET_GIFTCARD_FAIL = "GET_GIFTCARD_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file \ No newline at end of file
redux/reducers/giftCardReducer.js 0 → 100644
import { GET_GIFTCARD_FAIL, GET_GIFTCARD_REQUEST, GET_GIFTCARD_SUCCESS, CLEAR_ERRORS } from "../constants/giftCardConstants";
export const giftCardReducer = (state = { giftCard: [] }, action) => {
switch (action.type) {
case GET_GIFTCARD_REQUEST:
return {
loading: true
};
case GET_GIFTCARD_SUCCESS:
return {
giftCard: action.payload.data,
// totalCount: action.payload.meta.pagination.total,
// resultsPerPage: action.payload.meta.pagination.pageSize
};
case GET_GIFTCARD_FAIL:
return {
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
redux/reducers/reducers.js
...@@ -12,6 +12,7 @@ import { blogReducer, blogsReducer } from "./blogReducer"; ...@@ -12,6 +12,7 @@ import { blogReducer, blogsReducer } from "./blogReducer";
import { getAllHomeBannerReducer } from "./homeBannerReducer"; import { getAllHomeBannerReducer } from "./homeBannerReducer";
import { getAllFaqsReducer } from "./faqsReducer"; import { getAllFaqsReducer } from "./faqsReducer";
import { reviewsReducer } from "./reviewsReducers"; import { reviewsReducer } from "./reviewsReducers";
import { giftCardReducer } from "./giftCardReducer";
const reducers = combineReducers({ const reducers = combineReducers({
townships: townshipsReducer, townships: townshipsReducer,
...@@ -46,6 +47,7 @@ const reducers = combineReducers({ ...@@ -46,6 +47,7 @@ const reducers = combineReducers({
wishlists: getWishlistsReducer, wishlists: getWishlistsReducer,
faqs: getAllFaqsReducer, faqs: getAllFaqsReducer,
reviews: reviewsReducer, reviews: reviewsReducer,
giftCard: giftCardReducer,
}); });
export default reducers; export default reducers;
styles/globals.css
...@@ -979,7 +979,8 @@ span.form-error, ...@@ -979,7 +979,8 @@ span.form-error,
.content-wraaper h2 { .content-wraaper h2 {
color: #000; color: #000;
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 28px; /* font-size: 28px; */
font-size: calc(20px + (28 - 20) * (100vw - 320px) / (1920 - 320));
font-weight: 600; font-weight: 600;
line-height: normal; line-height: normal;
margin-bottom: 30px; margin-bottom: 30px;
...@@ -1201,20 +1202,20 @@ span.form-error, ...@@ -1201,20 +1202,20 @@ span.form-error,
.content-div h2 { .content-div h2 {
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 36px; font-size: calc(20px + (36 - 20) * (100vw - 320px) / (1920 - 320));
line-height: 50px; line-height: calc(30px + (50 - 30) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
margin-bottom: 20px; margin-bottom: 20px;
} }
.content-div h4 { .content-div h4 {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 30px; /* font-size: 30px; */
line-height: 37px; font-size: calc(18px + (30 - 18) * (100vw - 320px) / (1920 - 320));
line-height: calc(30px + (37 - 30) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
margin-bottom: 20px; margin-bottom: 20px;
} }
.business-details::before { .business-details::before {
content: ""; content: "";
border-left: 6px solid #0070bd; border-left: 6px solid #0070bd;
...@@ -1247,8 +1248,9 @@ span.form-error, ...@@ -1247,8 +1248,9 @@ span.form-error,
.helplist li p, .helplist li p,
.business-details p { .business-details p {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 18px; /* font-size: 18px; */
line-height: 20px; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(16px + (28 - 16) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
text-align: left; text-align: left;
margin-bottom: 0; margin-bottom: 0;
...@@ -1368,7 +1370,9 @@ span.form-error, ...@@ -1368,7 +1370,9 @@ span.form-error,
display: flex; display: flex;
align-items: center; align-items: center;
} }
.sidebar ul li a > span {
flex: 0 0 auto;
}
.sidebar ul li a span { .sidebar ul li a span {
padding-left: 1rem; padding-left: 1rem;
padding-top: 5px; padding-top: 5px;
...@@ -1377,6 +1381,8 @@ span.form-error, ...@@ -1377,6 +1381,8 @@ span.form-error,
.sidebarContainer .content { .sidebarContainer .content {
flex: 1; flex: 1;
padding: 2rem 1rem; padding: 2rem 1rem;
flex-grow: 1;
overflow-x: auto;
} }
/*-------------------------*/ /*-------------------------*/
...@@ -1420,8 +1426,9 @@ span.form-error, ...@@ -1420,8 +1426,9 @@ span.form-error,
.p3 { .p3 {
font-family: "Poppins Regular"; font-family: "Poppins Regular";
font-size: 26px; /* font-size: 26px; */
line-height: 39px; font-size: calc(15px + (26 - 15) * (100vw - 320px) / (1920 - 320));
line-height: calc(29px + (39 - 29) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
text-align: center; text-align: center;
color: #000000; color: #000000;
...@@ -1449,7 +1456,9 @@ span.form-error, ...@@ -1449,7 +1456,9 @@ span.form-error,
color: #ffffff; color: #ffffff;
border: none; border: none;
} }
.btnAdd:disabled .image-container .image{
width: 14px !important;
}
.btnAdd:hover, .btnAdd:hover,
.btnAdd:focus, .btnAdd:focus,
.btnAdd:active { .btnAdd:active {
...@@ -1641,8 +1650,8 @@ span.form-error, ...@@ -1641,8 +1650,8 @@ span.form-error,
/*--------- orders listing -----------*/ /*--------- orders listing -----------*/
.rightContent h2 { .rightContent h2 {
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 32px; font-size: 1.667vw;
line-height: 40px; line-height: 2.167vw;
letter-spacing: 0em; letter-spacing: 0em;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -1963,14 +1972,31 @@ span.form-error, ...@@ -1963,14 +1972,31 @@ span.form-error,
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.info .rating-wishlist .rating .number{ .info .rating-wishlist .rating .number {
padding-top: 0.2rem; padding-top: 0.2rem;
} }
.info .rating-wishlist .wishlist .image-container { .info .rating-wishlist .wishlist .image-container {
width: 19px; width: 19px;
height: 19px;
display: block; display: block;
} }
.rs{
/* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */
}
.share-social-container{
display: flex;
align-items: center;
}
.anticon.anticon-copy{
cursor: pointer;
}
.share-social-container .share-social-some-network{
margin-right: 1rem;
}
.wishlist-share .wishlist{
width: 29px;
height: 29px;
}
.info .rating-wishlist .rating .image-container { .info .rating-wishlist .rating .image-container {
width: 14px; width: 14px;
/* margin-top: -4px; */ /* margin-top: -4px; */
...@@ -3780,13 +3806,14 @@ img:hover { ...@@ -3780,13 +3806,14 @@ img:hover {
} }
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
.swiper-nav, .home_nav { .swiper-nav,
.home_nav {
margin-left: -33px; margin-left: -33px;
} }
.top-btn { .top-btn {
margin-bottom: 1rem; margin-bottom: 1rem;
margin-top: 1rem; margin-top: 1rem;
} }
.swiper-nav, .swiper-nav,
.home_nav { .home_nav {
margin-left: -25px; margin-left: -25px;
...@@ -3834,12 +3861,16 @@ img:hover { ...@@ -3834,12 +3861,16 @@ img:hover {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.rightContent h2 {
font-size: 4.172vw;
line-height: 4.172vw;
}
.sub-categories { .sub-categories {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.header-search .rbt .rbt-input-main { .header-search .rbt .rbt-input-main {
font-size: 1rem; font-size: 1rem;
} }
.gift-card-amt ul li a, .gift-card-amt ul li a,
.gift-card-amt ul li label { .gift-card-amt ul li label {
min-width: 40vw; min-width: 40vw;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!