stay_commerce-frontend 0.1.0 → 0.1.1

data/app/javascript/react/styles/room.scss

@@ -18,17 +18,15 @@
   margin-bottom: 2rem;
 
   &.room-section-bordered {
-    margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid #e5e7eb;
   }
-}
-
-.room-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #111827;
-  margin-bottom: 1.5rem;
+  .room-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #111827;
+    margin-bottom: 1.5rem;
+  }
 }
 
 .form-item {
@@ -116,6 +114,7 @@
 
 .image-upload-content {
   margin-top: 1.25rem;
+  position: relative;
 }
 
 .upload-container {
@@ -125,6 +124,7 @@
   padding: 1.5rem 1.5rem 1.5rem;
   border: 2px dashed #d1d5db;
   border-radius: 0.375rem;
+  margin-bottom: 40px;
 }
 
 .upload-content {
@@ -135,6 +135,11 @@
   text-align: center;
 }
 
+.error-message {
+  position: absolute;
+  bottom: 0;
+}
+
 .upload-icon {
   width: 3rem;
   height: 3rem;

data/app/javascript/react/utils/helpers/ToastErros.js

@@ -0,0 +1,12 @@
+import { toast } from "react-toastify";
+
+export const showToastError = (message) => {
+  toast.error(message, {
+    position: "top-right",
+    autoClose: 2000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+  });
+};

data/db/migrate/20250627101451_add_role_to_stay_users.rb

@@ -0,0 +1,5 @@
+class AddRoleToStayUsers < ActiveRecord::Migration[8.0]
+  def change
+    add_column :stay_users, :role, :string
+  end
+end

data/lib/stay_commerce/frontend/version.rb

@@ -1,5 +1,5 @@
 module StayCommerce
   module Frontend
-    VERSION = "0.1.0"
+    VERSION = "0.1.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: stay_commerce-frontend
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - w3villa-tarun
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-25 00:00:00.000000000 Z
+date: 2025-07-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -194,15 +194,16 @@ files:
 - app/javascript/react/components/HeroSectionDesign/BookingForm.jsx
 - app/javascript/react/components/HeroSectionDesign/HeroSection.jsx
 - app/javascript/react/components/HeroSectionDesign/MyPropertiesListing.jsx
-- app/javascript/react/components/HeroSectionDesign/PropertiesPage.jsx
 - app/javascript/react/components/HotelListing/Listing.jsx
 - app/javascript/react/components/Layout/Layout.js
 - app/javascript/react/components/Listing-stay-Detail/AmenitiesFeatures.jsx
 - app/javascript/react/components/Listing-stay-Detail/AmenitiesModal.jsx
 - app/javascript/react/components/Listing-stay-Detail/ApartmentCard.jsx
 - app/javascript/react/components/Listing-stay-Detail/BookingModal.jsx
+- app/javascript/react/components/Listing-stay-Detail/CardManager.jsx
 - app/javascript/react/components/Listing-stay-Detail/CheckoutForm.jsx
 - app/javascript/react/components/Listing-stay-Detail/ListingStayDetailPage.jsx
+- app/javascript/react/components/Listing-stay-Detail/PropertiesPage.jsx
 - app/javascript/react/components/Listing-stay-Detail/PropertyDescription.jsx
 - app/javascript/react/components/Listing-stay-Detail/PropertyDetailsCard.jsx
 - app/javascript/react/components/Listing-stay-Detail/Reviews.jsx
@@ -242,23 +243,29 @@ files:
 - app/javascript/react/shared/Button/Button.jsx
 - app/javascript/react/shared/Button/ButtonPrimary.jsx
 - app/javascript/react/shared/Button/ButtonSelect.jsx
+- app/javascript/react/shared/Button/SecondryButton.jsx
 - app/javascript/react/shared/Checkbox/Checkbox.jsx
 - app/javascript/react/shared/CurrencySymbol.jsx
-- app/javascript/react/shared/DateField/CustomDatePicker.jsx
 - app/javascript/react/shared/FooterSection/Footer.jsx
 - app/javascript/react/shared/FormField/FormField.jsx
 - app/javascript/react/shared/FormItem/FormItem.jsx
 - app/javascript/react/shared/Input/Input.jsx
 - app/javascript/react/shared/Label/Label.jsx
+- app/javascript/react/shared/Loader.jsx
 - app/javascript/react/shared/Modal.jsx
 - app/javascript/react/shared/NcImage/NcImage.jsx
 - app/javascript/react/shared/NcImage/PlaceIcon.jsx
 - app/javascript/react/shared/NcImage/placecImageIcon.svg
+- app/javascript/react/shared/Pagination.jsx
+- app/javascript/react/shared/Schema/FormSchema
 - app/javascript/react/shared/Select/Select.jsx
 - app/javascript/react/styles/404error.scss
 - app/javascript/react/styles/ApartmentCard.scss
 - app/javascript/react/styles/BookingDetails.scss
+- app/javascript/react/styles/CardManager.scss
+- app/javascript/react/styles/Loader.scss
 - app/javascript/react/styles/Modal.scss
+- app/javascript/react/styles/Pagination.scss
 - app/javascript/react/styles/PropertiesPage.scss
 - app/javascript/react/styles/RenderSection.scss
 - app/javascript/react/styles/about.scss
@@ -272,12 +279,12 @@ files:
 - app/javascript/react/styles/blog.scss
 - app/javascript/react/styles/bookingform.scss
 - app/javascript/react/styles/button.scss
+- app/javascript/react/styles/buttonSecondry.scss
 - app/javascript/react/styles/buttonprimary.scss
 - app/javascript/react/styles/checkbox.scss
 - app/javascript/react/styles/commonlayout.scss
 - app/javascript/react/styles/commonpage.scss
 - app/javascript/react/styles/contact.scss
-- app/javascript/react/styles/customdatepicker.scss
 - app/javascript/react/styles/description.scss
 - app/javascript/react/styles/details.scss
 - app/javascript/react/styles/facilities.scss
@@ -308,6 +315,7 @@ files:
 - app/javascript/react/styles/property-description.scss
 - app/javascript/react/styles/propertycard.scss
 - app/javascript/react/styles/propertydetailscard.scss
+- app/javascript/react/styles/react-datepicker/react-datepicker.css
 - app/javascript/react/styles/resetpassword.scss
 - app/javascript/react/styles/reviews.scss
 - app/javascript/react/styles/room.scss
@@ -328,6 +336,7 @@ files:
 - app/javascript/react/utils/helpers/ErrorHandler.js
 - app/javascript/react/utils/helpers/InfoHandler.js
 - app/javascript/react/utils/helpers/SuccessHandler.js
+- app/javascript/react/utils/helpers/ToastErros.js
 - app/javascript/react/utils/helpers/isInViewPortIntersectionObserver.jsx
 - app/jobs/stay_commerce/frontend/application_job.rb
 - app/mailers/stay_commerce/frontend/application_mailer.rb
@@ -337,6 +346,7 @@ files:
 - config/initializers/cors.rb
 - config/initializers/devise.rb
 - config/routes.rb
+- db/migrate/20250627101451_add_role_to_stay_users.rb
 - lib/stay_commerce/frontend.rb
 - lib/stay_commerce/frontend/engine.rb
 - lib/stay_commerce/frontend/version.rb

data/app/javascript/react/components/HeroSectionDesign/PropertiesPage.jsx

@@ -1,122 +0,0 @@
-import React from "react";
-import GallerySlider from "../GallerySlider/GallerySlider";
-import { useNavigate } from "react-router-dom";
-import ButtonPrimary from "../../shared/Button/ButtonPrimary";
-
-const PropertiesPage = ({
-  heading = "Explore Travel Experiences",
-  setAllData,
-  stayListings,
-  data,
-}) => {
-  const staticProperties = [
-    {
-      id: 1,
-      name: "Phi Phi Islands Adventure Day Trip with Seaview Lunch by V. Marine Tour",
-      location: "Paris, France",
-      duration: "2 Days 1 Nights",
-      rating: 4.8,
-      reviews: 268,
-      price: 114,
-      discount: "20% OFF",
-      image:
-        "https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
-      description:
-        "The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip...",
-      bestPriceGuarantee: true,
-      freeCancellation: true,
-    },
-  ];
-  const propertiesToRender =
-    Array.isArray(data) && data.length > 0
-      ? data
-      : Array.isArray(stayListings) && stayListings.length > 0
-      ? stayListings
-      : [];
-  const allPropertyIds = stayListings?.map((property) => property.id);
-  const navigate = useNavigate();
-
-  const handleClick = (id) => {
-    navigate(`/listing-stay-detail/${id}`);
-  };
-
-  const finalProperties = propertiesToRender.length
-    ? propertiesToRender
-    : staticProperties;
-
-  return (
-    <div className="properties-page">
-      <div className="container">
-        <h2>{heading}</h2>
-        <div className="property-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {finalProperties.map((property, index) => (
-            <div key={property.id || index} className="property-card">
-              <div className="card-image-section">
-                {(property.discount || property.property_state) && (
-                  <div className="discount-badge">
-                    {property.discount || property.property_state}
-                  </div>
-                )}
-
-                <GallerySlider
-                  images={property.place_images || []}
-                  alt={property.title}
-                />
-              </div>
-
-              <div className="card-content">
-                <div className="location-duration">
-                  <span className="location">
-                    {property.location || property.address}
-                  </span>
-                </div>
-                <h3 className="property-title">
-                  {property.name || property.title}
-                </h3>
-
-                <p className="description">{property.description}</p>
-
-                <div className="card-footer">
-                  <div className="features">
-                    {(property.bestPriceGuarantee ||
-                      property.property_category) && (
-                      <span className="feature-tag">
-                        {property.bestPriceGuarantee
-                          ? "Best Price Guarantee"
-                          : property.property_category}
-                      </span>
-                    )}
-                    {(property.freeCancellation || property.property_type) && (
-                      <span className="feature-tag">
-                        {property.freeCancellation
-                          ? "Free Cancellation"
-                          : property.property_type}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </div>
-
-              <div className="custom-border"></div>
-
-              <div className="price-section">
-                <span className="duration">{property.duration}</span>
-                <div className="price-info">
-                  <span className="price">From - ${property.price}</span>
-                  <button
-                    className="view-details-btn"
-                    onClick={() => handleClick(property.slug)}
-                  >
-                    View Details
-                  </button>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PropertiesPage;

data/app/javascript/react/shared/DateField/CustomDatePicker.jsx

@@ -1,69 +0,0 @@
-import React from "react";
-import "../../styles/customdatepicker.scss";
-import { DatePickerInput } from "@mantine/dates";
-
-const CustomDatePicker = ({
-  label,
-  placeholder,
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  excludeDate,
-}) => {
-  return (
-    <DatePickerInput
-      label={label}
-      placeholder={placeholder}
-      value={value}
-      onChange={onChange}
-      minDate={minDate}
-      maxDate={maxDate}
-      hideOutsideDates
-      radius="xl"
-      clearable
-      valueFormat="MMM DD, YYYY"
-      excludeDate={excludeDate}
-      style={{ zIndex: 1000 }}
-      renderDay={(date) => {
-        const today = new Date();
-        const isBeforeMinDate = minDate && date < minDate;
-        const isAfterMaxDate = maxDate && date > maxDate;
-        const isExcluded = excludeDate && excludeDate(date);
-
-        const isDisabled =
-          (isBeforeMinDate || isAfterMaxDate || isExcluded) &&
-          !(date.toDateString() === today.toDateString() && !isExcluded);
-
-        return (
-          <div
-            style={{
-              position: "relative",
-              textAlign: "center",
-              fontSize: "14px",
-            }}
-          >
-            {date.getDate()}
-            {isDisabled && (
-              <span
-                style={{
-                  position: "absolute",
-                  top: "50%",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
-                  fontSize: "8px",
-                  color: "red",
-                  pointerEvents: "none",
-                }}
-              >
-                ❌
-              </span>
-            )}
-          </div>
-        );
-      }}
-    />
-  );
-};
-
-export default CustomDatePicker;

data/app/javascript/react/styles/customdatepicker.scss

@@ -1,120 +0,0 @@
-.react-datepicker__day--disabled {
-    position: relative; 
-    color: white !important;
-    background-color: #ccc6c6 !important; 
-    cursor: not-allowed; 
-    opacity: 1;
-    width:100%;
-    height:100%;
-    // font-weight: 800;
-    // background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%20fill%3D%22none%22%20stroke%3D%22red%22%20stroke-width%3D%225%22%3E%3Cline%20x1%3D%2210%22%20y1%3D%2210%22%20x2%3D%2240%22%20y2%3D%2240%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2240%22%20x2%3D%2240%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E');
-    background-size: cover;
-    border-radius: 25px;
-    // font-size: 20px;
-  }
-  
-  .react-datepicker__day--disabled::after {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 12px; 
-    color: red; 
-    pointer-events: none; 
-  }
-
-  .blue-date {
-    background-color: green !important;
-    color: white !important;
-    background-size: cover;
-    border-radius: 25px;
-    font-size: 20px;
-  }
-  
-  /* CustomDatePicker.scss */
-.start-date {
-  background-color: #4caf50 !important; /* Start date color (green) */
-  color: white !important;
-}
-
-.end-date {
-  background-color: #ff9800 !important; /* End date color (orange) */
-  color: white !important;
-}
-
-
-.blurred-date-picker {
-  background-color: rgba(0, 0, 0, 0.1); /* Light faded background */
-  filter: blur(2px); /* Add a blur effect */
-  cursor: not-allowed; /* Show the cursor as not-allowed */
-}
-
-.custom-datepicker .ant-picker-input input::placeholder {
-  color: var(--placeholder-color, #888); 
-}
-
-body.dark-mode .custom-datepicker .ant-picker-input input::placeholder {
-  color: var(--placeholder-dark-color, #aaa); 
-}
-
-.my-custom-datepicker .rainbow-date-picker__day--disabled {
-  position: relative; /* Ensure positioning for pseudo-element */
-  color: red; /* Change text color for visibility */
-}
-
-.my-custom-datepicker .rainbow-date-picker__day--disabled::after {
-  content: '❌'; /* Add a cross icon */
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.2em; /* Adjust size as needed */
-}
-
-.lcvIHF:focus {
-  background-color: inherit !important; 
-  outline: none; 
-  border: 1px solid inherit !important; 
-}
-
-.m_8fb7ebe7 {
-  background-color: inherit !important;
-  border: 1px solid rgb(80, 85, 95, 0.5) !important;
-  font-weight: 500 !important;
-  padding: 8px;
-}
-
-.dark .m_8fb7ebe7 {
-  background-color: rgba(var(--c-neutral-900), var(--tw-bg-opacity)) !important;
-  border: 1px solid rgba(80, 85, 95, 0.5) !important;
-}
-
-.m_88bacfd0 {
-  font-weight: 500;
-  padding-left:8px;
-  font-size:14px;
-  color:#52525B;
-
-}
-.dark .m_88bacfd0 {
-  color:inherit !important;
-
-}
-.m_8fdc1311{
-  margin-top:18px;
-}
-
-.m_6fa5e2aa{
-  font-weight: 500;
-  color:#52525B;
-  padding-left:8px;
-  
-}
-
-.dark .m_6fa5e2aa{
-  color:inherit !important; 
-}