optionSelectorControllerAndTemplateDiff

optionselector.diff

diff --git a/gulp/assets/javascripts/components/optionsSelector/optionsSelectorController.js.coffee b/gulp/assets/javascripts/component
s/optionsSelector/optionsSelectorController.js.coffee
index 8bae3ac..9cc265c 100644
--- a/gulp/assets/javascripts/components/optionsSelector/optionsSelectorController.js.coffee
+++ b/gulp/assets/javascripts/components/optionsSelector/optionsSelectorController.js.coffee
@@ -17,7 +17,24 @@ angular.module('ProductModule').controller('OptionsSelectorController',
 
     updateColors = (product, size) ->
       colors = product.listed_colors_by_size_and_availability[size]
-      $scope.currentCombinedColors = _.uniq(colors.available.concat(colors.unavailable))
+
+      $scope.currentCombinedColors = _.uniq(colors.available.concat(colors.unavailable)).filter ( (color) ->
+        variantId = VariantService.getId(product, size, color)
+        VariantService.getAsync(variantId)
+          .then((variant) ->
+            if variant?
+              FeatureFlagsService.isActive("variant_preview").then( (isActive) ->
+                if isActive
+                  return true
+                else
+                  !variant.preview
+              )
+            else
+              false
+          )
+        )
+      console.log('curent combined colors: ', $scope.currentCombinedColors)
+
 
     $scope.isGiftCard = ->
       ProductService.isGiftCard($scope.product)
diff --git a/gulp/assets/javascripts/components/optionsSelector/optionsSelectorTemplate.html.haml b/gulp/assets/javascripts/components/
optionsSelector/optionsSelectorTemplate.html.haml
index 1732c98..63437a2 100644
--- a/gulp/assets/javascripts/components/optionsSelector/optionsSelectorTemplate.html.haml
+++ b/gulp/assets/javascripts/components/optionsSelector/optionsSelectorTemplate.html.haml
@@ -17,7 +17,7 @@
     %h5
       choose your color:
     %ul.colorList
-      %li.colorDot.animate-colorDot{"ng-class" => "[product.slug, multiColor(color), activeRow.color == color ? 'selected' : '', viewe
dColor == color ? 'viewing' : '', isReversible(product) ? 'reversible' : '', variantIsOutOfStock(product, activeRow.size, color) ? 'out
OfStock' : '']", "ng-click" => "chooseColor(color)", "ng-mouseleave" => "viewActiveColor(650)", "ng-mouseenter" => "enterActiveColor(co
lor, 10)", "ng-repeat" => "color in currentCombinedColors track by color", "tool-tip" => true, "tool-tip-text" => "{{variantIsOutOfStoc
k(product, activeRow.size, color) ? 'out of stock' : ''}}"}
+      %li.colorDot.animate-colorDot{"ng-class" => "[product.slug, multiColor(color), activeRow.color == color ? 'selected' : '', viewe
dColor == color ? 'viewing' : '', isReversible(product) ? 'reversible' : '', variantIsOutOfStock(product, activeRow.size, color) ? 'out
OfStock' : '']", "ng-click" => "chooseColor(color)", "ng-mouseleave" => "viewActiveColor(650)", "ng-mouseenter" => "enterActiveColor(co
lor, 10)", "ng-repeat" => "color in $scope.currentCombinedColors|excludeUnlistedColors track by color", "tool-tip" => true, "tool-tip-t
ext" => "{{variantIsOutOfStock(product, activeRow.size, color) ? 'out of stock' : ''}}"}
         %i.mdi-action-done
   .size-chartWrapper.animate-size-chartWrapper.visible-sm.col-sm-12{"ng-show" => "sizeChartToggle"}
     .size-chartClose.shadow-z-1{"ng-click" => "sizeChartToggle = false"}