@windstream/react-shared-components 0.2.45 → 0.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",
@@ -110,12 +110,14 @@
     "@types/react-modal": "3.16.3",
     "@types/react-transition-group": "4.4.12",
     "clsx": "2.1.1",
+    "formik": "^2.4.6",
     "framer-motion": "10.12.16",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "react-modal": "3.16.3",
     "react-select": "5.10.2",
-    "react-transition-group": "4.4.5"
+    "react-transition-group": "4.4.5",
+    "yup": "^1.7.0"
   },
   "optionalDependencies": {
     "@types/js-cookie": "^3.0.6"

package/src/components/video-link/index.test.tsx

@@ -263,4 +263,4 @@ describe("VideoLink", () => {
       "false"
     );
   });
-});
+});

package/src/components/video-link/index.tsx

@@ -20,10 +20,10 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   const [isHovered, setIsHovered] = useState(false);
 
   const videoSourceType = videoLink?.videoSourceType;
+  const usingContentfulAsset =
+    videoSourceType === "contentful" && !!videoLink?.videoAssetUrl;
   const videoHref =
-    (videoSourceType === "contentful"
-      ? videoLink?.videoAssetUrl
-      : videoLink?.link) ?? "";
+    (usingContentfulAsset ? videoLink?.videoAssetUrl : videoLink?.link) ?? "";
 
   // The video's own poster - never the promo bar's plain image field.
   const posterImage = videoLink?.image;
@@ -69,7 +69,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   };
 
   const embedSelector = () => {
-    if (videoSourceType === "contentful") {
+    if (usingContentfulAsset) {
       return (
         <ContentfulVideoEmbed
           videoAssetUrl={videoLink?.videoAssetUrl}
@@ -92,7 +92,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
     <>
       <div
         className={cx(
-          "video-section relative w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
+          "video-section relative mx-auto w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
           !isPlaying && "hover:ring-2 hover:ring-border-focus"
         )}
         onClick={handlePlayClick}
@@ -167,4 +167,4 @@ export type {
   VideoEmbedProps,
   VideoLinkComponentProps,
   VideoLinkProps,
-} from "./types";
+} from "./types";

package/src/contentful/blocks/fiber-form/constants.ts

@@ -0,0 +1,81 @@
+import type { FiberFormInputList, FiberFormValues } from "../../blocks/fiber-form/types";
+import * as Yup from "yup";
+
+export const fiberFormInputInitialValues: FiberFormValues = {
+  firstName: "",
+  lastName: "",
+  address: "",
+  phone: "",
+  email: "",
+  unit: "",
+  zip: "",
+  isManualAddress: false,
+  isMarketingCom: false,
+  addressToSend: {},
+  notes: "",
+  referralCode: "",
+  hasUnits: false,
+};
+
+export const fiberFormInputList: FiberFormInputList = {
+  firstName: { placeholder: "John" },
+  lastName: { placeholder: "Doe" },
+  address: { placeholder: "Street address" },
+  phoneNumber: { placeholder: "Phone number" },
+  emailAddress: { placeholder: "Email address" },
+  unit: { placeholder: "Unit (optional)" },
+  zip: { placeholder: "Zip" },
+  notes: { placeholder: "Notes or Comments" },
+  referralCode: { placeholder: "Referral Code" },
+};
+
+export const fiberFormAddressCollectionFormSchema = Yup.object({
+  firstName: Yup.string()
+    .required("First name is required")
+    .min(2, "Enter a valid First name")
+    .matches(/^[a-zA-Z\s]*$/, "Enter a valid First name"),
+  lastName: Yup.string()
+    .required("Last name is required")
+    .min(2, "Enter a valid Last name")
+    .matches(/^[a-zA-Z\s]*$/, "Enter a valid Last name"),
+  isManualAddress: Yup.boolean(),
+  isMarketingCom: Yup.boolean(),
+  hasUnits: Yup.boolean(),
+  unit: Yup.string().when("hasUnits", {
+    is: true,
+    then: schema => schema.required("Unit is required"),
+    otherwise: schema =>
+      schema.matches(/^[a-zA-Z0-9\s#]*$/, "Enter a valid Unit"),
+  }),
+  zip: Yup.string().when("isManualAddress", {
+    is: true,
+    then: schema =>
+      schema
+        .required("Zip is required")
+        .matches(/^\d{5}$/, "Enter a valid Zip"),
+  }),
+  address: Yup.string()
+    .required("Enter your home address (street, city, state, and ZIP below)")
+    .when("isManualAddress", {
+      is: true,
+      then: schema =>
+        schema.matches(
+          /^(\d{1,}) [a-zA-Z0-9\s]+(\,)? [a-zA-Z\s]+(\,)? [A-Z]{2}( [0-9]{5,6})?$/,
+          "Enter your home address (street, city, state, and ZIP below)"
+        ),
+    }),
+  phone: Yup.string()
+    .required("Phone is required")
+    .matches(
+      /^\([0-9]{3}\)\s[0-9]{3}-[0-9]{4}$/,
+      "Please enter a valid phone number"
+    ),
+  email: Yup.string()
+    .email("Invalid email")
+    .matches(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, "Invalid email")
+    .required("Email is required"),
+  notes: Yup.string(),
+  referralCode: Yup.string()
+    .max(50, "Referral code must not exceed 50 characters")
+    .matches(/^\S*$/, "Referral code must not contain spaces"),
+});