From 0301f3a0abaf2958f2f026bc2cd602046ba8dfc4 Mon Sep 17 00:00:00 2001 From: SPACEBROWSER_DEV Date: Thu, 14 Aug 2025 13:04:49 -0400 Subject: [PATCH] [CLIENT]: Client Modal > Special Offer Modal --- component_factory/package.json | 4 +- component_factory/public/images.jpeg | Bin 0 -> 12557 bytes .../src/app/css/SpecialOfferModal.scss | 119 ++++++++++++ .../src/app/css/base/button.scss | 118 ++++++++++++ component_factory/src/app/css/base/modal.scss | 21 +++ .../src/app/css/base/spacing.scss | 62 +++++++ component_factory/src/app/css/base/text.scss | 97 ++++++++++ component_factory/src/app/page.tsx | 2 +- .../src/app/simple_modal/page.tsx | 2 +- .../src/app/special_offer_modal/page.tsx | 169 ++++++++++++++++++ .../SpecialOfferModal/modalInteriorV1.js | 96 ++++++++++ 11 files changed, 686 insertions(+), 4 deletions(-) create mode 100644 component_factory/public/images.jpeg create mode 100644 component_factory/src/app/css/SpecialOfferModal.scss create mode 100644 component_factory/src/app/special_offer_modal/page.tsx create mode 100644 dev_notes/SpecialOfferModal/modalInteriorV1.js diff --git a/component_factory/package.json b/component_factory/package.json index 49e60ff..19ac513 100755 --- a/component_factory/package.json +++ b/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" } } diff --git a/component_factory/public/images.jpeg b/component_factory/public/images.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..31bc9214b7cd836c6187a1e2bee57767f626f226 GIT binary patch literal 12557 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 { + 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; + } + } } \ No newline at end of file diff --git a/component_factory/src/app/css/base/modal.scss b/component_factory/src/app/css/base/modal.scss index 8165228..0767b75 100644 --- a/component_factory/src/app/css/base/modal.scss +++ b/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; + } + +} diff --git a/component_factory/src/app/css/base/spacing.scss b/component_factory/src/app/css/base/spacing.scss index be6a597..c9cf3e3 100644 --- a/component_factory/src/app/css/base/spacing.scss +++ b/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; + } + +} diff --git a/component_factory/src/app/css/base/text.scss b/component_factory/src/app/css/base/text.scss index f4e7647..aff4ca4 100644 --- a/component_factory/src/app/css/base/text.scss +++ b/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; + } + +} diff --git a/component_factory/src/app/page.tsx b/component_factory/src/app/page.tsx index 8a10b92..8869891 100755 --- a/component_factory/src/app/page.tsx +++ b/component_factory/src/app/page.tsx @@ -9,7 +9,7 @@ export default function Page() { <>

Flat Interface Home Page

-

1: Simple Modal

+

1: Simple Modal

); } diff --git a/component_factory/src/app/simple_modal/page.tsx b/component_factory/src/app/simple_modal/page.tsx index a24251c..8a02eea 100644 --- a/component_factory/src/app/simple_modal/page.tsx +++ b/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" diff --git a/component_factory/src/app/special_offer_modal/page.tsx b/component_factory/src/app/special_offer_modal/page.tsx new file mode 100644 index 0000000..7ffd85e --- /dev/null +++ b/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 ( + <> + + + setIsModalOpen(false)} + maskClosable={false} + footer={null} // ← This removes the footer + > +
+ + + + +
+
+ sb +
+ +
+
+
+
+
+ offer +
+
+ https://google.com +
+
+
+
+
+
+ Copy the code below and visit the store to claim your discount. +
+
+ Coupon Code +
+
+
+ 5 +
+
Copy Code
+
+
+ + +
+
+
+ + + ); +} diff --git a/dev_notes/SpecialOfferModal/modalInteriorV1.js b/dev_notes/SpecialOfferModal/modalInteriorV1.js new file mode 100644 index 0000000..49b5a5c --- /dev/null +++ b/dev_notes/SpecialOfferModal/modalInteriorV1.js @@ -0,0 +1,96 @@ +{/* Special Offer Modal Header */} +
+{/* close icon */} + setIsModalOpen(false)} + style={{ cursor: "pointer" }} +> + + + + +
+
+ thumb + thumb +
+
+ +
+
+ offer +
+
+ https://google.com +
+
+
+ +{/* Special Offer Form */} + +
+ + Copy the code below and visit the store to claim your discount. + + + + +
navigator.clipboard.writeText(initialValues.specialOffer.couponCode)} + > +
{initialValues.specialOffer.couponCode}
+
Copy Code
+
+ + {/* Buttons identical to first page.tsx */} +
+ + +
+ +
 \ No newline at end of file