Merge pull request #100 from contentstack/staging

Staging
contentstack · Jul 23, 2024 · a37a403 · a37a403
2 parents ddfdd2b + afe819f
commit a37a403
Show file tree

Hide file tree

Showing 29 changed files with 2,218 additions and 887 deletions.
diff --git a/.env.template b/.env.template
@@ -15,14 +15,4 @@ PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID=""
 # The url of the public customer account used to communicate with the Storefront API.
 PUBLIC_CUSTOMER_ACCOUNT_API_URL=""
 # The domain of the store used to communicate with the Storefront API.
-PUBLIC_STORE_DOMAIN=""
-
-## Contentstack Environment Variables
-# Stack API key
-CONTENTSTACK_API_KEY=""
-# Delivery token for the Stack
-CONTENTSTACK_DELIVERY_TOKEN=""
-# Environment name
-CONTENTSTACK_ENVIRONMENT=""
-# Region name
-CONTENTSTACK_REGION=""
+PUBLIC_STORE_DOMAIN=""
diff --git a/.github/workflows/oxygen-deployment-1000011823.yml b/.github/workflows/oxygen-deployment-1000011823.yml
@@ -2,7 +2,21 @@
 #! oxygen_storefront_id: 1000011823
 
 name: Storefront 1000011823
-on: [push]
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+    inputs:
+      BranchToDeploy:
+        description: 'Select branch to deploy'
+        required: true
+        default: 'development'
+        type: choice
+        options:
+        - development
+        - staging
+
 
 permissions:
   contents: read
@@ -14,7 +28,18 @@ jobs:
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
+      - name: BranchSelector
+        id: BranchSelector
+        run: |
+          if [[ "${{ github.event_name }}" == "release" ]]; then
+            echo "BranchName=main" >> $GITHUB_OUTPUT
+          else
+            echo "BranchName=${{inputs.BranchToDeploy}}" >> $GITHUB_OUTPUT
+          fi
+
       - uses: actions/checkout@v4
+        with: 
+          ref: ${{ steps.BranchSelector.outputs.BranchName }}
 
       - name: Setup node.js
         uses: actions/setup-node@v4

diff --git a/.github/workflows/oxygen-deployment-1000012638.yml b/.github/workflows/oxygen-deployment-1000012638.yml
@@ -2,7 +2,20 @@
 #! oxygen_storefront_id: 1000012638
 
 name: Storefront 1000012638
-on: [push]
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+    inputs:
+      BranchToDeploy:
+        description: 'Select branch to deploy'
+        required: true
+        default: 'development'
+        type: choice
+        options:
+        - development
+        - staging
 
 permissions:
   contents: read
@@ -14,7 +27,18 @@ jobs:
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
+      - name: BranchSelector
+        id: BranchSelector
+        run: |
+          if [[ "${{ github.event_name }}" == "release" ]]; then
+            echo "BranchName=main" >> $GITHUB_OUTPUT
+          else
+            echo "BranchName=${{inputs.BranchToDeploy}}" >> $GITHUB_OUTPUT
+          fi
+
       - uses: actions/checkout@v4
+        with: 
+          ref: ${{ steps.BranchSelector.outputs.BranchName }}
 
       - name: Setup node.js
         uses: actions/setup-node@v4

diff --git a/.github/workflows/oxygen-deployment-1000021148.yml b/.github/workflows/oxygen-deployment-1000021148.yml
@@ -0,0 +1,68 @@
+# Don't change the line below!
+#! oxygen_storefront_id: 1000021148
+
+name: Storefront 1000021148
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+    inputs:
+      BranchToDeploy:
+        description: 'Select branch to deploy'
+        required: true
+        default: 'development'
+        type: choice
+        options:
+        - development
+        - staging
+
+permissions:
+  contents: read
+  deployments: write
+
+jobs:
+  deploy:
+    name: Deploy to Oxygen
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: BranchSelector
+        id: BranchSelector
+        run: |
+          if [[ "${{ github.event_name }}" == "release" ]]; then
+            echo "BranchName=main" >> $GITHUB_OUTPUT
+          else
+            echo "BranchName=${{inputs.BranchToDeploy}}" >> $GITHUB_OUTPUT
+          fi
+
+      - uses: actions/checkout@v4
+        with: 
+          ref: ${{ steps.BranchSelector.outputs.BranchName }}
+
+      - name: Setup node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          check-latest: true
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build and Publish to Oxygen
+        run: npx shopify hydrogen deploy
+        env:
+          SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000021148 }}
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -0,0 +1 @@
+* @contentstack/security-admin
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,7 @@
+Copyright © 2023-2024 [Contentstack](https://www.contentstack.com/). All Rights Reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -2,9 +2,9 @@
 
 This demo is compatible with `@shopify/hydrogen >= 2024.01` built on Remix.
 
-> For a more complex reference example, please see our [demo-ecommerce repo](https://github.com/contentstack/shopify-contentstack-app) which features a monorepo with an embedded Contentstack.
 <img src="https://cdn.shopify.com/oxygen-v2/29150/15868/32733/347547/build/_assets/banner-ZAZUZJHV.svg" width="1000" />
-[Demo][hydrogen-contentstack-demo] | [Contentstack Connect for Shopify][[contentstack-connect]]
+
+[Demo][hydrogen-contentstack-demo] 
 
 # About
 
@@ -20,16 +20,13 @@ This starter showcases a few patterns you can adopt when creating your own custo
 
 This TypeScript demo adopts many of Hydrogen's [framework conventions and third-party libraries][hydrogen-framework]. If you've used Hydrogen then you should hopefully feel at home here.
 
-Shopify's Storefront API is exclusively utilized for accessing all inventory data. However, for other marketing data such as banners, footer links, etc., the Contentstack SDK is used.
-
-To retrieve inventory data and content from the Shopify store, users should create content pages by navigating to Online Store -> Pages -> Add page. They should create the page's content type and add entries accordingly.
-
 # Fetching Contentstack data
 
-This demo comes preconfigured Contentstack, which adds a Contentstack client to the Remix context. This enables you to fetch content from Contentstack in Remix loaders and actions.
+Using Contentstack App in Shopify, you can connect your Contentstack stack to your Shopify store. This app will sync all your Contentstack cms data to Shopify metaobjects.
+In this demo all the inventory data is fetched from Shopify's Storefront API(from metaobjects). 
+If you want to fetch marketing data like pages, footer or other assets from Contentstack directly, you can use the `getEntry` method from our official [`contentstack-sdk`][contentstack-sdk] library. We have already implemented in app/component/contentstack-sdk.js file where you can use the `getEntry` method for achieving this. 
 
 ```tsx
-// <root>/app/routes/($locale).products.$handle.tsx
 import {getEntry} from '~/components/contentstack-sdk';
 
 const fetchData = async () => {
@@ -44,8 +41,6 @@ const fetchData = async () => {
     }
   };
 ```
-This uses our official [`contentstack-sdk`][contentstack-sdk] library, so it supports all the methods you would expect to interact with Contentstack API's
-You can also use the [`defer` and `Await` utilities](https://remix.run/docs/en/1.15.0/guides/streaming#using-defer) from Remix to prioritize critical data:
 
 # Viewpoint
 
@@ -76,7 +71,7 @@ We've taken the following viewpoint on how we've approached this demo.
 </details>
 
 <details>
-<summary><strong>Product options are customized in Contenstack</strong></summary>
+<summary><strong>Product options are customized in Contentstack</strong></summary>
 
 - Data added to specific product options is done in Contentstack entries.
 - For the extra fields inside Contentstack gets updated in Shopify in MetaField.
@@ -100,7 +95,7 @@ Contentstack for Shopify is a Shopify Plus-certified app.
 
 ## Getting Started
 
-1.  Create a `.env` file, based on the `.env.template` file.
+1.  Create a `.env` file, based on the `.env.template` file and add the values from the Storefront settings of Hydrogen App.
 
 2.  Install dependencies and start the development server
 
@@ -111,14 +106,18 @@ Contentstack for Shopify is a Shopify Plus-certified app.
 
 3.  Visit the development environment running at http://localhost:3000.
 
+4. Integrate content from Contentstack into Shopify metaobjects and iterate through the JSON to render the user interface.
+
+5. For menus in header, navigate to the Online Store --> Navigation --> Main menu and add the contentstack page entries as menu items.
+
 For information on running production builds and deployment, see the [Hydrogen documentation][hydrogen-framework].
 
 # License
 
 This repository is published under the [MIT][license] license.
 
-[about]: https://01hq4sm3tp6r1g3yas5q5h3qq1-6f2958b70f5894a4ad6d.myshopify.dev/about
-[hydrogen-contentstack-demo]: https://01hq4sm3tp6r1g3yas5q5h3qq1-6f2958b70f5894a4ad6d.myshopify.dev/
+[about]: https://hydrogen.contentstackdemos.com/about
+[hydrogen-contentstack-demo]: https://hydrogen.contentstackdemos.com/
 [hydrogen-github]: https://github.com/contentstack/hydrogen-contentstack-demo
 [hydrogen-framework]: https://shopify.dev/docs/custom-storefronts/hydrogen
 [license]: https://github.com/sanity-io/sanity/blob/next/LICENSE

diff --git a/SECURITY.md b/SECURITY.md
@@ -0,0 +1,27 @@
+## Security
+
+Contentstack takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations.
+
+If you believe you have found a security vulnerability in any Contentstack-owned repository, please report it to us as described below.
+
+## Reporting Security Issues
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+Send email to [[email protected]](mailto:[email protected]).
+
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message.
+
+Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
+
+  * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
+  * Full paths of source file(s) related to the manifestation of the issue
+  * The location of the affected source code (tag/branch/commit or direct URL)
+  * Any special configuration required to reproduce the issue
+  * Step-by-step instructions to reproduce the issue
+  * Proof-of-concept or exploit code (if possible)
+  * Impact of the issue, including how an attacker might exploit the issue
+
+This information will help us triage your report more quickly.
+
+[https://www.contentstack.com/trust/](https://www.contentstack.com/trust/)
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -167,7 +167,9 @@ function CartLineRemoveButton({lineIds}: {lineIds: string[]}) {
       action={CartForm.ACTIONS.LinesRemove}
       inputs={{lineIds}}
     >
-      <button type="submit">Remove</button>
+      <button className="cta-cursor" type="submit">
+        Remove
+      </button>
     </CartForm>
   );
 }
@@ -187,16 +189,17 @@ function CartLineQuantity({line}: {line: CartLine}) {
           disabled={quantity <= 1}
           name="decrease-quantity"
           value={prevQuantity}
+          className="cta-cursor"
         >
           <span>&#8722; </span>
         </button>
       </CartLineUpdateButton>
-      &nbsp;
       <CartLineUpdateButton lines={[{id: lineId, quantity: nextQuantity}]}>
         <button
           aria-label="Increase quantity"
           name="increase-quantity"
           value={nextQuantity}
+          className="cta-cursor"
         >
           <span>&#43;</span>
         </button>
@@ -294,7 +297,10 @@ function CartDiscounts({
         <div>
           <input type="text" name="discountCode" placeholder="Discount code" />
           &nbsp;
-          <button className="view-all-products search-aside-cta " type="submit">
+          <button
+            className="view-all-products search-aside-cta cta-cursor"
+            type="submit"
+          >
             Apply
           </button>
         </div>