[CLIENT]: Client Modal > Special Offer Modal

component_factory/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "antd": "^5.26.7",
+    "antd": "^5.27.0",
     "formik": "^2.4.6",
     "next": "15.4.5",
     "react": "19.1.0",
@@ -24,6 +24,6 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "5.9.2"
   }
 }

component_factory/src/app/css/SpecialOfferModal.scss

@@ -0,0 +1,119 @@
+/** SPECIAL OFFER MODAL **/
+.special-offer-modal-header {
+    background: linear-gradient(var(--ant-success-color), var(--ant-success-color)), var(--ant-primary-color);
+    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
+    border-radius: 16px 16px 0 0;
+}
+
+.special-offer-modal .close-icon {
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+}
+
+.special-offer-modal-header-left {
+    position: relative;
+}
+
+.image-skeleton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.image-skeleton {
+    overflow: hidden;
+    position: relative;
+}
+
+.special-offer-modal-header .image-skeleton {
+    border-radius: 8px !important;
+    overflow: hidden;
+}
+
+img {
+    vertical-align: middle;
+    border-style: none;
+}
+
+.image-skeleton__image {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    -o-object-fit: cover;
+    object-fit: cover;
+    border-radius: inherit;
+    display: inline-block;
+}
+
+.image-skeleton img {
+    -o-object-fit: cover;
+    object-fit: cover;
+}
+
+.image-skeleton__image.original {
+    position: absolute;
+    transition: opacity .3s ease-in-out;
+}
+
+.image-skeleton__image.isLoaded {
+    opacity: 1;
+}
+
+
+.special-offer-modal-content-wrapper {
+    border-radius: 0 0 16px 16px;
+    overflow: hidden;
+}
+
+.special-offer-modal-content {
+    background-color: #fff;
+    max-height: calc(100vh - 160px - 160px);
+    overflow: auto;
+    border-radius: 0 0 16px 16px;
+}
+
+.cursor-pointer {
+    cursor: pointer !important;
+}
+
+.special-offer-modal-copy-btn {
+    justify-content: space-between;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+}
+
+.special-offer-modal-copy-btn-text {
+    width: calc(100% - 80px);
+}
+
+.copy-text {
+    font-size: 14px;
+    line-height: 22px;
+    color: #257ffc;
+}
+
+@media(max-width: 480px) {
+    .special-offer-modal {
+        max-width:calc(100vw - 48px) !important;
+        margin: 0 auto !important; 
+    }
+
+    .special-offer-modal .close-icon {
+        top: 8px;
+        right: 8px;
+    }
+
+    .special-offer-modal-content {
+        max-height: calc(100vh - 160px - 200px);
+    }
+
+    .special-offer-modal-btn-wrapper {
+        flex-direction: column-reverse;
+    }
+
+    .special-offer-modal-btn-wrapper .ant-btn {
+        height: 44px !important;
+    }
+}

component_factory/src/app/css/base/button.scss

@@ -48,4 +48,122 @@
         color: #fff;
     }
 
+}
+
+
+/** SPECIAL OFFER MODAL **/
+.special-offer-modal 
+{
+    button.ant-btn {
+        line-height: 1.5715;
+        position: relative;
+        display: inline-block;
+        font-weight: 400;
+        white-space: nowrap;
+        text-align: center;
+        background-image: none;
+        box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
+        cursor: pointer;
+        transition: all .3s cubic-bezier(.645,.045,.355,1);
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        touch-action: manipulation;
+        height: 32px;
+        padding: 4px 15px;
+        font-size: 14px;
+        border-radius: 0;
+        color: #121212;
+        border: 1px solid #e9e9eb;
+        background: #fff;
+    }
+
+    button.ant-btn-primary {
+        border: none;
+        color: #121212;
+        background: #121212;
+        font-weight: 700;
+        line-height: 24px;
+        border-radius: 123px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+
+    button.ant-btn:focus, button.ant-btn:hover {
+        color: #121212 !important;
+        border: 2px solid #e0e0e0 !important;
+        background-color: #e0e0e0 !important;
+    }
+
+    button.ant-btn-primary:focus, button.ant-btn-primary:hover {
+        border: none !important;
+        background: rgba(18, 18, 18, .8) !important;
+    }
+
+    button.ant-btn.ant-btn-xl {
+        height: 52px;
+        border-radius: 123px;
+        min-width: 160px;
+    }
+
+    button.ant-btn-uppercase>span {
+        text-transform: uppercase;
+    }
+
+    button.ant-btn-primary .ant-typography, button.ant-btn-primary span {
+        color: #fff;
+    }
+
+    .ant-btn, .ant-btn:active, .ant-btn:focus {
+        outline: 0;
+    }
+
+    button.ant-btn {
+        min-height: 32px;
+        box-shadow: none !important;
+        text-shadow: none;
+        height: 48px;
+        border-radius: 123px;
+    }
+    
+    .special-offer-modal-btn-wrapper .ant-btn {
+        border-radius: 123px;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 1px;
+        font-weight: 700;
+    }
+    
+    .visit-store-btn {
+        background: #121212 !important;
+        border: none !important;
+        margin-left: 24px;
+    }
+
+    .visit-store-btn span {
+        color: #fff !important;
+    }
+
+    .ant-btn>span {
+        display: inline-block;
+    }
+    
+    .w__160 {
+        width: 160px;
+    }
+
+    @media (max-width: 480px) {
+        .visit-store-btn {
+            width: 100% !important;
+            margin-bottom: 16px !important;
+            margin-left: 0 !important;
+        }
+
+        .cancel-btn {
+            width: 100% !important;
+            margin-bottom: 16px !important;
+            margin-left: 0 !important;
+        }
+    }
 }

component_factory/src/app/css/base/modal.scss

@@ -39,3 +39,24 @@
     }
 }
 
+
+.special-offer-modal {
+
+    .ant-modal-content {
+        overflow: visible;
+        border-radius: 16px !important;
+        background-color: transparent;
+        padding: 0 !important;
+    }
+
+    .ant-modal-body {
+        padding: 0;
+    }
+
+    .modal__header {
+        background: linear-gradient(var(--ant-success-color), var(--ant-success-color)), var(--ant-primary-color);
+        border-bottom: 1px solid hsla(0, 0%, 100%, .1);
+        border-radius: 16px 16px 0 0;
+    }
+
+}

component_factory/src/app/css/base/spacing.scss

@@ -30,3 +30,65 @@
 
 }
 
+/** SPECIAL OFFER MODAL **/
+.special-offer-modal {
+
+  .ant-row {
+    flex-flow: row wrap;
+  }
+
+  .ant-row, .ant-row:after, .ant-row:before {
+    display: flex;
+  }
+
+  .align__items--center {
+    align-items: center;
+  }
+
+  .position--relative {
+    position: relative;
+  }
+
+  .p--16 {
+    padding: 16px !important;
+  }
+
+  .p__l--16 {
+    padding-left: 16px !important;
+  }
+
+  .p__x--16 {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+
+  .p__y--16 {
+    padding-top: 16px !important;
+    padding-bottom: 16px !important;
+  }
+
+  .m__t--16 {
+    margin-top: 16px !important;
+  }
+
+  .m__b--4 {
+    margin-bottom: 4px !important;
+  }
+
+  .p--12 {
+    padding: 12px !important;
+  }
+
+  .d--flex, .d--flex--row {
+    display: flex !important;
+  }
+
+  .m__t--24 {
+    margin-top: 24px !important;
+  }
+
+  .justify__content--end {
+    justify-content: flex-end;
+  }
+  
+}

component_factory/src/app/css/base/text.scss

@@ -34,3 +34,100 @@
         color: #414141 !important;
     }
 }
+
+
+/** FRONT CLIENT MODAL: SPECIAL OFFER MODAL **/
+.special-offer-modal {
+
+    .text__align--center {
+        text-align: center !important;
+    }
+
+    .text--semibold18.ant-typography {
+        font-weight: 600 !important;
+        font-size: 18px !important;
+        line-height: 28px;
+    }
+
+    .text--regular14.ant-typography {
+        font-weight: 400 !important;
+        font-size: 14px !important;
+        line-height: 20px;
+    }
+
+    .text--gray4, .text--gray4.ant-typography, .text--grey4, .text--grey4.ant-typography {
+        color: #636363 !important;
+    }
+
+    .leading-22 {
+        line-height: 22px !important;
+    }
+
+    .text--tundola, .text--tundola.ant-typography {
+        color: #414141 !important;
+    }
+
+    .ant-typography {
+        color: #121212;
+        overflow-wrap: break-word;
+    }
+
+    .ant-typography-ellipsis-multiple-line {
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+    }
+
+    .text {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: #020025;
+    }
+
+    .ant-typography p, div.ant-typography {
+        margin-bottom: 1em;
+    }
+
+    .text--semibold14.ant-typography {
+        font-weight: 600 !important;
+        font-size: 14px !important;
+        line-height: 22px;
+    }
+
+    .text--regular14.ant-typography {
+        font-weight: 400 !important;
+        font-size: 14px !important;
+        line-height: 20px;
+    }
+
+    .ant-typography p, .ant-typography.ant-typography-ellipsis, div.ant-typography {
+        margin-bottom: 0;
+    }
+
+    .special-offer-modal-header .ant-typography {
+        color: var(--ant-info-color) !important;
+    }
+
+    .text--default, .text--default.ant-typography {
+        color: #121212 !important;
+    }
+
+    .opacity--06 {
+        opacity: .6;
+    }
+
+    .text--regular12.ant-typography {
+        font-weight: 400 !important;
+        font-size: 12px !important;
+        line-height: 16px;
+    }
+
+    .text--semibold16.ant-typography {
+        font-weight: 600 !important;
+        font-size: 16px !important;
+        line-height: 24px;
+    }
+
+}

component_factory/src/app/page.tsx

@@ -9,7 +9,7 @@ export default function Page() {
     <>
     <p>Flat Interface Home Page</p>
 
-    <p>1: <a href="http://localhost:3000/simple_modal">Simple Modal</a></p>
+    <p>1: <a href="http://localhost:3002/simple_modal">Simple Modal</a></p>
     </>
   );
 }

component_factory/src/app/simple_modal/page.tsx

@@ -5,7 +5,7 @@ import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { Upload } from "antd";
 import { Col, Row } from "antd/lib/grid";
 
-import "../css/base/App.scss"
+import "../css/App.scss"
 import "../css/base/spacing.scss"
 import "../css/base/modal.scss"
 import "../css/base/tabs.scss"

component_factory/src/app/special_offer_modal/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { Col, Row } from "antd/lib/grid";
+
+import "../css/App.scss"
+import "../css/base/spacing.scss"
+import "../css/base/modal.scss"
+import "../css/base/tabs.scss"
+import "../css/base/text.scss"
+import "../css/base/display.scss"
+import "../css/base/form.scss"
+import "../css/base/button.scss"
+
+import "../css/SpecialOfferModal.scss";
+import "../css/onboardingFlow.scss"
+import "../css/LinkEditorModal.scss";
+import "../css/ProductEditorModal.scss";
+import "../css/ModuleOndemandVideo.scss";
+import "../css/ModuleShopify.scss"
+
+
+import { Field, Form, Formik } from "formik";
+import * as yup from "yup";
+import Button from "antd/lib/button";
+
+
+import { Text } from "@/components/Typography/Text";
+import { AntInput, FieldType } from "@/components/Form/FormItem";
+import Modal from "@/components/Modal/Modal";
+
+const validateSpecialOfferSchema = yup.object().shape({
+  specialOffer: yup.object().shape({
+    title: yup
+      .string()
+      .required("Please add the offer information")
+      .max(50, "Offer not more than 50 characters"),
+    storeUrl: yup
+      .string()
+      .required("Please enter the URL")
+      .url("Please enter a valid URL"),
+  }),
+});
+
+export default function Page() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const initialValues = {
+    specialOffer: {
+      title: "offer",
+      storeUrl: "https://google.com",
+      couponCode: "5",
+    },
+  };
+
+  const handleSubmit = (values: typeof initialValues) => {
+    console.log("Form submit", values);
+  };
+
+  return (
+    <>
+      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
+
+      <Modal
+        open={isModalOpen}
+        width={520}
+        centered
+        style={{
+            marginLeft: "auto",
+            marginRight: "auto"
+          }}
+        closable={false}
+        className="special-offer-modal p__x--0 p__y--24"
+        onCancel={() => setIsModalOpen(false)}
+        maskClosable={false}
+        footer={null} // ← This removes the footer
+      >
+        <div
+    className="ant-row special-offer-modal-header align__items--center position--relative p--16"
+    style={{ rowGap: 0 }}
+  >
+    <svg
+      className="close-icon"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"
+        fill="#121212"
+        stroke="#121212"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.812 9.187l-5.625 5.626m5.625 0L9.187 9.187"
+        stroke="#fff"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+    <div className="ant-col special-offer-modal-header-left">
+      <div
+        className="image-skeleton image-skeleton__square"
+        style={{ width: 110, height: 110, borderRadius: 16 }}
+      >
+        <img
+          className="image-skeleton__image original isLoaded"
+          src="./images.jpeg"
+          alt="sb"
+        />
+        <div className="ant-skeleton ant-skeleton-element d--none">
+          <span
+            className="ant-skeleton-avatar ant-skeleton-avatar-square"
+            style={{
+              width: 220,
+              height: 220,
+              lineHeight: 110,
+              borderRadius: 16
+            }}
+          />
+        </div>
+      </div>
+    </div>
+    <div className="ant-col music-card__right flex--1 p__l--16">
+      <div
+        className="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line text text--semibold14 undefined"
+        style={{ WebkitLineClamp: 2 }}
+      >
+        offer
+      </div>
+      <div className="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line text text--regular14  d--block opacity--05 cursor-pointer">
+        https://google.com
+      </div>
+    </div>
+  </div>
+  <div className="special-offer-modal-content-wrapper">
+    <div className="special-offer-modal-content p__x--16 p__y--16">
+      <div className="ant-typography text text--regular14 text--default opacity--06">
+        Copy the code below and visit the store to claim your discount.
+      </div>
+      <div className="ant-typography text text--regular12 m__t--16 m__b--4 text--default">
+        Coupon Code
+      </div>
+      <div className="special-offer-modal-copy-btn d--flex p--12 cursor-pointer">
+        <div className="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line text text--semibold16 special-offer-modal-copy-btn-text">
+          5
+        </div>
+        <div className="copy-text">Copy Code</div>
+      </div>
+      <div className="special-offer-modal-btn-wrapper m__t--24 d--flex justify__content--end">
+        <button type="button" className="ant-btn cancel-btn w__160">
+          <span>CANCEL</span>
+        </button>
+        <button type="button" className="ant-btn visit-store-btn w__160">
+          <span>VISIT STORE</span>
+        </button>
+      </div>
+    </div>
+  </div>
+      </Modal>
+    </>
+  );
+}

dev_notes/SpecialOfferModal/modalInteriorV1.js

@@ -0,0 +1,96 @@
+{/* Special Offer Modal Header */}
+<div className="ant-row modal__header align__items--center position--relative p--16">
+{/* close icon */}
+<svg
+  className="close-icon"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  onClick={() => setIsModalOpen(false)}
+  style={{ cursor: "pointer" }}
+>
+  <path
+    d="M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"
+    fill="#121212"
+    stroke="#121212"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+  <path
+    d="M14.812 9.187l-5.625 5.626m5.625 0L9.187 9.187"
+    stroke="#fff"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+</svg>
+
+<div className="ant-col Special__offer__modal__header__left">
+  <div
+    className="image-skeleton image-skeleton__square"
+    style={{ width: 110, height: 110, borderRadius: 16 }}
+  >
+    <img
+      className="image-skeleton__image thumb isLoaded noBlur"
+      src="https://cdn.komi.io/cdn-cgi/image/width=10,height=10,blur=5,dpr=2/photos/ZFUl6YoabKm2gdA01W9-p.png"
+      alt="thumb"
+    />
+    <img
+      className="image-skeleton__image original isLoaded"
+      src="https://cdn.komi.io/cdn-cgi/image/width=110,height=110,dpr=2/photos/ZFUl6YoabKm2gdA01W9-p.png"
+      alt="thumb"
+    />
+  </div>
+</div>
+
+<div className="ant-col music-card__right flex--1 p__l--16">
+  <div className="ant-typography text text--semibold14" style={{ WebkitLineClamp: 2 }}>
+    offer
+  </div>
+  <div className="ant-typography text text--regular14 d--block opacity--05 cursor-pointer">
+    https://google.com
+  </div>
+</div>
+</div>
+
+{/* Special Offer Form */}
+<Formik
+initialValues={initialValues}
+onSubmit={handleSubmit}
+validationSchema={validateSpecialOfferSchema}
+>
+<Form className="offer-form-item">
+  <Text className="text text--regular14 opacity--06">
+    Copy the code below and visit the store to claim your discount.
+  </Text>
+
+  <Field
+    component={AntInput}
+    name="specialOffer.couponCode"
+    type={FieldType.input}
+    label="Coupon Code"
+    placeholder="Enter coupon code"
+  />
+
+  <div
+    className="Special__offer__modal__copy--btn d--flex p--12 cursor-pointer"
+    onClick={() => navigator.clipboard.writeText(initialValues.specialOffer.couponCode)}
+  >
+    <div className="text text--semibold16">{initialValues.specialOffer.couponCode}</div>
+    <div className="copy-text">Copy Code</div>
+  </div>
+
+  {/* Buttons identical to first page.tsx */}
+  <div className="link-editor__actions m__t--16">
+    <Button className="ant-btn-xl ant-btn-uppercase" onClick={() => setIsModalOpen(false)}>
+      Cancel
+    </Button>
+    <Button className="ant-btn-xl ant-btn-uppercase" type="primary" htmlType="submit">
+      Done
+    </Button>
+  </div>
+</Form>
+</Formik>