@windstream/react-shared-components 0.2.45 → 0.2.46

package/src/contentful/blocks/fiber-form/index.tsx

@@ -0,0 +1,557 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "../../../components/button";
+import { Input } from "../../../components/input";
+import { MaterialIcon } from "../../../components/material-icon";
+import { Select, type SelectOption } from "../../../components/select";
+import { Text } from "../../../components/text";
+import { Tooltip } from "../../../components/tooltip";
+import { cx } from "../../../utils";
+import {
+  fiberFormAddressCollectionFormSchema,
+  fiberFormInputInitialValues,
+  fiberFormInputList,
+} from "./constants";
+import type {
+  FiberAddress,
+  FiberAddressCandidate,
+  FiberFormErrorProps,
+  FiberFormProps,
+  FiberFormValues,
+} from "./types";
+import { Field, Form, Formik, type FieldProps } from "formik";
+
+const phonePattern = /\D/g;
+const formatPhone = (value: string) => {
+  const digits = value.replace(phonePattern, "").slice(0, 10);
+  if (digits.length < 4) return digits;
+  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+};
+
+const ErrorMessage = ({ name, errors, touched }: FiberFormErrorProps) => {
+  const error = errors[name];
+  return touched[name] && typeof error === "string" ? (
+    <Text className="mt-1 text-text-critical">{error}</Text>
+  ) : null;
+};
+
+const FieldLabel = ({
+  children,
+  required = false,
+}: {
+  children: React.ReactNode;
+  required?: boolean;
+}) => (
+  <label className="mb-1 block text-sm font-medium text-text">
+    {children}
+    {required && <span className="text-text-critical">*</span>}
+  </label>
+);
+
+export const FiberForm: React.FC<FiberFormProps> = ({
+  InputComponent,
+  AddressAutocomplete,
+  initialValues = fiberFormInputInitialValues,
+  inputList = fiberFormInputList,
+  formSchema = fiberFormAddressCollectionFormSchema,
+  onSubmit,
+  lookupAddress,
+  buttonText = "See plans",
+  buttonClassName,
+  bottomTextDisclaimer,
+  hideLegalCopy = false,
+  checkBoxEnabled = true,
+  copyRightLinks,
+  className,
+  onAddressEvent,
+}) => {
+  const FormInput = InputComponent ?? Input;
+  const [candidates, setCandidates] = useState<FiberAddressCandidate[]>([]);
+  const [showCandidates, setShowCandidates] = useState(false);
+  const [unitOptions, setUnitOptions] = useState<SelectOption[]>([]);
+  const [selectedUnit, setSelectedUnit] = useState<SelectOption>();
+  const [showManualUnit, setShowManualUnit] = useState(false);
+  const placeholderBody2Style = {
+    fontSize: "1.125rem",
+    lineHeight: "1.75rem",
+    fontWeight: 500,
+  };
+  const findCandidates = async (address: string, values: FiberFormValues) => {
+    onAddressEvent?.(address);
+    if (!lookupAddress || address.length < 3) {
+      setCandidates([]);
+      setShowCandidates(false);
+      return;
+    }
+    try {
+      const result = await lookupAddress(address, values);
+      setCandidates(result);
+      setShowCandidates(result.length > 0);
+    } catch {
+      setCandidates([]);
+      setShowCandidates(false);
+    }
+  };
+
+  const selectCandidate = (
+    candidate: FiberAddressCandidate,
+    setFieldValue: (
+      field: string,
+      value: unknown,
+      shouldValidate?: boolean
+    ) => void
+  ) => {
+    const fullAddress = [
+      candidate.addressLine1,
+      candidate.city,
+      candidate.state,
+      candidate.postalCode,
+    ]
+      .filter(Boolean)
+      .join(", ");
+    const units = (candidate.units ?? []).filter(unit => unit.addressLine2);
+    setFieldValue("address", fullAddress);
+    setFieldValue("addressToSend", candidate);
+    setFieldValue("zip", candidate.postalCode ?? "", false);
+    setFieldValue("isManualAddress", false, false);
+    setFieldValue("hasUnits", units.length > 0, false);
+    setFieldValue(
+      "unit",
+      units.length > 0 ? "" : (candidate.addressLine2 ?? ""),
+      false
+    );
+    setCandidates([]);
+    setShowCandidates(false);
+    setSelectedUnit(undefined);
+    setUnitOptions([
+      ...units.map(unit => ({
+        label: unit.addressLine2,
+        value: unit.dfAddressId ?? "",
+        data: unit,
+      })),
+      ...(units.length > 0
+        ? [
+            { label: "I don't see my unit", value: "manual" },
+            { label: "I don't have a unit", value: "no-unit" },
+          ]
+        : []),
+    ]);
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={formSchema}
+      onSubmit={async (values, helpers) => {
+        await onSubmit(values);
+        helpers.resetForm({ values: initialValues });
+        setSelectedUnit(undefined);
+        setUnitOptions([]);
+        setShowManualUnit(false);
+      }}
+    >
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        submitCount,
+        setFieldValue,
+        values,
+      }) => (
+        <Form className={cx("w-full", className)}>
+          <div className="flex flex-col gap-5 sm:flex-row">
+            {inputList.firstName && (
+              <div className="flex-1">
+                <FieldLabel required>First name</FieldLabel>
+                <Field
+                  as={FormInput}
+                  style={placeholderBody2Style}
+                  name="firstName"
+                  placeholder={inputList.firstName.placeholder ?? "First name"}
+                />
+                <ErrorMessage
+                  name="firstName"
+                  errors={errors}
+                  touched={touched}
+                />
+              </div>
+            )}
+            {inputList.lastName && (
+              <div className="flex-1">
+                <FieldLabel required>Last name</FieldLabel>
+                <Field
+                  as={FormInput}
+                  style={placeholderBody2Style}
+                  name="lastName"
+                  placeholder={inputList.lastName.placeholder ?? "Last name"}
+                />
+                <ErrorMessage
+                  name="lastName"
+                  errors={errors}
+                  touched={touched}
+                />
+              </div>
+            )}
+          </div>
+
+          {inputList.address && (
+            <div className="mt-8 flex flex-col gap-5 sm:flex-row">
+              <div className="sm:flex-[3]">
+                <FieldLabel required>Address</FieldLabel>
+                <Field name="address">
+                  {({ field }: FieldProps) => (
+                    <AddressAutocomplete
+                      value={field.value || ""}
+                      placeholder="Address, city, state, ZIP"
+                      onChange={address => {
+                        setFieldValue("address", address, false);
+                        setFieldValue("isManualAddress", true, false);
+                        void findCandidates(address, values);
+                      }}
+                      onSelectAddress={result => {
+                        if (!result) return;
+                        const units = (result.addressToSend.units ?? []).filter(
+                          unit => unit.addressLine2
+                        );
+                        setFieldValue("address", result.address);
+                        setFieldValue("addressToSend", result.addressToSend);
+                        setFieldValue("unit", result.unit ?? "", false);
+                        setFieldValue("isManualAddress", false, false);
+                        setFieldValue("hasUnits", units.length > 0, false);
+                        setUnitOptions([
+                          ...units.map(unit => ({
+                            label: unit.addressLine2,
+                            value: unit.dfAddressId ?? "",
+                            data: unit,
+                          })),
+                          ...(units.length > 0
+                            ? [
+                                {
+                                  label: "I don't see my unit",
+                                  value: "manual",
+                                },
+                                {
+                                  label: "I don't have a unit",
+                                  value: "no-unit",
+                                },
+                              ]
+                            : []),
+                        ]);
+                      }}
+                      onKeyDown={event => {
+                        if (event.key === "Enter") event.preventDefault();
+                      }}
+                    />
+                  )}
+                </Field>
+                <ErrorMessage
+                  name="address"
+                  errors={errors}
+                  touched={touched}
+                />
+                {showCandidates && (
+                  <ul className="shadow-dark-drop mt-2 max-h-56 overflow-auto rounded-lg border border-input-border bg-white">
+                    {candidates.map((candidate, index) => (
+                      <li
+                        key={`${candidate.dfAddressId ?? index}-${candidate.addressLine1}`}
+                      >
+                        <button
+                          type="button"
+                          className="flex w-full items-center gap-2 px-4 py-3 text-left hover:bg-bg-surface-hover"
+                          onClick={() =>
+                            selectCandidate(candidate, setFieldValue)
+                          }
+                        >
+                          <MaterialIcon
+                            name="location_on"
+                            size={24}
+                            fill={1}
+                            className="text-green-600"
+                          />
+                          {[
+                            candidate.addressLine1,
+                            candidate.city,
+                            candidate.state,
+                            candidate.postalCode,
+                          ]
+                            .filter(Boolean)
+                            .join(", ")}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+              <div className="w-full sm:w-[216px] sm:flex-none">
+                <div className="mb-1 hidden h-[20px] sm:block" />
+                <Select
+                  options={unitOptions}
+                  value={selectedUnit}
+                  placeholder="Apt, Suite, etc."
+                  maxMenuHeight={200}
+                  components={{
+                    DropdownIndicator: () => (
+                      <svg
+                        width="20"
+                        height="20"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#1B2A4E"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    ),
+                  }}
+                  styles={{
+                    option: base => ({ ...base, ...placeholderBody2Style }),
+                    singleValue: base => ({
+                      ...base,
+                      ...placeholderBody2Style,
+                    }),
+                    placeholder: base => ({
+                      ...base,
+                      ...placeholderBody2Style,
+                    }),
+                    input: base => ({ ...base, ...placeholderBody2Style }),
+                    indicatorsContainer: base => ({
+                      ...base,
+                      alignItems: "center",
+                    }),
+                  }}
+                  className="w-full sm:w-[216px]"
+                  controlClassName="!h-[56px] !min-h-[56px] !gap-2 !rounded-[12px] !border !border-solid !border-[#CECECE] !bg-white !pl-4 !pr-4 !flex-nowrap [&>div:first-child]:!overflow-visible [&>div:first-child>div]:!max-w-none [&>div:first-child>div]:!overflow-visible [&>div:first-child>div]:!whitespace-nowrap"
+                  onChange={option => {
+                    const selected = option as SelectOption | null;
+                    if (!selected) return;
+                    if (selected.value === "manual") {
+                      setShowManualUnit(true);
+                      setFieldValue("hasUnits", true, false);
+                      setFieldValue("unit", "", false);
+                      setFieldValue("addressToSend", {
+                        ...values.addressToSend,
+                        addressLine2: "",
+                        dfAddressId: undefined,
+                      } as FiberAddress);
+                      setSelectedUnit(selected);
+                      return;
+                    }
+                    if (selected.value === "no-unit") {
+                      setShowManualUnit(false);
+                      setFieldValue("unit", "", false);
+                      setFieldValue("hasUnits", false, false);
+                      setFieldValue("addressToSend", {
+                        ...values.addressToSend,
+                        addressLine2: "",
+                        dfAddressId: undefined,
+                      } as FiberAddress);
+                      setSelectedUnit(selected);
+                      return;
+                    }
+                    setShowManualUnit(false);
+                    setSelectedUnit(selected);
+                    setFieldValue("unit", selected.label);
+                    setFieldValue("hasUnits", false, false);
+                    setFieldValue("addressToSend", {
+                      ...values.addressToSend,
+                      addressLine2: selected.label,
+                      dfAddressId: selected.value,
+                    } as FiberAddress);
+                  }}
+                />
+                {!showManualUnit &&
+                  submitCount > 0 &&
+                  (values.hasUnits ?? false) &&
+                  !selectedUnit &&
+                  typeof errors.unit === "string" && (
+                    <span className="mt-1 block text-sm font-medium text-red-500">
+                      {errors.unit}
+                    </span>
+                  )}
+                {showManualUnit && (
+                  <div className="mt-5 w-full sm:w-[216px]">
+                    <label className="mb-1 block text-sm font-medium text-neutral-900">
+                      Unit<span className="text-red-500">*</span>
+                    </label>
+                    <Field
+                      as={FormInput}
+                      style={placeholderBody2Style}
+                      name="unit"
+                      placeholder="Please enter your unit"
+                    />
+                    {submitCount > 0 && typeof errors.unit === "string" && (
+                      <span className="mt-1 block text-sm font-medium text-red-500">
+                        {errors.unit}
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-8 flex flex-col gap-5 sm:flex-row">
+            {inputList.phoneNumber && (
+              <div className="flex-1">
+                <FieldLabel required>Phone number</FieldLabel>
+                <Field name="phone">
+                  {({ field, form }: FieldProps) => (
+                    <FormInput
+                      {...field}
+                      type="tel"
+                      style={placeholderBody2Style}
+                      placeholder="(555) 555-5555"
+                      onChange={event =>
+                        form.setFieldValue(
+                          "phone",
+                          formatPhone(event.currentTarget.value)
+                        )
+                      }
+                    />
+                  )}
+                </Field>
+                <ErrorMessage name="phone" errors={errors} touched={touched} />
+              </div>
+            )}
+            {inputList.emailAddress && (
+              <div className="flex-1">
+                <FieldLabel required>Email address</FieldLabel>
+                <Field
+                  as={FormInput}
+                  style={placeholderBody2Style}
+                  name="email"
+                  type="email"
+                  placeholder="john.doe@example.com"
+                />
+                <ErrorMessage name="email" errors={errors} touched={touched} />
+              </div>
+            )}
+          </div>
+
+          <div className="mt-8 flex flex-col gap-5 sm:flex-row">
+            {inputList.referralCode && (
+              <div className="flex-1">
+                <FieldLabel>Referral code</FieldLabel>
+                <Field
+                  as={FormInput}
+                  style={placeholderBody2Style}
+                  name="referralCode"
+                  placeholder="Optional"
+                />
+                <ErrorMessage
+                  name="referralCode"
+                  errors={errors}
+                  touched={touched}
+                />
+              </div>
+            )}
+            {inputList.notes && (
+              <div className="flex-1">
+                <FieldLabel>Notes or comments</FieldLabel>
+                <Field
+                  as={FormInput}
+                  style={placeholderBody2Style}
+                  name="notes"
+                  placeholder="Optional"
+                />
+              </div>
+            )}
+          </div>
+
+          {checkBoxEnabled && !hideLegalCopy && (
+            <div className="mt-16 text-neutral-600">
+              <Field name="isMarketingCom">
+                {({ field }: FieldProps) => (
+                  <div className="mb-7 mt-4 flex items-center gap-1 pl-1">
+                    <input
+                      type="checkbox"
+                      className="h-4 w-4 cursor-pointer align-middle accent-[#1d9d77]"
+                      {...field}
+                      checked={field.value}
+                      id="recieve-message-checkbox"
+                    />
+                    <label
+                      htmlFor="recieve-message-checkbox"
+                      className="mx-1 mb-3 mr-0 cursor-pointer align-middle text-micro font-medium leading-6 text-neutral-600"
+                    >
+                      Receive text messages for installation, account updates,
+                      and marketing communications.
+                    </label>
+                    <Tooltip
+                      tooltipMsg="By opting in to receive text messages, you will receive automated text message related to service notifications including installations, service changes and updates, billing information, marketing offers from Kinetic including cart reminders. Consent is not a condition of purchase. Reply STOP at any time to unsubscribe. Message frequency varies. Msg & data rates may apply. To contact our Customer Support via email, chat, or phone, visit our Support page below."
+                      className="ff-NR mt-0"
+                    >
+                      <MaterialIcon
+                        name="info"
+                        size={20}
+                        className="tooltip"
+                        style={{ verticalAlign: "top" }}
+                      />
+                    </Tooltip>
+                  </div>
+                )}
+              </Field>
+            </div>
+          )}
+          {!hideLegalCopy && (
+            <Text className="body3 my-[32px] text-neutral-600 lg:mb-[64px] lg:mt-[32px]">
+              By submitting this form you consent to receive marketing messages
+              from Kinetic by text, email or phone to the contact provided.
+              Consent is not a condition of purchase. Msg &amp; data rates may
+              apply. Msg frequency varies. Unsubscribe at any time by replying
+              STOP or clicking the unsubscribe link.
+            </Text>
+          )}
+          {bottomTextDisclaimer && !hideLegalCopy && (
+            <Text className="mt-2 text-center text-text-secondary">
+              {bottomTextDisclaimer}
+            </Text>
+          )}
+          {copyRightLinks && !hideLegalCopy && (
+            <ul className="mt-16 flex list-disc justify-center gap-8 text-text-secondary">
+              {copyRightLinks.map(link => (
+                <li key={link.title}>
+                  <a
+                    href={link.href}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="underline"
+                  >
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+          <div className="mt-8 flex items-center justify-center px-[60px] lg:mt-[64px]">
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              className={cx(
+                "min-h-14 rounded-xl bg-bg-fill-brand px-8 py-4 font-bold text-white disabled:opacity-50",
+                buttonClassName
+              )}
+            >
+              {isSubmitting ? "Submitting..." : buttonText}
+            </Button>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export {
+  fiberFormAddressCollectionFormSchema,
+  fiberFormInputInitialValues,
+  fiberFormInputList,
+} from "./constants";
+export type * from "./types";

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

@@ -0,0 +1,92 @@
+import type { ComponentType, KeyboardEvent, ReactNode } from "react";
+import type { FormikErrors, FormikTouched, FormikValues } from "formik";
+import type * as Yup from "yup";
+
+export type FiberAddressUnit = {
+  addressLine2: string;
+  dfAddressId?: string;
+};
+
+export type FiberAddress = {
+  addressLine1?: string;
+  addressLine2?: string | null;
+  city?: string;
+  state?: string;
+  postalCode?: string;
+  dfAddressId?: string;
+  units?: FiberAddressUnit[];
+  [key: string]: unknown;
+};
+
+export type FiberAddressAutocompleteResult = {
+  address: string;
+  unit?: string;
+  addressToSend: FiberAddress;
+  placeId?: string;
+};
+
+export type FiberAddressAutocompleteProps = {
+  value: string;
+  placeholder?: string;
+  errorText?: string;
+  onChange: (address: string) => void;
+  onSelectAddress: (result?: FiberAddressAutocompleteResult) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+};
+
+export type FiberAddressCandidate = FiberAddress;
+
+export type FiberFormValues = FormikValues & {
+  firstName: string;
+  lastName: string;
+  address: string;
+  phone: string;
+  email: string;
+  unit: string;
+  zip: string;
+  isManualAddress: boolean;
+  isMarketingCom: boolean;
+  addressToSend: FiberAddress;
+  notes: string;
+  referralCode: string;
+  hasUnits: boolean;
+};
+
+export type FiberFormInputList = Partial<{
+  firstName: { placeholder?: string };
+  lastName: { placeholder?: string };
+  address: { placeholder?: string };
+  phoneNumber: { placeholder?: string };
+  emailAddress: { placeholder?: string };
+  unit: { placeholder?: string };
+  zip: { placeholder?: string };
+  notes: { placeholder?: string };
+  referralCode: { placeholder?: string };
+}>;
+
+export type FiberFormProps = {
+  InputComponent?: ComponentType<any>;
+  AddressAutocomplete: ComponentType<FiberAddressAutocompleteProps>;
+  initialValues?: FiberFormValues;
+  inputList?: FiberFormInputList;
+  formSchema?: Yup.AnyObjectSchema;
+  onSubmit: (values: FiberFormValues) => Promise<void>;
+  lookupAddress?: (
+    address: string,
+    values: FiberFormValues
+  ) => Promise<FiberAddressCandidate[]>;
+  buttonText?: string;
+  buttonClassName?: string;
+  bottomTextDisclaimer?: ReactNode;
+  hideLegalCopy?: boolean;
+  checkBoxEnabled?: boolean;
+  copyRightLinks?: Array<{ title: string; href: string }>;
+  className?: string;
+  onAddressEvent?: (address: string) => void;
+};
+
+export type FiberFormErrorProps = {
+  name: string;
+  errors: FormikErrors<FiberFormValues>;
+  touched: FormikTouched<FiberFormValues>;
+};

package/src/contentful/blocks/primary-hero/index.tsx

@@ -364,7 +364,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             hasDesktopVideo && "h-[600px] w-[600px]"
           )}
         >
-          <Badge className="absolute -left-26 top-18 z-10 aspect-square w-52 object-cover object-center" />
+          <Badge className="absolute -left-10 top-18 z-10 aspect-square w-52 object-cover object-center" />
           {!hasDesktopVideo && heroImageUrl ? (
             <NextImage
               src={heroImageUrl}