@springmicro/cart 0.5.14 → 0.5.16

package/src/checkout/components/AddCard.tsx

@@ -55,6 +55,7 @@ export type AddCardProps = {
   };
   stacked?: boolean;
   error?: string;
+  cardRequired?: boolean;
   address?: boolean;
   onSubmit?: (
     values: CreditCardValues & Partial<AddressValues>
@@ -71,6 +72,7 @@ export type AddCardProps = {
 
 export const AddCard = ({
   contact,
+  cardRequired = true,
   error,
   stacked = false,
   address = true,
@@ -102,33 +104,37 @@ export const AddCard = ({
                 }
           }
         >
-          <Cards
-            {...(formik.values as CreditCardValues)}
-            focused={formik.values.focus || "number"}
-          />
-
-          <div>
-            <TextField
-              sx={stacked ? { mt: 2 } : {}}
-              fullWidth
-              type="tel"
-              name="number"
-              label="Card Number"
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.number}
-              error={Boolean(formik.touched.number && formik.errors.number)}
-              helperText={formik.touched.number && formik.errors.number}
+          {cardRequired && (
+            <Cards
+              {...(formik.values as CreditCardValues)}
+              focused={formik.values.focus || "number"}
             />
+          )}
+
+          <Box sx={{ flexGrow: cardRequired ? undefined : 1 }}>
+            {cardRequired && (
+              <TextField
+                sx={stacked ? { mt: 2 } : {}}
+                fullWidth
+                type="tel"
+                name="number"
+                label="Card Number"
+                required
+                onBlur={formik.handleBlur}
+                onChange={handleInputChange}
+                onFocus={handleInputFocus}
+                variant="outlined"
+                value={formik.values.number}
+                error={Boolean(formik.touched.number && formik.errors.number)}
+                helperText={formik.touched.number && formik.errors.number}
+              />
+            )}
             <TextField
               sx={{ mt: 2 }}
               fullWidth
               type="text"
               name="name"
-              label="Name on Card"
+              label={cardRequired ? "Name on Card" : "Name"}
               required
               onBlur={formik.handleBlur}
               onChange={handleInputChange}
@@ -138,104 +144,119 @@ export const AddCard = ({
               error={Boolean(formik.touched.name && formik.errors.name)}
               helperText={formik.touched.name && formik.errors.name}
             />
-            <TextField
-              sx={{ mt: 2, width: "calc(50% - 8px)", mr: 1 }}
-              type="tel"
-              name="expiry"
-              label="Valid Thru"
-              placeholder="MM/YY"
-              inputProps={{ pattern: "[0-9]{2}/[0-9]{2}" }}
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.expiry}
-              error={Boolean(formik.touched.expiry && formik.errors.expiry)}
-              helperText={
-                (formik.touched.expiry && formik.errors.expiry) || "MM/YY"
-              }
-            />
-            <TextField
-              sx={{ mt: 2, width: "calc(50% - 8px)", ml: 1 }}
-              type="tel"
-              name="cvc"
-              label="CVC"
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.cvc}
-              error={Boolean(formik.touched.cvc && formik.errors.cvc)}
-              helperText={formik.touched.cvc && formik.errors.cvc}
-            />
-          </div>
+            {cardRequired && (
+              <>
+                <TextField
+                  sx={{ mt: 2, width: "calc(50% - 8px)", mr: 1 }}
+                  type="tel"
+                  name="expiry"
+                  label="Valid Thru"
+                  placeholder="MM/YY"
+                  inputProps={{ pattern: "[0-9]{2}/[0-9]{2}" }}
+                  required
+                  onBlur={formik.handleBlur}
+                  onChange={handleInputChange}
+                  onFocus={handleInputFocus}
+                  variant="outlined"
+                  value={formik.values.expiry}
+                  error={Boolean(formik.touched.expiry && formik.errors.expiry)}
+                  helperText={
+                    (formik.touched.expiry && formik.errors.expiry) || "MM/YY"
+                  }
+                />
+                <TextField
+                  sx={{ mt: 2, width: "calc(50% - 8px)", ml: 1 }}
+                  type="tel"
+                  name="cvc"
+                  label="CVC"
+                  required
+                  onBlur={formik.handleBlur}
+                  onChange={handleInputChange}
+                  onFocus={handleInputFocus}
+                  variant="outlined"
+                  value={formik.values.cvc}
+                  error={Boolean(formik.touched.cvc && formik.errors.cvc)}
+                  helperText={formik.touched.cvc && formik.errors.cvc}
+                />
+              </>
+            )}
+          </Box>
           {/* {formik.errors.submit && (
         <Typography color="error" sx={{ mt: 2 }} variant="body2">
           {formik.errors.submit}
         </Typography>
       )} */}
         </Box>
-        <Box
-          sx={{ display: "flex", flexDirection: "row", gap: 2, width: "100%" }}
-        >
-          <Box sx={{ flexGrow: 1 }}>
-            {!address ? null : (
-              <Box>
-                <Typography variant="h6" sx={{ mt: 2, mb: 3 }}>
-                  Billing Address
-                </Typography>
-                <AddressCountryField formik={formik} name="country" />
-                <AddressEmailField
-                  formik={formik}
-                  name="email"
-                  sx={{ mt: 2 }}
-                />
-                <AddressOrganizationNameField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="organization"
-                />
-                <AddressStreetField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="line1"
-                  lineNo="1"
-                />
-                <AddressStreetField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="line2"
-                  lineNo="2"
-                  required={false}
-                />
-                <AddressCityField sx={{ mt: 2 }} formik={formik} name="city" />
-                <AddressRegionField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="region"
-                />
-                <AddressPostalCodeField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="postal_code"
-                />
-              </Box>
-            )}
-          </Box>
+        {cardRequired && (
           <Box
             sx={{
-              mt: "16px",
               display: "flex",
-              flexDirection: "column",
-              alignItems: "flex-end",
-              flexGrow: 1,
+              flexDirection: "row",
+              gap: 2,
+              width: "100%",
             }}
           >
-            {PriceDetails}
+            <Box sx={{ flexGrow: 1 }}>
+              {!address ? null : (
+                <Box>
+                  <Typography variant="h6" sx={{ mt: 2, mb: 3 }}>
+                    Billing Address
+                  </Typography>
+                  <AddressCountryField formik={formik} name="country" />
+                  <AddressEmailField
+                    formik={formik}
+                    name="email"
+                    sx={{ mt: 2 }}
+                  />
+                  <AddressOrganizationNameField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="organization"
+                  />
+                  <AddressStreetField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="line1"
+                    lineNo="1"
+                  />
+                  <AddressStreetField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="line2"
+                    lineNo="2"
+                    required={false}
+                  />
+                  <AddressCityField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="city"
+                  />
+                  <AddressRegionField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="region"
+                  />
+                  <AddressPostalCodeField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="postal_code"
+                  />
+                </Box>
+              )}
+            </Box>
+            <Box
+              sx={{
+                mt: "16px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                flexGrow: 1,
+              }}
+            >
+              {PriceDetails}
+            </Box>
           </Box>
-        </Box>
+        )}
         {error && (
           <Typography color="error" sx={{ mt: 2 }} variant="body2">
             {error}

package/src/checkout/components/CartList.tsx

@@ -21,6 +21,7 @@ export function CartList({
   formDisabled,
   formErrorState,
 }) {
+  console.log("DISABLED", formDisabled);
   const [status, setStatus] = statusState;
   const [formError, setFormError] = formErrorState;
   return (

package/src/checkout/components/CartProductCard.css

@@ -1,67 +1,67 @@
-.product-card {
-  width: 500px;
-  /* display: flex;
-  flex-direction: row;
-  justify-content: space-between; */
-  display: grid;
-  grid-template-columns: 1fr 40px;
-  gap: 0.5rem;
-  border-radius: 8px;
-  padding: 1rem;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-  transition: all 0.3s 0.1s;
-  cursor: pointer;
-  min-height: 48px;
-  flex-shrink: 0;
-}
-
-.product-card:hover {
-  box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  transition: all 0.3s 0s;
-}
-
-.left-section {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  flex-grow: 1;
-}
-
-.left-section > img,
-.missing-image {
-  min-height: 100%;
-  max-height: 100px;
-  aspect-ratio: 1;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.missing-image {
-  background-color: rgb(222, 222, 222);
-}
-
-.two-row {
-  display: flex;
-  flex-direction: column;
-}
-
-.two-row :nth-child(1) {
-  font-size: 20px;
-}
-
-.two-row :nth-child(2) {
-  font-size: 14px;
-}
-
-.two-row > * {
-  margin: 0;
-}
-
-.remove-button {
-  color: #ff000040 !important;
-  transition: all 0.2s !important;
-}
-
-.product-card:hover .remove-button {
-  color: red !important;
-}
+.product-card {
+  width: 500px;
+  /* display: flex;
+  flex-direction: row;
+  justify-content: space-between; */
+  display: grid;
+  grid-template-columns: 1fr 40px;
+  gap: 0.5rem;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  transition: all 0.3s 0.1s;
+  cursor: pointer;
+  min-height: 48px;
+  flex-shrink: 0;
+}
+
+.product-card:hover {
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  transition: all 0.3s 0s;
+}
+
+.left-section {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.left-section > img,
+.missing-image {
+  min-height: 100%;
+  max-height: 100px;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.missing-image {
+  background-color: rgb(222, 222, 222);
+}
+
+.two-row {
+  display: flex;
+  flex-direction: column;
+}
+
+.two-row :nth-child(1) {
+  font-size: 20px;
+}
+
+.two-row :nth-child(2) {
+  font-size: 14px;
+}
+
+.two-row > * {
+  margin: 0;
+}
+
+.remove-button {
+  color: #ff000040 !important;
+  transition: all 0.2s !important;
+}
+
+.product-card:hover .remove-button {
+  color: red !important;
+}