Fix add to cart behavior when initiallyOpened prop is 'always'

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Assembly options will now be correctly added to the cart when `initiallyOpened` prop is set to `always` 
+
 ## [2.11.3] - 2022-07-19
 
 ### Fixed

react/ProductAssemblyOptions.tsx

@@ -8,7 +8,10 @@ interface Props {
   initiallyOpened?: 'always' | 'required'
 }
 
-const ProductAssemblyOptions: FC<Props> = ({ children, initiallyOpened }) => {
+const ProductAssemblyOptions: FC<Props> = ({
+  children,
+  initiallyOpened = 'required',
+}) => {
   const assemblyOptions = useAssemblyOptions()
 
   if (!assemblyOptions) {
@@ -20,6 +23,7 @@ const ProductAssemblyOptions: FC<Props> = ({ children, initiallyOpened }) => {
       {Object.keys(assemblyOptions).map((assemblyOptionId) => (
         <ProductAssemblyGroupContextProvider
           key={assemblyOptionId}
+          initiallyOpened={initiallyOpened}
           assemblyOption={assemblyOptions[assemblyOptionId]}
         >
           <ProductAssemblyOptionsGroup initiallyOpened={initiallyOpened}>

react/components/ProductAssemblyContext/Group.tsx

@@ -106,7 +106,12 @@ const useRecursiveDispatch = ({
 export const ProductAssemblyGroupContextProvider: FC<ProductAssemblyGroupContextProviderProps> = ({
   assemblyOption,
   children,
+  initiallyOpened = 'required',
 }) => {
+  if (initiallyOpened === 'always') {
+    assemblyOption.optin = true
+  }
+
   const [state, dispatch] = useReducer(reducer, assemblyOption, initState)
 
   const recursiveDispatch = useRecursiveDispatch({
@@ -141,6 +146,7 @@ function getGroupPath(assemblyTreePath?: TreePath[]) {
 
 interface ProductAssemblyGroupContextProviderProps {
   assemblyOption: AssemblyOptionGroupState
+  initiallyOpened?: string
 }
 
 export const useProductAssemblyGroupDispatch = () =>

react/components/ProductAssemblyOptions/ProductAssemblyOptionsGroup.tsx

@@ -26,10 +26,7 @@ interface Props {
   initiallyOpened?: 'always' | 'required'
 }
 
-const ProductAssemblyOptionsGroup: FC<Props> = ({
-  children,
-  initiallyOpened = 'required',
-}) => {
+const ProductAssemblyOptionsGroup: FC<Props> = ({ children }) => {
   const intl = useIntl()
   const handles = useCssHandles(CSS_HANDLES)
   const assemblyOptionGroup = useProductAssemblyGroupState() as AssemblyOptionGroupState
@@ -52,7 +49,7 @@ const ProductAssemblyOptionsGroup: FC<Props> = ({
 
   return (
     <Fragment>
-      {assemblyOptionGroup.optin === false && initiallyOpened === 'required' ? (
+      {assemblyOptionGroup.optin === false ? (
         <Button variation="secondary" onClick={changeOptinInput}>
           <IOMessage
             id="store/product-customizer.add-assembly"