@shipengine/elements 2.24.1 → 2.25.0

package/README.md

@@ -1,15 +1,196 @@
 <!-- README for NPM; the one for GitHub is in .github directory. -->
 
-## Usage
+## Creating a New Element
 
-Visit [our documentation page](https://www.shipengine.com/docs/elements/elements-guide/) to learn how to get started with ShipEngine Elements.
+ShipEngine Elements is a collection of React components that provide shipping functionality through a standardized interface.
+This guide provides the essential steps for creating new elements in the ShipEngine Elements library.
 
-## Installation
+## Element Architecture
 
-```bash
-npm install @shipengine/elements
+Each element is composed of:
+
+- **Component**: Your main React component logic
+- **createElement Wrapper**: Provides error boundaries, i18n, and styling
+- **Element Provider**: Manages global state and configuration
+
+## File Structure
+
+```
+libs/elements/src/elements/new-element/
+├── index.ts                    # Export file
+├── new-element.tsx       # Main element file
+├── __stories__/               # Storybook stories
+│   └── new-element.stories.tsx
+└── __tests__/                 # Jest tests
+    └── new-element.test.tsx
 ```
 
+## Step-by-Step Guide
+
+### 1. Create the Directory Structure
+
 ```bash
-yarn add @shipengine/elements
+mkdir -p libs/elements/src/elements/new-element/{__stories__,__tests__}
+```
+
+### 2. Create the Main Element File
+
+**`libs/elements/src/elements/new-element/new-element.tsx`**
+
+```tsx
+import { ErrorFallback } from "@components/error-fallback";
+import { Button, Typography } from "@shipengine/giger";
+import { useTranslation } from "react-i18next";
+
+import { createElement } from "../../create-element";
+import { en } from "../../locales";
+
+/**
+ * Props for the NewElement component
+ */
+export type NewElementProps = {
+  /**
+   * Optional title to display
+   */
+  title?: string;
+
+  /**
+   * Callback function when action is performed
+   */
+  onClick?: (value: any) => void;
+};
+
+/**
+ * # NewElement Component
+ *
+ * Brief description of what this element does and its purpose.
+ */
+export const Component = ({ title = "New Element Title", onClick }: NewElementProps) => {
+  const { t } = useTranslation();
+
+  const handleOnClick = () => {
+    const value = { name: "ShipEngine Elements" };
+    onClick?.(value);
+  };
+
+  return (
+    <div>
+      <Typography variant="h2">{title}</Typography>
+
+      <Typography variant="body1">{t("description")}</Typography>
+
+      <Button onClick={handleOnClick}>{t("actionButton")}</Button>
+    </div>
+  );
+};
+
+/**
+ * # NewElement Element
+ *
+ * The registered element that can be used directly in applications.
+ */
+export const Element = createElement(Component, ErrorFallback, {
+  css: {
+    height: "100%",
+    maxWidth: "800px",
+    minWidth: "440px",
+    width: "100%",
+  },
+  resources: { en },
+});
+
+export type ElementProps = React.ComponentProps<typeof Element>;
+```
+
+### 3. Create the Index File
+
+**`libs/elements/src/elements/new-element/index.ts`**
+
+```ts
+export * as NewElement from "./new-element";
+export type { NewElementProps } from "./new-element";
+```
+
+### 4. Add Localization Resources
+
+**`libs/elements/src/locales/en/new-element.json`**
+
+```json
+{
+  "description": "This is a new Element!",
+  "actionButton": "Continue"
+}
+```
+
+### 5. Create Storybook Stories
+
+**`libs/elements/src/elements/new-element/__stories__/new-element.stories.tsx`**
+
+```tsx
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { NewElement } from "../new-element";
+
+const meta: Meta<typeof NewElement.Element> = {
+  title: "Elements/NewElement",
+  component: NewElement.Element,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Default Example",
+  },
+};
+
+export const CustomTitle: Story = {
+  args: {
+    title: "Custom Element Title",
+  },
+};
+```
+
+### 7. Update Package Exports
+
+Add your new element to **`libs/elements/package.json`** exports:
+
+```json
+{
+  "exports": {
+    "./new-element": {
+      "source": "./src/elements/new-element/index.ts",
+      "import": {
+        "types": "./dist/types/elements/new-element/index.d.ts",
+        "default": "./dist/esm/elements/new-element/index.js"
+      },
+      "require": {
+        "types": "./dist/types/elements/new-element/index.d.ts",
+        "default": "./dist/cjs/elements/new-element/index.cjs"
+      }
+    }
+  }
+}
 ```
+
+### 8. Update Main Index File
+
+Add your element to **`libs/elements/src/index.ts`**:
+
+```ts
+export * from "./elements/new-element";
+```
+
+## Best Practices
+
+- Use TypeScript with proper type definitions
+- Include JSDoc comments where appropriate
+- Write unit tests for functionality
+- Use i18 translation strings for all user-facing text
+- Follow existing code patterns for consistency
+- Test with Storybook during development

package/dist/cjs/components/field/credit-card-input/credit-card-input.cjs

@@ -4,41 +4,58 @@ var _tslib = require('../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var giger = require('@shipengine/giger');
 var money = require('../../../utilities/money.cjs');
+var React = require('react');
 var createFieldController = require('../create-field-controller.cjs');
 var field_styles = require('../field.styles.cjs');
 
 const CreditCardInputController = createFieldController.createFieldController();
 const transform = {
-  in: v => v ? money.formatCreditCardNumber(v) : "",
+  in: (v, isFocused) => {
+    if (!v) return "";
+    return isFocused ? money.formatCreditCardNumber(v) : money.maskCreditCardNumber(v);
+  },
   out: event => event.target.value === "" ? null : event.target.value.replace(/\s/g, "")
 };
-const CreditCardInput = fieldProps => jsxRuntime.jsx(CreditCardInputController, Object.assign({}, fieldProps, {
-  children: _a => {
-    var {
-        onChange,
-        value
-      } = _a,
-      creditCardInputProps = _tslib.__rest(_a, ["onChange", "value"]);
-    return jsxRuntime.jsx("div", {
-      css: field_styles.styles.overrideStyles,
-      children: jsxRuntime.jsx(giger.Input, Object.assign({}, creditCardInputProps, {
-        onChange: e => {
-          // Amex allows 15 digits, all others allow 16
-          if (e.target.value.replace(/\s/g, "").length > 16) {
-            e.preventDefault();
-          } else {
-            onChange(transform.out(e));
-          }
-        },
-        onKeyDown: e => {
-          // Prevent non-numeric characters
-          if (!/^([0-9]|Backspace|Delete|Enter|Tab)$/i.test(e.key)) e.preventDefault();
-        },
-        type: "text",
-        value: transform.in(value)
-      }))
-    });
-  }
-}));
+const CreditCardInput = fieldProps => {
+  const [isFocused, setIsFocused] = React.useState(false);
+  return jsxRuntime.jsx(CreditCardInputController, Object.assign({}, fieldProps, {
+    children: _a => {
+      var {
+          onChange,
+          value
+        } = _a,
+        creditCardInputProps = _tslib.__rest(_a, ["onChange", "value"]);
+      return jsxRuntime.jsx("div", {
+        css: field_styles.styles.overrideStyles,
+        children: jsxRuntime.jsx(giger.Input, Object.assign({}, creditCardInputProps, {
+          onBlur: () => {
+            var _a;
+            setIsFocused(false);
+            (_a = creditCardInputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(creditCardInputProps);
+          },
+          onChange: e => {
+            // Amex allows 15 digits, all others allow 16
+            if (e.target.value.replace(/\s/g, "").length > 16) {
+              e.preventDefault();
+            } else {
+              onChange(transform.out(e));
+            }
+          },
+          onFocus: e => {
+            var _a;
+            setIsFocused(true);
+            (_a = creditCardInputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(creditCardInputProps, e);
+          },
+          onKeyDown: e => {
+            // Prevent non-numeric characters
+            if (!/^([0-9]|Backspace|Delete|Enter|Tab)$/i.test(e.key)) e.preventDefault();
+          },
+          type: "text",
+          value: transform.in(value, isFocused)
+        }))
+      });
+    }
+  }));
+};
 
 exports.CreditCardInput = CreditCardInput;

package/dist/cjs/components/field/rate-select/rate-card/rate-card.cjs

@@ -84,6 +84,7 @@ const RateCard = ({
   messages,
   onClick,
   onClickAcknowledgement,
+  onPaperlessAcknowledgementChange,
   onSelectServicePoint,
   otherAmount,
   rateId,
@@ -101,7 +102,9 @@ const RateCard = ({
   selectedRateCost,
   servicePoints: servicePoints$1,
   mapViewEnabled,
-  rateDetails
+  rateDetails,
+  paperlessDisplaySchemes,
+  paperlessLabelChecked = false
 }) => {
   /* TODO: ENGINE-7366: TODO Remove showVatSettings flag once this is fully in production */
   const showRateDetails = showVatFeatures && rateDetails && rateDetails.length > 0;
@@ -145,7 +148,8 @@ const RateCard = ({
       return undefined;
     }
   }, [confirmationAmount, insuranceAmount, isPreferredRate, otherAmount, selectedRateCost, shippingAmount, taxAmount]);
-  const hasFooterData = !!(rateMessages === null || rateMessages === void 0 ? void 0 : rateMessages.length) || requiresAcknowledgement;
+  const requiresPaperlessAcknowledgement = paperlessDisplaySchemes === null || paperlessDisplaySchemes === void 0 ? void 0 : paperlessDisplaySchemes.includes("qr_code");
+  const hasFooterData = !!(rateMessages === null || rateMessages === void 0 ? void 0 : rateMessages.length) || requiresAcknowledgement || requiresPaperlessAcknowledgement;
   const costBreakdownCommonProps = {
     confirmationAmount,
     insuranceAmount,
@@ -186,6 +190,17 @@ const RateCard = ({
       serviceInfo: {
         line1: carrierNickname,
         line2: getDeliveryDaysLabel(deliveryDays),
+        line3: paperlessDisplaySchemes && paperlessDisplaySchemes.length > 0 ? jsxRuntime.jsxs("div", {
+          "aria-label": t("purchase-label:paperlessAvailable"),
+          css: rateCard_styles.styles.paperlessText,
+          children: [jsxRuntime.jsx(giger.Icon, {
+            name: gigerTheme.IconNames.SCAN_QR,
+            size: giger.IconSize.SIZE_MEDIUM
+          }), jsxRuntime.jsx(giger.Typography, {
+            variant: "small",
+            children: t("purchase-label:paperlessAvailable")
+          })]
+        }) : undefined,
         type: serviceType
       }
     }), servicePoints$1 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -200,16 +215,25 @@ const RateCard = ({
         rateSelected: selected,
         servicePoints: servicePoints$1
       })]
-    }), selected && hasFooterData && jsxRuntime.jsx(serviceCard.ServiceCardFooter, {
+    }), selected && hasFooterData && jsxRuntime.jsxs(serviceCard.ServiceCardFooter, {
       messages: rateMessages,
-      children: requiresAcknowledgement && onClickAcknowledgement && jsxRuntime.jsx(giger.Checkbox, {
+      children: [requiresAcknowledgement && onClickAcknowledgement && jsxRuntime.jsx(giger.Checkbox, {
         "aria-required": true,
         checked: isAcknowledged,
         css: rateCard_styles.styles.acknowledgment,
         "data-testid": "rate-acknowledgement",
         label: rateAcknowledgementMessage ? getPreferredRateAcknowledgementLabel(rateAcknowledgementMessage) : getAcknowledgementLabel(serviceCode, packageType),
         onChange: e => onClickAcknowledgement(e.target.checked)
-      })
+      }), requiresPaperlessAcknowledgement && jsxRuntime.jsx(giger.Checkbox, {
+        "aria-required": true,
+        checked: paperlessLabelChecked,
+        css: rateCard_styles.styles.acknowledgment,
+        "data-testid": "paperless-acknowledgement",
+        label: t("purchase-label:usePaperlessLabel"),
+        onChange: e => {
+          onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(e.target.checked, "qr_code");
+        }
+      })]
     })]
   });
 };

package/dist/cjs/components/field/rate-select/rate-card/rate-card.styles.cjs

@@ -5,10 +5,8 @@ var styles$1 = require('../../../../utilities/styles.cjs');
 const getRateCardFirstLineSize = theme => `${styles$1.scopeTheme(theme).spacing(3.25)}px`;
 const styles = styles$1.createStyles({
   acknowledgment: theme => ({
-    alignItems: "center",
     color: styles$1.scopeTheme(theme).palette.gray.main,
-    display: "flex",
-    paddingTop: styles$1.scopeTheme(theme).spacing(1.5)
+    display: "flex"
   }),
   divider: theme => ({
     borderColor: styles$1.scopeTheme(theme).palette.primary.main,
@@ -29,6 +27,13 @@ const styles = styles$1.createStyles({
     position: "absolute",
     right: 0,
     top: 0
+  }),
+  paperlessText: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(0.25),
+    paddingTop: styles$1.scopeTheme(theme).spacing(0.5),
+    color: styles$1.scopeTheme(theme).palette.gray[600],
+    alignItems: "center"
   })
 });
 

package/dist/cjs/components/field/rate-select/rate-select.cjs

@@ -22,12 +22,13 @@ const RateSelect = _a => {
       nicknameFeature,
       preferredServiceCodes,
       onClick,
+      onPaperlessAcknowledgementChange,
       onSelectServicePoint,
       isLoading,
       mapViewEnabled,
       showVatFeatures
     } = _a,
-    fieldProps = _tslib.__rest(_a, ["nicknameFeature", "preferredServiceCodes", "onClick", "onSelectServicePoint", "isLoading", "mapViewEnabled", "showVatFeatures"]);
+    fieldProps = _tslib.__rest(_a, ["nicknameFeature", "preferredServiceCodes", "onClick", "onPaperlessAcknowledgementChange", "onSelectServicePoint", "isLoading", "mapViewEnabled", "showVatFeatures"]);
   // The calculated cost of the selected rate
   const [selectedRateCost, setSelectedRateCost] = React.useState();
   return jsxRuntime.jsx(RateSelectController, Object.assign({}, fieldProps, {
@@ -50,17 +51,37 @@ const RateSelect = _a => {
             isPreferredRate: preferredServiceCodes && preferredServiceCodes.includes(option.serviceCode),
             key: option.rateId,
             onClick: rateId => {
+              var _a;
               onClick === null || onClick === void 0 ? void 0 : onClick(rateId);
-              field.onChange({
-                isAcknowledged: !option.requiresAcknowledgement,
-                rateId
-              });
+              // if the rate supports "label_and_paperless" display scheme, use it by default
+              if ((_a = option.paperlessDisplaySchemes) === null || _a === void 0 ? void 0 : _a.includes("label_and_paperless")) {
+                field.onChange({
+                  usePaperlessLabel: true,
+                  labelDisplayScheme: "label_and_paperless",
+                  isAcknowledged: !option.requiresAcknowledgement,
+                  rateId
+                });
+              } else {
+                field.onChange({
+                  isAcknowledged: !option.requiresAcknowledgement,
+                  rateId
+                });
+              }
               setSelectedRateCost(rates.getTotalRateAmount(option));
             },
             onClickAcknowledgement: isAcknowledged => field.onChange(Object.assign(Object.assign({}, field.value), {
               isAcknowledged
             })),
+            onPaperlessAcknowledgementChange: (usePaperless, labelDisplayScheme) => {
+              field.onChange(Object.assign(Object.assign({}, field.value), {
+                usePaperlessLabel: usePaperless,
+                labelDisplayScheme
+              }));
+              onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(usePaperless, labelDisplayScheme);
+            },
             onSelectServicePoint: onSelectServicePoint,
+            paperlessDisplaySchemes: option.paperlessDisplaySchemes,
+            paperlessLabelChecked: field.value.usePaperlessLabel,
             rateDetails: option.rateDetails,
             selected: option.rateId === field.value.rateId,
             selectedRateCost: selectedRateCost,

package/dist/cjs/components/forms/address-form/address-form-schema.cjs

@@ -6,12 +6,12 @@ var address = require('../../../constants/shipengine/address.cjs');
 var zod = require('../../../extensions/zod.cjs');
 
 zod.extendZod();
-const refineName = n => n.match(/^[a-zA-Z']/);
 const refineNameStrict = n => n.match(address.addressNameRegex);
 const shipToAddressSchema = addressSchema.addressSchema.refine(schema => {
-  return refineName(schema.name);
+  // KEEP THIS STRICT, USPS REQUIRES 2 CHARACTERS FOR FIRST AND LAST NAME
+  return refineNameStrict(schema.name);
 }, {
-  message: "schemaErrors.invalidAddressName",
+  message: "schemaErrors.invalidAddressNameStrict",
   path: ["name"]
 }).refine(schema => !schema.phone || min.isValidPhoneNumber(schema.phone, schema.countryCode), {
   message: "schemaErrors.notAValidPhoneNumber",

package/dist/cjs/components/forms/edit-billing-form/edit-billing-form.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../../hooks/use-toggle.cjs');
 var giger = require('@shipengine/giger');
 var formLogger = require('../../../utilities/form-logger.cjs');
 var validation = require('../../../utilities/validation.cjs');
@@ -10,19 +11,38 @@ var billingFields = require('../wallet-form/billing-fields.cjs');
 var editBillingForm_styles = require('./edit-billing-form.styles.cjs');
 var walletSchema = require('../wallet-form/wallet-schema.cjs');
 var addressFields = require('../address-form/address-fields.cjs');
+var addressDisplay = require('../../address-display/address-display.cjs');
+var linkAction = require('../../link-action/link-action.cjs');
 var buttonGroup = require('../../button-group/button-group.cjs');
 var submitButton = require('../../field/submit-button/submit-button.cjs');
 
 const EditBillingForm = ({
   onCancel,
   onSubmit,
-  isLoading
+  isLoading,
+  billingInfo
 }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const {
     t
   } = reactI18next.useTranslation();
+  const [editBillingInfo, toggleEditBillingInfo] = useToggle.useToggle(false);
   const form = reactHookForm.useForm({
-    resolver: validation.validationResolver(walletSchema.getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"])
+    resolver: validation.validationResolver(walletSchema.getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"]),
+    defaultValues: {
+      address: {
+        name: (_a = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.fullName) !== null && _a !== void 0 ? _a : "",
+        companyName: (_b = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.company) !== null && _b !== void 0 ? _b : "",
+        addressLine1: (_c = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.addressLine1) !== null && _c !== void 0 ? _c : "",
+        addressLine2: (_d = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.addressLine2) !== null && _d !== void 0 ? _d : "",
+        cityLocality: (_e = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.cityLocality) !== null && _e !== void 0 ? _e : "",
+        stateProvince: (_f = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.stateProvince) !== null && _f !== void 0 ? _f : "",
+        postalCode: (_g = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.postalCode) !== null && _g !== void 0 ? _g : "",
+        countryCode: billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.countryCode,
+        email: (_h = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.email) !== null && _h !== void 0 ? _h : "",
+        phone: (_j = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.phone) !== null && _j !== void 0 ? _j : ""
+      }
+    }
   });
   const handleSubmit = form.handleSubmit(values => {
     const {
@@ -59,14 +79,47 @@ const EditBillingForm = ({
           variant: "subtitle1",
           children: t("register-wallet:settings.billing.subtitleBilling")
         })
-      }), jsxRuntime.jsx(giger.GridChild, {
+      }), billingInfo && !editBillingInfo && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.GridChild, {
+          colSpan: 9,
+          children: jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+            address: Object.assign(Object.assign({}, billingInfo), {
+              name: billingInfo.fullName,
+              companyName: billingInfo.company
+            })
+          })
+        }), jsxRuntime.jsx(giger.GridChild, {
+          colSpan: 3,
+          css: {
+            textAlign: "right"
+          },
+          children: jsxRuntime.jsx(linkAction.LinkAction, {
+            css: {
+              alignSelf: "end"
+            },
+            onClick: () => {
+              toggleEditBillingInfo(true);
+              form.reset({
+                address: Object.assign(Object.assign({}, billingInfo), {
+                  name: billingInfo.fullName,
+                  companyName: billingInfo.company,
+                  countryCode: billingInfo.countryCode
+                })
+              }, {
+                keepDirtyValues: true
+              });
+            },
+            title: t("actions.edit")
+          })
+        })]
+      }), !billingInfo || editBillingInfo ? jsxRuntime.jsx(giger.GridChild, {
         colSpan: 12,
         children: jsxRuntime.jsx(addressFields.AddressFields, {
           form: form,
           formatFieldName: fieldName => `address.${fieldName}`,
           optionalFields: ["addressLine2"]
         })
-      }), jsxRuntime.jsx(giger.GridChild, {
+      }) : null, jsxRuntime.jsx(giger.GridChild, {
         colSpan: 12,
         children: jsxRuntime.jsxs(buttonGroup.ButtonGroup, {
           justify: "end",

package/dist/cjs/components/service-card/service-card.cjs

@@ -66,7 +66,7 @@ const ServiceCardHeader = ({
           children: line1
         }), line2 && jsxRuntime.jsx(giger.Typography, {
           children: line2
-        }), line3 && jsxRuntime.jsx(giger.Typography, {
+        }), line3 && jsxRuntime.jsx("div", {
           children: line3
         })]
       }), jsxRuntime.jsx("div", {
@@ -81,15 +81,15 @@ const ServiceCardHeader = ({
 };
 const ServiceCardFooter = ({
   children,
-  messages
+  messages = []
 }) => {
   return jsxRuntime.jsxs("div", {
     "data-testid": "service-card-footer",
     children: [jsxRuntime.jsx(giger.Divider, {
       css: serviceCard_styles.styles.divider
     }), jsxRuntime.jsxs("section", {
-      css: serviceCard_styles.styles.footer,
-      children: [messages && jsxRuntime.jsx("ul", {
+      css: serviceCard_styles.styles.footerStyles,
+      children: [messages.length > 0 && jsxRuntime.jsx("ul", {
         css: [serviceCard_styles.styles.footerList, messages.length > 1 && serviceCard_styles.styles.footerListWithMultipleMessages],
         children: messages.map((m, index) => jsxRuntime.jsxs("li", {
           css: serviceCard_styles.styles.footerListItem,

package/dist/cjs/components/service-card/service-card.styles.cjs

@@ -16,8 +16,11 @@ const styles = styles$1.createStyles({
     opacity: 0.3,
     width: `calc(100% - ${styles$1.scopeTheme(theme).spacing(4)}px)`
   }),
-  footer: theme => ({
-    padding: styles$1.scopeTheme(theme).spacing(2)
+  footerStyles: theme => ({
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(2)
   }),
   footerList: {
     listStyle: "none"

package/dist/cjs/components/service-point-display/service-point-display.cjs

@@ -2,18 +2,10 @@
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var giger = require('@shipengine/giger');
-var gigerTheme = require('@shipengine/giger-theme');
-var React = require('react');
 var reactI18next = require('react-i18next');
 var operatingHours = require('./operating-hours.cjs');
 var servicePointDisplay_styles = require('./service-point-display.styles.cjs');
 
-/* https://auctane.atlassian.net/browse/ENGINE-7329
- * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
- * carriersWithPaperless and servicesWithPaperless are hardcoded for iteration one
- */
-const carriersWithPaperless = "hermes";
-const servicesWithPaperless = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
 const formatDistance = meters => {
   return meters < 1000 ? "< 1 km" : `${parseFloat((meters / 1000).toFixed(1))} km`;
 };
@@ -27,36 +19,9 @@ const ServicePointDisplay = ({
   const {
     t
   } = reactI18next.useTranslation("purchase-label");
-  const [isFilteredServicesWithPaperless, setIsFilteredServicesWithPaperless] = React.useState(false);
-  /* https://auctane.atlassian.net/browse/ENGINE-7329
-   * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
-   */
-  React.useEffect(() => {
-    if (carriersWithPaperless === servicePoint.carrierCode) {
-      const filteredServicesWithPaperless = servicePoint.serviceCodes.map(serviceCode => {
-        return servicesWithPaperless.filter(service => service === serviceCode);
-      }).length > 0;
-      setIsFilteredServicesWithPaperless(filteredServicesWithPaperless);
-    }
-  }, [servicePoint.carrierCode, servicePoint.serviceCodes]);
   return jsxRuntime.jsxs("div", {
     css: servicePointDisplay_styles.styles.container,
-    children: [isFilteredServicesWithPaperless && jsxRuntime.jsxs("section", {
-      css: servicePointDisplay_styles.styles.paperlessWrapper,
-      children: [jsxRuntime.jsx(giger.Icon, {
-        css: servicePointDisplay_styles.styles.paperlessIcon,
-        name: gigerTheme.IconNames.PRINTER,
-        size: giger.IconSize.SIZE_MEDIUM
-      }), jsxRuntime.jsx(giger.Icon, {
-        css: servicePointDisplay_styles.styles.paperlessIcon,
-        name: gigerTheme.IconNames.SCAN_QR,
-        size: giger.IconSize.SIZE_MEDIUM
-      }), jsxRuntime.jsx(giger.Typography, {
-        css: servicePointDisplay_styles.styles.paperlessText,
-        variant: "small",
-        children: t("servicePoints.paperless")
-      })]
-    }), jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       css: servicePointDisplay_styles.styles.getSelectedStyles(),
       children: jsxRuntime.jsx(giger.Typography, {
         bold: true,